martedì 17 gennaio 2012

Programmazione Android: Costruire una web application (seconda parte) - jQuery Mobile

In questa seconda parte incontriamo jQuery Mobile, una versione del famoso framework appositamente creata per gestire e mostrare contenuti per dispositivi quali smartphone e tablet. E' possibile analizzarne il comportamento accedendo alla demo disponibile, che mostra tutti i componenti utili per realizzare una splendida web application. Ovviamente la cosa più semplice è scaricare l'intero framework, caricarlo sul sito che farà da base per l'applicazione web, studiarsi il sorgente html + javascript della demo e modificarlo a piacimento; vediamo però a grandi linee quale sia la struttura:
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:

Anonimo ha detto...

Grazie, ottima guida!