PhoneGap: gestire l'application bar nativa in Windows Phone

di Marco Leoncini, 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
https://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

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