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 mobilehttps://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare il binding di date in Blazor
Utilizzare Tailwind CSS all'interno di React: installazione
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Configurare policy CORS in Azure Container Apps
Determinare lo stato di un pod in Kubernetes
Usare lo spread operator con i collection initializer in C#
Creare form tipizzati con Angular
Criptare la comunicazione con mTLS in Azure Container Apps
Definire lo stile CSS in base alle dimensioni del container
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Gestire undefined e partial nelle reactive forms di Angular