Header
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head>Fino a qui niente di particolare: in sostanza il caricamento delle librerie necessarie al funzionamento di jQuery Mobile. Da notare però la parola chiave "viewport" all'interno di un meta tag, fondamentale per l'impostazione delle dimensioni dello schermo per il risultato finale html.
Body
<body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body> </html>Da questa parte di codice si comprende come una pagina sia indicata come una div con attributo "data-role" impostato su "page". La barra di navigazione in alto a sua volta avrà ruolo "header", mentre il contenuto vero e proprio della pagina avrà ruolo "content".
L'idea di base è quella di mostrare un sito (o una sezione di sito) appositamente sviluppato con jQuery Mobile all'interno dell'applicazione Android; all'utente sarà quindi invisibile se questa parte sia sviluppata con il framework Android o con il più immediato e graficamente appagante html, css e javascript. Ovviamente, riprendendo il codice del post precedente, è sufficiente modificare la pagina alla quale l'oggetto webView si deve connettere:
webView1.loadUrl("http://code.jquery.com/mobile/latest/demos/");
Ho chiaramente usato l'url del demo per semplicità; andrà sostituito con la parte del sito mobile che avrete destinato ad Android (ad esempio, www.example.com/android).Per terminare questa parte, mostro un piccolo accorgimento grafico: se si prova ad eseguire l'applicazione android creata in precedenza si nota una fastidiosa barra in alto, con il nome dell'applicazione. Questa barra può essere migliorata graficamente (e lo mostrerò nei post successivi) oppure, più facilmente, può essere nascosta. Per fare quest'ultima operazione è sufficiente aprire il file manifest AndroidManifest.xml e creare, all'interno del tag activity principale, l'attributo "android:theme", impostandolo ad un determinato valore. Vediamo il risultato:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="net.stefanobianchini.webapp"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:icon="@drawable/ic_webapp"
android:label="@string/app_name" >
<activity
android:name=".webappActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Questa direttiva chiederà ad Android di mostrare l'applicazione a tutto schermo, senza la fastidiosa TitleBar. In figura il risultato finale, visualizzato dentro l'emulatore:
1 commento:
Grazie, ottima guida!
Posta un commento