Gebruik jQuery Mobile om een native Android News Reader-app te maken

In deze driedelige tutorialserie is ons belangrijkste doel om te beschrijven hoe jQuery Mobile kan worden gebruikt om een native Android-applicatie te ontwikkelen. Eerst zullen we een stand-alone, voorbeeld-webtoepassing ontwikkelen die artikelen van Yahoo! Nieuws met jQuery Mobile. Vervolgens zullen we die webtoepassing met minimale inspanning omzetten naar een native Android-applicatie.

Het jQuery Mobile-project is een mobielwebraamwerk met de alpha 2-versie die is uitgebracht in november 2010. Het framework kan worden gebruikt om platformonafhankelijke mobiele webtoepassingen te ontwikkelen voor Android OS, iOS, Blackberry OS en vergelijkbare platforms (voor een volledig kruis) -compatibiliteitstabel, zie http://jquerymobile.com/gbs/). Hoewel het framework is ontworpen om cross-mobiele webapps te bouwen, is het mogelijk om jQuery Mobile ook te gebruiken om native Android-applicaties te ontwikkelen. Daarom is het doel van deze tutorialserie tweeledig:

Eerst zullen we de dynamische constructie van elementaire gebruikersinterface-elementen in jQuery Mobile illustreren. Voor dit doel zullen we een voorbeeldwebapplicatie implementeren, de Nieuws-toepassing, om nieuwsartikelen van Yahoo! Nieuws. De toepassing stuurt AJAX-gebaseerde HTTP-aanvragen naar een server en analyseert de XML-reactie om de gebruikersinterface samen te stellen. We zullen de jQuery-dotimeout-plug-in gebruiken om een animatietechniek te illustreren waarbij de nieuwskoppen één voor één worden weergegeven op periodieke intervallen met een fade in / out-effect. Dit geeft de lezer inzicht in de inhoudsopmaak voor jQuery Mobile-lijsten, met name de 'splitlist'. We zullen ook de DST.js-plug-in gebruiken voor het opslaan van de huidige nieuwscategorie selecties van de gebruiker met HTML5 lokale opslag. De webtoepassing bestaat uit een HTML-bestand met de UI-code, jQuery Mobile-bibliotheken en jQuery-plug-ins. Het HTML-bestand maakt ook gebruik van een eenvoudig PHP-bestand dat HTTP-aanvragen doorstuurt naar de Yahoo! Nieuws-URL en verzendt het antwoord terug naar het HTML-bestand. Dit is een methode om dezelfde oorsprongsbeperking van AJAX-verzoeken in webbrowsers te omzeilen. Het PHP-bestand voert geen enkele manipulatie van het verzoek of antwoord uit, omdat het hoofddoel is om jQuery / jQuery Mobile API's te gebruiken voor het maken van het verzoek, het parseren van het antwoord en het samenstellen van de gebruikersinterface. We bieden schermafbeeldingen van de webtoepassing in Android OS en iOS-apparaten om te illustreren dat de gebruikersinterface een consistent uiterlijk heeft op meerdere platforms.

Ten tweede zullen we demonstreren hoe een native Android-applicatie te ontwikkelen waarbij de UI is gecodeerd via het jQuery Mobile-framework. Voor dit doel zullen we gebruik maken van de eerder ontwikkelde webapplicatie. Het belangrijkste idee is om de android.webkit.WebView object als een container om het HTML-bestand in de webtoepassing uit te voeren. De enige noodzakelijke verandering in het HTML-bestand is om de AJAX-verzoeken naar de Yahoo! Nieuws-URL in plaats van het PHP-bestand. We zullen laten zien hoe het HTML-bestand met de UI-code kan worden geïntegreerd met een android.app.Activity en een android.webkit.WebViewClient. We zullen ook laten zien hoe we de startpictogrammen voor onze Android-app kunnen maken op basis van de Android Icon Guidelines.

De bestanden die nodig zijn om het web te gebruiken en de native Android-applicaties kunnen worden gedownload als onderdeel van deze tutorialserie. Voor de Android-applicatie beschrijven we hoe de projectbestanden in de Eclipse IDE kunnen worden geïmporteerd.

Organisatie van deze serie

Deze zelfstudie, de eerste in onze reeks, is als volgt georganiseerd: in het gedeelte 'Paginastroom' beginnen we de toepassing te introduceren door schermafbeeldingen toe te voegen en de paginastroom te beschrijven. Vervolgens bespreken we enkele technische details van de webtoepassing in het gedeelte 'Verzoek / antwoordmodel'. In de sectie "Paginastructuur" presenteren we elementen van jQuery Mobile om onze pagina's samen te stellen.

In de tweede zelfstudie in deze serie voltooien we de ontwikkeling van de webtoepassing. We blijven de jQuery Mobile-code introduceren, bouwen dynamisch een gesplitste lijst op, bespreken een animatietechniek voor tekst in een item in een gesplitste lijst en bieden overgangen tussen de pagina's in onze applicatie. Een speciaal gedeelte van de tweede zelfstudie is gewijd aan het uitleggen hoe we werken rond de beperking van dezelfde oorsprong van AJAX-verzoeken in de webtoepassing. Schermafbeeldingen van de uiteindelijke webtoepassing op iOS- en Android-apparaten zijn beschikbaar voor een zij-aan-zij vergelijking.

De derde en laatste zelfstudie in deze serie is gewijd aan het migreren van de webtoepassing naar een native Android-applicatie. Deze zelfstudie bevat een beschrijving op hoog niveau van de wijzigingen die nodig zijn om onze webapplicatie om te zetten in een Android-app, met speciale aandacht voor de aangepaste android.app.Activity en android.webkit.WebViewClient klassen en een onderzoek van de configuratiebestanden AndroidManifest.xml en strings.xml. Het proces van het instellen van een pictogram voor het starten van een toepassing en de algemene bestandsstructuur van ons Android-project zal ook worden besproken.

Paginastroom

Laten we eens kijken naar de afzonderlijke pagina's van het uiteindelijke product om een idee te krijgen van hoe de applicatie zal werken. De paginastroom die hier wordt besproken, is van toepassing op zowel het web als de native Android-apps:

De eerste pagina is de pagina Categorieën waarop de gebruiker snel alle nieuwsberichten in verschillende interessante categorieën kan bekijken:

Zoals hierboven weergegeven, wordt elke nieuwscategorie weergegeven in een jQuery Mobile-item in de gesplitste lijst dat bestaat uit een sectie aan de linkerkant met tekst en een ander gedeelte aan de rechterkant met een knop. In het tekstgedeelte wordt de categorietitel weergegeven boven de nieuwskoppen voor die categorie. De nieuwskoppen voor een categorie worden de een na de ander getoond in een lus elke 2 seconden met een fade in / out animatie-effect. Op die pagina kan de gebruiker:

Verwijder een categorie door op de knop Wissen te drukken.
Ga naar de lijst met alle nieuwsberichten onder een categorie door op het tekstgedeelte van het lijstitem voor die categorie te klikken.
Voeg een nieuwe categorie toe door op de knop Toevoegen te klikken.

Als op de pagina Categorieën de gebruiker op de knop Toevoegen drukt, wordt de pagina Categorie selecteren weergegeven (Afbeelding 2):

Op deze pagina selecteert de gebruiker een nieuwscategorie uit een lijst en drukt op de knop Categorie ophalen om de categorie aan de pagina Categorieën toe te voegen.

Op de Categorieën-pagina brengt het drukken op het tekstgedeelte van het lijstitem voor een categorie de gebruiker naar de Nieuws-pagina waar alle nieuwsitems onder die categorie worden getoond (Figuur 3):

Op de nieuwspagina kan aan een nieuwsitem een afbeelding zijn gekoppeld, die dient als een koppeling voor meer informatie over het betreffende nieuwsitem. Door op de afbeelding te drukken, gaat de gebruiker naar de pagina Nieuwsdetail (figuur 4):

Houd er rekening mee dat in de webtoepassing de pagina Nieuwsdetail wordt weergegeven in de browser buiten de HTML-pagina waarop de toepassingscode wordt uitgevoerd. Om terug te gaan, moet de gebruiker op de knop Vorige van de browser drukken. Die actie brengt de gebruiker terug naar de pagina Categorieën. In de native Android-applicatie wordt de Nieuws Detail-pagina hierin weergegeven android.webkit.WebView bijvoorbeeld waar de toepassing wordt gestart, buiten de HTML-pagina waarop de toepassingscode wordt uitgevoerd. Door op de terugknop van het apparaat te drukken, gaat de gebruiker terug naar de pagina Categorieën.

Het diagram in Figuur 5 vat het stroommodel samen tussen de pagina's in onze Nieuws-applicatie:

Let op het ronddraaiende pictogram tijdens bepaalde overgangen. Dit geeft aan dat een voortgangspagina wordt getoond aan de gebruiker tijdens de overgang. De voortgangspagina is handig om de gebruiker feedback te geven dat het verzoek wordt verwerkt. Merk op dat een voortgangspagina tijdens de overgang van Nieuws naar Nieuws Detail alleen wordt weergegeven in de native Android-applicatie, niet in de webtoepassing. (Meer discussie hierover zal worden gegeven in deel 3, "Changes In index.html".)

Verzoek / antwoordmodel

Laten we het hebben over hoe verzoeken en antwoorden in de webtoepassing worden afgehandeld. Er is één HTML-pagina met de gebruikersinterface en gebeurtenishandboekcode voor de toepassing Nieuws, die de naam heeft index.html. Dat bestand wordt vanaf een webserver gedownload in de mobiele browser van de gebruiker (voor onze tests hebben we een Apache 2.2-webserver gebruikt). De pagina-acties "Categorie ophalen" en "Categorie kiezen" omvatten AJAX-verzoeken om nieuwsinformatie van Yahoo! Nieuws server URL, http://rss.news.yahoo.com/. Vanwege de beperking van AJAX-verzoeken met dezelfde oorsprong, is het niet mogelijk voor de browser om deze verzoeken rechtstreeks naar de Yahoo! Nieuws server. Als een werkomgeving gebruiken we een PHP-bestand in onze webserver, genaamd bridge.php, die deze verzoeken naar de Yahoo! Nieuws server namens de browser en relais de reactie terug. Aan de andere kant heeft het nieuwsoverzicht van de pagina-actie betrekking op een regulier HTTP GET-verzoek aan de Yahoo! Nieuws server. Om deze reden, bridge.php is niet nodig.

In termen van het verzoek / responsmodel verschilt de native Android-applicatie op twee manieren van de webtoepassing. Ten eerste heeft het niet nodig bridge.php. Dit komt omdat wanneer het wordt verpakt als onderdeel van een native Android-applicatie, een HTML-pagina wordt uitgevoerd android.webkit.WebView is niet onderworpen aan beperkingen van dezelfde oorsprong bij het voeren van AJAX-oproepen. Ten tweede, in de native Android-applicatie is de News News-pagina-actie een AJAX-aanroep in plaats van een regulier HTTP GET-verzoek. We zullen dit verder bespreken in deel 3, "Changes In index.html".

Paginastructuur

Een "pagina" in het jQuery Mobile-raamwerk kan een enkele pagina of een lokale interne gekoppelde pagina binnen een pagina zijn. Een containerpagina bevat een of meer inhoudspagina's. Het is mogelijk om inhoudspagina's selectief weer te geven / verbergen. Zoals eerder vermeld, bestaat onze webtoepassing uit een enkele HTML-pagina met de naam index.html die alle UI en gebeurtenishandboekcode bevat. We definiëren onze containerpagina als volgt:

