Dal 21 ottobre sono disponibili i telefoni basati su Windows Phone 7, il nuovo sistema operativo per dispositivi mobili di Microsoft. Un mese prima, erano stati rilasciati anche gli strumenti di sviluppo inizialmente solo per Visual C# (quelli per VB erano in CTP e non potevano essere usati per pubblicare applicazioni sul Marketplace).

Finalmente ora sono disponibili i tool ufficiali per Windows Phone 7 per Visual Basic 2010, assieme alle ai progetti di prova e alle sample.

Se volete approfondire questi argomenti, potete andare sul forum italiano dedicato a Windows Phone 7.

In questo post (a cura di Alessandro Del Sole, della community Visual Basic Tips & Tricks) faremo quindi un’introduzione tecnica dei tool dal punto di vista dello sviluppatore Visual Basic.

Installazione dei tool

L’installazione è davvero molto semplice e veloce. Allo stato attuale gli strumenti di sviluppo installeranno, fra l’altro, gli specifici template di progetto per Visual Basic 2010 che verranno integrati in Visual Studio oltre all’emulatore di dispositivo e le librerie richieste. E’ possibile utilizzare i tool per VB per pubblicare le proprie applicazioni sul MarketPlace.

Prerequisiti:

Al momento ci sono alcuni vincoli:

  • Non c’è il supporto per XNA. Questo implica che con i tool per Visual Basic 2010 è possibile creare applicazioni “classiche” ma non giochi basati sul framework di XNA
  • Manca il supporto per Expression Blend 4 e Visual Studio Express per Windows Phone; se volete utilizzare questi due tool, dovrete ancora ricorrere a Visual C#. I tool per VB possono essere installati dentro una delle versioni “full” di Visual Studio, Professional, Premium o Ultimate, anche in versione trial.

Si tratta di limitazioni ovviamente temporanee sebbene non ci siano notizie ufficiali sul futuro supporto di questi strumenti per Visual Basic.

Metodologia di sviluppo

In modo completamente rivoluzionario rispetto alle precedenti versioni del sistema operativo, in Windows Phone 7 lo sviluppo si basa sulla tecnologia Microsoft Silverlight (in una versione riadattata al sistema che fa riferimento alla 3.0). L’aver progettato il sistema su Silverlight ha chiaramente molti vantaggi:

  • è possibile riutilizzare tutte le nostre precedenti conoscenze, con i dovuti accorgimenti, sullo sviluppo in WPF e Silverlight anche verso i dispositivi. Infatti anche in questo ambito l’interfaccia grafica viene definita tramite codice XAML mentre le azioni vengono definite tramite codice gestito, Visual Basic nel nostro caso
  • è possibile dare massimo risalto alle richieste/esigenze di multimedialità delle applicazioni
  • si può ricorrere al cloud in modo efficiente
  • grazie all’Isolated Storage tipico di Silverlight, si può evitare l’accesso indiscriminato (e quindi pericoloso) alle risorse di sistema

Iniziamo quindi a vedere come è possibile sviluppare applicazioni per Windows Phone 7 con Visual Basic 2010.

Progetti disponibili

Quando avviamo Visual Studio 2010, nella finestra New Project troveremo una nuova cartella di progetti per Visual Basic, denominata Silverlight For Windows Phone che si presenta come in figura:

DelSole_WP7VBRTW_1

La finalità di ciascun template può essere così riassunta:

  • Windows Phone Application: applicazione WP 7 di partenza, senza controlli di base
  • Windows Phone Data Bound Application: applicazione orientata ai dati, che sfrutta il pattern Model-View-ViewModel
  • Windows Phone Class Library: normale libreria di classi, specifica per WP 7
  • Windows Phone Panorama Application: applicazione che offre di default il nuovo controllo Panorama, che consente di estendere e scorrere l'interfaccia dell'applicazione oltre i limiti fisici della risoluzione del dispositivo
  • Windows Phone Pivot Application: applicazione che offre di default il controllo Pivot, per la visualizzazione di dati.

Vedremo quindi ora come creare una semplice applicazione per prendere confidenza con gli strumenti.

Creare applicazioni per Windows Phone 7 con VB 2010

Ipotizziamo di voler creare una prima, semplice applicazione che ci permetta di prendere confidenza con l’ambiente di sviluppo e come funziona la gestione dei controlli e degli eventi. Utilizziamo quindi il template primario, Windows Phone Application. Dopo alcuni secondi Visual Studio 2010 si presenta così:

DelSole_WP7VBRTW_2

Si evidenziano quindi le seguenti caratteristiche:

  • Il designer offre una rappresentazione visuale del dispositivo, totalmente interattiva nel senso che è possibile trascinare i controlli dalla toolbox (visible sulla sinistra) nel modo consueto ed è possibile posizionarli o ridimensionarli a seconda delle proprie esigenze.
  • Sul lato destro è disponibile l’editor di codice XAML, che si presenta essenzialmente in modo analogo a quanto già conosciamo per le applicazioni Silverlight classiche
  • In Solution Explorer si notano alcuni elementi di default, come la pagina iniziale (MainPage.xaml), il file della classe Application (App.xaml), un’immagine che costituisce l’icona dell’applicazione (ApplicationIcon.png), lo sfondo (Background.png) e un’immagine da usare come splash screen (SplashScreen.png). E’ importante sapere che la dimensione delle specifiche immagini è stabilita dalle linee guida per lo sviluppo delle applicazioni, disponibile qui.

