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