ComputerLand

Tu sei qui: Articoli

MSDN

Guest post: Utilizzare HTML5 in applicazioni native per Windows Phone

Una delle principali novità di Windows Phone 7.5 è relativa al nuovo Internet Explorer 9 mobile e quindi al supporto per HTML5. E' possibile utilizzare questo supporto anche integrandolo nelle applicazioni native , attraverso l'utilizzo del controllo Web Browser. In questo guest post ospitiamo un articolo di Ugo Lattanzi che introduce le possibilità offerte per l'utilizzo del Web Browser nelle applicazioni sviluppate con SDK di Windows Phone e l'interazione del contenuto HTML5 e JS con il codice locale della applicazione.

Come nel caso di Silverlight e WPF, anche in Windows Phone esiste il controllo WebBrowser, che permette di visualizzare pagine HTML all’interno di una propria applicazione. Molte applicazioni che uso quotidianamente sul mio smartphone utilizzano questo potente strumento: esso offre l’opportunità all’utilizzatore di visualizzare un contenuto web senza dover uscire dall’applicazione.

Il funzionamento è abbastanza banale: all’interno della nostra applicazione viene “caricata” un’istanza di Internet Explorer, e tutto ciò che è visualizzabile con Internet Explorer per WP7 è visualizzabile anche all’interno del controllo WebBrowser. Se a questo scenario aggiungiamo che nell’ultima release di Windows Phone 7.5 possiamo visualizzare anche contenuti HTML5, l’interesse verso questo controllo aumenta. Per utilizzarlo all’interno di applicazioni per il marketplace vanno comunque tenute presenti le policy ed il fatto che si può usare questo controllo all’interno di applicazioni ma senza trasformare l’applicazione in un esclusivo contenitore per il controllo del browser ma utilizzandolo in integrazione con funzionalità sviluppate localmente :

http://msdn.microsoft.com/en-us/library/hh184841(v=VS.92).aspx

2.10	Your application must have distinct, substantial and legitimate content and purpose. Your application must provide functionality other than launching a webpage.

Ma procediamo con ordine.

Per prima cosa è necessario creare un nuovo progetto Windows Phone e “draggare” dalla toolbox l’apposito controllo, come mostrato dallo screenshot seguente:

A questo punto, tramite l’apposita proprietà Source, è possibile specificare l’indirizzo della pagina web da visualizzare all’interno del controllo (tostring.it nell’esempio seguente):

Se si preferisce utilizzare lo xaml e non i tool visuali, basta scrivere questo codice:

<phone:WebBrowser HorizontalAlignment="Left" Name="webBrowser1" VerticalAlignment="Top" Height="601" Width="450" Source="http://tostring.it" />

A questo punto, mandando in play l’applicazione l’emulatore dovrebbe visualizzare il sito all’interno di essa, più o meno come visualizzato dallo screenshot seguente:

Uno degli aspetti più interessanti del controllo WebBrowser è la possibilità di interazione tra l’applicazione host (la nostra applicazione nel Runtime di Windows Phone per intenderci) e la pagina web visualizzata.

Per provare questo scenario è necessario realizzare una semplice pagina web ed “hostarla” tramite un web server come IIS, o come il più semplice IISExpress. Personalmente consiglio quest’ultimo in quanto non necessita di privilegi elevati ed è molto più facile da configurare; di fatto per questo esempio ci basta creare un nuovo progetto ASP.NET o ASP.NET MVC scegliendo il template empty (non ci interessa la tecnologia per questo esempio) e configurare IISExpress, come mostrato dallo screenshot seguente:

A questo punto, per provare l’interazione tra la pagina web e la nostra applicazione Windows Phone, è necessario abilitare il controllo WebBrowser inserito precedentemente ad accettare notifiche dalla pagina, e successivamente mostrare un messaggio (un banale MessageBox può andare bene in questo caso).
Per far ciò è necessario impostare la proprietà IsScriptEnabled=”True” ed agganciare l’evento, come mostrato di seguito:

public partial class MainPage : PhoneApplicationPage {

                    // Constructor

                    public MainPage() {

                               InitializeComponent();

                               this.webBrowser1.ScriptNotify +=webBrowser1_ScriptNotify;

                    void webBr
owser1_ScriptNotify(object sender, NotifyEventArgs e) {

                               MessageBox.Show(e.Value);

Come potete vedere il codice si commenta da solo, con l’unica nota sulla property Value del NotifyEventArgs, che conterrà il valore passato dalla pagina web all’applicazione WP7.

Ecco come deve essere impostato nel codice XAML con la proprietà IsScriptEnabled=”True”:

<phone:WebBrowser IsScriptEnabled="True" HorizontalAlignment="Left" x:Name="webBrowser1" VerticalAlignment="Top" Height="601" Width="450" Source="http://localhost:45923/Test/default.html" />

Ora non ci resta che creare una pagina web con all’interno un pulsante che invierà un messaggio all’applicazione. Per far ciò è sufficiente invocare il metodo window.external.notify passando il valore desiderato che, come per magia, verrà assegnato alla property Value del NotifyEventArgs menzionato sopra.
Il codice seguente mostra la pagina web:

<!DOCTYPE html>
<html>
<head>
<title></title>

$(document).ready(function () {

$('#myButton').click(function () {

try {

window.external.notify('ciao');

}

catch (ex) {

$("#status").html('Si è verificato un errore');

&nb sp; }

});

</script>

</head>
<body>

</body>
</html>

A questo punto l’applicazione dovrà visualizzare un messaggio come quello mostrato di seguito:

Per rendere il tutto un po’ più complesso e testare a fondo le funzionalità del controllo WebBrowser possiamo aggiungere un tag <video> a lla nostra pagina, in modo da provare il render di un elemento HTML5.

Il codice della pagina dovrà diventare più o meno come il seguente: