PhoneGap: gestire l'application bar nativa in Windows Phone

Marco Leoncini

di , in Windows Phone, PhoneGap,

Tra le parti di UI che contraddistinguono un applicazione Windows Phone, c'è sicuramente la barra delle applicazioni, chiamata ApplicationBar.

Anche se è possibile ricrearne una tramite HTML, JavaScript e CSS, riproducendone il look & feel, il compito non è sicuramente semplice. Infatti ci sono alcuni aspetti da tenere in considerazione:
- l'animazione in entrata;
- la rotazione dei pulsanti e del testo in base all'orientamento del device;
- il rispetto dei temi light & dark.

E', quindi, più conveniente utilizzare quanto già presente in Windows Phone e accedervi mediante JavaScript.

Per prima cosa dobbiamo aggiungere l'ApplicationBar nella pagina che contiene il browser utilizzato da Phone Gap:

<phone:PhoneApplicationPage.ApplicationBar>
  <shell:ApplicationBar IsVisible="True"
                        IsMenuEnabled="True"
                        Opacity="0.5">
    <shell:ApplicationBarIconButton IconUri="/icons/appbar.add.rest.png"
                                    x:Name="AppbarAdd"
                                    Text="add"
                                    Click="AppbarAdd_Click"/>
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Aggiungiamo un event handler per l'evento Click e, nel corpo del metodo, inseriamo il seguente codice:

PGView.Browser.InvokeScript("appbar_Add");

L'oggetto PGView è il controllo WebBrowser utilizzato da PhoneGap, mentre il metodo InvokeScript si limita a chiamare la funzione JavaScript specificata come argomento, cercandola nel documento caricato correntemente.

Aggiungiamo quindi la seguente funzione tra i tag script della pagina HTML caricata:

function appbar_Add() {
  document.getElementById("welcomeMsg").innerHTML = "Hai premuto il pulsante della barra delle applicazioni ";
}

E' sufficiente far tap sul pulsante della barra delle applicazioni per visualizzare il messaggio nel controllo browser utilizzato per renderizzare la pagina.

Link e riferimenti utili

Il nostro speciale sullo sviluppo web mobile
http://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx

Commenti

PhoneGap: gestire l'application bar nativa in Windows Phone (#61) 1010 1
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi

Script via e-mail

Iscriviti alle nostre newsletter tematiche unoscript@lgiorno per ricevere gli script via e-mail.

Iscrivi subito! »»»

Il forum su Windows Phone

Se hai problemi con lo sviluppo per Windows Phone, puoi trovare aiuto nella nostra community!

Partecipa al forum su Windows Phone!

In primo piano
Media
In evidenza
MISC