Ad esempio potremmo modificare il seguente codice:

        <!--TitlePanel contains the name of the application and page title-->
         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
             <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style='{StaticResource PhoneTextNormalStyle}'/>
             <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style='{StaticResource PhoneTextTitle1Style}'/>
         </StackPanel>

Con questo, che offre dei titoli più specifici:

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
             <TextBlock x:Name="ApplicationTitle" Text="My first app with Visual Basic" Style='{StaticResource PhoneTextNormalStyle}'/>
             <TextBlock x:Name="PageTitle" Text="Test del Click" Margin="9,-7,0,0" Style='{StaticResource PhoneTextTitle1Style}'/>
         </StackPanel>

A livello di code-behind, invece, stavolta troviamo il codice Visual Basic:

DelSole_WP7VBRTW3

Tendenzialmente lo sviluppo di applicazioni segue le procedure classiche, sebbene ci siano delle accortezze molto importanti di cui tener conto come il tombstoning. Ad esempio è possibile trascinare controlli dalla toolbox e gestirne gli eventi, come nell’esempio del seguente pulsante:

DelSole_WP7VBRTW_4

Si noti come nel codice XAML sia stata aggiunta la definizione del controllo Button nel modo che ci si aspetterebbe e come sia stato specificato il gestore di evento Click. Se volessimo gestire l’evento Click del pulsante, scriveremmo esattamente quello che faremmo in altri tipi di applicazione:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
MessageBox.Show("You clicked!")
End Sub

Nel momento in cui andiamo ad eseguire l’applicazione per finalità di debug, Visual Studio 2010 lancerà l’emulatore del dispositivo, che caricherà l’applicazione con un’istanza del debugger in esecuzione:

DelSole_WP7VBRTW_5

E’ importante sottolineare che se avete a disposizione un monitor multi-touch, potete simulare il comportamento dell’applicazione toccando lo schermo esattamente come avverrebbe sul dispositivo fisico. Possiamo pertanto sfruttare tutte le funzionalità dell’IDE a livello di debug, come ad esempio i breakpoint. Per vedere qualcosa di più complesso, immaginiamo di voler far sì che al touch sul pulsante venga aperta una nuova pagina che visualizzi un sito Web. Per aggiungere una nuova pagina, si fa tasto destro sul nome del progetto in Solution Explorer, quindi Add->New Item e si seleziona uno dei template offerti dalla finestra di dialogo:

DelSole_WP7VBRTW_6

In particolare i primi due template consentono di creare una nuova pagina con un orientamento predefinito, verticale (Portrait) od orizzontale (Landscape). Selezioniamo il primo template, poi quando la pagina è disponibile in Visual Studio modifichiamo lo StackPanel contenente i titoli in questo modo:

        <!--TitlePanel contains the name of the application and page title-->
         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
             <TextBlock x:Name="ApplicationTitle" Text="my first app with VB 2010" Style='{StaticResource PhoneTextNormalStyle}'/>
             <TextBlock x:Name="PageTitle" Text="MSDN Italia" Margin="9,-7,0,0" Style='{StaticResource PhoneTextTitle1Style}'/>
         </StackPanel>

Dopodiché, dalla toolbox trasciniamo il controllo WebBrowser sulla pagina e nel codice XAML rimuoviamo tutte le informazioni alle dimensioni/posizione del controllo. Nel code-behind, poi, vogliamo che al caricamento della pagina venga aperto il sito desiderato nel controllo WebBrowser:

    Private Sub BrowserPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
         Me.WebBrowser1.Navigate(New Uri("http://blogs.msdn.com/italy", UriKind.Absolute))
     End Sub

Infine, tornando al code-behind della pagina principale, sostituiamo il gestore di evento Click per il pulsante come segue:

    Private Sub Button1_Click(ByVal sender As System.Object,
                               ByVal e As System.Windows.RoutedEventArgs)
         NavigationService.Navigate(New Uri("/BrowserPage.xaml", UriKind.Relative))
     End Sub

NavigationService è una classe che permette di sfruttare il framework di navigazione tra pagine di Windows Phone 7, già introdotto con Silverlight 3. Lanciando l’applicazione nell’emulatore, questo è il risultato che si ottiene:

DelSole_WP7VBRTW_7

Esempi più complessi

L’esempio illustrato è sicuramente piuttosto essenziale, ma ha la finalità di dimostrare come l’approccio allo sviluppo per Windows Phone 7 con Visual Basic non abbia nulla di diverso da quanto si fa normalmente in WPF o Silverlight. Ovviamente ci sono esempi decisamente più concreti e complessi e Microsoft stessa ne propone alcuni molto interessanti in questa pagina, che già contiene molti esempi anche in Visual Basic tra cui l’esempio sull’accelerometro, sulle mappe di Bing e sui sensori.

Deploy di applicazioni

Per poter pubblicare applicazioni, è necessario iscriversi al Market Place. Una volta ottenuto l’account ed attivati tutti i benefici, è possibile fare il deploy sul proprio dispositivo per finalità di debug utilizzando gli appositi strumenti contenuti nella cartella Windows Phone Developer Tools del menu Start di Windows. Ad esempio, il tool Application Deployment ci aiuta a fare il deploy di un file .xap su dispositivo o sull’emulatore:

DelSole_WP7VBRTW8

Conclusioni

Sviluppare applicazioni per Windows Phone 7 con Visual Basic 2010 è un’esperienza assolutamente familiare ed apre nuovi, interessanti scenari anche di business a coloro che utilizzano questo linguaggio.