De data-theme kenmerk van de container div tag heeft de waarde b. De data-theme kenmerk stelt ons in staat om te kiezen uit beschikbare jQuery Mobile-stijlen:

Het standaardthema heeft verschillende kleurstalen genaamd a, b, c, d, e, elk biedt een consistente reeks kleuren voor verschillende elementen op de pagina. Voor onze toepassing hebben we de kleur gekozen die overeenkomt met b.

De inhoudspagina Categorieën, categorieselectie en nieuws worden op de containerpagina weergegeven. Een inhoudspagina heeft meestal een koptekst, een inhoudsgebied en een voettekst met elke binnen een a gedefinieerd div label. De waarde van de data-rol attribuut in de div tag definieert de rol van de tag.

Gebruik om een koptekst te definiëren
Als u een inhoudsgebied wilt definiëren, gebruikt u
Gebruik om een voettekst te definiëren

Laten we nu kijken naar de verschillende inhoudspagina's in onze applicatie.

Categorieën Pagina

   Categorieën
 Toevoegen

In het kopgedeelte, observeer de data-nobackbtn = "true" attribuut. Het framework van jQuery Mobile zou standaard een knop Terug in het kopgedeelte bevatten. Door dat kenmerk expliciet in te stellen zoals hierboven, vermijden we om een knop Terug te gebruiken. In plaats daarvan nemen we een knop Toevoegen in de koptekst op met . Omdat de waarde van de data-icon kenmerk is plus, de knop heeft een plusteken. Ook, class = "ui-btn-links" zorgt ervoor dat de knop aan de linkerkant van de kop wordt geplaatst. We willen niets opnemen in de footer-sectie en daarom de div voor voettekst is leeg. Als gevolg hiervan wordt alleen een dunne horizontale lijn weergegeven in het voettekstgedeelte.

Het inhoudsgebied heeft een zogenaamde jQuery Mobile-gesplitste lijst. Verwijzend naar figuur 1 met de categoriepagina's, bestaat elk lijstitem uit een sectie aan de linkerkant met tekst en een ander gedeelte aan de rechterkant met een knop, vandaar 'gesplitst'. De data-split-icoon en data-split-thema attributen definiëren de lijst als een gesplitste lijst. Houd er rekening mee dat het jQuery Mobile-framework de flexibiliteit biedt om de gesplitste secties op verschillende manieren op te maken. U kunt bijvoorbeeld pictogrammen op het tekstgedeelte plaatsen, wat betekent dat u in plaats van een wisknop aan de rechterkant, kunt kiezen om een ander pictogram te hebben. In onze toepassing Nieuws, komt elk item in de lijst overeen met een bepaalde nieuwscategorie. De lijstitems worden dynamisch samengesteld op basis van gebruikersselecties. Aanvankelijk is de lijst leeg.

Categoriekeuzepagina

   kiezen
 
     
 Krijg categorie

Op de pagina Categoriekeuze bestaat er in het inhoudsgebied een formulier waarmee de gebruiker een nieuwscategorie kan selecteren en toevoegen. De nieuwscategorieën zijn een subset van categorieën in Yahoo! Nieuws zoals vermeld op http://news.yahoo.com/rss. Categoriekeuze wordt verwerkt wanneer de gebruiker op de knop drukt met id = "buttonGetCategory".

Merk op dat er geen terugknop is en dat het voettekstgedeelte leeg is.

Nieuws pagina

   Nieuws
 Terug 
 
  Terug naar nieuwscategorieën

