Accentsconagua

Använd jQuery Mobile för att bygga en infödd Android News Reader App

Koda
Share

I den här tre delhandledningsserien är vårt främsta mål att beskriva hur jQuery Mobile kan användas för att utveckla en inbyggd Android-applikation. Först kommer vi att utveckla en fristående, webbapplikationsapplikation som bläddra bland artiklar från Yahoo! Nyheter med jQuery Mobile. Då konverterar vi den webbapplikationen till en inbyggd Android-applikation med minimal ansträngning.

JQuery Mobile-projektet är ett mobilt webbramverk med sin alfa 2-version som släpptes i november 2010. Ramverket kan användas för att utveckla mobila webbapplikationer på plattformen för Android OS, iOS, Blackberry OS och liknande plattformar (För ett komplett kors -kompatibilitetsschema, se http://jquerymobile.com/gbs/). Även om ramverket var utformat för att bygga mobila webbapplikationer, är det möjligt att använda jQuery Mobile för att även utveckla inbyggda Android-applikationer. Följaktligen är målet med denna handledningsserie tvåfaldig:

Först ska vi illustrera den dynamiska konstruktionen av grundläggande UI-element i jQuery Mobile. För detta ändamål ska vi genomföra en webbapplikationsapplikation, kallad News application, för att bläddra i nyhetsartiklar från Yahoo! Nyheter. Applikationen skickar AJAX-baserade HTTP-förfrågningar till en server och analyserar XML-svaret för att konstruera användargränssnittet. Vi kommer att använda jquery-dotimeout-plugin för att illustrera en animeringsteknik där nyhetsrubriker visas efter varandra med periodiska intervaller med en in / ut-effekt. Detta ger läsaren inblick i innehållsformatering för jQuery Mobile-listor, särskilt "splitlistan". Vi använder även plugin DST.js för att lagra användarens aktuella nyhetsklassval med HTML5 lokal lagring. Webapplikationen består av en HTML-fil som har UI-koden, jQuery Mobile-bibliotek och jQuery-plugins. HTML-filen använder också en enkel PHP-fil som vidarebefordrar HTTP-förfrågningar till Yahoo! Nyhetsadress och skickar svaret tillbaka till HTML-filen. Det här är en metod för att arbeta kring samma ursprungsbegränsning av AJAX-förfrågningar i webbläsare. PHP-filen utför ingen manipulering av begäran eller svaret eftersom huvudmålet är att använda jQuery / jQuery Mobile API för att skapa begäran, analysera svaret och konstruera användargränssnittet. Vi kommer att tillhandahålla skärmbilder av webbapplikationen i Android OS och iOS-enheter för att illustrera det faktum att användargränssnittet har ett konsekvent utseende över flera plattformar.

För det andra visar vi hur man utvecklar en inbyggd Android-applikation där användargränssnittet kodas via jQuery Mobile-ramen. För detta ändamål kommer vi att använda den webbapplikation som tidigare utvecklats. Huvudidén är att använda android.webkit.WebView objekt som en behållare för att köra HTML-filen i webbapplikationen. Den enda nödvändiga ändringen i HTML-filen är att rikta AJAX-förfrågningarna till Yahoo! Nyhetsadress istället för PHP-filen. Vi visar hur man integrerar HTML-filen som innehåller användarkoden med en android.app.Activity och en android.webkit.WebViewClient. Vi kommer också visa hur du skapar lanseringsikonen för vår Android-applikation baserat på riktlinjerna för Android-ikonen.

Filerna som behövs för att köra webben och de inbyggda Android-programmen är tillgängliga för nedladdning som en del av denna handledningsserie. För Android-applikationen beskriver vi hur du importerar projektfilerna till Eclipse IDE.

Organisation av denna serie

Denna handledning, den första i vår serie, är organiserad enligt följande: I avsnittet "Sidflöde" börjar vi introducera applikationen genom att ge skärmbilder och beskriva sidflödet. Sedan diskuterar vi några tekniska detaljer i webbapplikationen i avsnittet "Request / Response Model". Avsnittet "Sidstrukturen" är där vi presenterar jQuery Mobile-element för att konstruera våra sidor.

I den andra handledningen i den här serien kompletterar vi utvecklingen av webbapplikationen. Vi fortsätter att introducera jQuery Mobile-koden, konstruera dynamiskt en delad lista, diskutera en animeringsteknik för text i ett delat listobjekt och tillhandahålla övergångar mellan sidorna i vår ansökan. En särskild del av den andra handledningen är avsedd för att förklara hur vi arbetar kring samma ursprungsbegränsning av AJAX-förfrågningar i webbapplikationen. Skärmbilder av den slutliga webbapplikationen på iOS och Android-enheter tillhandahålls för jämförelse sida vid sida.

Den tredje och sista handledningen i denna serie är avsedd att migrera webbapplikationen till en inbyggd Android-applikation. Denna handledning kommer att innehålla en beskrivning på hög nivå av nödvändiga ändringar för att konvertera vår webbapplikation till en Android-app, med särskild uppmärksamhet åt anpassningen android.app.Activity och android.webkit.WebViewClient klasser och en granskning av konfigurationsfilerna AndroidManifest.xml och strings.xml. Processen med att ställa in en programlanseringsikon och den övergripande filstrukturen för vårt Android-projekt kommer också att diskuteras.

Sidflöde

Låt oss ta en titt på de enskilda sidorna i slutprodukten för att få en känsla av hur ansökan ska fungera. Sidflödet som diskuteras här gäller både webb- och inbyggda Android-applikationer:

Den första sidan är kategorisidan där användaren snabbt kan titta på alla nyhetsrubriker i olika intressekategorier:

Som visas ovan visas varje nyhetskategori i ett jQuery Mobile-splitlistobjekt som består av ett avsnitt till vänster med text och ett annat avsnitt till höger med en knapp. På textdelen visas kategorititeln ovanför nyheterna för den kategorin. Nyhetsrubrikerna för en kategori visas en efter en i en slinga varannan sekund med en in / ut-animeringseffekt. På den sidan kan användaren:

  • Ta bort en kategori genom att trycka på raderingsknappen.
  • Gå till listan över alla nyheter under en kategori genom att trycka på textdelen i listobjektet för den kategorin.
  • Lägg till en ny kategori genom att trycka på knappen Lägg till.

På sidan Kategorier, om användaren trycker på tilläggsknappen, visas sidan Kategori Selection (Figur 2):

På den här sidan väljer användaren en nyhetskategori från en lista och trycker på knappen Få kategori för att lägga till kategorin på sidan Kategorier.

På kategorisidan trycker du på textdelen av listobjektet för en kategori till användaren på sidan Nyheter där alla nyhetsobjekt under den kategorin visas (Figur 3):

På nyhetssidan kan en nyhetsartikel ha en bild som är associerad med den, som fungerar som en länk för ytterligare detaljer om den aktuella nyhetsartikeln. Genom att trycka på bilden tar användaren på News Detail-sidan (Figur 4):

Observera att nyhetsdetalj-sidan visas i webbläsaren i webbläsaren utanför HTML-sidan som kör programkoden. För att kunna gå tillbaka måste användaren trycka på bakåtknappen i webbläsaren. Den här åtgärden tar användaren tillbaka till kategorisidan. I den inbyggda Android-applikationen visas News Detail-sidan i samma android.webkit.WebView Exempel där programmet startas, utanför HTML-sidan som kör programkoden. Om du trycker på enhetens bakåtknapp tar användaren tillbaka till kategorisidan.

Diagrammet i Figur 5 sammanfattar flödesmodellen mellan sidorna i vår nyhetsapplikation:

Observera spinnikonet under vissa övergångar. Detta indikerar att en framstegssida visas för användaren under övergången. Framgångssidan är användbar för att ge användarens återkoppling att begäran behandlas. Observera att en framstartsida under övergången från Nyheter till Nyhetsdetalj visas endast i den inbyggda Android-applikationen, inte i webbapplikationen. (Mer diskussion om detta kommer att ges i del 3, "Ändringar i index.html".)

Request / Response Model

Låt oss prata om hur förfrågningar och svar hanteras i webbapplikationen. Det finns en enda HTML-sida som innehåller användargränssnittet och händelsehanteringskoden för nyhetsprogrammet, som heter index.html. Den filen laddas ned i användarens mobilwebbläsare från en webbserver (för vår testning använde vi en Apache 2.2 webbserver). Sidåtgärderna "Få kategori" och "Välj kategori" involverar AJAX-förfrågningar om att få nyhetsinformation från Yahoo! Nyhetsserverns URL, http://rss.news.yahoo.com/. På grund av samma begränsning av AJAX-förfrågningar är det inte möjligt för webbläsaren att skicka dessa förfrågningar direkt till Yahoo! Nyhetsserver. Som ett jobb använder vi en PHP-fil i vår webbserver, namngiven bridge.php, som skickar dessa förfrågningar till Yahoo! Nyhetsservern på uppdrag av webbläsaren och reläer svaret tillbaka. Å andra sidan innebär sidanåtgärden Nyhetsdetalj en vanlig HTTP-GET-förfrågan till Yahoo! Nyhetsserver. Av denna anledning, bridge.php behövs inte.

När det gäller begäran / svarmodellen skiljer sig den inbyggda Android-applikationen från webbapplikationen på två sätt. För det första behöver den inte bridge.php. Detta beror på att när en förpackning ingår som en del av en inbyggd Android-applikation, körs en HTML-sida i android.webkit.WebView utsätts inte för restriktioner med samma ursprung när AJAX-samtal görs. För det andra, i den inbyggda Android-applikationen är sidhändelsen Nyhetsdetalj ett AJAX-samtal snarare än en vanlig HTTP GET-förfrågan. Vi kommer att diskutera detta vidare i Del 3, "Ändringar i index.html".

Sidstrukturen

En "sida" i jQuery Mobile-ramen kan vara en enda sida eller en lokal intern länkad sida på en sida. En behållarsida kommer att innehålla en eller flera innehållssidor. Det går att selektera / dölja innehållssidor selektivt. Som tidigare nämnts består vår webbapplikation av en enda HTML-sida som heter index.html som innehåller all UI och händelsehanteringskoden. Vi definierar vår behållarsida enligt följande:

  
?

De uppgifter-theme behållarens attribut div taggen har värdet b. De uppgifter-theme attributet tillåter oss att välja mellan tillgängliga jQuery Mobile-stilar:

Standardtemat har olika färgstämplar som heter a, b, c, d, e, var och en ger en konsekvent uppsättning färger för olika element på sidan. För vår ansökan valde vi den färg som motsvarade b.

Innehållssidorna Kategorier, Kategorival och Nyheter kommer att finnas inuti behållarsidan. En innehållssida har vanligtvis en rubrik, ett innehållsområde och en sidfot med var och en definierad inom a div märka. Värdet av data roll attribut i div taggen definierar taggens roll.

  • För att definiera en rubrik, använd
  • För att definiera ett innehållsområde, använd
  • För att definiera en sidfot, använd

Låt oss nu titta på de olika innehållssidorna i vår ansökan.

Kategorier Sida

  
 
kategorier
 Lägg till

    I avsnittet rubrik, observera data nobackbtn = "true" attribut. Som standard kommer jQuery Mobile-ramen att innehålla en Back-knapp i rubrikavsnittet. Genom att uttryckligen ställa in attributet som ovan, undviker vi att ha en Back-knapp. Istället innehåller vi en Lägg till-knapp i rubriken med . Eftersom värdet av uppgifter-icon attributet är plus, knappen kommer att ha ett plustecken. Också, class = "ui-BTN-vänster" ser till att knappen ligger på vänster sida av rubriken. Vi vill inte inkludera något i sidfot och därför div för sidfot är tomt. Som ett resultat kommer endast en tunn horisontell linje att visas i sidfoten.

    Innehållsområdet har en så kallad jQuery Mobile-splitlista. Med hänvisning till figur 1 som visar kategorisidan består varje listobjekt av en sektion till vänster med text och ett annat avsnitt till höger med en knapp, därmed delad. De uppgifter-split-icon och uppgifter-split-theme attribut definierar listan som en delad lista. Observera att jQuery Mobile Framework har flexibilitet att formatera delade sektioner på olika sätt. Du kan till exempel placera ikoner på textavsnittet, vilket betyder att istället för en raderingsknapp till höger kan du välja att ha en annan ikon. I vår nyhetsprogram motsvarar varje listobjekt en viss nyhetskategori. Listobjekten kommer att konstrueras dynamiskt baserat på användarval. Ursprungligen är listan tom.

    Kategori Selection Page

      
     
    Välj
     
     
     
     
      
     Få kategori

    På sidan Kategori Selection finns i innehållsområdet ett formulär som gör att användaren kan välja och lägga till en nyhetskategori. Nyhetskategorierna är en delmängd av kategorier i Yahoo! Nyheter som anges i http://news.yahoo.com/rss. Kategorival bearbetas när användaren trycker på knappen med id = "buttonGetCategory".

    Observera att det inte finns någon bakåtknapp och sidfoten är tom.

    Nyhetssida

      
     
    Nyheter
     Tillbaka 
     
     
     Tillbaka till nyhetskategorier

    På den sidan kommer innehållsområdet dynamiskt att fyllas med alla nyheter som är kopplade till en kategori baserad på användarval. Initialt är innehållsområdet tomt. I rubrikavsnittet finns en bakåtknapp. Men istället för att förlita sig på jQuery Mobiles standardback action kommer vi att genomföra den åtgärden via en händelsehanterare. Därför definierar vi uttryckligen en knapp med id = "buttonHdrShowCategories" (Händelselagarkod för knappen kommer att ses över i Del 2, "Gå till kategorisidan från nyhetssidan"). Attributet uppgifter-icon = "pil-l" använder en inbyggd jQuery Mobile-ikon som är avsedd för bakåtknappar. För tillgängliga jQuery Mobile-knappikoner, se http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. På den sidan har vi också en bakåtknapp på sidfoten. Detta beror på att sidan kommer att vara typiskt lång och användaren kommer att behöva rulla ner för att gå igenom alla nyhetsartiklar. Vi vill att användaren ska kunna gå tillbaka från undersidan av sidan utan att behöva rulla hela vägen upp till toppen. Händelseshanterare för de övre och nedre backknapparna kommer att vara identiska.

    Framstegssida

    Tidigare nämnde vi att under olika sidövergångar visar vi en framstegssida tills övergången är klar. Detta är endast nödvändigt i övergångar som kräver behandlingstid på grund av att en begäran framställs eller analyseras. Framgångssidan är mycket enkel, med beskrivande text och en spinnikon.

      
     
    bearbetning? 
     
     
     
    Vänta.

    Nyhetsdetaljsida

    Innehållet på News Detail-sidan tillhandahålls av Yahoo! Nyhetsadress. Hur denna sida visas visas i Del 2, "Gå till nyhetsinformationssidan från nyhetssidan".

    Visar sidor

    Att bara visa en sida uppgår till att visa den sidan och gömmer alla andra sidor. Låt oss diskutera hur man uppnår detta beteende. De div Element som representerar rubrik, innehåll och sidfot på varje sida tilldelas variabler som identifierar dem i jQuery-konventionen som visas nedan. Eftersom dessa används upprepade gånger, definierar globala variabler för dem en prestationsfördel eftersom varje variabel initialiseras en gång men kan användas många gånger.

    För att dölja en sida, kallar vi jQuery Dölj() funktion på sidans sidhuvud, innehåll och sidfältvariabler. Till exempel för att dölja kategorisidan:

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

    På samma sätt, för kategorierna Selection, News och Progress har vi följande "dölj" -funktioner:

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

    För att visa en sida gömmer vi alla andra sidor och ringer till jQuery show() funktion på sidans sidhuvud, innehåll och sidfältvariabler. Till exempel, för att visa kategorisidan har vi följande funktion:

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

    På samma sätt har vi följande "Show" -funktioner för kategorierna Selection, News och progress-sidor:

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

    I stället för att ha en enda HTML-sida som innehåller all UI-koden, kunde vi ha organiserat användargränssnittet i flera HTML-sidor. I denna handledning valde vi det tidigare tillvägagångssättet. I det senare fallet, se jQuery Mobiles navigationsmodell som förklarar hur jQuery Mobile utför sidnavigeringar mellan olika fysiska filer.

    Avslutande kommentarer

    I den här inledande delen av handledningsserien introducerade vi målen i handledningen och diskuterade provprogrammet som ska implementeras. Vi började också presentera jQuery Mobile-ramverket med tonvikt på sidstrukturen. Nästa vecka fortsätter vi med att introducera jQuery Mobile-koden och slutföra implementeringen av vår webbapplikation i del två i serien.

    Koda
    ×