Design og bygge en Silverlight 4 Overs App
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I går, Carlos undersøkte Google AJAX API og Flash. I dag skal vi se på å skape en Silverlight Overs Application bruker Microsoft Translator service. Vi begynner med grensesnitt design (i Photoshop) og flytte inn i gjennomføringen bruker Silverlight 4 (inkludert sin siste funksjonene) som en webapplikasjon rammeverk.
Vi skal bruke Photoshop og Expression Blend som brukergrensesnitt design verktøy og Visual studio som utviklingsmiljø
Her er hva som dekkes en rask oversikt over hva som dekkes i denne opplæringen.?
< li> Silverlight 4 og Expression Blend oversikt
Interface design on
Tilpasse UI kontroller i Blend
Integrering Blend med Visual Studio
Bruke Microsoft Translator tjenesten
Gjør bruk av Silverlight 4 nyeste funksjonene
Merk: For et solid fundament i arbeidet med Silverlight, sjekk ut Mike Taulty s En introduksjon til Microsoft Silverlight 4.
< h2> Silverlight og Expression Blend Oversikt
Silverlight er en nettleser plug-in som utvider webutvikling erfaring langt utover begrensningene med vanlig HTML og Javascript. Det er veldig lik Adobe Flash. I Silverlight-applikasjoner, er brukergrensesnitt erklært i Extensible Application Markup Language (XAML) og programmeres med en undergruppe av .NET Framework. Du kan derfor bruke noen NET Språk som C # eller VB.NET begynne å innføre programmene dine.
Som Silverlight bruker XAML for å lage brukergrensesnitt du kan bruke Expression Blend til å designe din søknad grensesnitt. Det er fordi Blend er et brukergrensesnitt design verktøy utviklet for å lage grafiske grensesnitt for web og desktop-applikasjoner. Det kalles Blend fordi det blander Design er en plan for å ordne elementer på en slik måte som best for å oppnå et bestemt formål -. Charles Eames Fordi grensesnittet er svært viktig for enhver applikasjon vi vil dekke detaljert fremgangsmåte for å skape vår grensesnitt Før vi begynner å designe vår grensesnitt må vi se på drinking visuell effekt. Jeg gjorde dette fargevalget: Det første trinnet er å sette opp dokumentet. Vi kommer til å utforme et grensesnitt for et Overs program så det vil ikke være for stor. Vi vil gå for 640 x 468px. Fyr opp Photoshop og trykk hurtigtastene CTRL + N for å opprette et nytt dokument. Velg 640 x 468px som dimensjonene klikk deretter OK. Lag et nytt lag og endre navnet "header_bg" deretter opprette et utvalg på 640 x 44px (eller hva du føler er bra) i hodet av bildet ved hjelp rektangel Marquee verktøyet. Deretter velger Gradient verktøyet og være sikker på at det er en lineær gradient som i bildet ovenfor. Velg Horisontal tekstverktøyet og skriv "{T} ranslator" med disse innstillingene: Velg deretter "Legg et lag stil" verktøy fra Layers-menyen og klikk på Gradient Overlay alternativet. Endre gradient som i bildet. Deretter bruker Horisontal tekstverktøyet og skriv "T" og som i det siste trinnet endrer sin Gradient Overlay alternativ, og erstatte den i riktig posisjon som i bildet. Bruk tekstverktøyet igjen og skriv "det betyr for deg" og deretter endre lagnavn til "slagord". Etter det velger du alle lagene du har opprettet, og trykk CTRL + G for å gruppere dem, døpe gruppen til "header" Her er bakgrunnen brukes i søknaden. Høyreklikk det og "Lagre som" slik at du kan bruke den i din app Velg rektangel Marquee verktøyet og lage et rektangel i bunnen av bildet med en høyde på 52px. Deretter velger Gradient Tool og med de samme innstillingene vi laget header med, lage en gradient som du ser i bildet. Jeg har lagt inn noen av bildene som de Activetuts + logo, og har bilder i mine; du kan finne dem i kilde nedlasting Pass på at du har opprettet en ny gruppe med alle disse lagene, og kalte det "footer" I de følgende par skritt vi vil designe UI elementer, som knapper og tekstbokser. Vi begynner med våre knapper. Lag et nytt layer, kall det "Kopier text_bg" og gjøre et utvalg på 800 x 24px. Deretter klikker du Velg > Endre > Glatt Hotell og sette Sample Radius å 3px. Nå velger gradient verktøyet og med samme gradient som header lage en gradient som den i bildet: Dobbeltklikk på laget og velg "Stroke" og deretter sette verdien til det du ser i bildet. Velg Horisontal tekstverktøyet og skriv "Kopier tekst", og legg den over knappen. Duplisere "Kopier text_bg" lag ved å dra og slippe den til det nye laget knappen og skriv "Install" og deretter plassere den over knappen. Duplisere "Copy_text_bg" igjen og endre navnet til "", som står for invertere språk og trykk CTRL + T for å endre størrelsen som du ser på bildet Lag et nytt lag, velg Elliptical Marquee verktøyet og lage en sirkel, deretter velger Gradient verktøyet. Sørg for at det er en reflektert Gradient og lage en gradient som i bildet. Deretter klikker du Velg > Endre > Kontrakten Fordi Blend støtter ikke noen Photoshop-funksjoner som gradienter og slag vi trenger å rastrere alle lag med slike effekter. For å gjøre det velger du "header_bg" lag og høyreklikk den, og velg deretter "Konverter til smart objekt" høyreklikk igjen og velg Rastrer Layer. Gjenta disse trinnene til lagene "{T} ranslator", "T" og slagordet Som vi dekker prosessen med å lage et program fra start til slutt vil vi diskutere prosessen med å lage programsymbolet. Lag en ny Photoshop-fil på 430 x 330px ved å trykke CTRL + N, deretter lage et nytt lag og gi den navnet "grensen". Lag et utvalg av 247 x 242px, glatte valget ved å klikke Velg > Endre > Glatt Deretter lage en gradient som i bildet, og klikk på Velg > Endre > Kontrakt og type 20, deretter trykker du Slett. Dobbeltklikk på laget og markere Drop Shadow med opacity på 54%. Lag et nytt lag og gi den navnet "innsiden" og deretter foreta et valg innenfor grensen og gjøre en gradient som det du ser i bildet. Dobbeltklikk på laget og slå et slag for 2px. Nå klikker Horisontal tekstverktøyet og skriv "Oversetter" med skrifttype ChunkFive og størrelse på 24 pkt. Også, type "{T}" med samme font, men med størrelsen på 110pt. Du trenger ikke å konvertere ikonet til ICO format, bare lagre ikonet i PNG-format med størrelse på 280 x 280px, 48 x 48px, 32 x 32px og 16 x 16px og Visual Studio vil gjøre resten For å starte gjennomføringen av Overs må du sørge for at du har installert web-utvikler funksjoner når du installerte Visual Studio. Deretter må du laste ned og setup Silverlight 4 verktøy som du kan få fra http://bit.ly/Silverlight4tools og Silverlight 4 Developer Runtime, som du kan komme hit Når du har opprettet brukergrensesnittet og gjør den klar til bruk i Blend vi vil gå til Visual Studio og lage en prototype for prosjektet å starte vår implementeringsprosessen. Fyr opp din Visual Studio, klikk Fil > New > Prosjektet Hotell og velg Silverlight velg deretter Silverlight Application. Klikk OK for neste vindu Klikk på Prosjekt > Legg til tjeneste Reference Hotell og lim tjenesten url http://api.microsofttranslator.com/V1/SOAP.svc med navnerom som Translatørservice. For å bruke Bing Overs Web Service trenger du en AppID. Så gå til http://www.bing.com/developer/appids.aspx?FORM=PMPD og opprette en ny AppID for din Overs Nå kan du klikke View > Toolbox Fra Toolbox dra og slippe to tekstboksene endre navn på dem til å "srcTxt", som vil håndtere kildeteksten vår bruker vil gå inn og "destTxt", som vil produksjonen den oversatte teksten. Deretter drar ytterligere to comboboxes og gi dem nytt navn til "src", som vil ha alle kilde språk som brukeren kan velge fra, og "dest", som er det språket brukeren ønsker å oversette til. Etter det, omorganisere elementene som i bildet Nå vil vi begynne å implementere programmet. Dobbeltklikk på Trans I tekstutdraget nedenfor, oppretter en forekomst kalt den første linjen "klienten" fra LanguageServiceClient klassen. Den andre skaper en variabel av type String kalt "AppID" for å referere til Application ID trengs av SOAP Service. De to siste linjene er resultatet grupper som returnerte fra SOAP samtaler, og de er i form av ObservableCollection Silverlight kaller webservices i Asynchronous Modes bare. Derfor trenger vi å håndtere hendelser for å hente verdiene. Vi må få de resultatene innenfor disse hendelses definisjoner. Følgende er de representanter for hendelser som vi kan gi i Page load Som vi har nevnt før, må vi håndtere hver hendelse som vi jobber i asynkron modus. Dette er det første arrangementet som kalles client_TranslateCompleted () det vil håndtere komplett oversettelse hendelsen, og hvis det ikke er noen feil i prosessen med å returnere oversettelsen det setter destTxt ComboBox tekst med løpende resultat oversettelse. Denne hendelsen, heter client_GetLanguagesCompleted, henter de mulige språk som SOAP Overs Tjenesten tilbyr - men i en form for kode som er forståelig for tjenesten - og setter dem til String langcodes. Dette er satt etter å ha sjekket for feil Denne hendelsen blir navnet på hvert språk. For å klargjøre, koden for det engelske språket er "no" og navnet, selvfølgelig, er "engelsk". Hvis det ikke er noen feil når du får språknavn det setter strengen "resultater" med disse språk navn. Så det setter de to comboboxes med språk navnene Nå vil vi implementere den siste tingen å oppnå våre mål. Denne funksjonen operasjonen er å starte oversettelsesprosessen. Den sjekker de to valgte elementer i comboboxes, sørger for at de er ennå ikke tom da kaller Asynchronous Oversettelse funksjon og passerer neccesary argumenter for det. Disse argumentene er Application ID og kildeteksten som må oversettes, pluss språket i denne kilden Tekst og språket i Ønsket oversatte teksten. Som vi er ferdig med å implementere Translation Service vi trenger for å få det til å fungere. Så vi trenger å håndtere Trans Invert knappen utfører en enkel bytting av utvalgte språk i comboboxes. Det skaper en String som heter tmp for å lagre verdiene i kilde ComboBox når det tar verdien av reisemålet kombinasjonsboks, setter så verdien i destinasjons ComboBox. Silverlight 4 kom med en masse nye nyttige funksjoner. Ett slikt eksempel er Clipboard API som gir metoder for å gripe innhold som kan bli midlertidig holdt i maskinens "utklippstavlen" og manipulert ved behov. En annen ny funksjon i Silverlight 4 er muligheten til å kjøre Silverlight-applikasjoner Out-of-Browser. Det er fordi .NET Common Runtime (CLR) nå gjør det samme kompilert kode som skal kjøres på skrivebordet og Silverlight uten endring. Denne funksjonen kan brukes ved å klikke Prosjekt > (Application navn) Egenskaper Du får tilgang til denne funksjonen nå ved å høyreklikke på app.; finner du Installer dette programmet Nå hvis du trykker CTRL + F5 for å bygge programmet, vil det bli bygget, men en advarsel vises. Så for å feilsøke programmet høyreklikk på web-tjeneste i Solution Explorer, som er Translator.Web Som vi avsluttet implementere vår søknad vil vi begynne å implementere vår grensesnitt. Åpne Blend og en splash-skjermen vises. Velg Åpne prosjekt I kategorien Prosjekt dobbeltklikker på MainPage.xaml klikk på Fil > Import Adobe Photoshop fil Alle våre bilder vil bli importert til vårt prosjekt fil, men vil være på toppen av våre Knapper og bokser. I Objekter og kategorien Tidslinje høyreklikk på PSD_Source og velger Bestill > Send til Back Blend gir en veldig nyttig funksjon; evnen til å tilpasse alle brukergrensesnitt element som du vil. For å gjøre det, velger du en tekstboks og høyreklikk den, og velg deretter Rediger mal > Redigere en kopi Fra Objekter og fanen Tidslinje Høyreklikk på en knapp og velg Rediger mal > Redigere en kopi Hotell og mark Apply to all Deretter navigere til bakgrunns i Objekt og kategorien Tidslinje Hotell og i kategorien Egenskaper endre . bakgrunnsfarge verdi til # 494949 Høyreklikk på en kombinasjonsboks deretter velge Rediger mal > Redigere en kopi Hotell og mark Apply to all Klikk på BackgroundGradient og fra kategorien Egenskaper endre fyllfargen til gradient. Tilbake ved å klikke DropDownToggle fra øverste meny deretter navigere til BtnArrow, som er inne DropDownToggle. Fra kategorien Egenskaper endre fyllfargen til # 8D8D8D. Nå gå til [TextBlock] som er inne ContentPresenter og endre fyllfargen til # 8D8D8D. Deretter går du PopupBorder og endre bakgrunnsfarge til # FF1D1D1D. Fra USA fanen klikker Mouse, gå til Objekter og Tidslinje For å redigere kildekoden ved hjelp av Visual Studio klikker du bare Verktøy > Valg > Prosjektet Fra Objekt og Tidslinje Fra USA-kategorien, klikk på "Normal" og deretter fra menyen Egenskaper endre Opacity verdien til 50%. Igjen, fra USA fanen, klikk på "mus over" og endre Opacity til 70%. Til slutt, klikk på Unfocused fra USA fanen og endre Opacity til 30%. Nå sletter den gamle Oversett-knappen og gå til hendelsene ved å klikke på den. . I klikk bokstype Translate_Click I kategorien Prosjekt høyreklikk på src_blend_images og velger Legg til eksisterende element I denne opplæringen dekket vi hele prosessen for å skape en Overs søknad. Vi tok også en titt på Microsoft Bing Overs service og gjorde bruk av den. Jeg håper det var nyttig og hyggelig.
funksjonene i disse to typer programmer.
Interface
Trinn 1 : Color Scheming
Trinn 2: Kutte
Font Familie: ChunkFive
Skriftstørrelse: 48px
Font vekt: Regular
Anti-aliasing innstilling: Smooth
Farge: #ffffff
Trinn 3:. Bakgrunn
Trinn 4:. Footer
Trinn 5:.. Opprett Knapper
Trinn 6:. Oversett Button
, sett verdien til 2PX og opprette et nytt lag. Så med penselverktøyet og fargeverdien av # 000000 gjøre valget mørk farget. Nå gjør en Oval valg og velge den Gradient verktøyet; sørge for at det er en lineær gradient som har fargen verdier er # 555555 og # 000000, deretter lage en gradient som bildet
Trinn 7:. Gjør PSD Klar til Blend
Trinn 8:. Design og Oppretter program Ikon
og type 30. Klikk deretter Select > . Redefinere Edge med Smooth på 20 og Contract /Expand av + 100%
Trinn 9: Gjør deg klar for implementering
Trinn 10.: Flytte til Visual Studio og Prototyping
Trinn 11:. Legg Overs Tjenesten
Trinn 12:. Resize Application
< p> Som vi har nevnt før, vil søknaden bli 640 x 468px så vi trenger å endre størrelsen
Trinn 13:. Legg Oversett Button
(eller trykk CTRL + W + X) for å gjøre Toolbox menyen vises. Dra og slipp "knapp" fra menyen Egenskaper, endre navn og tekst til "Oversetter». Gjenta prosessen og skape "Kopier tekst", "installer" og "" knappene
Trinn 14:. Legg Tekst og comboboxes
Trinn 15:. Begynn Implementering
knappen Visual Studio vil åpne kildekoden til programmet. Tilsett Overs Tjenesten kl ved å lime inn denne koden etter den siste kl
hjelp Translator.TranslatorService;
Trinn 16:. Variabler
TranslatorService.LanguageServiceClient klient = new TranslatorService.LanguageServiceClient ();. //Forekomst av LanguageServiceClient.string AppID = "6CE9C85A41571C050C379F60DA173D286384E0F2"; //Dette AppID er opprettet for min nameSystem.Collections.ObjectModel.ObservableCollection < streng > resultater; //Resultat språk navnene som returneres av SOAP Searvice.System.Collections.ObjectModel.ObservableCollection < streng > langcodes; //Resultat språk koder som returneres av SOAP Searvice
Trinn 17:. Constructor
hendelsen. Også må vi kalle comboboxes ' load
hendelser å laste språkene
InitializeComponent ();. //Hendelses Handlersclient.TranslateCompleted + = new EventHandler<TranslateCompletedEventArgs>(client_TranslateCompleted);client.GetLanguageNamesCompleted + = New EventHandler<GetLanguageNamesCompletedEventArgs>(client_GetLanguageNamesCompleted);client.GetLanguagesCompleted + = New Event < GetLanguagesCompletedEventArgs > (client_GetLanguagesCompleted); //For fylle comboboxes og Språk codesclient.GetLanguageNamesAsync (AppID, this.Language.IetfLanguageTag); client.GetLanguagesAsync (AppID);
Trinn 18: client_TranslateCompleted Hendelses
//Hent den oversatte textprotected void client_TranslateCompleted (Object avsender, TranslateCompletedEventArgs e) {if (e.Error == null) {destTxt.Text = e.Result; }}
Trinn 19: client_GetLanguagesCompleted Hendelses
//Få Languagesprotected annullere client_GetLanguagesCompleted (objekt avsenderen, GetLanguagesCompletedEventArgs e) {if (e.Error == null) {langcodes = e.Result.; }}
Trinn 20: client_GetLanguageNamesCompleted Hendelses
//Fyll comboboxesprotected void client_GetLanguageNamesCompleted (Object avsender, GetLanguageNamesCompletedEventArgs e) {if (e.Error == null) {resultater = e.Result.; this.src.ItemsSource = resultater; this.dest.ItemsSource = resultater; }}
Trinn 21: PerformTranslation Funksjon
Private void PerformTranslation () {if (src.SelectedItem! = Null & & dest.SelectedItem = null) {client.TranslateAsync (AppID, srcTxt.Text, (langcodes [src.SelectedIndex] .ToString ()), (langcodes [dest.SelectedIndex] .ToString ()))!; } Else MessageBox.Show ("Velg språk først!");}
Trinn 22: Trans Button Hendelses
knapp klikk hendelsen. Det er veldig enkelt det bare kaller PerformTranslation () -funksjonen til å starte sitt arbeid. For å gjøre det bare gå til design og dobbeltklikk på Oversett-knappen
//Trans på knappen clickprivate annullert button1_click (objekt avsenderen, RoutedEventArgs e) {PerformTranslation ();}
Trinn 23.: Inverter Button
Private void Invert_Click (objekt avsenderen, RoutedEventArgs e) {if (src .SelectedItem = null &! &! dest.SelectedItem = null) {string tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp; }}
Trinn 24: Kopier tekst Button
Private void CopyText_Click (objekt avsenderen, RoutedEventArgs e) {Clipboard.SetText (destTxt. tekst);}
Trinn 25: Installer Button
deretter menyen i bildet skal vises. Klikk på Aktiver applikasjon som kjører ut av nettleseren
. Men vi ønsker å legge til en knapp for å håndtere denne funksjonen slik at vi vil gjøre et installere
-knappen og følgende er koden for sin klikkhendelsen:
private void install_Click (objekt avsenderen, RoutedEventArgs e) {if (! Application.Current.IsRunningOutOfBrowser) //spør om programmet ikke er installert {Application.Current.Install (); } //Installere applikasjonen}
Trinn 26: Bygg Prototype
klikk på Debug > Starte ny forekomst
. Test din søknad
Trinn 27:. Flytte til Blend
fra det, deretter navigere til prosjektfiler og åpne løsnings fil som heter "Translator.sln"
Trinn 28:. Import Photoshop Fil Anmeldelser
deretter navigere til vår PSD-fil og åpne den.
Trinn 29:. Tilpass tekstbokser
, mark Apply to all
, og klikk deretter OK.
, navigere til contentElement som i bildet. Nå fra kategorien Egenskaper endre bakgrunnsfarge som bildet. Nå er vi redigerer i tekstboksen; å gå tilbake til arbeidsområdet, klikk på srcTxt som vist på bildet. Nå velger de to tekstboksene og endre forgrunnsfargen til # A3A3A3, så gå til Properties-menyen, bla til kategorien Tekst og endre skrift til Franklin Gothic Medium og størrelse til 16pt.
Trinn 30 : Tilpass Knapper
. Deretter navigere til BackgroundGradient i objektet og fanen Tidslinje. I Egenskaper, endre fyllfargen til gradient, slik som på bildet fra trinn 29.
Trinn 31: Tilpass comboboxes
, høyreklikk DropDownToggle og velger Rediger mal > Redigere nåværende
.
klikker BackgroundGradient og endre gradient farge til hva du føler ser bra
Trinn 32:. Integrering Blend med Visual Studio
deretter markere Bruk Microsoft Visual Studio ...
Trinn 33: Implementere Oversett Button
kategorien høyreklikk Translate_btn klikk på Gjør inn Kontroll Hotell og velge knappen. Name it "Oversetter».
Trinn 34: Installer Ikon
deretter legge alle PNG ikoner. Etter at dobbeltklikke på en knapp arrangement for Visual Studio til å laste. Klikk på Prosjekt > Overs Properties
klikk på Out-of-Browser Settings Kjøpe og legge ikonene fra src_blend_images.
Konklusjon