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
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare i primary constructor in C#
Assegnare un valore di default a un parametro di una lambda in C#
Controllare gli accessi IP alle app con Azure Container Apps
Copiare automaticamente le secret tra più repository di GitHub
Semplificare il deployment di siti statici con Azure Static Web App
Usare le collection expression per inizializzare una lista di oggetti in C#
Usare una container image come runner di GitHub Actions
Utilizzare politiche di resiliency con Azure Container App
Utilizzare gli snapshot con Azure File shares
I più letti di oggi
- Aggiungere il metodo SelectMany alla classe Array in TypeScript
- Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
- Recuperare i Popup aperti in una Windows Store app
- AI&ML Conf 2020 - Online
- Preview 4 per ASP.NET MVC
- Speciale Windows Store app: costruire app con WinRT per Windows 8
- Microsoft Security Bulletin MS02-050
- Microsoft Security Bulletin MS04-033
- Attivare l'output caching su ASP.NET Web API
- Ottimizzare l'utilizzo di banda tramite ETag in ASP.NET Core Web API