Share
Ieri, Carlos a examinat API-ul Google AJAX și Flash. Astăzi, vom analiza crearea unei aplicații Silverlight Translator folosind serviciul Microsoft Translator. Vom începe cu proiectarea interfeței (în Photoshop) și vom trece în implementare folosind Silverlight 4 (inclusiv cele mai recente caracteristici) ca cadru de aplicație web.
Vom folosi blendul Photoshop și Expression ca instrumente de proiectare a interfeței utilizator și Visual Studio ca mediu de dezvoltare.
Iată o descriere rapidă a ceea ce este acoperit în acest tutorial:
Notă: Pentru o bază solidă în lucrul cu Silverlight, consultați Introducere în Microsoft Silverlight 4 a lui Mike Taulty.
Silverlight este un plug-in de browser care extinde experiența de dezvoltare web cu mult peste limitele HTML și JavaScript simple. Este foarte asemănător cu Adobe Flash. În aplicațiile Silverlight, interfețele utilizatorilor sunt declarate în limbajul extensibil de marcare a aplicațiilor (XAML) și sunt programate folosind un subset al .NET Framework. Prin urmare, puteți utiliza orice limbă .NET ca C # sau VB.NET pentru a începe implementarea programelor.
Pe măsură ce Silverlight utilizează XAML pentru a crea interfețe de utilizator, puteți utiliza Expression Blend pentru a proiecta interfața de aplicație. Acest lucru se datorează faptului că Blend este un instrument de proiectare a interfeței utilizator dezvoltat pentru crearea de interfețe grafice pentru aplicații web și desktop. Se numește Blend pentru că amestecuri caracteristicile acestor două tipuri de aplicații.
Designul este un plan pentru aranjarea elementelor în așa fel încât să se realizeze cel mai bine un anumit scop
- Charles Eames
Deoarece interfața este foarte importantă pentru orice aplicație, vom acoperi etapele detaliate ale creării interfeței noastre.
Înainte de a începe proiectarea interfeței noastre va trebui să ne uităm la efectul vizual excesiv. Am realizat această schemă de culori:
Primul pas este să vă configurați documentul. Vom proiecta o interfață pentru o aplicație de traducător, astfel încât să nu fie prea mare. Vom merge la 640 x 468 de pixeli.
Activați Photoshop și apăsați tastele de comenzi rapide CTRL + N pentru a crea un document nou. Alegeți dimensiunile de 640 x 468px, apoi faceți clic pe OK.
Creați un strat nou și renumați-l "header_bg" apoi creați o selecție de 640 x 44 pixeli (sau orice vă simțiți bine) în capul imaginii folosind instrumentul Rectangle Marquee.
Apoi alegeți instrumentul Gradient și asigurați-vă că este un Gradient Linear ca în imaginea de mai sus.
Alegeți instrumentul Tip orizontal și scrieți "T translator" cu aceste setări:
Apoi, alegeți instrumentul "Adăugați un stil de strat" din meniul "Straturi" și faceți clic pe opțiunea "Suprapunere gradient". Schimbați gradientul ca în imagine. Apoi folosiți instrumentul Tip orizontal și scrieți "T" și la fel ca în ultima treaptă schimbați opțiunea Gradient Overlay și o înlocuiți în poziția corectă ca în imagine.
Utilizați din nou instrumentul Tip și tastați "se traduce pentru dvs.", apoi schimbați numele stratului la "slogan". După aceea, selectați toate straturile pe care le-ați creat și apăsați CTRL + G pentru a le grupa, redenumirea grupului în "header".
Iată fundalul utilizat în aplicație. Faceți clic dreapta pe acesta și pe "Salvați ca", astfel încât să îl puteți utiliza în aplicația dvs..
Alegeți instrumentul Rectangle Marquee și creați un dreptunghi în partea de jos a imaginii cu o înălțime de 52px. Apoi alegeți instrumentul Gradient și, cu aceleași setări pe care le-am creat cu antetul, faceți un gradient cum vedeți în imagine. Am plasat cateva imagini ca logo-ul Activetuts + si am imagini in a mea; le puteți găsi în descărcarea sursei.
Asigurați-vă că ați creat un nou grup de toate aceste straturi și l-ați numit "subsol".
În următorii pași vom proiecta elementele UI, cum ar fi butoanele și casetele de text.
Vom începe cu butoanele noastre. Creați un strat nou, numiți-l "Copiați text_bg" și faceți o selecție de 800 x 24 px. Apoi apasa Selectați> Modificare> Netedă și setați Radiusul de eșantion la 3px. Acum, selectați instrumentul de gradient și cu același gradient ca și antetul, faceți un gradient ca cel din imagine:
Faceți dublu clic pe strat și alegeți "Stroke", apoi setați valoarea sa la ceea ce vedeți în imagine. Selectați instrumentul Tip orizontal și scrieți "Copiază textul" și puneți-l peste buton. Duplicați stratul "Copiați text_bg" prin glisarea și plasarea acestuia în noul strat și tastați "Instalați" apoi puneți-l peste buton. Duplicați din nou "Copy_text_bg" și redenumiți-l la "", ceea ce înseamnă limbi inversate și apăsați CTRL + T pentru ao redimensiona după cum vedeți în imagine.
Faceți un strat nou, selectați instrumentul Elliptical Marquee și creați un cerc, apoi alegeți instrumentul Gradient. Asigurați-vă că este un Gradient reflectat și creați un gradient ca în imagine. Apoi apasa Selectați> Modificare> Contract, setați valoarea la 2px și creați un nou strat. Apoi, cu ajutorul instrumentului Perie și a valorii culorii de # 000000, alegerea este închisă la culoare. Acum faceți o selecție ovală și alegeți instrumentul Gradient; asigurați-vă că este un Gradient Linear ale cărui valori de culoare sunt # 555555 și # 000000, apoi faceți un gradient ca imaginea.
Deoarece Blend nu suportă câteva caracteristici ale Photoshop precum gradienti și accidente vasculare cerebrale, trebuie să rasterizăm toate straturile cu astfel de efecte. Pentru aceasta, selectați layerul "header_bg" și faceți clic dreapta pe el, apoi alegeți "Convert to Smart Object", apoi faceți clic dreapta din nou și alegeți Rasterize Layer. Repetați acești pași spre straturile "T translatorul", "T" și sloganul.
Pe măsură ce acoperim procesul de creare a unei aplicații de la început până la sfârșit, vom discuta procesul de creare a icoanei aplicației.
Creați un nou fișier Photoshop de 430 x 330px apăsând CTRL + N, apoi faceți un nou strat și denumiți-l "frontieră". Creați o selecție de 247 x 242 pixeli, neteziți selecția făcând clic Selectați> Modificare> Netedă și tip 30. Apoi, faceți clic pe Selectare> Redefini Edge cu Smooth de 20 și Contract / Expand de + 100%.
Apoi, faceți un gradient ca în imagine, apoi faceți clic pe Selectați> Modificare> Contract și introduceți 20, apoi apăsați Ștergeți. Faceți dublu clic pe strat și marcați Drop Shadow cu opacitate de 54%. Creați un strat nou și denumiți-l "înăuntru", apoi faceți o selecție în interiorul bordurii și faceți un gradient ca cel pe care îl vedeți în imagine. Faceți dublu clic pe strat și efectuați o lovitură de 2px. Acum faceți clic pe instrumentul Tip orizontal și scrieți "Traducător" cu tipul de font ChunkFive și dimensiunea de 24pt. De asemenea, tastați "T" cu același font, dar cu dimensiunea de 110pt.
Nu aveți nevoie să vă convertiți pictograma în format .ico, salvați pictograma în format .png cu dimensiuni de 280 x 280 pixeli, 48 x 48 pixeli, 32 x 32 pixeli și 16 x 16 pixeli, iar Visual Studio va face restul!
Pentru a începe implementarea Traducătorului, trebuie să vă asigurați că ați instalat funcții de dezvoltator Web când ați instalat Visual Studio. Apoi, va trebui să descărcați și să configurați instrumentele Silverlight 4 pe care le puteți obține de la http://bit.ly/Silverlight4tools și Silverlight 4 Developer Runtime, pe care le puteți obține aici.
După crearea interfeței și pregătirea acesteia pentru utilizarea în Blend, vom merge la Visual Studio și vom face un prototip pentru ca proiectul să înceapă procesul de implementare. Începeți proiectul Visual Studio, faceți clic pe Fișier> Nou> Proiect și alegeți Silverlight apoi alegeți aplicația Silverlight. Faceți clic pe OK pentru fereastra următoare.
Clic Proiect> Adăugați referință de service și lipiți adresa URL a serviciului http://api.microsofttranslator.com/V1/SOAP.svc cu Spațiul de nume ca TranslatorService. Pentru a utiliza serviciul Web Bing Translator, veți avea nevoie de un AppID. Deci, accesați http://www.bing.com/developer/appids.aspx?FORM=PMPD și creați un nou AppID pentru dvs. Traducător.
După cum am menționat mai devreme, aplicația va fi de 640 x 468 pixeli, deci trebuie să o redimensionăm.
Acum faceți clic pe Vizualizați> Setul de instrumente (sau apăsați CTRL + W + X) pentru a afișa meniul cutie de instrumente. Trageți și plasați "butonul" din meniul Proprietăți, schimbați numele și textul în "Traduceți". Repetați procesul și creați butoanele "Copiere text", "instalare" și "".
Din caseta de instrumente Trageți și plasați două casete text, apoi redenumiți-le la "srcTxt", care se va ocupa de textul sursă pe care îl va introduce utilizatorul nostru și "destTxt", care va scoate textul tradus. Apoi, glisați încă două comboboxuri și le redenumiți la "src", care va avea toate limbile sursă pe care utilizatorul poate alege și "dest", care este limba pe care utilizatorul dorește să o traducă. După aceea, rearanjați elementele ca în imagine.
Acum vom începe implementarea programului. Faceți dublu clic pe Traduceți butonul Visual Studio va deschide codul sursă al aplicației. Adăugați spațiul de nume al serviciului de traducere inserând acest cod după ultimul spațiu de nume.
folosind Translator.TranslatorService;
În fragmentul de mai jos, prima linie creează o instanță numită "client" din clasa LanguageServiceClient. Cea de-a doua creează o variabilă de tip String numită "AppId" pentru a se referi la ID-ul de aplicație necesar serviciului SOAP. Ultimele două linii sunt grupurile de rezultate care s-au întors din apelurile SOAP și sunt sub forma ObservatorCollecție.
Clientul clientului TranslatorService.LanguageServiceClient = noul serviciu TranslatorService.LanguageServiceClient (); // instanța LanguageServiceClient. string AppId = "6CE9C85A41571C050C379F60DA173D286384E0F2"; // Acest AppId este creat pentru numele meu System.Collections.ObjectModel.ObservableCollectionrezultate; // Numele de limbi de rezultat returnate de SOAP Searvice. System.Collections.ObjectModel.ObservableCollection langcodes; // Codurile limbajului rezultat returnate de SOAP Searvice.
Silverlight solicită serviciile web numai în moduri asincrone. Prin urmare, trebuie să abordăm evenimentele pentru a obține valorile. Trebuie să obținem rezultatele în cadrul definițiilor evenimentului. În continuare sunt delegați pentru evenimentele pe care le putem oferi în Încărcarea paginii eveniment. De asemenea, trebuie să apelați la Comboboxes ' sarcină evenimente pentru a încărca limbile.
InitializeComponent (); // Client Handlers de evenimente. TranslateCompleted + = new EventHandler(Client_TranslateCompleted); client.GetLanguageNamesCompleted + = nou EventHandler (Client_GetLanguageNamesCompleted); client.GetLanguagesCompleted + = nou EventHandler (Client_GetLanguagesCompleted); // Pentru completarea comboboxes și Coduri de limbă client.GetLanguageNamesAsync (AppId, this.Language.IetfLanguageTag); client.GetLanguagesAsync (APPID);
După cum am menționat mai înainte, trebuie să abordăm fiecare eveniment pe măsură ce lucrăm în modul asincron. Acesta este primul eveniment care a sunat client_TranslateCompleted () se va ocupa de evenimentul de traducere complet și dacă nu există erori în procesul de returnare a traducerii, acesta va fi setat destTxt valoarea textului combobox cu traducerea rezultată.
// Obținerea voidului protejat al textului client_TranslateCompleted (Object sender, TranslateCompletedEventArgs e) if (e.Error == null) destTxt.Text = e.Result;
Acest eveniment, numit client_GetLanguagesCompleted, regăseste posibilele limbi pe care le oferă Serviciul de Traduceri SOAP - dar într-o formă de cod care este de înțeles pentru Serviciu - și le stabilește la String langcodes. Acest lucru este setat după verificarea erorilor.
// Obțineți limbile protejate void client_GetLanguagesCompleted (expeditor obiect, GetLanguagesCompletedEventArgs e) if (e.Error == null) langcodes = e.Result;
Acest eveniment primește numele fiecărei limbi. Pentru a clarifica, codul pentru limba engleză este "en", iar numele, desigur, este "englezesc". Dacă nu există erori la obținerea de nume de limbi, se stabilește șirul "results" cu aceste nume de limbi. Apoi setează cele două comboboxuri cu numele de limbi.
// Completați voidul protejat comboboxes client_GetLanguageNamesCompleted (Object sender, GetLanguageNamesCompletedEventArgs e) if (e.Error == null) results = e.Result; this.src.ItemsSource = rezultate; this.dest.ItemsSource = rezultate;
Acum vom implementa ultimul lucru pentru a ne atinge scopul. Funcționarea acestei funcții este de a începe procesul de traducere. Verifică cele două elemente selectate în comboboxuri, asigură că acestea nu sunt încă goale, apoi apelează funcția de traducere asincronă și transmite argumentele necesare. Aceste argumente sunt ID-ul aplicației și textul sursă care trebuie tradus, plus limba acestui text sursă și limba textului dorit tradus.
Accentsconagua
(void) if (src.SelectedItem! = null && dest.SelectedItem! = null) client.TranslateAsync (AppId, srcTxt.Text, (langcodes [src.SelectedIndex] .ToString .SelectedIndex] .ToString ())); altceva MessageBox.Show ("Vă rugăm să selectați mai întâi limbile!"); Pe măsură ce am terminat implementarea serviciului de traducere, trebuie să ne dăm de lucru. Așa că trebuie să ne descurcăm Traduceți butonul de clic pe buton. E foarte simplu, doar sună PerformTranslation () pentru a-și începe activitatea. Pentru a face acest lucru, mergeți doar la vizualizarea de proiectare și faceți dublu clic pe butonul Traducere.
// Traduceți pe butonul buton privat void1_Click (expeditor obiect, RoutedEventArgs e) PerformTranslation ();
Butonul Inversare efectuează o simplă schimbare a limbilor selectate în comboboxuri. Creează un șir numit tmp pentru a stoca valorile în comboboxul sursă atunci când ia valoarea comboboxului de destinație, apoi își pune valoarea în combobox destinație.
void privat Invert_Click (expeditor obiect, RoutedEventArgs e) if (src.SelectedItem! = null && dest.SelectedItem! = null) șir tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp;
Silverlight 4 a venit cu o mulțime de noi caracteristici utile. Un astfel de exemplu este API-ul Clipboard, care oferă metode de accesare a conținutului care poate fi temporar deținut în "clipboard-ul" mașinii și manipulat dacă este necesar.
void privat CopyText_Click (expeditor obiect, RoutedEventArgs e) Clipboard.SetText (destTxt.Text);
O altă caracteristică nouă a Silverlight 4 este abilitatea de a rula aplicațiile Silverlight Out-of-Browser. Acest lucru se datorează faptului că .NET Common Runtime (CLR) permite acum executarea aceluiași cod compilat pe desktop și Silverlight fără modificări. Această caracteristică poate fi implementată făcând clic pe Proiect> Proprietăți (Nume aplicație) atunci va apărea meniul din imagine. Clic Activează aplicația care rulează din browser.
Acum puteți accesa această funcție făcând clic dreapta pe aplicație; tu vei gasi Instalați această aplicație. Cu toate acestea, dorim să adăugăm un buton care să se ocupe de această caracteristică, astfel încât să realizăm un instalare și codul următor este codul pentru evenimentul de clic:
private void install_Click (expeditor obiect, RoutedEventArgs e) if (! Application.Current.IsRunningOutOfBrowser) // întreabă dacă aplicația nu este instalată Application.Current.Install (); // instala aplicația
Acum, dacă apăsați CTRL + F5 pentru a construi aplicația, aceasta va fi construită, dar va apărea un mesaj de avertizare. Deci, pentru a depana aplicația dvs., faceți clic dreapta pe serviciul web din Solution Explorer, care este Translator.Web, apoi apasa Debug> Începeți o nouă instanță. Testați-vă aplicația.
Pe măsură ce am terminat implementarea aplicației noastre, vom începe implementarea interfeței noastre. Deschideți Blend și apare un ecran de pornire. Alege Proiect deschis din acesta, navigați apoi la fișierele proiectului și deschideți fișierul Solution care se numește "Translator.sln".
Din fila Proiect faceți dublu clic pe MainPage.xaml apoi faceți clic pe Fișier> Importați fișierul Adobe Photoshop apoi navigați la fișierul PSD și deschideți-l.
Toate imaginile noastre vor fi importate în fișierul nostru de proiect, dar vor fi în partea de sus a butoanelor și cutiilor noastre. În fila Obiecte și Cronologie faceți clic dreapta pe PSD_Source și alegeți Comandă> Trimiteți înapoi.
Blend oferă o caracteristică foarte utilă; abilitatea de a personaliza oricare element de interfață utilizator așa cum doriți. Pentru aceasta, selectați orice casetă text și faceți clic dreapta pe ea, apoi alegeți Editați șablon> Editați o copie, marcă Aplica la toate, apoi faceți clic pe OK.
De la Obiectele și cronologia , navigați la contentElement ca în imagine. În fila Proprietăți, modificați culoarea de fundal ca imaginea. Acum redăm în caseta de text; pentru a reveni la spațiul de lucru faceți clic pe srcTxt așa cum se arată în imagine. Acum, selectați cele două casete de text și modificați culoarea primului la # A3A3A3, apoi mergeți la meniul Proprietăți, defilați la fila Text și schimbați fontul la Mediul Franklin Gothic și mărimea la 16pt.
Faceți clic cu butonul din dreapta pe orice buton, apoi alegeți Editați șablon> Editați o copie și marcați Aplica la toate. Apoi navigați la BackgroundGradient în fila Obiect și Cronologie. În Proprietăți, schimbați Culoarea de umplere în gradient, cum ar fi în imaginea de la Pasul 29.
Apoi, navigați la Fundal în Obiect și cronologie și în fila Proprietăți schimbați valoarea culorii de fundal la # 494949.
Faceți clic dreapta pe orice combobox apoi alegeți Editați șablon> Editați o copie și marcați Aplica la toate, apoi faceți clic dreapta pe DropDownToggle și alegeți Editați șablon> Editați curent.
Click pe BackgroundGradient iar din fila Proprietăți schimbați Culoarea de umplere la gradient. Du-te înapoi făcând clic pe DropDownToggle din meniul superior, apoi navigați la BtnArrow, care este în interiorul DropDownToggle. Din fila Proprietăți schimbați Culoare umplere la # 8D8D8D. Acum du-te la [TextBlock] care se află în interiorul ContentPresenter și modificați culoarea de umplere la # 8D8D8D.
Apoi, mergeți la PopupBorder și schimbați culoarea de fundal la # FF1D1D1D. Din fila Stări faceți clic pe MouseOver, mergeți la Obiectele și cronologia, faceți clic pe BackgroundGradient și schimbați culoarea gradientului la ceea ce vă simțiți bine.
Pentru a edita codul sursă utilizând Visual Studio, faceți clic pe Instrumente> Opțiuni> Proiect apoi marcați Utilizați Microsoft Visual Studio ...
De la Obiect și cronologie fila clic dreapta Translate_btn apoi apasa Faceți controlul și alegeți butonul. Denumiți-o "Traduceți".
Din tab-ul State, faceți clic pe "Normal", apoi din meniul Proprietăți schimbați valoarea opacității la 50%. Din nou, din fila States, faceți clic pe "Mouse Over" și modificați opacitatea la 70%. În cele din urmă, dați clic pe Fără Foc din fila Statele și modificați Opacitatea la 30%.
Ștergeți acum vechiul buton Traducere și accesați evenimentele dând clic pe el. În caseta de tip clic Translate_Click.
În fila Proiect faceți clic dreapta pe src_blend_images și alegeți Adăugați elementul existent apoi adăugați toate pictogramele PNG. După ce faceți dublu clic pe evenimentul unui buton pentru a încărca Visual Studio. Clic Proiect> Proprietăți ale traducătorului apoi apasa Setările out-of-browser și adăugați pictogramele de la src_blend_images.
În acest tutorial am abordat întregul proces de creare a unei aplicații pentru Traducător. De asemenea, am aruncat o privire la Microsoft Bing Translator Service și am folosit-o. Sper că este util și plăcut.
