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
Sfruttare al massimo i topic space di Event Grid MQTT
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare Tailwind CSS all'interno di React: installazione
Creare moduli CSS in React
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare un service principal per accedere a Azure Container Registry
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Eseguire attività con Azure Container Jobs
Gestire liste di tipi semplici con Entity Framework Core
Potenziare Azure AI Search con la ricerca vettoriale
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)