Share
Ieri, Carlos ha esaminato l'API AJAX di Google e Flash. Oggi stiamo andando a creare un'applicazione Silverlight Translator utilizzando il servizio Microsoft Translator. Inizieremo con il design dell'interfaccia (in Photoshop) e passeremo all'implementazione usando Silverlight 4 (incluse le sue funzionalità più recenti) come framework di applicazioni web.
Useremo la fusione di Photoshop e Expression come strumenti di progettazione dell'interfaccia utente e Visual Studio come ambiente di sviluppo.
Ecco una breve analisi di ciò che è coperto in questo tutorial:
Nota: Per una solida base nel lavorare con Silverlight, dai un'occhiata a An Introduzione a Microsoft Silverlight 4 di Mike Taulty.
Silverlight è un plug-in per browser che estende l'esperienza di sviluppo web ben oltre i limiti di semplici HTML e JavaScript. È molto simile a Adobe Flash. Nelle applicazioni Silverlight, le interfacce utente sono dichiarate in XAML (Extensible Application Markup Language) e programmate utilizzando un sottoinsieme di .NET Framework. È quindi possibile utilizzare qualsiasi linguaggio .NET come C # o VB.NET per avviare l'implementazione dei programmi.
Poiché Silverlight utilizza XAML per la creazione di interfacce utente, è possibile utilizzare Expression Blend per progettare l'interfaccia dell'applicazione. Questo perché Blend è uno strumento di progettazione dell'interfaccia utente sviluppato per la creazione di interfacce grafiche per applicazioni Web e desktop. Si chiama Blend perché questo miscele le caratteristiche di questi due tipi di applicazioni.
Il design è un piano per organizzare gli elementi in modo tale da raggiungere uno scopo particolare
- Charles Eames
Poiché l'interfaccia è molto importante per qualsiasi applicazione, tratteremo i passaggi dettagliati della creazione della nostra interfaccia.
Prima di iniziare a progettare la nostra interfaccia avremo bisogno di guardare l'effetto visivo overal. Ho realizzato questa combinazione di colori:
Il primo passo è impostare il tuo documento. Stiamo progettando un'interfaccia per un'applicazione Translator in modo che non sia troppo grande. Andremo per 640 x 468 px.
Accendi Photoshop e premi i tasti di scelta rapida CTRL + N per creare un nuovo documento. Scegli 640 x 468 px come dimensioni, quindi fai clic su OK.
Crea un nuovo livello e rinominalo "header_bg", quindi crea una selezione di 640 x 44 pixel (o qualsiasi cosa tu ritenga sia buona) nella testa dell'immagine usando lo strumento Selezione rettangolo.
Quindi scegli lo strumento Sfumatura e assicurati che sia un gradiente lineare come nell'immagine sopra.
Scegli lo strumento Tipo orizzontale e scrivi "T ranslator" con queste impostazioni:
Quindi seleziona lo strumento "Aggiungi uno stile di livello" dal menu Livelli e fai clic sull'opzione Sovrapposizione sfumatura. Cambia il gradiente come nell'immagine. Quindi usa lo strumento Tipo orizzontale e scrivi "T" e come nell'ultimo passaggio cambia l'opzione Sovrapposizione sfumatura e sostituiscilo nella posizione corretta come nell'immagine.
Utilizza nuovamente lo strumento testo e digita "traduce per te", quindi modifica il nome del livello in "slogan". Successivamente, seleziona tutti i livelli che hai creato e premi CTRL + G per raggrupparli, rinominando il gruppo in "intestazione".
Ecco lo sfondo utilizzato nell'applicazione. Fai clic con il tasto destro del mouse e "Salva con nome" per poterlo utilizzare nella tua app.
Scegli lo strumento Selezione rettangolo e crea un rettangolo nella parte inferiore dell'immagine con un'altezza di 52 px. Quindi scegli lo strumento Gradiente e, con le stesse impostazioni con cui abbiamo creato l'intestazione, crea una sfumatura come quella che vedi nell'immagine. Ho inserito alcune immagini come il logo Activetuts + e le immagini nelle mie; li puoi trovare nel download sorgente.
Assicurati di aver creato un nuovo gruppo di tutti questi livelli e chiamalo "piè di pagina".
Nei seguenti passaggi progetteremo gli elementi dell'interfaccia utente, come pulsanti e caselle di testo.
Inizieremo con i nostri pulsanti. Crea un nuovo livello, chiamalo "Copia text_bg" e fai una selezione di 800 x 24 px. Quindi fare clic Seleziona> Modifica> Smussa e imposta il raggio del campione su 3px. Ora seleziona lo strumento sfumatura e con la stessa sfumatura dell'intestazione fai una sfumatura come quella nell'immagine:
Fai doppio clic sul livello e scegli "Tratto", quindi imposta il suo valore su ciò che vedi nell'immagine. Seleziona lo strumento Tipo orizzontale e scrivi "Copia testo" e posizionalo sopra il pulsante. Duplica il livello "Copia text_bg" trascinandolo e rilasciandolo sul nuovo pulsante del livello e digita "Installa", quindi posizionalo sopra il pulsante. Duplica nuovamente "Copy_text_bg" e rinominalo in "" che sta per invert lingue e premi CTRL + T per ridimensionarlo come vedi nell'immagine.
Crea un nuovo livello, seleziona lo strumento Selezione ellittica e crea un cerchio, quindi scegli lo strumento Sfumatura. Assicurati che sia un gradiente riflesso e crea una sfumatura come nell'immagine. Quindi fare clic Seleziona> Modifica> Contratto, imposta il valore su 2px e crea un nuovo livello. Quindi con lo strumento Pennello e il valore del colore di # 000000 rendere la selezione di colore scuro. Ora fai una selezione Ovale e scegli lo strumento Gradiente; assicurati che sia un gradiente lineare i cui valori di colore sono # 555555 e # 000000, quindi crea una sfumatura come l'immagine.
Poiché Blend non supporta alcune funzioni di Photoshop come gradienti e tratti, è necessario rasterizzare tutti i livelli con tali effetti. Per farlo seleziona il livello "header_bg" e fai clic destro su di esso, quindi seleziona "Converti in oggetto avanzato", quindi fai nuovamente clic con il pulsante destro del mouse e scegli Rasterizza livello. Ripeti questi passaggi sui livelli "T redattore", "T" e sullo slogan.
Mentre stiamo coprendo il processo di creazione di un'applicazione dall'inizio alla fine discuteremo il processo di creazione dell'icona dell'applicazione.
Crea un nuovo file Photoshop di 430 x 330 px premendo CTRL + N, quindi crea un nuovo livello e chiamalo "bordo". Creare una selezione di 247 x 242 px, attenuare la selezione facendo clic Seleziona> Modifica> Smussa e digitare 30. Quindi fare clic su Seleziona> Redefine Edge with Smooth of 20 e Contract / Expand di + 100%.
Quindi, crea una sfumatura come nell'immagine, quindi fai clic su Seleziona> Modifica> Contratto e digita 20, quindi premi Elimina. Fare doppio clic sul livello e selezionare Ombra esterna con un'opacità del 54%. Crea un nuovo livello e chiamalo "dentro", quindi crea una selezione all'interno del bordo e crea un gradiente simile a quello che vedi nell'immagine. Fai doppio clic sul livello e fai un colpo di 2 pixel. Ora fai clic sullo strumento Tipo orizzontale e scrivi "Traduttore" con il tipo di carattere ChunkFive e la dimensione di 24pt. Inoltre, digita "T" con lo stesso carattere ma con una dimensione di 110pt.
Non è necessario convertire l'icona in formato .ico, basta salvare l'icona in formato .png con dimensioni di 280 x 280 px, 48 x 48 px, 32 x 32 px e 16 x 16 px e Visual Studio farà il resto!
Per iniziare a implementare il Traduttore devi assicurarti di aver installato le funzionalità per gli sviluppatori Web quando hai installato Visual Studio. Quindi dovrai scaricare e configurare gli strumenti di Silverlight 4 che puoi ottenere da http://bit.ly/Silverlight4tools e Silverlight 4 Developer Runtime, che puoi ottenere qui.
Dopo aver creato l'interfaccia e averla pronta per l'uso in Blend, visiteremo Visual Studio e realizzeremo un prototipo per il progetto per avviare il nostro processo di implementazione. Accendi il tuo Visual Studio, fai clic File> Nuovo> Progetto e scegliere Silverlight, quindi selezionare Applicazione Silverlight. Fare clic su OK per la finestra successiva.
Clic Progetto> Aggiungi riferimento servizio e incollare l'URL del servizio http://api.microsofttranslator.com/V1/SOAP.svc con Namespace come TranslatorService. Per utilizzare il servizio Web di Bing Translator è necessario un AppID. Quindi vai su http://www.bing.com/developer/appids.aspx?FORM=PMPD e crea un nuovo AppID per il tuo traduttore.
Come accennato in precedenza, l'applicazione sarà 640 x 468 px, quindi è necessario ridimensionarla.
Ora fai clic Visualizza> Strumenti (o premere CTRL + W + X) per far apparire il menu degli strumenti. Trascina e rilascia il "pulsante" dal menu Proprietà, cambia il suo nome e il testo in "Traduci". Ripeti il processo e crea i pulsanti "Copia testo", "installa" e "".
Dalla Casella degli strumenti trascinare due caselle di testo e quindi rinominarle in "srcTxt", che gestirà il testo di origine che verrà inserito dal nostro utente e "destTxt", che genererà il testo tradotto. Quindi, trascina altre due caselle combinate e rinominale in "src", che avrà tutte le lingue di origine da cui l'utente può scegliere, e "dest", che è la lingua che l'utente vuole tradurre. Successivamente, riorganizza gli elementi come nell'immagine.
Ora inizieremo ad implementare il programma. Fare doppio clic sul Tradurre quindi Visual Studio aprirà il codice sorgente dell'applicazione. Aggiungere lo spazio dei nomi del servizio traduttore incollando questo codice dopo l'ultimo spazio dei nomi.
utilizzando Translator.TranslatorService;
Nello snippet seguente, la prima riga crea un'istanza denominata "client" dalla classe LanguageServiceClient. Il secondo crea una variabile di tipo String chiamata "AppId" per fare riferimento all'ID dell'applicazione richiesta dal servizio SOAP. Le ultime due righe sono i gruppi di risultati restituiti dalle chiamate SOAP e sono nella forma di ObservableCollection.
TranslatorService.LanguageServiceClient client = new TranslatorService.LanguageServiceClient (); // istanza di LanguageServiceClient. string AppId = "6CE9C85A41571C050C379F60DA173D286384E0F2"; // Questo AppId è stato creato per il mio nome System.Collections.ObjectModel.ObservableCollectionrisultati; // I nomi delle lingue dei risultati restituiti da SOAP Searvice. System.Collections.ObjectModel.ObservableCollection langcodes; // I codici delle lingue dei risultati restituiti da SOAP Searvice.
Silverlight chiama solo i servizi Web in modalità asincrona. Quindi dobbiamo gestire gli eventi per recuperare i valori. Dobbiamo ottenere i risultati all'interno di quelle definizioni di eventi. Di seguito sono i delegati per eventi che possiamo dare nel Caricamento della pagina evento. Inoltre dobbiamo chiamare i Combobox ' caricare eventi per caricare le lingue.
InitializeComponent (); // Gestore di eventi client.TranslateCompleted + = new EventHandler(Client_TranslateCompleted); client.GetLanguageNamesCompleted + = new EventHandler (Client_GetLanguageNamesCompleted); client.GetLanguagesCompleted + = new EventHandler (Client_GetLanguagesCompleted); // Per riempire le caselle combinate e i codici lingua client.GetLanguageNamesAsync (AppId, this.Language.IetfLanguageTag); client.GetLanguagesAsync (AppId);
Come accennato in precedenza, dobbiamo gestire ogni evento mentre stiamo lavorando in modalità asincrona. Questo è il primo evento che ha chiamato client_TranslateCompleted () gestirà l'evento di traduzione completo e se non ci sono errori nel processo di restituzione della traduzione imposta il destTxt valore di testo combobox con la traduzione risultante.
// Ottieni il testo tradotto protetto void client_TranslateCompleted (Object sender, TranslateCompletedEventArgs e) if (e.Error == null) destTxt.Text = e.Result;
Questo evento, chiamato client_GetLanguagesCompleted, recupera le lingue possibili che il servizio di traduzione SOAP offre, ma in una forma di codice comprensibile per il servizio e le imposta sulla stringa langcodes. Questo viene impostato dopo aver controllato gli errori.
// Get Languages protected void client_GetLanguagesCompleted (mittente dell'oggetto, GetLanguagesCompletedEventArgs e) if (e.Error == null) langcodes = e.Result;
Questo evento prende il nome di ogni lingua. Per chiarire, il codice per la lingua inglese è "en" e il nome, ovviamente, è "inglese". Se non ci sono errori durante l'acquisizione dei nomi di lingua, imposta la stringa "risultati" con questi nomi di lingua. Quindi imposta le due caselle combinate con i nomi delle lingue.
// Riempi le caselle combo protected client_GetLanguageNamesCompleted (Object sender, GetLanguageNamesCompletedEventArgs e) if (e.Error == null) results = e.Result; this.src.ItemsSource = results; this.dest.ItemsSource = results;
Ora implementeremo l'ultima cosa per raggiungere il nostro obiettivo. L'operazione di questa funzione è di avviare il processo di traduzione. Controlla i due elementi selezionati nelle caselle combinate, si assicura che non siano ancora vuoti, quindi chiama la funzione di traduzione asincrona e passa gli argomenti necessari. Questi argomenti sono l'ID dell'applicazione e il testo sorgente che devono essere tradotti, oltre alla lingua di questo testo sorgente e della lingua del testo tradotto desiderato.
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 ("Seleziona prima le lingue!"); Dato che abbiamo finito di implementare il servizio di traduzione, dobbiamo farlo funzionare. Quindi dobbiamo gestire il Tradurre evento clic sul pulsante. È davvero semplice, basta chiamare il PerformTranslation () funzione per iniziare il suo lavoro. Per farlo basta andare alla vista disegno e fare doppio clic sul pulsante Traduci.
// Traduci sul pulsante clic private void button1_Click (oggetto mittente, RoutedEventArgs e) PerformTranslation ();
Il pulsante Inverti esegue un semplice scambio delle lingue selezionate nelle caselle combinate. Crea una stringa chiamata tmp per memorizzare i valori nella combobox di origine quando prende il valore della casella combinata di destinazione, quindi inserisce il suo valore nella casella combinata di destinazione.
private void Invert_Click (oggetto mittente, RoutedEventArgs e) if (src.SelectedItem! = null && dest.SelectedItem! = null) string tmp = src.SelectedItem.ToString (); src.SelectedItem = dest.SelectedItem.ToString (); dest.SelectedItem = tmp;
Silverlight 4 è venuto con un sacco di nuove funzionalità utili. Uno di questi esempi è l'API Clipboard che fornisce i metodi per afferrare il contenuto che può essere trattenuto temporaneamente negli "appunti" della macchina e manipolato se necessario.
privato vuoto CopyText_Click (oggetto mittente, RoutedEventArgs e) Clipboard.SetText (destTxt.Text);
Un'altra nuova funzionalità di Silverlight 4 è la possibilità di eseguire applicazioni Silverlight Out-of-Browser. Questo perché .NET Common Runtime (CLR) ora consente di eseguire lo stesso codice compilato sul desktop e Silverlight senza modifiche. Questa funzionalità può essere implementata facendo clic Progetto> (Nome dell'applicazione) Proprietà quindi apparirà il menu nell'immagine. Clic Abilita l'esecuzione dell'applicazione fuori dal browser.
Puoi accedere a questa funzionalità ora facendo clic con il pulsante destro del mouse sull'app; troverai Installa questa applicazione. Tuttavia, vogliamo aggiungere un pulsante per gestire questa funzione, quindi faremo un installare pulsante e il seguente è il codice per il suo evento click:
private void install_Click (mittente dell'oggetto, RoutedEventArgs e) if (! Application.Current.IsRunningOutOfBrowser) // chiede se l'applicazione non è installata Application.Current.Install (); // installa l'applicazione
Ora se premi CTRL + F5 per creare l'applicazione, questa verrà creata ma verrà visualizzato un messaggio di avviso. Quindi, per eseguire il debug dell'applicazione, fare clic con il pulsante destro del mouse sul servizio Web in Esplora soluzioni, ovvero Translator.Web, quindi fare clic Debug> Avvia nuova istanza. Metti alla prova la tua domanda.
Quando abbiamo finito di implementare la nostra applicazione, inizieremo ad implementare la nostra interfaccia. Apri Blend e apparirà una schermata iniziale. Scegliere Progetto aperto da esso, quindi accedere ai file di progetto e aprire il file Solution che si chiama "Translator.sln".
Dalla scheda Progetto fai doppio clic su MainPage.xaml, quindi fai clic su File> Importa file Adobe Photoshop quindi accedi al nostro file PSD e aprilo.
Tutte le nostre immagini verranno importate nel nostro file di progetto, ma saranno in cima ai nostri pulsanti e caselle. Nella scheda Oggetti e sequenza temporale, fare clic con il pulsante destro del mouse su PSD_Source e scegliere Ordine> Invia a Indietro.
Blend fornisce una funzionalità davvero utile; la possibilità di personalizzare qualsiasi elemento dell'interfaccia utente come si desidera. Per farlo, seleziona una casella di testo e fai clic con il tasto destro del mouse, quindi scegli Modifica modello> Modifica una copia, marchio Applicare a tutto, quindi fare clic su OK.
Dal Oggetti e cronologia scheda, vai a ContentElement come nell'immagine. Ora dalla scheda Proprietà cambia il colore di sfondo come l'immagine. Ora stiamo modificando nella casella di testo; per tornare allo spazio di lavoro fare clic su srcTxt come mostrato nell'immagine. Ora seleziona le due caselle di testo e cambia il colore di primo piano in # A3A3A3, quindi vai al menu Proprietà, scorri fino alla scheda Testo e cambia il carattere in Franklin Gothic Medium e riduci a 16pt.
Fai clic con il pulsante destro del mouse su qualsiasi pulsante, quindi scegli Modifica modello> Modifica una copia e segnare Applicare a tutto. Quindi vai a BackgroundGradient nella scheda Oggetto e Timeline. Nelle proprietà, cambia il colore di riempimento in sfumatura, ad esempio nell'immagine del passaggio 29.
Quindi, passa a Sfondo in Oggetto e cronologia scheda e nella scheda Proprietà modificare il valore del colore di sfondo su # 494949.
Fai clic con il pulsante destro del mouse su una casella combinata, quindi scegli Modifica modello> Modifica una copia e segnare Applicare a tutto, quindi fai clic con il pulsante destro del mouse su DropDownToggle e scegli Modifica modello> Modifica corrente.
Clicca su BackgroundGradient e dalla scheda Proprietà cambia il colore di riempimento in sfumatura. Torna indietro facendo clic su DropDownToggle dal menu in alto, quindi vai a BtnArrow, che si trova all'interno di DropDownToggle. Dalla scheda Proprietà, modificare il colore di riempimento su # 8D8D8D. Ora vai a [TextBlock] che si trova in ContentPresenter e cambia il colore di riempimento in # 8D8D8D.
Quindi, vai su PopupBorder e cambia il suo Colore di sfondo in # FF1D1D1D. Dalla scheda Stati fai clic su MouseOver, vai a Oggetti e cronologia, fai clic su BackgroundGradient e modifica il colore della sfumatura in base a ciò che ritieni opportuno.
Per modificare il codice sorgente usando Visual Studio, basta fare clic Strumenti> Opzioni> Progetto quindi segna Usa Microsoft Visual Studio ...
Dal Oggetto e cronologia scheda tasto destro del mouse Translate_btn quindi fare clic Rendi il controllo e scegli il pulsante. Chiamalo "Traduci".
Dalla scheda Stati fare clic su "Normale", quindi dal menu Proprietà modificare il valore Opacità al 50%. Di nuovo, dalla scheda Stati, clicca su "Mouse over" e modifica l'opacità al 70%. Infine, fai clic su Unfocused dalla scheda Stati e modifica l'opacità al 30%.
Ora elimina il vecchio pulsante Traduci e vai agli eventi facendo clic su di esso. Nel tipo di casella di selezione Translate_Click.
Nella scheda Progetto, fai clic con il pulsante destro del mouse su src_blend_images e scegliere Aggiungi elemento esistente quindi aggiungi tutte le icone PNG. Dopodiché fai doppio clic sull'evento di qualsiasi pulsante per caricare Visual Studio. Clic Progetto> Proprietà del traduttore quindi fare clic Impostazioni fuori dal browser e aggiungi le icone da src_blend_images.
In questo tutorial abbiamo trattato l'intero processo di creazione di un'applicazione Translator. Abbiamo anche dato un'occhiata a Microsoft Bing Translator Service e ne abbiamo fatto uso. Spero sia stato utile e divertente.
