Utilizza jQuery Mobile per creare un'app per Android News Reader nativa

In questa serie di tutorial in tre parti, il nostro obiettivo principale è descrivere come jQuery Mobile può essere utilizzato per sviluppare un'applicazione Android nativa. Per prima cosa svilupperemo un'applicazione web autonoma di esempio che sfoglia gli articoli di Yahoo! Notizie usando jQuery Mobile. Quindi convertiremo quella applicazione web in un'applicazione Android nativa con il minimo sforzo.

Il progetto jQuery Mobile è un framework web mobile con la sua versione alpha 2 rilasciata a novembre 2010. Il framework può essere utilizzato per sviluppare applicazioni web mobili multipiattaforma per sistemi operativi Android, iOS, Blackberry e simili (Per un cross completo -compatibility chart, vedi http://jquerymobile.com/gbs/). Sebbene il framework sia stato progettato per creare applicazioni Web cross-mobile, è possibile utilizzare jQuery Mobile per sviluppare anche applicazioni Android native. Di conseguenza, l'obiettivo di questa serie di tutorial è duplice:

Innanzitutto, illustreremo la costruzione dinamica degli elementi dell'interfaccia utente di base in jQuery Mobile. A tale scopo, implementeremo un'applicazione web di esempio, chiamata applicazione News, per sfogliare gli articoli di notizie da Yahoo! Notizia. L'applicazione invierà richieste HTTP basate su AJAX a un server e analizzerà la risposta XML per costruire l'interfaccia utente. Utilizzeremo il plugin jquery-dotimeout per illustrare una tecnica di animazione in cui i titoli delle notizie vengono visualizzati uno dopo l'altro a intervalli periodici con un effetto di dissolvenza in entrata / uscita. Ciò fornirà al lettore informazioni sulla formattazione del contenuto per gli elenchi di jQuery Mobile, in particolare la "lista divisa". Utilizzeremo anche il plug-in DST.js per memorizzare le selezioni correnti delle categorie di notizie dell'utente con l'archiviazione locale HTML5. L'applicazione web è costituita da un file HTML con codice UI, librerie jQuery Mobile e plug-in jQuery. Il file HTML utilizza anche un semplice file PHP che inoltra richieste HTTP a Yahoo! News URL e invia la risposta al file HTML. Questo è un metodo per aggirare la restrizione della stessa origine delle richieste AJAX nei browser web. Il file PHP non esegue alcuna manipolazione della richiesta o della risposta poiché l'obiettivo principale è utilizzare le API jQuery / jQuery Mobile per creare la richiesta, analizzare la risposta e costruire l'interfaccia utente. Forniremo immagini di schermate dell'applicazione Web in sistemi operativi Android e iOS per illustrare il fatto che l'interfaccia utente ha un aspetto coerente su più piattaforme.

In secondo luogo, dimostreremo come sviluppare un'applicazione Android nativa in cui l'interfaccia utente è codificata tramite il framework jQuery Mobile. A tale scopo, utilizzeremo l'applicazione Web sviluppata in precedenza. L'idea principale è usare il android.webkit.WebView oggetto come contenitore per eseguire il file HTML nell'applicazione Web. L'unica modifica necessaria nel file HTML è di indirizzare le richieste AJAX a Yahoo! URL di notizie invece del file PHP. Mostreremo come integrare il file HTML che contiene il codice UI con un android.app.Activity e un android.webkit.WebViewClient. Mostreremo anche come creare le icone di lancio per la nostra applicazione Android in base alle linee guida dell'icona di Android.

I file necessari per eseguire il web e le applicazioni Android native sono disponibili per il download come parte di questa serie di tutorial. Per l'applicazione Android, descriveremo come importare i file di progetto nell'IDE di Eclipse.

Organizzazione di questa serie

Questo tutorial, il primo della nostra serie, è organizzato come segue: nella sezione "Flusso della pagina", iniziamo ad introdurre l'applicazione dando le immagini dello schermo e descrivendo il flusso della pagina. Quindi discuteremo alcuni dettagli tecnici dell'applicazione web nella sezione "Modello richiesta / risposta". La sezione "Struttura della pagina" è dove presentiamo gli elementi di jQuery Mobile per costruire le nostre pagine.

Nel secondo tutorial di questa serie, completiamo lo sviluppo dell'applicazione web. Continuiamo a introdurre il codice jQuery Mobile, costruiamo dinamicamente una lista divisa, discutiamo una tecnica di animazione per il testo in una voce dell'elenco diviso e forniamo transizioni tra le pagine nella nostra applicazione. Una sezione speciale del secondo tutorial è dedicata a spiegare come aggiriamo la restrizione della stessa origine delle richieste AJAX nell'applicazione web. Le immagini dello schermo dell'applicazione web finale su dispositivi iOS e Android sono fornite per il confronto side-by-side.

Il terzo e ultimo tutorial di questa serie è dedicato alla migrazione dell'applicazione Web in un'applicazione Android nativa. Questo tutorial includerà una descrizione di alto livello delle modifiche necessarie per convertire la nostra applicazione Web in un'app Android, con particolare attenzione all'abitudine android.app.Activity e android.webkit.WebViewClient classi e un esame dei file di configurazione AndroidManifest.xml e strings.xml. Verranno inoltre discussi il processo di impostazione di un'icona di avvio dell'applicazione e la struttura complessiva del file del nostro progetto Android.

Flusso della pagina

Diamo un'occhiata alle singole pagine del prodotto finale per avere un'idea di come funzionerà l'applicazione. Il flusso di pagine qui discusso si applica sia alle applicazioni Web che a quelle native native:

La prima pagina è la pagina Categorie in cui l'utente può dare una rapida occhiata a tutti i titoli delle notizie in varie categorie di interesse:

Come mostrato sopra, ogni categoria di notizie viene visualizzata in un elemento dell'elenco diviso di jQuery Mobile che consiste in una sezione a sinistra con testo e un'altra sezione a destra con un pulsante. Nella sezione di testo, il titolo della categoria viene mostrato sopra i titoli delle notizie per quella categoria. I titoli delle notizie per una categoria vengono visualizzati uno dopo l'altro in un ciclo ogni 2 secondi con un effetto di animazione di dissolvenza in apertura / chiusura. In quella pagina, l'utente può:

Elimina una categoria premendo il pulsante Elimina.
Vai all'elenco di tutte le notizie in una categoria premendo sulla sezione di testo dell'elemento di elenco per quella categoria.
Aggiungi una nuova categoria premendo il pulsante Aggiungi.

Nella pagina Categorie, se l'utente preme il pulsante Aggiungi, viene visualizzata la pagina Selezione categorie (Figura 2):

In questa pagina, l'utente seleziona una categoria di notizie da un elenco e preme il pulsante Ottieni categoria per aggiungere la categoria alla pagina Categorie.

Nella pagina Categorie, premendo sulla sezione di testo dell'elemento di elenco per una categoria, l'utente accede alla pagina Notizie in cui sono visualizzate tutte le notizie di quella categoria (Figura 3):

Nella pagina Notizie, a una notizia può essere associata un'immagine associata, che funge da collegamento per ulteriori dettagli sulla particolare notizia. Premendo sull'immagine si accede alla pagina Dettagli notizie (Figura 4):

Si noti che, nell'applicazione Web, la pagina Dettagli notizie viene visualizzata nel browser all'esterno della pagina HTML che esegue il codice dell'applicazione. Per tornare indietro, l'utente deve premere il pulsante Indietro sul browser. Questa azione riporta l'utente alla pagina Categorie. Nell'applicazione Android nativa, la pagina Dettagli notizie viene visualizzata nello stesso android.webkit.WebView istanza in cui viene avviata l'applicazione, al di fuori della pagina HTML che esegue il codice dell'applicazione. Premendo il pulsante indietro del dispositivo si riporta l'utente alla pagina Categorie.

Il diagramma di Figura 5 riassume il modello di flusso tra le pagine nella nostra applicazione News:

Osserva l'icona rotante durante determinate transizioni. Ciò indica che una pagina di avanzamento viene mostrata all'utente durante la transizione. La pagina di avanzamento è utile per fornire al feedback dell'utente che la richiesta è in fase di elaborazione. Si noti che una pagina di avanzamento durante la transizione da News a News Detail viene visualizzata solo nell'applicazione Android nativa, non nell'applicazione Web. (Ulteriori discussioni su questo argomento saranno fornite nella Parte 3, "Modifiche in index.html".)

Modello richiesta / risposta

Parliamo di come vengono gestite le richieste e le risposte nell'applicazione web. Esiste un'unica pagina HTML che contiene l'interfaccia utente e il codice di gestione degli eventi per l'applicazione News, che viene denominata index.html. Tale file viene scaricato nel browser mobile dell'utente da un server Web (per i nostri test, abbiamo utilizzato un server Web Apache 2.2). Le azioni della pagina "Ottieni categoria" e "Scegli categoria" riguardano le richieste AJAX per ottenere informazioni sulle notizie da Yahoo! URL del server delle notizie, http://rss.news.yahoo.com/. A causa della restrizione della stessa origine delle richieste AJAX, non è possibile per il browser inviare tali richieste direttamente a Yahoo! Server di notizie Come soluzione, utilizziamo un file PHP nel nostro server web, chiamato bridge.php, che invia quelle richieste a Yahoo! News server per conto del browser e inoltra la risposta. D'altra parte, l'azione di pagina News Detail prevede una richiesta HTTP GET regolare per Yahoo! Server di notizie Per questa ragione, bridge.php non è necessario.

In termini di modello richiesta / risposta, l'applicazione Android nativa differisce dall'applicazione web in due modi. In primo luogo, non ha bisogno bridge.php. Questo perché quando è confezionato come parte di un'applicazione Android nativa, viene eseguita una pagina HTML android.webkit.WebView non è soggetto alle restrizioni della stessa origine quando si effettuano chiamate AJAX. In secondo luogo, nell'applicazione Android nativa l'azione della pagina News Detail è una chiamata AJAX piuttosto che una normale richiesta HTTP GET. Ne discuteremo ulteriormente nella Parte 3, "Modifiche in index.html".

Struttura della pagina

Una "pagina" nel framework jQuery Mobile può essere una singola pagina o una pagina collegata interna locale all'interno di una pagina. Una pagina del contenitore includerà una o più pagine di contenuti. È possibile visualizzare / nascondere le pagine di contenuto in modo selettivo. Come accennato in precedenza, la nostra applicazione web consiste in una singola pagina HTML nominata index.html che contiene tutta la UI e il codice di gestione degli eventi. Definiamo la nostra pagina del contenitore come segue:

Il Dati-tema attributo del contenitore div il tag ha il valore B. Il Dati-tema l'attributo ci consente di scegliere tra gli stili jQuery Mobile disponibili:

Il tema predefinito ha vari campioni di colore chiamati a, b, c, d, e, ognuno di questi fornisce un insieme coerente di colori per diversi elementi nella pagina. Per la nostra applicazione abbiamo scelto il colore corrispondente a B.

Le pagine di contenuto Categorie, Selezione di categoria e Notizie saranno contenute nella pagina del contenitore. Una pagina di contenuto avrà in genere un'intestazione, un'area di contenuto e un piè di pagina con ciascuna definita all'interno di a div etichetta. Il valore del Dati-ruolo attributo nel div tag definisce il ruolo del tag.

Per definire un'intestazione, utilizzare
Per definire un'area di contenuto, utilizzare
Per definire un piè di pagina, utilizzare

Vediamo ora le varie pagine di contenuti nella nostra applicazione.

Pagina Categorie

   categorie
 Inserisci

Nella sezione intestazione, osserva il Dati-nobackbtn = "true" attributo. Per impostazione predefinita, il framework jQuery Mobile includeva un pulsante Indietro nella sezione dell'intestazione. Impostando esplicitamente tale attributo come sopra, evitiamo di avere un pulsante Indietro. Invece, includiamo un pulsante Aggiungi nell'intestazione usando . Dal momento che il valore del Dati-icon l'attributo è più, il pulsante avrà un segno più. Anche, class = "ui-btn-sinistra" assicura che il pulsante sia posizionato sul lato sinistro dell'intestazione. Non vogliamo includere nulla nella sezione footer e quindi il div per il piè di pagina è vuoto. Di conseguenza, nella sezione del piè di pagina verrà visualizzata solo una linea orizzontale sottile.

L'area del contenuto ha una cosiddetta lista divisa jQuery Mobile. Facendo riferimento alla Figura 1 che mostra la pagina Categorie, ogni voce di elenco consiste in una sezione a sinistra con testo e un'altra sezione a destra con un pulsante, quindi 'divisa'. Il Dati-split-icon e Dati-split-tema gli attributi definiscono l'elenco come una lista divisa. Nota che il framework jQuery Mobile ha la flessibilità di formattare le sezioni divise in modi diversi. Ad esempio, puoi posizionare le icone nella sezione di testo, il che significa che invece di un pulsante di eliminazione sulla destra, puoi scegliere di avere un'icona diversa. Nella nostra applicazione News, ogni voce dell'elenco corrisponderà a una particolare categoria di notizie. Gli elementi dell'elenco verranno creati dinamicamente in base alle selezioni dell'utente. Inizialmente, la lista è vuota.

Pagina di selezione della categoria

   Selezionare
 
     
 Ottieni una categoria

Nella pagina di selezione delle categorie, nell'area dei contenuti è disponibile un modulo che consente all'utente di selezionare e aggiungere una categoria di notizie. Le categorie di notizie sono un sottoinsieme di categorie in Yahoo! Notizie come elencate in http://news.yahoo.com/rss. La selezione della categoria viene elaborata quando l'utente preme il pulsante con id = "buttonGetCategory".

Osservare che non vi è alcun pulsante indietro e che la sezione del piè di pagina è vuota.

Pagina delle notizie

   notizia
 Indietro 
 
  Torna alle categorie di notizie

In quella pagina, l'area del contenuto verrà popolata dinamicamente con tutte le notizie associate a una categoria in base alla selezione dell'utente. Inizialmente, l'area del contenuto è vuota. Nella sezione dell'intestazione c'è un pulsante indietro. Tuttavia, anziché affidarsi all'azione predefinita di jQuery Mobile, implementeremo tale azione tramite un gestore di eventi. Pertanto definiamo esplicitamente un pulsante con id = "buttonHdrShowCategories" (Il codice del gestore eventi per il pulsante verrà esaminato nella Parte 2, "Accesso alla pagina delle categorie dalla pagina delle notizie"). L'attributo Dati-icon = "freccia-l" utilizza l'icona jQuery Mobile incorporata designata per i pulsanti Indietro. Per le icone dei pulsanti jQuery Mobile disponibili, consulta http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. In quella pagina abbiamo anche un pulsante indietro sul footer. Questo perché la pagina sarà in genere lunga e l'utente dovrà scorrere verso il basso per scorrere tutte le notizie. Vogliamo che l'utente sia in grado di tornare indietro dalla parte inferiore della pagina senza dover scorrere fino in cima. I gestori di eventi per i pulsanti superiore e inferiore saranno identici.

Pagina di progresso

In precedenza, abbiamo menzionato che durante le varie transizioni di pagina viene visualizzata una pagina di avanzamento fino al completamento della transizione. Questo è necessario solo nelle transizioni che richiedono tempi di elaborazione a causa della costruzione di una richiesta o dell'analisi della risposta. La pagina di avanzamento è molto semplice, con testo descrittivo e un'icona rotante.

   in lavorazione? 
 
  attendere prego.

Pagina dei dettagli delle notizie

Il contenuto della pagina Dettagli notizie è fornito da Yahoo! URL di notizie. Il modo in cui viene visualizzata questa pagina è descritto nella Parte 2, "Vai alla pagina dei dettagli della notizia dalla pagina delle notizie".

Visualizzazione delle pagine

La semplice visualizzazione di una pagina equivale a mostrare quella pagina e nascondere tutte le altre pagine. Cerchiamo di discutere su come ottenere questo comportamento. Il div gli elementi che rappresentano l'intestazione, il contenuto e il piè di pagina di ciascuna pagina sono assegnati a variabili che li identificano nella convenzione jQuery come mostrato di seguito. Poiché questi vengono usati ripetutamente, la definizione di variabili globali per loro fornisce un vantaggio in termini di prestazioni poiché ciascuna variabile viene inizializzata una sola volta ma può essere utilizzata molte volte.

Per nascondere una pagina, chiamiamo il jQuery nascondere() funzione sulle variabili di intestazione, contenuto e piè di pagina di quella pagina. Ad esempio, per nascondere la pagina Categorie:

 function hideCategories () hdrCategoriesVar.hide (); contentCategoriesVar.hide (); ftrCategoriesVar.hide ();

Analogamente, per le pagine Selezione categoria, Notizie e Avanzamento, abbiamo le seguenti funzioni "nascondi":

 function hideSelect () hdrSelectVar.hide (); contentSelectVar.hide (); ftrSelectVar.hide (); ? function hideNews () hdrNewsVar.hide (); contentNewsVar.hide (); ftrNewsVar.hide (); ? function hideProgress () hdrProgressVar.hide (); contentProgressVar.hide (); ftrProgressVar.hide ();

Per mostrare una pagina, nascondiamo tutte le altre pagine e chiamiamo jQuery mostrare() funzione sulle variabili di intestazione, contenuto e piè di pagina di quella pagina. Ad esempio, per mostrare la pagina Categorie abbiamo la seguente funzione:

 function showCategories () hideSelect (); hideProgress (); hideNews (); hdrCategoriesVar.show (); contentCategoriesVar.show (); ftrCategoriesVar.show ();

Allo stesso modo, per la selezione di categoria, le notizie e le pagine di avanzamento, abbiamo le seguenti funzioni di "mostra":

 function showSelect () hideCategories (); hideProgress (); hideNews (); hdrSelectVar.show (); contentSelectVar.show (); ftrSelectVar.show (); ? function showNews () hideCategories (); hideSelect (); hideProgress (); hdrNewsVar.show (); contentNewsVar.show (); ftrNewsVar.show (); ? function showProgress () hideCategories (); hideSelect (); hideNews (); hdrProgressVar.show (); contentProgressVar.show (); ftrProgressVar.show ();

Invece di avere un'unica pagina HTML che contiene tutto il codice dell'interfaccia utente, avremmo potuto organizzare l'interfaccia utente in più pagine HTML. Per gli scopi di questo tutorial, abbiamo scelto il precedente approccio. Per il secondo caso, vedere il modello di navigazione di jQuery Mobile che spiega come jQuery Mobile esegue la navigazione tra i vari file fisici.

Commenti finali

In questa parte iniziale della serie di tutorial, abbiamo introdotto gli obiettivi del tutorial e discusso l'applicazione di esempio che verrà implementata. Abbiamo anche iniziato a presentare il framework jQuery Mobile con enfasi sulla struttura delle pagine. La prossima settimana continueremo a introdurre il codice jQuery Mobile e a completare l'implementazione della nostra applicazione web nella seconda parte di questa serie.

Codice