Share
Gisteren onderzocht Carlos de Google AJAX API en Flash. Vandaag gaan we kijken naar het creëren van een Silverlight Translator-applicatie met behulp van de Microsoft Translator-service. We beginnen met interface-ontwerp (in Photoshop) en gaan over op implementatie met Silverlight 4 (inclusief de meest recente functies) als een webtoepassingsraamwerk.
We gebruiken de combinatie Photoshop en Expression als ontwerpgereedschappen voor gebruikersinterfaces en Visual Studio als ontwikkelingsomgeving.
Hier is een kort overzicht van wat er in deze tutorial aan bod komt:
Notitie: Voor een solide basis in het werken met Silverlight, bekijk Mike Taulty's An Introduction to Microsoft Silverlight 4.
Silverlight is een browserinvoegtoepassing die de webontwikkelingservaring tot ver buiten de beperkingen van gewone HTML en JavaScript uitbreidt. Het lijkt erg op Adobe Flash. In Silverlight-toepassingen worden gebruikersinterfaces gedeclareerd in Extensible Application Markup Language (XAML) en geprogrammeerd met behulp van een subset van .NET Framework. U kunt daarom elke .NET-taal zoals C # of VB.NET gebruiken om uw programma's te implementeren.
Omdat Silverlight XAML gebruikt voor het maken van gebruikersinterfaces, kunt u Expression Blend gebruiken om uw toepassingsinterface te ontwerpen. Dat komt omdat Blend een ontwerpgereedschap voor gebruikersinterfaces is dat is ontwikkeld voor het maken van grafische interfaces voor web- en desktoptoepassingen. Het heet Blend omdat het blends de kenmerken van deze twee soorten toepassingen.
Ontwerp is een plan om elementen zo in te richten dat ze het best een bepaald doel bereiken
- Charles Eames
Omdat de interface erg belangrijk is voor elke toepassing, bespreken we de gedetailleerde stappen voor het maken van onze interface.
Voordat we onze interface gaan ontwerpen, moeten we kijken naar het algemene visuele effect. Ik heb dit kleurenschema gemaakt:
De eerste stap is om uw document in te stellen. We gaan een interface ontwerpen voor een Translator-applicatie, dus die zal niet te groot zijn. We gaan voor 640 x 468 px.
Start Photoshop en druk op de sneltoets CTRL + N om een nieuw document te maken. Kies 640 x 468 px als de afmetingen en klik vervolgens op OK.
Maak een nieuwe laag en hernoem deze "header_bg" en maak dan een selectie van 640 x 44px (of wat je ook voelt dat goed is) in de kop van de afbeelding met behulp van de rechthoek selectiekader.
Kies vervolgens het gereedschap Verloop en zorg ervoor dat het een lineair verloop is zoals in de bovenstaande afbeelding.
Kies de tool Horizontale tekst en schrijf "T ranslator" met deze instellingen:
Kies vervolgens het hulpmiddel "Een laagstijl toevoegen" in het menu Lagen en klik op de optie Verloop overlay. Verander het verloop zoals in de afbeelding. Gebruik vervolgens het gereedschap Horizontale tekst en schrijf "T" en verander zoals in de laatste stap de optie Verloopoverlapping en vervang deze op de juiste positie zoals in de afbeelding.
Gebruik het gereedschap Tekst opnieuw en typ 'het vertaalt voor u' en verander vervolgens de naam van de laag in 'slogan'. Selecteer daarna alle lagen die u hebt gemaakt en druk op CTRL + G om ze te groeperen en de groep te hernoemen in "header".
Hier is de achtergrond gebruikt in de applicatie. Klik met de rechtermuisknop en "Opslaan als", zodat u het in uw app kunt gebruiken.
Kies het gereedschap Rechthoektint en maak een rechthoek onderaan de afbeelding met een hoogte van 52 px. Kies vervolgens het gereedschap Verloop en maak met dezelfde instellingen waarmee we de koptekst hebben gemaakt een verloop zoals u in de afbeelding ziet. Ik plaatste enkele afbeeldingen zoals het Activetuts + -logo en bevat afbeeldingen in de mijne; je kunt ze vinden in de brondownload.
Zorg ervoor dat je een nieuwe groep van al deze lagen hebt gemaakt en noemde deze "voettekst".
In de volgende paar stappen zullen we de UI-elementen ontwerpen, zoals knoppen en tekstvakken.
We beginnen met onze knoppen. Maak een nieuwe laag, noem het "Copy text_bg" en maak een selectie van 800 x 24px. Dan klikken Selecteer> Wijzigen> Vloeiend en stel de Sample Radius in op 3px. Selecteer nu het verloopgereedschap en met hetzelfde verloop als de kop een verloop zoals in de afbeelding maakt:
Dubbelklik op de laag en kies "Lijn" en stel vervolgens de waarde in op wat u in de afbeelding ziet. Selecteer het gereedschap Horizontale tekst en typ "Tekst kopiëren" en plaats het boven de knop. Dupliceer de laag "Copy text_bg" door hem naar de nieuwe laag-knop te slepen en neer te zetten, typ "Installeren" en plaats hem dan over de knop. Dupliceer opnieuw "Copy_text_bg" en hernoem het naar "" wat staat voor invert talen en druk op CTRL + T om het formaat te wijzigen zoals je ziet in de afbeelding.
Maak een nieuwe laag, selecteer het hulpmiddel Elliptische selectiekader en maak een cirkel en kies vervolgens het gereedschap Verloop. Zorg ervoor dat het een gereflecteerd verloop is en maak een verloop zoals in de afbeelding. Dan klikken Selecteer> Wijzigen> Contract, zet de waarde op 2px en maak een nieuwe laag. Maak vervolgens met het gereedschap Penseel en de kleurwaarde # 000000 de selectie donker gekleurd. Maak nu een ovale selectie en kies het gereedschap Verloop; zorg ervoor dat het een lineair verloop is waarvan de kleurwaarden # 555555 en # 000000 zijn, maak dan een verloop zoals de afbeelding.
Omdat Blend bepaalde Photoshop-functies zoals hellingen en lijnen niet ondersteunt, moeten we alle lagen met dergelijke effecten rasteren. Om dat te doen, selecteert u de laag "header_bg" en klikt u er met de rechtermuisknop op. Vervolgens kiest u "Convert to Smart Object" en klikt u opnieuw met de rechtermuisknop en kiest u Layer Raster. Herhaal deze stappen in de lagen "T ranslator", "T" en slogan.
Terwijl we het maken van een applicatie van begin tot eind bespreken, bespreken we het proces van het maken van het pictogram van de toepassing.
Maak een nieuw Photoshop-bestand van 430 x 330 px door op CTRL + N te drukken, maak een nieuwe laag en noem deze "grens". Maak een selectie van 247 x 242 px, verzacht de selectie door op te klikken Selecteer> Wijzigen> Vloeiend en typ 30. Klik vervolgens op Selecteren> Edge herdefiniëren met vloeiend van 20 en Contract / Vergroten van + 100%.
Maak vervolgens een verloop zoals in de afbeelding en klik vervolgens op Selecteren> Wijzigen> Inkrimpen en typ 20 en druk vervolgens op Verwijderen. Dubbelklik op de laag en markeer Slagschaduw met een dekking van 54%. Maak een nieuwe laag en noem deze "binnen" en maak een selectie in de rand en maak een verloop zoals je ziet in de afbeelding. Dubbelklik op de laag en maak een lijn van 2 px. Klik nu op het gereedschap Horizontale tekst en typ "Vertaler" met het lettertype ChunkFive en de grootte 24pt. Typ ook "T" met hetzelfde lettertype maar met een afmeting van 110pt.
U hoeft uw pictogram niet naar .ico-indeling te converteren, maar sla uw pictogram op in .png-indeling met de formaten 280 x 280 px, 48 x 48 px, 32 x 32 px en 16 x 16 px en Visual Studio doet de rest!
Om met de implementatie van de Translator te beginnen, moet u ervoor zorgen dat u Web Developer-functies hebt geïnstalleerd toen u uw Visual Studio installeerde. Dan moet je Silverlight 4-tools downloaden en instellen die je kunt krijgen van http://bit.ly/Silverlight4tools en Silverlight 4 Developer Runtime, die je hier kunt downloaden.
Nadat we de interface hebben gemaakt en klaar maken voor gebruik in Blend, gaan we naar Visual Studio en maken we een prototype voor het project om ons implementatieproces te starten. Start uw Visual Studio op, klik Bestand> Nieuw> Project en kies Silverlight en kies dan Silverlight-applicatie. Klik op OK voor het volgende venster.
Klik Project> Service-referentie toevoegen en plak de service-URL http://api.microsofttranslator.com/V1/SOAP.svc met Namespace als TranslatorService. Als u de webservice van Bing Translator wilt gebruiken, heeft u een appID nodig. Ga dus naar http://www.bing.com/developer/appids.aspx?FORM=PMPD en maak een nieuwe AppID voor uw Vertaler.
Zoals we eerder hebben vermeld, zal de applicatie 640 x 468 px zijn, dus we moeten de grootte aanpassen.
Klik nu Beeld> Toolbox (of druk op CTRL + W + X) om het Toolbox-menu weer te geven. Sleep de "knop" naar het Eigenschappen menu en verander de naam en tekst in "Vertalen". Herhaal het proces en maak "Tekst kopiëren", "Installeren" en "" knoppen.
Sleep in de Toolbox twee tekstvakken en zet ze neer en hernoem ze in "srcTxt", die de door onze gebruiker ingevoerde brontekst verwerkt, en "destTxt", die de vertaalde tekst zal uitvoeren. Sleep vervolgens nog twee comboboxen en hernoem ze naar "src", die alle brontalen heeft waaruit de gebruiker kan kiezen, en "dest", de taal waarnaar de gebruiker wil vertalen. Hierna herschikt u de elementen zoals in de afbeelding.
Nu gaan we het programma implementeren. Dubbelklik op de Vertalen knop en vervolgens Visual Studio opent de broncode van de toepassing. Voeg de naamruimte van de Translator-service toe door deze code achter de laatste naamruimte te plakken.
met Translator.TranslatorService;
In het onderstaande fragment maakt de eerste regel een instantie met de naam 'client' van de klasse LanguageServiceClient. De tweede maakt een variabele van het type String genaamd "AppId" om te verwijzen naar de applicatie-ID die nodig is door de SOAP-service. De laatste twee regels zijn de resultaatgroepen die terugkwamen van de SOAP-aanroepen en ze zijn in de vorm van ObservableCollection.
TranslatorService.LanguageServiceClient client = new TranslatorService.LanguageServiceClient (); // exemplaar van LanguageServiceClient. string AppId = "6CE9C85A41571C050C379F60DA173D286384E0F2"; // Deze AppId is gemaakt voor mijn naam System.Collections.ObjectModel.ObservableCollectionresultaten; // De namen van de resultaatentalen die door SOAP Searvice zijn geretourneerd. System.Collections.ObjectModel.ObservableCollection langcodes; // De codes voor resultaatstalen die worden geretourneerd door SOAP Searvice.
Silverlight noemt de webservices alleen in asynchrone modi. Daarom moeten we de gebeurtenissen afhandelen om de waarden op te halen. We moeten de resultaten binnen die eventdefinities krijgen. Hierna volgen de afgevaardigden voor evenementen die we kunnen geven in de Pagina laden evenement. Ook moeten we de Comboboxes 'bellen laden evenementen om de talen te laden.
InitializeComponent (); // Event Handlers-client. Vertalen Voltooid + = nieuwe EventHandler(Client_TranslateCompleted); client.GetLanguageNamesCompleted + = nieuwe EventHandler (Client_GetLanguageNamesCompleted); client.GetLanguagesCompleted + = nieuwe EventHandler (Client_GetLanguagesCompleted); // Voor het vullen van de comboboxen en de taalcodes client.GetLanguageNamesAsync (AppId, this.Language.IetfLanguageTag); client.GetLanguagesAsync (AppId);
Zoals we eerder hebben vermeld, moeten we elke gebeurtenis afhandelen terwijl we in de asynchrone modus werken. Dit is de eerste gebeurtenis die is gecalld client_TranslateCompleted () het zal de volledige vertaalgebeurtenis afhandelen en als er geen fouten zijn in het proces van het retourneren van de vertaling, stelt het de destTxt combineer de tekstwaarde met de resulterende vertaling.
// Verkrijg de vertaalde tekst protected void client_TranslateCompleted (Object afzender, TranslateCompletedEventArgs e) if (e.Error == null) destTxt.Text = e.Result;
Dit evenement, genaamd client_GetLanguagesCompleted, haalt de mogelijke talen op die de SOAP Translator Service biedt - maar in een vorm van code die begrijpelijk is voor de Service - en stelt deze in op de String langcodes. Dit wordt ingesteld na het controleren op fouten.
// Get Languages protected void client_GetLanguagesCompleted (object afzender, GetLanguagesCompletedEventArgs e) if (e.Error == null) langcodes = e.Result;
Dit evenement krijgt de naam van elke taal. Ter verduidelijking, de code voor de Engelse taal is "en" en de naam is natuurlijk "Engels". Als er geen fouten zijn bij het ophalen van taalnamen, stelt het de reeks "resultaten" in met deze taalnamen. Vervolgens worden de twee comboboxen met de taalnamen ingesteld.
// Vul de comboboxen protected void client_GetLanguageNamesCompleted (Object afzender, GetLanguageNamesCompletedEventArgs e) if (e.Error == null) results = e.Result; this.src.ItemsSource = resultaten; this.dest.ItemsSource = resultaten;
Nu zullen we het laatste ding implementeren om ons doel te bereiken. De functie van deze functie is om het vertaalproces te starten. Het controleert de twee geselecteerde items in comboboxen, zorgt ervoor dat ze nog niet leeg zijn en roept de Asynchronous Translation-functie aan en geeft de benodigde argumenten aan. Deze argumenten zijn de toepassings-ID en de brontekst die moet worden vertaald, plus de taal van deze brontekst en de taal van de gewenste vertaalde tekst.
Accentsconagua
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 ("Selecteer eerst talen!"); Nu we klaar zijn met de implementatie van de vertaaldienst, moeten we hem laten werken. Dus we moeten omgaan met de Vertalen knop klik evenement. Het is heel eenvoudig, het roept gewoon het PerformTranslation () functie om zijn werk te starten. Ga hiervoor naar de ontwerpweergave en dubbelklik op de knop Vertalen.
// Vertaal op knop klik private void button1_Click (object afzender, RoutedEventArgs e) PerformTranslation ();
De knop Inverteren voert een eenvoudige uitwisseling uit van geselecteerde talen in de comboboxen. Het maakt een string genaamd tmp om de waarden op te slaan in de broncombinatie wanneer deze de waarde van de bestemmingscombinatie neemt, plaatst dan de waarde ervan in de doelcombinatiebox.
private void Invert_Click (object afzender, RoutedEventArgs e) if (src.SelectedItem! = null && dest select.SelectedItem! = null) string tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp;
Silverlight 4 heeft veel nieuwe handige functies. Een voorbeeld hiervan is de Klembord-API die methoden biedt voor het verzamelen van inhoud die tijdelijk kan worden vastgehouden in het klembord van de machine en die indien nodig kan worden gemanipuleerd.
private void CopyText_Click (object afzender, RoutedEventArgs e) Clipboard.SetText (destTxt.Text);
Een andere nieuwe functie van Silverlight 4 is de mogelijkheid om Silverlight-applicaties Out-of-Browser uit te voeren. Dat komt omdat de .NET Common Runtime (CLR) het nu mogelijk maakt dezelfde gecompileerde code zonder wijzigingen op het bureaublad en Silverlight uit te voeren. Deze functie kan worden geïmplementeerd door op te klikken Project> (Naam van applicatie) Eigenschappen dan verschijnt het menu in de afbeelding. Klik Schakel actieve applicatie uit vanuit de browser.
U kunt deze functie nu openen door met de rechtermuisknop op de app te klikken; je zal vinden Installeer deze applicatie. We willen echter een knop toevoegen om deze functie te gebruiken, zodat we een installeren knop en het volgende is de code voor zijn klikgebeurtenis:
private void install_Click (object afzender, RoutedEventArgs e) if (! Application.Current.IsRunningOutOfBrowser) // vraagt of de toepassing niet is geïnstalleerd Application.Current.Install (); // installatietoepassing
Als u nu op CTRL + F5 drukt om de applicatie te bouwen, wordt deze gebouwd maar verschijnt er een waarschuwingsbericht. Dus om uw toepassing te debuggen, klikt u met de rechtermuisknop op de webservice in de Solution Explorer Translator.Web, dan klikken Foutopsporing> Start een nieuw exemplaar. Test uw toepassing.
Nu we onze applicatie hebben geïmplementeerd, zullen we beginnen met de implementatie van onze interface. Open Blend en er verschijnt een opstartscherm. Kiezen Open project ervan, navigeer dan naar de projectbestanden en open het Solution-bestand met de naam "Translator.sln".
Dubbelklik in het tabblad Project op MainPage.xaml en klik vervolgens op Bestand> Adobe Photoshop-bestand importeren navigeer dan naar ons PSD-bestand en open het.
Al onze afbeeldingen worden in ons projectbestand geïmporteerd maar staan bovenaan onze knoppen en vakken. Klik met de rechtermuisknop op het tabblad Objecten en tijdlijn PSD_Source en kies Bestellen> Verzenden naar rug.
Blend biedt een echt handige functie; de mogelijkheid om elk gebruikersinterface-element naar wens aan te passen. Om dat te doen, selecteert u een willekeurig tekstvak en klikt u er met de rechtermuisknop op en kiest Sjabloon bewerken> Een kopie bewerken, Mark Toepassen op iedereen, klik vervolgens op OK.
Van de Objecten en tijdlijn tab, navigeer naar ContentElement zoals in de afbeelding. Nu op het tabblad Eigenschappen kunt u de achtergrondkleur zoals de afbeelding wijzigen. Nu bewerken we in het tekstvak; om terug te gaan naar de werkruimte klik op srcTxt zoals getoond in de afbeelding. Selecteer nu de twee tekstvakken en wijzig de voorgrondkleur in # a3a3a3, ga dan naar het menu Eigenschappen, ga naar het tabblad Tekst en verander het lettertype in Franklin Gothic Medium en formaat in 16pt.
Klik met de rechtermuisknop op een willekeurige knop en kies Sjabloon bewerken> Een kopie bewerken en markeer Toepassen op iedereen. Navigeer vervolgens naar BackgroundGradient op het tabblad Object en Tijdlijn. Wijzig in de eigenschappen de vulkleur in verloop, zoals in de afbeelding van stap 29.
Navigeer vervolgens naar Achtergrond in de Object en tijdlijn tab en op het tabblad Eigenschappen wijzigt u de achtergrondkleur in # 494949.
Klik met de rechtermuisknop op een willekeurige combobox en kies Sjabloon bewerken> Een kopie bewerken en markeer Toepassen op iedereen, klik dan met de rechtermuisknop op DropDownToggle en kies Sjabloon bewerken> Huidig bewerken.
Klik op BackgroundGradient en op het tabblad Eigenschappen wijzigt u de vulkleur in verloop. Ga terug door te klikken op DropDownToggle in het bovenste menu en navigeer vervolgens naar BtnArrow, die zich in DropDownToggle bevindt. Wijzig op het tabblad Eigenschappen de vulkleur in # 8D8D8D. Ga nu naar [TextBlock] die zich in ContentPresenter bevindt en de vulkleur verandert in # 8D8D8D.
Ga vervolgens naar PopupBorder en verander de achtergrondkleur naar # FF1D1D1D. Klik op het tabblad Staten op Muis en ga naar Objecten en tijdlijn, klik op BackgroundGradient en verander de verloopkleur naar wat je er goed uitziet.
Om uw broncode te bewerken met Visual Studio klikt u gewoon op Hulpmiddelen> Opties> Project dan markeren Gebruik Microsoft Visual Studio ...
Van de Object en tijdlijn klik met de rechtermuisknop Translate_btn dan klikken Maak controle en kies knop. Noem het "Vertalen".
Klik op het tabblad Staten op "Normaal" en vervolgens in het menu Eigenschappen de waarde Dekking in te stellen op 50%. Nogmaals, klik vanuit het tabblad Staten op "Muis over" en verander de dekking naar 70%. Klik ten slotte op Ongericht op het tabblad Staten en verander de dekking naar 30%.
Verwijder nu de oude knop Vertalen en ga naar de afspraken door erop te klikken. In het type klikvak Translate_Click.
Klik op het tabblad Project met de rechtermuisknop op src_blend_images en kies Bestaand item toevoegen voeg vervolgens alle PNG-pictogrammen toe. Dubbelklik daarna op de gebeurtenis van een knop om Visual Studio te laden. Klik Project> Eigenschappen van vertaler dan klikken Out-of-Browser-instellingen en voeg de pictogrammen toe van src_blend_images.
In deze zelfstudie hebben we het hele proces van het maken van een Translator-toepassing behandeld. We hebben ook een kijkje genomen op Microsoft Bing Translator Service en er gebruik van gemaakt. Ik hoop dat het nuttig en plezierig was.