Op die pagina wordt het inhoudsgebied dynamisch gevuld met alle nieuwsitems die aan een categorie zijn gekoppeld op basis van gebruikersselectie. Aanvankelijk is het inhoudsgebied leeg. In het kopgedeelte is er een terugknop. In plaats van te vertrouwen op de standaard terugactie van jQuery Mobile, zullen we die actie echter implementeren via een gebeurtenishandler. Daarom definiëren we expliciet een knop met id = "buttonHdrShowCategories" (Gebeurtenisbehandelingscode voor de knop wordt besproken in deel 2, "Naar de pagina Categorieën van de nieuwspagina"). Het kenmerk data-icon = "arrow-l" gebruikt een ingebouwd jQuery Mobile-pictogram dat is bedoeld voor back-knoppen. Voor beschikbare jQuery Mobile-knoppictogrammen, zie http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. Op die pagina hebben we ook een terugknop op het voetgedeelte. Dit komt omdat de pagina meestal lang zal zijn en de gebruiker moet naar beneden scrollen om alle nieuwsitems te doorlopen. We willen dat de gebruiker terug kan gaan vanaf de onderkant van de pagina zonder helemaal naar boven te hoeven scrollen. Event-handlers voor de knoppen boven en onder achter zijn identiek.

Voortgangspagina

Eerder hebben we vermeld dat we tijdens verschillende pagina-overgangen een voortgangspagina weergeven totdat de overgang is voltooid. Dit is alleen nodig in overgangen die verwerkingstijd vereisen vanwege het samenstellen van een verzoek of het ontleden van het antwoord. De voortgangspagina is heel eenvoudig, met beschrijvende tekst en een draaiend pictogram.

   Verwerken? 
 
  Even geduld aub.

Nieuws Detailpagina

De inhoud van de Nieuws Detail-pagina wordt geleverd door de Yahoo! Nieuws-URL. Hoe deze pagina wordt weergegeven, wordt beschreven in Deel 2, "Naar de nieuwsdetailpagina gaan vanaf de nieuwspagina".

Pagina's weergeven

Als u een pagina gewoon weergeeft, wordt die pagina weergegeven en worden alle andere pagina's verborgen. Laten we bespreken hoe dit gedrag kan worden bereikt. De div elementen die koptekst, inhoud en voettekst van elke pagina vertegenwoordigen, worden toegewezen aan variabelen die ze identificeren in de jQuery-conventie, zoals hieronder wordt getoond. Omdat deze herhaaldelijk worden gebruikt, biedt het definiëren van globale variabelen voor hen een prestatievoordeel aangezien elke variabele maar één keer wordt geïnitialiseerd maar vele keren kan worden gebruikt.

Om een pagina te verbergen, noemen we de jQuery verbergen() functie op de kop-, inhoud- en voettekstvariabelen van die pagina. Om bijvoorbeeld de pagina Categorieën te verbergen:

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

Evenzo hebben we voor de categorieselectie, nieuws en voortgangspagina's de volgende 'hide'-functies:

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

Om een pagina te tonen, verbergen we alle andere pagina's en roepen we de jQuery aan laten zien() functie op de kop-, inhoud- en voettekstvariabelen van die pagina. Om bijvoorbeeld de pagina Categorieën weer te geven, hebben we de volgende functie:

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

Evenzo hebben we voor categorieselectie, nieuws en voortgangspagina's de volgende 'show'-functies:

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

In plaats van één HTML-pagina te hebben die alle UI-code bevat, hadden we de gebruikersinterface kunnen indelen in meerdere HTML-pagina's. Voor de doeleinden van deze zelfstudie hebben we de eerdere aanpak gekozen. Zie voor het laatste geval het navigatiemodel van jQuery Mobile waarin wordt uitgelegd hoe jQuery Mobile pagina-navigatie uitvoert tussen verschillende fysieke bestanden.

Slotopmerkingen

In dit eerste deel van de zelfstudiereeks hebben we de doelen van de zelfstudie geïntroduceerd en de voorbeeldtoepassing besproken die zal worden geïmplementeerd. We zijn ook begonnen met de presentatie van het jQuery Mobile-raamwerk met de nadruk op paginastructuur. Volgende week zullen we de jQuery Mobile-code blijven introduceren en de implementatie van onze webapplicatie in deel twee van deze serie voltooien.

Code

Gebruik jQuery Mobile om een ​​native Android News Reader-app te maken