Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1907, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

Sviluppare Metro-style app per Windows 8 con Visual Basic - seconda parte

Nel precedente post abbiamo dato qualche cenno introduttivo allo sviluppo di app Metro per Windows 8 e a WinRT.

In questo post parliamo invece di Visual Studio 11 Express beta per Windows 8 e iniziamo a prendere confidenza con alcuni strumenti e passaggi dello sviluppo. Si dà chiaramente per scontato che una delle edizioni di Visual Studio 11 richieste siano state installate e che, ovviamente, lo abbiate fatto su una macchina con Windows 8 Consumer Preview.

I template di progetto

Quando avviate Visual Studio 11 e create un nuovo progetto, la finestra New Project offre alcuni template a seconda del linguaggio che scegliete. Innanzitutto potete osservare come sia possibile sviluppare per Metro con JavaScript e C++. Mentre nel secondo caso utilizzeremo ancora XAML per il layout, nel primo caso utilizzeremo HTML. Ma comunque non ci interessa, perché noi vogliamo parlare di Visual Basic. Quindi lo scenario che avremo noi sarà il seguente:

Descriviamo ora ciascun template:

  • Blank Application: permette di creare un'app Metro da zero, senza alcuna ossatura predefinita, senza alcun layout di partenza e senza controlli o dati di esempio. Questo sarà probabilmente il template che sceglierete più avanti, quando avrete acquisito dimestichezza.
  • Grid Application: offre un'infrastruttura multi-pagina, che permette di navigare tra gruppi di elementi. Genera una pagina principale con una serie di elementi; al touch su uno di questi, si va su un'altra pagina che ne mostra i dettagli. Al touch su un dettaglio, si arriva a un'altra pagina contenente informazioni complete sul dettaglio. E' forse il template un po' più complesso.
  • Split Application: offre un'infrastruttura predefinita a due pagine. La prima pagina mostra un elenco di elementi; al touch su uno di questi si va su una seconda pagina in cui vengono elencati i dettagli per gli elementi che sono comunque elencati ancora
  • Class Library: progetto che permette di creare una libreria di classi per app Metro o comunque per WinRT
  • Unit Test Library: progetto che permette di facilitare la creazione di unit test

Decidiamo di usare il template Split Application che ci permetterà di prendere confidenza con facilità con l'ambiente Metro. Scelto il template e il nome del progetto, facciamo click su OK nella finestra New Project.

L'IDE per Metro

Quando il progetto viene creato, ci accorgeremo che l'ambiente di lavoro è tendenzialmente familiare. Come potete vedere nella seguente figura da un lato appare l'editor di codice, dall'altro la consueta Solution Explorer (pur se con le novità della nuova versione di Visual Studio):

Qualche flash a proposito di ciò che vediamo in Solution Explorer:

  • Ci sono due pagine pre-costruite, SplitPage.xaml che è la pagina di avvio e ItemsPage.xaml che implementa la visualizzazione a dettaglio degli elementi mostrati nella pagina di tipo Split Page.
  • Ci sono dei dati di esempio predefiniti nella cartella DataModel
  • Ci sono una serie di converter e di stili predefiniti all'interno della cartella Common
  • Ci sono una serie di icone/immagini nella cartella Assets
  • Il file Package.appxmanifest contiene i metadati dell'app e, al doppio click, permette di accedere a uno specifico designer che vedremo meglio nel prossimo post
  • I file App.xaml e App.xaml.vb ci permettono di definire risorse e codice da condividere con l'intera applicazione, più codice di startup e gestione del ciclo di vita dell'app stessa. Esattamente come avviene in WPF, Silverlight e Silverlight per Windows Phone. Bello, no?

Ora facciamo doppio click su uno dei due file .xaml e ci accorgeremo che, se abbiamo pregressa esperienza di WPF & Silverlight, il designer dell'interfaccia ci risulterà assolutamente familiare:

Come detto non tutto è uguale allo XAML delle altre tecnologie, perché ovviamente lo XAML in Metro si riferisce pur sempre a controlli diversi. In linea di massima ci sono tantissime analogie che permetteranno di avere familiarità immediata, più differenze circostanziate.

F5: per la serie, come ti testo e debuggo l'App

Come in qualunque altro settore della programmazione con Visual Studio, per avviare il debug dell'applicazione si preme F5 o si usano i comandi già noti. Un'importantissima differenza specifica per Windows 8 e Metro è la disponibilità di un simulatore di tablet che permetterà di fare il test dell'app anche in condizioni diverse da quelle del pc. Il simulatore del device si presenta come in figura:

Poiché so che siete curiosi , lascio a voi scoprire l'utilizzo dei vari pulsanti sulla barra laterale. Sostanzialmente si avrà la possibilità di ruotare il simulatore, di assegnarne le impostazioni, di catturare screen-shot (fondamentale), e molto altro.

In sintesi è possibile testare e debuggare le app Metro:

  • sulla macchina locale
  • nel simulatore
  • su un device fisico remoto (in modo analogo a quello che si può fare con Windows Phone)

L'impostazione di default è la macchina locale, ma è sufficiente (e vi consiglio di farlo almeno per le prime volte) cambiare il target attraverso la combo box vicina al pulsante di avvio del debug, sulla toolbar. Se guardate la seconda figura di questo post potete osservare la combo vicino alla dicitura "Debug" e vedere come l'impostazione sia su Simulator.

In effetti se avviamo l'esecuzione dell'applicazione, ecco come questa si presenta nel simulatore:

Quindi la prima pagina del template da noi utilizzato contiene una serie di elementi. Toccando o cliccando uno di questi elementi, la navigazione va alla seconda pagina che invece mostra i dettagli:

E' chiaro che si tratta di dati di esempio, che andranno poi sostituiti con informazioni reali. Il tutto funziona sia con touch che con mouse; ovviamente, se avete un monitor touch screen potete godervi lo spettacolo in modo più realistico.

E l'app dov'è?

Quando avviamo il debug, l'app viene automaticamente installata sul sistema host. Potete trovarla quindi tra le app installate:

Ho dato un colpo di click destro sull'icona solo per dimostrare la piena interazione col sistema. Tre considerazioni:

  • Sebbene stiamo usando il simulatore per il debug, l'app verrà installata anche sulla macchina locale
  • La visione dell'icona di default ci deve far pensare che dovremo lavorare sulla parte di creatività dell'app
  • Continuando il punto precedente, avrete sicuramente notato lo splash screen di default che andrà poi cambiato con uno più adatto a rappresentare l'app stessa

Sempre a proposito di debug, non cambia la modalità con cui siamo abituati ad effettuarlo. Abbiamo quindi a disposizione la consueta strumentazione, breakpoint, ecc. ecc.

Conclusioni

Abbiamo quindi imparato a creare un progetto Visual Basic per Metro e ad eseguire il debug, scoprendo la comodità del simulatore. Abbiamo dato cenno agli elementi che compongono il progetto. Nei post successivi cominceremo ad approfondire codice, funzionalità, interazione con Windows 8.

Alessandro

Print | posted on venerdì 13 aprile 2012 21:32 | Filed Under [ Visual Basic UWP e Windows Store Apps Visual Studio 2012 ]

Powered by:
Powered By Subtext Powered By ASP.NET