PhoneGap: gestire l'orientamento in Windows Phone
PhoneGap è un framework per costruire applicazioni native utilizzando HTML5, che è disponibile anche per Windows Phone.
Una volta scaricato, aggiunge un nuovo template di progetto a Visual Studio, all'interno del quale potremo creare la nostra soluzione. Poiché PhoneGap è un layer tra il nostro codice HTML e le funzionalità native, in certi scenari dobbiamo adattarci alle sue caratteristiche per poter implementare funzionalità native.
Un caso di questo tipo è quello relativo alla gestione della rotazione del dispositivo: essendo PhoneGap un layer tra la parte nativa e quella HTML, dovremo intercettare l'evento orientationchange attraverso un semplice codice JavaScript, per poi decidere cosa fare.
Ecco l'esempio, dove si può notare l'approccio utilizzato da PhoneGap:
<!DOCTYPE html> <html> <head> ... <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <script type="text/javascript" src="phonegap-1.2.0.js"></script> <script type="text/javascript"><!-- document.addEventListener("deviceready", onDeviceReady, false); // in questo stato il device è pronto function onDeviceReady() { // ci registriamo per l'evento orientationchange window.addEventListener("orientationchange", onOrientationChange, true); } // gestiamo l'evento function onOrientationChange(e) { var orientation = "portrait"; // stabiliamo il tipo di orientamento if (window.orientation == -90 || window.orientation == 90) orientation = "landscape"; // codice che applica le funzionalità specifiche per l'orientamento corrente document.getElementById("orientation").innerHTML = orientation; } //--></script> <body> ... </body> </html>
Come si può notare, questo codice avrà l'effetto, quando ruotiamo l'emulatore (o il device) di scrivere a video la corrispondente rotazione corrente:
Link e riferimenti utili
Il nostro speciale sullo sviluppo web mobilehttp://www.aspitalia.com/focuson/1267/Speciale-Web-Mobile-Costruire-Applicazioni-ASP.NET-JQuery-Mobile.aspx
