Share
Hier, Carlos a examiné l'API AJAX de Google et Flash. Aujourd'hui, nous allons envisager de créer une application Silverlight Translator à l'aide du service Microsoft Translator. Nous allons commencer par la conception d'interface (dans Photoshop) et la mise en œuvre en utilisant Silverlight 4 (y compris ses fonctionnalités les plus récentes) comme infrastructure d'application Web..
Nous allons utiliser Photoshop et Expression blend comme outils de conception d'interface utilisateur et Visual studio comme environnement de développement..
Voici un aperçu rapide de ce qui est couvert dans ce tutoriel:
Remarque: Pour une base solide sur l'utilisation de Silverlight, consultez Introduction à Microsoft Silverlight 4 de Mike Tault..
Silverlight est un plug-in de navigateur qui étend l'expérience de développement Web bien au-delà des limitations du langage HTML et JavaScript. Il ressemble beaucoup à Adobe Flash. Dans les applications Silverlight, les interfaces utilisateur sont déclarées en langage XAML (Extensible Application Markup Language) et programmées à l'aide d'un sous-ensemble du .NET Framework. Vous pouvez donc utiliser n’importe quel langage .NET comme C # ou VB.NET pour commencer à implémenter vos programmes..
Comme Silverlight utilise XAML pour créer des interfaces utilisateur, vous pouvez utiliser Expression Blend pour concevoir votre interface d'application. En effet, Blend est un outil de conception d'interface utilisateur développé pour la création d'interfaces graphiques pour les applications Web et de bureau. Ça s'appelle Blend parce que ça des mélanges les caractéristiques de ces deux types d'applications.
Le design est un plan pour organiser les éléments de manière à atteindre au mieux un objectif particulier
- Charles Eames
Parce que l'interface est très importante pour toute application, nous allons couvrir les étapes détaillées de la création de notre interface..
Avant de commencer à concevoir notre interface, nous devrons examiner l'effet visuel global. J'ai fait ce jeu de couleurs:
La première étape consiste à configurer votre document. Nous allons concevoir une interface pour une application de traduction afin qu'elle ne soit pas trop grosse. Nous allons passer à 640 x 468px.
Lancez Photoshop et appuyez sur les touches de raccourci CTRL + N pour créer un nouveau document. Choisissez les dimensions 640 x 468px puis cliquez sur OK.
Créez un nouveau calque et renommez-le "header_bg", puis créez une sélection de 640 x 44 pixels (ou ce que vous jugerez bon) en haut de l'image à l'aide de l'outil Rectangle de sélection.
Choisissez ensuite l'outil Dégradé et assurez-vous qu'il s'agit d'un dégradé linéaire, comme dans l'image ci-dessus..
Choisissez l'outil Type horizontal et écrivez "T ranslator" avec ces paramètres:
Choisissez ensuite l'outil "Ajouter un style de calque" dans le menu Calques et cliquez sur l'option Superposition de dégradé. Changer le dégradé comme dans l'image. Ensuite, utilisez l'outil Type horizontal et écrivez "T" et, comme dans la dernière étape, modifiez son option Incrustation de dégradé et remplacez-la à la position correcte, comme dans l'image..
Utilisez à nouveau l'outil Texte et tapez "cela se traduit pour vous", puis changez le nom du calque en "slogan". Après cela, sélectionnez toutes les couches que vous avez créées et appuyez sur CTRL + G pour les regrouper, en renommant le groupe en "en-tête"..
Voici le fond utilisé dans l'application. Faites un clic droit dessus et "Enregistrer sous" pour pouvoir l'utiliser dans votre application..
Choisissez l'outil Rectangle de sélection et créez un rectangle au bas de l'image d'une hauteur de 52px. Choisissez ensuite l'outil Dégradé et, avec les mêmes paramètres que ceux avec lesquels vous avez créé l'en-tête, créez un dégradé tel que vous le voyez dans l'image. J'ai placé des images telles que le logo Activetuts + et des images dans la mienne; vous pouvez les trouver dans le téléchargement source.
Assurez-vous que vous avez créé un nouveau groupe de toutes ces couches et que vous l'avez appelé "pied de page"..
Dans les étapes suivantes, nous allons concevoir les éléments de l'interface utilisateur, tels que des boutons et des zones de texte..
Nous allons commencer avec nos boutons. Créez un nouveau calque, appelez-le "Copier text_bg" et effectuez une sélection de 800 x 24 pixels. Puis clique Sélectionnez> Modifier> Lisser et réglez le rayon de l'échantillon sur 3px. Maintenant, sélectionnez l'outil de dégradé et avec le même dégradé que l'en-tête, créez un dégradé comme celui-ci dans l'image:
Double-cliquez sur le calque et choisissez "Trait", puis définissez sa valeur sur ce que vous voyez dans l'image. Sélectionnez l'outil Type horizontal, écrivez "Copier le texte" et placez-le sur le bouton. Dupliquez le calque "Copier texte_bg" en le faisant glisser vers le nouveau bouton du calque et tapez "Installer", puis placez-le sur le bouton. Copiez à nouveau "Copy_text_bg" et renommez-le en "", qui correspond à inverser les langues, puis appuyez sur CTRL + T pour le redimensionner comme vous le voyez dans l'image..
Créez un nouveau calque, sélectionnez l'outil Elliptical Marquee et créez un cercle, puis choisissez l'outil Dégradé. Assurez-vous que le dégradé est réfléchi et créez un dégradé comme dans l'image. Puis clique Sélectionnez> Modifier> Contrat, définissez la valeur sur 2 pixels et créez un nouveau calque. Puis, avec l’outil Pinceau et la valeur de couleur # 000000, colorez la sélection en foncant. Maintenant, faites une sélection ovale et choisissez l'outil Dégradé; assurez-vous qu'il s'agit d'un dégradé linéaire dont les valeurs de couleur sont # 555555 et # 000000, puis créez un dégradé comme l'image.
Parce que Blend ne prend pas en charge certaines fonctionnalités de Photoshop telles que les dégradés et les traits, nous devons pixelliser tous les calques avec de tels effets. Pour ce faire, sélectionnez le calque "header_bg" et cliquez dessus avec le bouton droit de la souris, puis choisissez "Convertir en objet intelligent", puis cliquez à nouveau avec le bouton droit de la souris et choisissez Rasterize Layer. Répétez ces étapes pour les calques "T ranslator", "T" et le slogan.
Comme nous couvrons le processus de création d'une application de bout en bout, nous allons discuter du processus de création de l'icône de l'application..
Créez un nouveau fichier Photoshop de 430 x 330 pixels en appuyant sur CTRL + N, puis créez un nouveau calque et nommez-le "bordure". Créez une sélection de 247 x 242 pixels, lissez la sélection en cliquant sur Sélectionnez> Modifier> Lisser et tapez 30. Cliquez ensuite sur Sélectionner> Redéfinir les bords avec un lissage de 20 et un contrat / une extension de + 100%..
Ensuite, créez un dégradé comme dans l'image, puis cliquez sur Sélectionner> Modifier> Contrat et tapez 20, puis appuyez sur la touche Suppr. Double-cliquez sur le calque et marquez Ombre portée avec une opacité de 54%. Créez un nouveau calque et nommez-le "à l'intérieur", puis faites une sélection à l'intérieur du cadre et créez un dégradé similaire à ce que vous voyez dans l'image. Double-cliquez sur le calque et faites un trait de 2px. Maintenant, cliquez sur l'outil Type horizontal et écrivez "Traducteur" avec le type de police ChunkFive et une taille de 24 pt. En outre, tapez "T" avec la même police mais avec une taille de 110 pt.
Vous n'avez pas besoin de convertir votre icône au format .ico, il vous suffit d'enregistrer votre icône au format .png au format 280 x 280 pixels, 48 x 48 pixels, 32 x 32 pixels et 16 x 16 pixels. Visual Studio fera le reste.!
Pour commencer à mettre en œuvre le traducteur, vous devez vous assurer que vous avez installé les fonctionnalités de développement Web lors de l'installation de Visual Studio. Ensuite, vous devrez télécharger et configurer les outils Silverlight 4 que vous pouvez obtenir à l’adresse http://bit.ly/Silverlight4tools et Silverlight 4 Developer Runtime, que vous pouvez obtenir ici..
Une fois l'interface créée et prête à être utilisée dans Blend, nous allons dans Visual Studio et créer un prototype pour le projet afin de démarrer notre processus de mise en œuvre. Lancez votre Visual Studio, cliquez sur Fichier> Nouveau> Projet et choisissez Silverlight, puis choisissez Silverlight Application. Cliquez sur OK pour la fenêtre suivante.
Cliquez sur Projet> Ajouter une référence de service et collez l'URL du service http://api.microsofttranslator.com/V1/SOAP.svc avec Namespace en tant que TranslatorService. Pour utiliser le service Web Bing Translator, vous aurez besoin d'un identifiant AppID. Allez donc sur http://www.bing.com/developer/appids.aspx?FORM=PMPD et créez un nouveau AppID pour votre traducteur..
Comme nous l'avons mentionné précédemment, l'application sera de 640 x 468px, nous devons donc la redimensionner.
Maintenant, cliquez Affichage> Boîte à outils (ou appuyez sur CTRL + W + X) pour faire apparaître le menu Boîte à outils. Glissez et déposez "bouton" dans le menu Propriétés, changez son nom et son texte en "Traduire". Répétez le processus et créez les boutons "Copier le texte", "Installer" et "".
Dans la Boîte à outils, faites glisser deux zones de texte, renommez-les, puis renommez-les en "srcTxt", qui gérera le texte source saisi par l'utilisateur, et "destTxt", qui générera le texte traduit. Ensuite, faites glisser deux autres listes déroulantes et renommez-les en "src", qui contiendra toutes les langues sources choisies par l'utilisateur, et "dest", qui est la langue vers laquelle l'utilisateur souhaite traduire. Après cela, réorganisez les éléments comme dans l'image.
Nous allons maintenant commencer à mettre en œuvre le programme. Double-cliquez sur le Traduire Ensuite, Visual Studio ouvrira le code source de l'application. Ajoutez l'espace de noms du service de traduction en collant ce code après le dernier espace de noms.
using Translator.TranslatorService;
Dans l'extrait de code ci-dessous, la première ligne crée une instance appelée "client" à partir de la classe LanguageServiceClient. La seconde crée une variable de type String appelée "AppId" pour faire référence à l'ID d'application requis par le service SOAP. Les deux dernières lignes correspondent aux groupes de résultats renvoyés par les appels SOAP. Elles se présentent sous la forme ObservableCollection..
TranslatorService.LanguageServiceClient client = nouvelle instance de TranslatorService.LanguageServiceClient (); // instance de LanguageServiceClient. string AppId = "6CE9C85A41571C050C379F60DA173D286384E0F2"; // cet AppId est créé pour mon nom System.Collections.ObjectModel.ObservableCollectionresult; // Les noms des langages de résultats renvoyés par le Searvice SOAP. System.Collections.ObjectModel.ObservableCollection langcodes; // Les codes de langue de résultat renvoyés par SOAP Searvice.
Silverlight appelle les services Web en mode asynchrone uniquement. Nous devons donc gérer les événements pour récupérer les valeurs. Nous devons obtenir les résultats dans ces définitions d'événement. Voici les délégués pour les événements que nous pouvons donner dans le Chargement de la page un événement. Nous devons aussi appeler les Combobox ' charge événements pour charger les langues.
InitializeComponent (); // Gestionnaire d'événements client.TranslateCompleted + = new EventHandler(client_TranslateCompleted); client.GetLanguageNamesCompleted + = new EventHandler (client_GetLanguageNamesCompleted); client.GetLanguagesCompleted + = new EventHandler (client_GetLanguagesCompleted); // Pour remplir les comboboxes et les codes de langue client.GetLanguageNamesAsync (AppId, this.Language.IetfLanguageTag); client.GetLanguagesAsync (AppId);
Comme nous l'avons déjà mentionné, nous devons gérer chaque événement car nous travaillons en mode asynchrone. Ceci est le premier événement qui a appelé client_TranslateCompleted () il gérera l'événement de traduction complet et s'il n'y a pas d'erreur dans le processus de renvoi de la traduction, il définit destTxt valeur de texte combobox avec la traduction résultante.
// Récupère le texte traduit protégé void client_TranslateCompleted (Expéditeur de l'objet, TranslateCompletedEventArgs e) if (e.Error == null) destTxt.Text = e.Result;
Cet événement, appelé client_GetLanguagesCompleted, récupère les langues possibles offertes par le service de traduction SOAP - mais sous une forme de code compréhensible pour le service - et les définit dans la chaîne langcodes. Ceci est défini après vérification des erreurs.
// Get Languages protected void client_GetLanguagesCompleted (expéditeur d'objet, GetLanguagesCompletedEventArgs e) if (e.Error == null) langcodes = e.Result;
Cet événement reçoit le nom de chaque langue. Pour clarifier, le code pour la langue anglaise est "en" et le nom, bien sûr, est "anglais". S'il n'y a pas d'erreur lors de l'obtention des noms de langue, il définit la chaîne "résultats" avec ces noms de langue. Ensuite, il définit les deux comboboxes avec les noms de langue.
// Remplir les comboboxes protégées void client_GetLanguageNamesCompleted (Expéditeur d'objet, GetLanguageNamesCompletedEventArgs e) if (e.Error == null) results = e.Result; this.src.ItemsSource = results; this.dest.ItemsSource = results;
Nous allons maintenant mettre en œuvre la dernière chose pour atteindre notre objectif. Cette fonction a pour fonction de démarrer le processus de traduction. Il vérifie les deux éléments sélectionnés dans les listes déroulantes, s'assure qu'ils ne sont pas encore vides, puis appelle la fonction de traduction asynchrone et lui transmet les arguments neccesary. Ces arguments sont l’ID d’application et le texte source à traduire, ainsi que la langue de ce texte source et la langue du texte traduit souhaité..
Accentsconagua
void privé PerformTranslation () if (src.SelectedItem! = null && dest.SelectedItem! = null) client.TranslateAsync (AppId, srcTxt.Text, (langcodes [src.SelectedIndex] .ToString (.)), (langcodes [dest .SelectedIndex] .ToString ())); else MessageBox.Show ("Veuillez d'abord sélectionner les langues!"); Une fois le service de traduction mis en place, nous devons le faire fonctionner. Nous devons donc gérer le Traduire bouton clic événement C'est très simple, il suffit d'appeler le PerformTranslation () fonction pour commencer son travail. Pour ce faire, allez simplement en mode conception et double-cliquez sur le bouton Traduire.
// Traduire le bouton, cliquez sur le bouton void privé button1_Click (expéditeur de l'objet, RoutedEventArgs e) PerformTranslation ();
Le bouton Inverser effectue un échange simple des langues sélectionnées dans les listes déroulantes. Il crée une chaîne appelée tmp pour stocker les valeurs dans la liste déroulante source quand il prend la valeur de la liste déroulante de destination, puis place sa valeur dans la liste déroulante de destination.
void privé Invert_Click (expéditeur d'objet, RoutedEventArgs e) if (src.SelectedItem! = null && dest.SelectedItem! = null) chaîne tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp;
Silverlight 4 est venu avec beaucoup de nouvelles fonctionnalités utiles. L’API Presse-papiers en est un exemple. Il fournit des méthodes permettant de récupérer du contenu pouvant être temporairement conservé dans le "Presse-papiers" de la machine et manipulé si nécessaire..
void privé CopyText_Click (expéditeur d'objet, RoutedEventArgs e) Clipboard.SetText (destTxt.Text);
Une autre nouvelle fonctionnalité de Silverlight 4 est la possibilité d’exécuter des applications Silverlight hors du navigateur. En effet, le CLR (.NET Common Runtime) permet désormais d’exécuter le même code compilé sur le bureau et Silverlight sans modification. Cette fonctionnalité peut être implémentée en cliquant sur Projet> Propriétés (Nom de l'application) alors le menu dans l'image apparaîtra. Cliquez sur Activer l'application en cours d'exécution à partir du navigateur.
Vous pouvez maintenant accéder à cette fonctionnalité en cliquant avec le bouton droit de la souris sur l'application. tu trouveras Installer cette application. Cependant, nous voulons ajouter un bouton pour gérer cette fonctionnalité afin que nous puissions faire un installer button et voici le code pour son événement click:
void privé install_Click (expéditeur de l'objet, RoutedEventArgs e) if (! Application.Current.IsRunningOutOfBrowser) // demande si l'application n'est pas installée Application.Current.Install (); // installer l'application
Maintenant, si vous appuyez sur CTRL + F5 pour générer l'application, celle-ci sera créée mais un message d'avertissement apparaîtra. Donc, pour déboguer votre application, cliquez avec le bouton droit sur le service Web dans l'Explorateur de solutions, qui est Traducteur.Web, puis clique Debug> Démarrer une nouvelle instance. Testez votre application.
Lorsque nous aurons fini de mettre en œuvre notre application, nous commencerons à mettre en place notre interface. Ouvrez Blend et un écran de démarrage apparaîtra. Choisir Projet ouvert à partir de celui-ci, accédez aux fichiers du projet et ouvrez le fichier Solution appelé "Translator.sln"..
Dans l'onglet Projet, double-cliquez sur MainPage.xaml puis cliquez sur Fichier> Importer un fichier Adobe Photoshop puis accédez à notre fichier PSD et ouvrez-le.
Toutes nos images seront importées dans notre fichier de projet mais se trouveront au-dessus de nos boutons et de nos boîtes. Dans l'onglet Objets et chronologie, cliquez avec le bouton droit de la souris sur PSD_Source et choisir Commande> Envoyer à l'arrière.
Blend fournit une fonctionnalité vraiment utile; la possibilité de personnaliser n’importe quel élément de l’interface utilisateur. Pour ce faire, sélectionnez une zone de texte et cliquez dessus avec le bouton droit, puis choisissez Modifier le modèle> Modifier une copie, marque S'applique à tous, puis cliquez sur OK.
Du Objets et chronologie onglet, accédez à contentElement comme dans l'image. À partir de l'onglet Propriétés, changez la couleur d'arrière-plan comme pour l'image. Nous sommes maintenant en train d’éditer dans la zone de texte; pour revenir à l'espace de travail, cliquez sur srcTxt comme indiqué dans l'image. Maintenant, sélectionnez les deux zones de texte et changez la couleur de premier plan en A3A3A3, puis allez dans le menu Propriétés, faites défiler jusqu'à l'onglet Texte et remplacez la police par Franklin Gothic Medium et par 16pt.
Faites un clic droit sur un bouton, puis choisissez Modifier le modèle> Modifier une copie et marque S'applique à tous. Puis naviguez vers FondGradient dans l'onglet Objet et chronologie. Dans les propriétés, modifiez la couleur de remplissage en dégradé, comme dans l'image de l'étape 29..
Ensuite, accédez à Arrière-plan dans le Objet et chronologie dans l'onglet Propriétés, modifiez la valeur de la couleur d'arrière-plan en # 494949.
Cliquez avec le bouton droit sur une liste déroulante, puis choisissez Modifier le modèle> Modifier une copie et marque S'applique à tous, puis faites un clic droit sur DropDownToggle et choisissez Modifier le modèle> Modifier le courant.
Cliquer sur FondGradient Dans l'onglet Propriétés, modifiez la couleur de remplissage en dégradé. Revenez en arrière en cliquant sur DropDownToggle dans le menu supérieur, puis accédez à BtnArrow, qui est à l'intérieur de DropDownToggle. Dans l'onglet Propriétés, changez la couleur de remplissage en # 8D8D8D. Maintenant, allez à [TextBlock] qui est à l'intérieur de ContentPresenter et changez la couleur de remplissage en # 8D8D8D.
Ensuite, allez sur PopupBorder et changez sa couleur de fond en # FF1D1D1D. Dans l'onglet Etats, cliquez sur MouseOver, allez à Objets et chronologie, Cliquez sur BackgroundGradient et changez la couleur du dégradé en ce qui vous convient.
Pour modifier votre code source à l'aide de Visual Studio, cliquez simplement sur Outils> Options> Projet puis marque Utilisez Microsoft Visual Studio…
Du Objet et chronologie onglet clic droit Translate_btn puis clique Faire en contrôle et choisissez le bouton. Nommez-le "Traduire".
Dans l'onglet États, cliquez sur "Normal", puis dans le menu Propriétés, modifiez la valeur d'opacité à 50%. De nouveau, dans l'onglet États, cliquez sur "Passer la souris" et réglez l'opacité sur 70%. Enfin, cliquez sur Non ciblé dans l’onglet États et réglez l’opacité sur 30%..
Supprimez maintenant l’ancien bouton Traduire et accédez aux événements en cliquant dessus. Dans la zone de clic, tapez Traduire_Cliquer.
Dans l'onglet Projet, cliquez avec le bouton droit de la souris sur src_blend_images et choisir Ajouter un article existant Ajoutez ensuite toutes les icônes PNG. Après cela, double-cliquez sur l'événement de n'importe quel bouton que Visual Studio doit charger. Cliquez sur Projet> Propriétés du traducteur puis clique Paramètres hors navigateur et ajouter les icônes de src_blend_images.
Dans ce tutoriel, nous avons couvert l’ensemble du processus de création d’une application de traduction. Nous avons également examiné le service de traduction Microsoft Bing et nous en avons fait usage. J'espère que c'était utile et agréable.
