Share
Nella parte 1 di questa serie di tutorial, abbiamo introdotto la nostra applicazione di esempio, descritto il flusso della pagina e discusso come costruire le pagine nell'applicazione tramite jQuery Mobile. Nella parte 2, abbiamo completato l'implementazione della nostra applicazione web. In questa parte finale, migreremo l'applicazione Web in un'applicazione Android nativa.
L'applicazione Web completata nella parte 2 verrà ora convertita in un'applicazione Android nativa. La discussione seguente si applica a Android OS 2.2 e 2.3.
L'applicazione Android utilizzerà index.html come componente della sua interfaccia utente. Scriveremo un android.app.Activity classe per definire il punto di integrazione tra index.html e l'applicazione nativa. Scriveremo anche un android.webkit.WebViewClient classe per assicurarsi che la pagina Dettagli notizie sia visualizzata all'interno dell'originale android.webkit.WebView istanza in cui viene lanciata l'applicazione News.
Accentsconagua
index.html Aggiorneremo il NEWS_URI variabile come segue:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
Non abbiamo bisogno bridge.php nell'applicazione Android nativa per inoltrare le chiamate AJAX a Yahoo! Notizia. Questo perché la restrizione della stessa origine non si applica qui. Quando confezionato come parte dell'applicazione nativa, il index.html il file non viene scaricato da un server web. In quanto tale, può effettuare chiamate AJAX a URL remoti.
Inoltre, aggiungiamo la seguente funzione:
var EMPTY = ";? function changeLocation (varURI) showProgress (); $ .get (EMPTY, function (data) window.location = varURI;);
Il Cambia posizione() la funzione sarà chiamata dal android.webkit.WebViewClient, che verrà mostrato momentaneamente. Lo scopo della funzione è mostrare la pagina di avanzamento durante la transizione dalla pagina Notizie alla pagina Dettagli notizie.
Cambia posizione() è quello di visualizzare la pagina di avanzamento.ottenere() la funzione è una jQuery specializzata ajax () funzione. Noi chiamiamo ottenere() passando ad esso un URL vuoto e un gestore di callback, che imposta il window.location variabile per l'argomento di input. L'argomento di input è l'URL nel un tag per una notizia, come discusso nella Parte 2, "Vai alla pagina dei dettagli della notizia dalla pagina delle notizie". Quando viene caricato l'URL, la pagina di avanzamento viene sostituita con i contenuti di tale URL.Cambia posizione() non è una parte essenziale della migrazione dell'applicazione web in una nativa. È necessario solo visualizzare una pagina di avanzamento quando si passa dalla pagina Notizie alla pagina Dettagli notizie nell'applicazione nativa. La parte iniziale del nostro Attività classe, chiamato NewsActivity è mostrato di seguito:
pacchetto com.news; importare android.app.Activity; import android.webkit.WebView; importare android.os.Bundle ;? public class NewsActivity estende Activity WebView mWebView; public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (new NewsClient ()); mWebView.getSettings () setJavaScriptEnabled (true).; mWebView.getSettings () setDomStorageEnabled (true).; mWebView.loadUrl ( "android_asset / www / index.html"); ?
onCreate () metodo, prima chiamiamo l'implementazione predefinita dalla super-classe e poi invochiamo setContentView () per caricare il file di layout per questa attività. L'argomento di input a setContentView () è R.layout.main che è un riferimento a main.xml nel res / layout di cartella.WebView attraverso findViewById (R.id.webview). Impostiamo un'abitudine WebViewClient sul WebView, di nome client di news (da rivedere presto). Quindi, configuriamo il WebView per consentire l'esecuzione di JavaScript e l'API di archiviazione DOM (quest'ultimo è necessario per utilizzare HTML5 memoria locale).WebView caricare il index.html pagina che ha il codice dell'interfaccia utente.Nella pagina Dettagli notizie, premendo il pulsante Indietro del dispositivo si ritorna alla pagina Categorie. Per esserne certi, prima dobbiamo gestire il onKeyDown evento nel nostro NewsActivity. Questo è mostrato di seguito:
public class NewsActivity estende Activity WebView mWebView; public void onCreate (Bundle savedInstanceState) ? public boolean onKeyDown (int keyCode, KeyEvent event) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); ritorna vero; return super.onKeyDown (keyCode, event); ?
Se l'evento chiave corrisponde al pulsante Indietro del dispositivo e il WebView ha una storia in cui tornare, poi chiediamo il WebView per tornare indietro di un passo nella sua storia. Nella pagina Dettagli notizie, questo corrisponderà a index.html. Quando la cronologia fa un passo indietro, la pagina Categorie verrà visualizzata seguendo i passaggi descritti nella Parte 2, "Avvio applicazioni".
Infine, esaminiamo l'usanza WebViewClient che è implementato come una classe interna di NewsActivity.
public class NewsActivity estende Activity WebView mWebView; public void onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (new NewsClient ()) ;? public booleano onKeyDown (int keyCode, KeyEvent event) ? classe privata NewsClient estende WebViewClient public boolean shouldOverrideUrlLoading (visualizzazione WebView, URL String) view.loadUrl ("javascript: changeLocation ('" + url + "')"); ritorna vero; ? L'unica operazione che sovrascriviamo dalla classe genitore è shouldOverrideUrlLoading () dove istruiamo il WebView chiamare la funzione JavaScript Cambia posizione() nel index.html.
WebViewClient, la pagina Dettagli notizie verrà visualizzata in un'applicazione browser separata, all'esterno dell'applicazione News. Pertanto, definire un'abitudine WebViewClient è essenziale per visualizzare la pagina dei dettagli delle notizie come parte dell'applicazione News (cioè nella stessa WebView che ospita il index.html).shouldOverrideUrlLoading () in un modo più semplificato, come segue: public booleano shouldOverrideUrlLoading (vista WebView, URL String) view.loadUrl (url); ritorna vero;
Ciò sarebbe sufficiente per visualizzare la pagina Dettagli notizie nella stessa WebView che ospita index.html. Tuttavia, la transizione dalla pagina Notizie alla pagina Dettagli notizie non includeva la visualizzazione della pagina di avanzamento.
Dopo aver esaminato il Attività classe, diamo un'occhiata ad altri componenti della nostra applicazione.
AndroidManifest.xmlPer una discussione generale sul AndroidManifest.xml il file si riferisce al riferimento ufficiale. In quel file, ci sono due elementi particolari degni di essere commentati.
android.app.Activity documentazione, per impostazione predefinita, una modifica alla configurazione, incluso un cambiamento di orientamento o accessibilità della tastiera, determina la distruzione dell'attività corrente. Per impedire il comportamento predefinito, configuriamo la nostra applicazione specificando le modifiche alla configurazione che verranno gestite dall'applicazione stessa. Questo è definito nel configChanges attributo dove orientamento corrisponde al cambiamento di orientamento e keyboardHidden corrisponde a una modifica dell'accessibilità della tastiera (ad esempio, un utente apre la tastiera del dispositivo). Stiamo configurando l'applicazione in modo che se si verifica uno di questi cambiamenti, l'attività corrente non viene distrutta.strings.xmlnotizia
Questo file definisce la costante denominata nome dell'applicazione che viene utilizzato per identificare l'applicazione News. Il valore di tale attributo viene visualizzato in varie posizioni nel nostro dispositivo Android, come mostrato di seguito. Da sinistra a destra: sotto l'icona di avvio dell'applicazione, la barra del titolo dell'applicazione, Impostazioni - Gestisci applicazioni.
android.app.Activity Implementiamo l'interfaccia utente nella nostra applicazione Android nativa utilizzando index.html e il supporto JavaScript e css librerie. Un punto di integrazione tra index.html e l'abitudine android.app.Activity la classe è la seguente riga:
mWebView.loadUrl ( "android_asset / www / index.html");
Inoltre, osserva in "La classe di attività" che abilitiamo JavaScript e DOMStorage in android.webkit.WebView oggetto come index.html ha bisogno di eseguire JavaScript e accedere a HTML5 memoria locale.
mWebView.getSettings () setJavaScriptEnabled (true).; mWebView.getSettings () setDomStorageEnabled (true).;
Finalmente, nel AndroidManifest.xml consentiamo connessioni Internet dalla nostra applicazione tramite:
Le Figure 1 - 4 illustrate in precedenza di questa serie sono le immagini dello schermo dell'applicazione nativa Android.
Per creare l'icona di avvio dell'applicazione News, abbiamo seguito le linee guida per la progettazione di icone per le applicazioni Android. In questa risorsa sono disponibili per il download vari modelli in formato Adobe PSD. Abbiamo scaricato icon_templates-v2.0.zip ed estratto Launcher-icon-template.psd. In quel file, abbiamo selezionato due modelli per creare la nostra icona di avvio:
Abbiamo inserito questi modelli in due livelli separati in Adobe Photoshop e aggiunto un testo grafico, notizia, su un livello aggiuntivo nella parte superiore per comporre l'icona di avvio. Come da linee guida, abbiamo creato tre versioni dell'icona per schermi a bassa, media e alta densità con dimensioni di 36 x 36, 48 x 48 e 72 x 72 pixel, rispettivamente. Ciascuna di queste icone è denominata icon.png e sono posizionati nelle cartelle del progetto Android in base alla seguente tabella:
| Nome della cartella | Nome del file | Dimensione del pixel |
res \ drawable-ldpi | icon.png | 36 x 36 |
res \ drawable-MDPI | icon.png | 48 x 48 |
res \ drawable-hdpi | icon.png | 72 x 72 |
Ad esempio, questa è l'icona di avvio 36 x 36:
Come parte di questo tutorial, abbiamo fornito i file di progetto necessari per importare l'applicazione nativa di Android News nell'ambiente di sviluppo Eclipse. I prerequisiti del progetto sono:
Il progetto è stato testato con successo sia con la piattaforma Android 2.2 API livello 8 che con la piattaforma 2.3 API livello 9.
Prima di importare il progetto nel tuo ambiente Eclipse, assicurati che il plug-in di Eclipse ADT indichi la posizione corretta di Android SDK nel tuo sistema locale. Per controllare questo, nel menu Eclipse vai a Finestra -> Preferenze -> Android. Il Posizione SDK la finestra deve essere impostata sulla posizione di Android SDK. Una volta impostato correttamente, dovresti vedere qualcosa di simile all'immagine qui sotto:
I file di progetto sono forniti in un file di archivio chiamato news.zip. Per importare il progetto nel menu di Eclipse, vai a File -> Importa e quindi nel wizard di importazione dei file selezionare Generale -> Progetti esistenti nello spazio di lavoro (vedi sotto).
Nella pagina successiva della procedura guidata, scegliere il Seleziona il file di archivio pulsante radio e cercare dove news.zip si trova nel tuo file system. Il progetti finestra verrà popolata automaticamente dove il notizia progetto è già selezionato. Questo è mostrato sotto. premi il finire pulsante per completare l'importazione.
Eclipse costruirà l'applicazione automaticamente dopo l'importazione. Ora, dovresti vedere il progetto News nell'Explorer di progetto, come mostrato di seguito:
Per la costruzione / debug del tuo progetto, puoi scegliere tra le piattaforme Android OS 2.3 e 2.2 come target di costruzione. Per fare ciò, selezionare il notizia progetto nel progetto di esplorazione e dal menu di scelta rapida scegliere Proprietà. Nell'elenco a sinistra delle proprietà, selezionare androide come la proprietà. I target di build disponibili sono visualizzati a destra, come mostrato di seguito:
Di seguito è riportato un elenco di file nel progetto.
Abbiamo già discusso alcuni di questi file. Di seguito una breve recensione / riassunto:
src cartella contiene il codice sorgente per NewsActivity classe.gen cartella contiene i file generati automaticamente da Eclipse ADT.beni \ www la cartella e le relative sottocartelle contengono tutti i file necessari per l'interfaccia utente, inclusi index.html; beni \ www \ css-js ha il css e file JavaScript usati da index.html. In particolare: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css sono le librerie framework jQuery Mobile.jquery.ba-dotimeout.js è la libreria jquery-dotimeout-plugin.jquery.dst.js è la libreria di plugin DST.js.beni \ www \ css-js \ immagini \ icone-18-white.png è un file immagine a cui fanno riferimento le librerie framework jQuery Mobile.beni \ www \ img \ wait.gif è l'icona rotante utilizzata nella pagina di avanzamento.res \ drawable * le cartelle memorizzano le icone di lancio, come discusso nella sezione "Icona di avvio dell'applicazione" di questo tutorial.res \ layout \ main.xml file è il file di layout XML di Android. Poiché l'interfaccia utente nella nostra applicazione è definita in index.html utilizzando il framework jQuery Mobile, questo file è molto semplice e non richiede ulteriori spiegazioni.res \ valori \ strings.xml e AndroidManifest.xml.default.properties definisce il target di costruzione e fa parte di news.zip. Sarà sovrascritto da Eclipse ADT in base alla selezione del target di costruzione.Oltre allo sviluppo di applicazioni Web mobili multipiattaforma, il framework jQuery Mobile può essere utilizzato per implementare applicazioni Android native. In questa serie di tutorial, abbiamo sviluppato un'applicazione web utilizzando jQuery Mobile e poi la abbiamo migrata in un'applicazione Android nativa con solo lievi modifiche. L'idea principale è usare il android.webkit.WebView oggetto come contenitore per eseguire il file html dell'applicazione Web e il codice JavaScript jQuery Mobile che contiene. Di seguito alcune osservazioni conclusive.
android.webkit.WebView non è soggetto alle restrizioni della stessa origine quando si effettuano chiamate AJAX.