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
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Miglioramenti agli screen reader e al contrasto in Angular
Generare token per autenicarsi sulle API di GitHub
Utilizzare un service principal per accedere a Azure Container Registry
Utilizzare le collection expression in C#
Utilizzare il trigger SQL con le Azure Function
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Utilizzare Model as a Service su Microsoft Azure