Share
I går gjennomgikk Carlos Google AJAX API og Flash. I dag skal vi se på å skape en Silverlight Translator-applikasjon ved hjelp av Microsoft Translator-tjenesten. Vi starter med grensesnittdesign (i Photoshop) og går inn i implementering ved hjelp av Silverlight 4 (inkludert de nyeste funksjonene) som en webapplikasjonsramme.
Vi bruker Photoshop og Expression som verktøy for brukergrensesnitt og Visual Studio som utviklingsmiljø.
Her er en rask oversikt over hva som er dekket i denne opplæringen:
Merk: For et solid grunnlag i å jobbe med Silverlight, sjekk ut Mike Taultys Introduksjon til Microsoft Silverlight 4.
Silverlight er en plugin for nettleser som utvider webutviklingsopplevelsen langt utover begrensningene av vanlig HTML og JavaScript. Det ligner veldig Adobe Flash. I Silverlight-applikasjoner er brukergrensesnitt deklarert i Extensible Application Markup Language (XAML) og programmert med en delmengde av .NET Framework. Du kan derfor bruke et hvilket som helst .NET-språk som C # eller VB.NET for å begynne å implementere programmene dine.
Som Silverlight bruker XAML for å skape brukergrensesnitt, kan du bruke Expression Blend til å designe applikasjonsgrensesnittet. Det er fordi Blend er et verktøy for brukergrensesnitt utviklet for å lage grafiske grensesnitt for web- og skrivebordsprogrammer. Det kalles Blend fordi det blander funksjonene til disse to typer applikasjoner.
Design er en plan for å arrangere elementer på en slik måte som best for å oppnå en bestemt hensikt
- Charles Eames
Fordi grensesnitt er svært viktig for enhver applikasjon, vil vi dekke de detaljerte trinnene for å skape grensesnittet vårt.
Før vi begynner å designe grensesnittet vårt, må vi se på den overalske visuelle effekten. Jeg har laget denne fargevalg:
Det første trinnet er å sette opp dokumentet. Vi skal designe et grensesnitt for et Translator-program, så det blir ikke for stort. Vi går for 640 x 468px.
Brann opp Photoshop, og trykk snarveiene CTRL + N for å opprette et nytt dokument. Velg 640 x 468px da dimensjonene klikker OK.
Opprett et nytt lag og gi nytt navn til det "header_bg", og opprett et utvalg på 640 x 44px (eller hva du føler er bra) i hodet på bildet ved hjelp av Rectangle Marquee-verktøyet.
Velg deretter Gradient-verktøyet og vær sikker på at det er en lineær gradient som i bildet ovenfor.
Velg verktøyet Horisontaltype og skriv "T ranslator" med disse innstillingene:
Deretter velger du "Legg til en lagstil" -verktøy fra Lag-menyen, og klikker på alternativet Gradient Overlay. Endre gradienten som i bildet. Deretter bruker du Horisontal Type-verktøyet og skriver "T", og som i det siste trinnet, endrer du alternativet Gradient Overlay og erstatter det i riktig posisjon som i bildet..
Bruk Type-verktøyet igjen og skriv "det oversetter for deg" og endre lagets navn til "slagord". Deretter velger du alle lagene du har opprettet, og trykker CTRL + G for å gruppere dem, omdøper gruppen til "header".
Her er bakgrunnen som brukes i søknaden. Høyreklikk på det og "Lagre som" slik at du kan bruke det i appen din.
Velg Rectangle Marquee-verktøyet og opprett et rektangel nederst på bildet med en høyde på 52px. Deretter velger du Gradient Tool, og med de samme innstillingene vi opprettet overskriften med, gjør du en gradient som du ser på bildet. Jeg lagde noen bilder som Activetuts + -logoen og har bilder i meg; du kan finne dem i kilde nedlastingen.
Pass på at du har opprettet en ny gruppe av alle disse lagene og kalt det "footer".
I de følgende få trinnene vil vi designe UI-elementene, som knapper og tekstbokser.
Vi starter med knappene våre. Lag et nytt lag, ring det "Kopier text_bg" og gjør et utvalg på 800 x 24px. Klikk deretter Velg> Endre> Glatt og sett prøveeksemplet til 3px. Velg nå gradientverktøyet og med samme gradient som toppteksten gjør en gradient som i bildet:
Dobbeltklikk laget og velg "Stroke" og sett deretter verdien til det du ser på bildet. Velg verktøyet Horisontaltype og skriv "Kopier tekst" og legg det over knappen. Dupliser "Copy text_bg" -laget ved å dra og slippe det til den nye lagknappen og skriv "Install" og legg den over knappen. Dupliser "Copy_text_bg" igjen og endre navnet på det til "" som står for inverterte språk og trykk CTRL + T for å endre størrelsen på bildet som du ser på bildet.
Lag et nytt lag, velg Elliptical Marquee-verktøyet og opprett en sirkel, og velg deretter Gradient-verktøyet. Pass på at det er en reflektert Gradient og lag en gradient som i bildet. Klikk deretter Velg> Endre> Kontrakt, sett verdien til 2px og opprett et nytt lag. Deretter gjør du markeringen mørk farget med penselverktøyet og fargeværdien # 000000. Gjør nå et ovalt utvalg og velg Gradient-verktøyet; sørg for at det er en lineær gradient hvis fargeverdier er # 555555 og # 000000, og gjør deretter en gradient som bildet.
Fordi Blend ikke støtter noen Photoshop-funksjoner som gradienter og slag, må vi rasterisere alle lagene med slike effekter. For å gjøre det, velg "header_bg" -laget og høyreklikk det, velg deretter "Konverter til smart objekt", høyreklikk deretter på nytt og velg Rasterize Layer. Gjenta disse trinnene til lagene "T ranslator", "T" og slagord.
Da vi dekker prosessen med å skape et program fra start til slutt, diskuterer vi prosessen med å opprette programmets ikon.
Lag en ny Photoshop-fil på 430 x 330px ved å trykke CTRL + N, og deretter lage et nytt lag og gi det navnet "border". Lag et utvalg av 247 x 242px, slett markeringen ved å klikke Velg> Endre> Glatt og skriv 30. Velg deretter> Rediger kant med glatt av 20 og kontrakt / utvid med + 100%.
Deretter gjør du en gradient som i bildet, og klikker deretter Velg> Endre> Kontrakt og skriv 20, og trykk deretter på Slett. Dobbeltklikk laget og merk Drop Shadow med opacity på 54%. Opprett et nytt lag og merk det "innsiden" og gjør et valg innenfor grensen og gjør en gradient som det du ser på bildet. Dobbeltklikk laget og ta et slag på 2px. Klikk nå Horizontal Type-verktøyet og skriv "Oversetter" med skrifttypen ChunkFive og størrelse på 24pt. Skriv også "T" med samme skrift, men med en størrelse på 110pt.
Du trenger ikke å konvertere ikonet til .ico-format, bare lagre ikonet ditt i .png-format med størrelser på 280 x 280 px, 48 x 48 px, 32 x 32 px og 16 x 16 px og Visual Studio vil gjøre resten!
For å begynne å implementere Translator må du sørge for at du har installert webutviklerfunksjoner når du installerte Visual Studio. Deretter må du laste ned og installere Silverlight 4 verktøy som du kan få fra http://bit.ly/Silverlight4tools og Silverlight 4 Developer Runtime, som du kan komme hit.
Etter å ha opprettet grensesnittet og gjort det klart for bruk i Blend, går vi til Visual Studio og lager en prototype for prosjektet for å starte implementeringsprosessen. Slå opp Visual Studio, klikk Fil> Nytt> Prosjekt og velg Silverlight, velg deretter Silverlight Application. Klikk OK for det neste vinduet.
Klikk Prosjekt> Legg til servicereferanse og lim inn tjenesteadressen http://api.microsofttranslator.com/V1/SOAP.svc med Namespace som TranslatorService. For å bruke Bing Translator Web Service trenger du en AppID. Så gå til http://www.bing.com/developer/appids.aspx?FORM=PMPD og opprett en ny AppID for oversetteren din.
Som nevnt tidligere, vil søknaden være 640 x 468px, så vi må endre størrelsen på den.
Klikk nå Vis> Verktøykasse (eller trykk CTRL + W + X) for å få Toolbox-menyen til å vises. Dra og slipp "knappen" fra Egenskaper-menyen, endre navn og tekst til "Oversett". Gjenta prosessen og opprett "Kopier tekst", "installer" og "" knapper.
Fra verktøylinjen drar og slipper du to tekstbokser, og deretter omdøper du dem til "srcTxt", som vil håndtere kildeteksten vår bruker skal skrive inn, og "destTxt", som vil sende ut den oversatte teksten. Deretter drar du to andre kombinasjonsbokser og bytter navn til "src", som vil ha alle kildespråkene som brukeren kan velge mellom, og "dest", som er hvilket språk brukeren ønsker å oversette til. Deretter omorganisere elementene som i bildet.
Nå skal vi begynne å implementere programmet. Dobbeltklikk på Oversette knappen, vil Visual Studio åpne kildekoden for programmet. Legg til Translator Service Name Space ved å lime inn denne koden etter det forrige Navneplass.
bruker Translator.TranslatorService;
I utsnittet nedenfor oppretter den første linjen en forekomst som kalles "klient" fra LanguageServiceClient-klassen. Den andre oppretter en variabel av typen String kalt "AppId" for å referere til program-IDen som kreves av SOAP-tjenesten. De to siste linjene er resultatgruppene som returneres fra SOAP-samtalene, og de er i form av ObservableCollection.
TranslatorService.LanguageServiceClient client = ny TranslatorService.LanguageServiceClient (); // forekomst av LanguageServiceClient. streng AppId = "6CE9C85A41571C050C379F60DA173D286384E0F2"; // Denne AppId er opprettet for mitt navn System.Collections.ObjectModel.ObservableCollectionresultater; // Resultatet språk navn returnert av SOAP Searvice. System.Collections.ObjectModel.ObservableCollection langcodes; // Resultatspråkskodene returnert av SOAP Searvice.
Silverlight kaller webtjenestene bare i asynkronmodus. Derfor må vi håndtere hendelsene for å hente verdiene. Vi må få resultatene i disse hendelsesdefinisjonene. Følgende er delegatene for hendelser som vi kan gi i Sidebelastning begivenhet. Også må vi ringe Comboboxes ' laste hendelser for å laste språkene.
InitializeComponent (); // Event Handlers client.TranslateCompleted + = ny EventHandler(Client_TranslateCompleted); client.GetLanguageNamesCompleted + = new EventHandler (Client_GetLanguageNamesCompleted); client.GetLanguagesCompleted + = ny EventHandler (Client_GetLanguagesCompleted); // For å fylle kombinasjonsbokstaver og Språkkoder client.GetLanguageNamesAsync (AppId, this.Language.IetfLanguageTag); client.GetLanguagesAsync (AppID);
Som vi nevnte før, må vi håndtere hver hendelse mens vi jobber i asynkron modus. Dette er den første hendelsen som ringte client_TranslateCompleted () Det vil håndtere hele oversettelseshendelsen, og hvis det ikke er noen feil i prosessen med å returnere oversettelsen, setter den inn destTxt combobox tekst verdi med den resulterende oversettelsen.
// Få den oversatte teksten beskyttet void client_TranslateCompleted (Object sender, TranslateCompletedEventArgs e) if (e.Error == null) destTxt.Text = e.Result;
Denne hendelsen, kalt client_GetLanguagesCompleted, henter de mulige språkene som SOAP Translator Service tilbyr - men i form av kode som er forståelig for Tjenesten - og setter dem til String langcodes. Dette er satt etter at du har kontrollert feil.
// Få språk beskyttet void client_GetLanguagesCompleted (objekt sender, GetLanguagesCompletedEventArgs e) if (e.Error == null) langcodes = e.Result;
Denne hendelsen får navnet til hvert språk. For å klargjøre, er koden for det engelske språket "en" og navnet er selvfølgelig "engelsk". Hvis det ikke er noen feil når du får språknavn, setter det strengen "resultater" med disse språknavnene. Deretter setter den de to kombobokene med språknavnene.
// Fyll i comboboxene beskyttet void client_GetLanguageNamesCompleted (Object sender, GetLanguageNamesCompletedEventArgs e) if (e.Error == null) results = e.Result; this.src.ItemsSource = results; this.dest.ItemsSource = results;
Nå skal vi gjennomføre det siste for å nå målet vårt. Denne funksjonens operasjon er å starte oversettelsesprosessen. Den kontrollerer de to valgte elementene i comboboxes, sørger for at de ikke er tomme ennå, og kalles asynkrone oversettelse-funksjonen og sender de nødvendige argumenter til den. Disse argumentene er applikasjons-ID og kildeteksten som må oversettes, pluss språket i denne kildeteksten og språket til ønsket oversatt tekst.
Accentsconagua
private void PerformTranslation () if (src.SelectedItem! = null && dest.SelectedItem! = null) client.TranslateAsync (AppId, srcTxt.Text, (langcodes [src.SelectedIndex] .ToString ()), .SelectedIndex] .ToString ())); else MessageBox.Show ("Vennligst velg språk først!"); Etter hvert som vi har fullført oversettelsestjenesten, må vi få det til å fungere. Så vi må håndtere Oversette knappeklikk hendelsen. Det er veldig enkelt det kaller bare PerformTranslation () funksjon for å starte sitt arbeid. For å gjøre det, gå bare til designvisningen og dobbeltklikk på Oversett-knappen.
// Oversett på knappen klikk privat tomt-knapp1_Click (objekt sender, RoutedEventArgs e) PerformTranslation ();
Inverter-knappen utfører en enkel bytte av valgte språk i komboboxene. Det skaper en streng som kalles tmp å lagre verdiene i kildekomboboxen når den tar verdien av destinasjonskombinasjonen, og setter deretter verdien i destinasjonskombinasjonen.
privat tomrom Invert_Click (objekt sender, RoutedEventArgs e) if (src.SelectedItem! = null && dest.SelectedItem! = null) string tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp;
Silverlight 4 kom med mange nye nyttige funksjoner. Et slikt eksempel er API-utklippstavlen som gir metoder for å gripe innhold som midlertidig kan holdes i maskinens "utklippstavle" og manipuleres hvis det er nødvendig.
privat tomt CopyText_Click (objekt sender, RoutedEventArgs e) Clipboard.SetText (destTxt.Text);
En annen ny funksjon av Silverlight 4 er muligheten til å kjøre Silverlight-applikasjoner Ut-av-nettleser. Det skyldes at .NET Common Runtime (CLR) nå lar den samme kompilerte koden bli kjørt på skrivebordet og Silverlight uten endring. Denne funksjonen kan implementeres ved å klikke Prosjekt> (Programnavn) Egenskaper da vises menyen i bildet. Klikk Aktiver kjørende program ut av nettleseren.
Du kan nå denne funksjonen nå ved å høyreklikke på appen. du vil finne Installer denne applikasjonen. Vi vil imidlertid legge til en knapp for å håndtere denne funksjonen, slik at vi skal lage en installere knappen og følgende er koden for klikk-hendelsen:
Private void install_Click (objekt sender, RoutedEventArgs e) if (! Application.Current.IsRunningOutOfBrowser) // spør om programmet ikke er installert Application.Current.Install (); // installeringsprogram
Nå, hvis du trykker CTRL + F5 for å bygge applikasjonen, vil den bli bygd, men en advarsel vises. Så å feilsøke søknaden din høyreklikk på webtjenesten i Solution Explorer, som er Translator.Web, klikk deretter Feilsøking> Start ny forekomst. Test din søknad.
Da vi fullførte implementeringen av programmet, begynner vi å implementere grensesnittet vårt. Åpne blend og en sprutskjerm vises. Velge Åpne prosjekt fra det, så naviger til prosjektfilene og åpne Løsningsfilen som heter "Translator.sln".
Fra Prosjekt-kategorien dobbeltklikker du på MainPage.xaml og klikker deretter Fil> Importer Adobe Photoshop-fil Naviger deretter til vår PSD-fil og åpne den.
Alle bildene våre blir importert til vår prosjektfil, men vil være på toppen av våre knapper og bokser. I kategorien Objekter og tidslinje høyreklikker du på PSD_Source og velg Bestill> Send til Tilbake.
Blend gir en veldig nyttig funksjon; evnen til å tilpasse hvilket som helst brukergrensesnittelement som du vil. For å gjøre det, velg en tekstboks og høyreklikk den, og velg deretter Rediger mal> Rediger en kopi, merke Gjelder for alle, klikk deretter OK.
Fra Objekter og tidslinje kategorien, naviger til contentElement som i bildet. Nå endrer du Bakgrunnsfarge som på bildet fra Egenskaper-fanen. Nå redigerer vi i tekstboksen; å gå tilbake til arbeidsområdet, klikk på srcTxt som vist på bildet. Velg nå de to tekstboksene og endre Forgrunnsfarge til # A3A3A3, Gå deretter til Egenskaper-menyen, bla til Tekst-fanen og endre skrifttypen til Franklin Gothic Medium og størrelse til 16pt.
Høyreklikk en hvilken som helst knapp og velg deretter Rediger mal> Rediger en kopi og merk Gjelder for alle. Deretter navigerer du til BackgroundGradient i kategorien Objekt og Tidslinje. I egenskapene, endre fyllfarge til gradient, for eksempel i bildet fra trinn 29.
Deretter navigerer du til Bakgrunn i Objekt og tidslinje fanen og i fanen Egenskaper endrer du bakgrunnsfargen til # 494949.
Høyreklikk en hvilken som helst kombinasjonsboksen og velg deretter Rediger mal> Rediger en kopi og merk Gjelder for alle, høyreklikk deretter DropDownToggle og velg Rediger mal> Rediger nåværende.
Klikk på BackgroundGradient og på fanen Egenskaper endres Fyll farge til gradient. Gå tilbake ved å klikke DropDownToggle fra den øvre menyen, og naviger deretter til BtnArrow, som er inne i DropDownToggle. Fra Fliken Egenskaper endres Fyll farge til # 8D8D8D. Gå nå til [TextBlock] som er inne i ContentPresenter og endrer Fyll farge til # 8D8D8D.
Deretter går du til PopupBorder og endrer bakgrunnsfargen til # FF1D1D1D. Fra fanen States klikker du MouseOver, gå til Objekter og tidslinje, klikk BackgroundGradient og endre gradientfargen til det du føler deg ser bra ut.
Hvis du vil redigere kildekode ved hjelp av Visual Studio, klikker du bare Verktøy> Valg> Prosjekt merk deretter Bruk Microsoft Visual Studio ...
Fra Objekt og tidslinje Høyreklikk på fanen Translate_btn klikk deretter Gjør deg klar til kontroll og velg knapp. Gi det navnet "Oversett".
Fra fanen States klikker du på "Normal", og deretter på Egenskaper-menyen endres Opacity-verdien til 50%. Igjen, fra fanen States, klikk på "Mouse over" og bytt Opacity til 70%. Til slutt klikker du på Unfocused fra fanen States og endrer Opacity til 30%.
Slett nå den gamle Oversett-knappen og gå til hendelsene ved å klikke på den. I klikkfeltet type Translate_Click.
Høyreklikk på Prosjekt-fanen src_blend_images og velg Legg til eksisterende element Legg deretter til alle PNG-ikoner. Deretter dobbeltklikker du på hvilken som helst knapphendelse for Visual Studio å laste. Klikk Prosjekt> Oversetteregenskaper klikk deretter Innstillinger for ikke-nettleser og legg til ikonene fra src_blend_images.
I denne opplæringen dekket vi hele prosessen med å lage et Translator-program. Vi tok også en titt på Microsoft Bing Translator Service og benyttet den. Jeg håper det var nyttig og hyggelig.
