Share
In deze serie zullen we een Twitter-client ontwikkelen met behulp van de frameworks jQuery Mobile en PhoneGap. Dit project zal worden geïmplementeerd in Android- en iOS-omgevingen als een native applicatie. De gebruikersinterface van de applicatie, eenvoudig "Tweets" genaamd, wordt gebouwd met behulp van jQuery Mobile en PhoneGap zal worden gebruikt om de native applicatie te maken. We zullen ook de PhoneGap Storage API gebruiken voor toegang tot native databasefunctionaliteit. Alle codering gebeurt met HTML en JavaScript met behulp van jQuery, jQuery Mobile en de PhoneGap-bibliotheken.
De belangrijkste kenmerken van de Tweets-toepassing die in deze reeks worden besproken, zijn:
Accentsconagua
user_timeline en zoeken. De toepassingscode is gebaseerd op de functie jQuery ajax () om toegang te krijgen tot die API-methoden.Deze tutorial is georganiseerd in 4 delen. In het volgende deel van Deel I, genaamd "jQuery Mobile en PhoneGap", introduceren we kort jQuery Mobile en PhoneGap en bespreken we de ontwikkeling van platformonafhankelijke native applicaties die deze frameworks gebruiken. In de volgende sectie, "Schermstroom", presenteren we de toepassing Tweets en beschrijven we de schermstroom. De sectie met de naam "jQuery Mobile Page Structure" is een introductie tot verschillende concepten op hoog niveau in het jQuery Mobile-framework, met name container- en inhoudspagina's.
In deel II zullen we beginnen met het bekijken van de Tweets-applicatie. In "Beoordeling van index.html" ligt onze focus vooral op de statische structuur van de HTML- en jQuery Mobile-code die de toepassingsschermen vormen. Het gedeelte met de naam "Twitter API" geeft een overzicht van de Twitter API-methoden user_timeline en zoeken. Het volgende gedeelte, "Code Review", geeft een overzicht van de JavaScript-code die de toepassingsfunctionaliteit implementeert. Deel II zal "Initial Page Load", "Utility Functions" en "Database Access Functions" bespreken en de discussie starten over "Core Business Logic Functions".
In Deel III zullen we doorgaan met het inspecteren van de "Core Business Logic Functions", waarbij we van start gingen in Deel II en de code-evaluatie van de Tweets-applicatie afrondden door te kijken naar "Event Handlers" en "Page Display Functions".
Het laatste deel van onze zelfstudie, deel IV, begint met de sectie met de naam "Bestanden in het downloadarchief", waarin we de inhoud van het archiefbestand bij deze serie beschrijven. In "Environment Specific Topics" leggen we uit hoe de applicatie te importeren in Eclipse voor het Android-platform en Xcode voor het iOS-platform. In die sectie geven we ook schermafbeeldingen van de applicatie in een Android-telefoon, een iPod touch en een iPad 2. Tot slot geven we concluderende opmerkingen in "Conclusies".
Alle pictogrammen en splash-afbeeldingen in het downloadarchief zijn gemaakt op basis van een pictogramset van Smashing Magazine. Zoals vermeld op de gelinkte website: "U kunt de set voor al uw projecten gratis en zonder enige beperking gebruiken, maar het is verboden deze te verkopen."
Het jQuery Mobile Project is een gebruikersinterfacesysteem voor mobiele apparaten dat uniform werkt op verschillende platforms, zoals Android en iOS. Hoewel jQuery Mobile zich voornamelijk richt op de uniformiteit van de gebruikersinterface in een webapplicatieparadigma, staat het PhoneGap-framework het ontwikkelen van op HTML5 en JavaScript gebaseerde native applicaties toe die kunnen worden geïmplementeerd in meerdere mobiele platforms, waaronder Android en iOS. Deze frameworks kunnen samen worden gebruikt om native applicaties te ontwikkelen waarbij de gebruikersinterface via jQuery Mobile wordt gebouwd en native apparaatfuncties worden geconstrueerd met behulp van PhoneGap.
Het volgende diagram geeft een vereenvoudigde weergave van een native toepassing die is geïmplementeerd in Android en iOS, die is ontwikkeld met HTML5, CSS en JavaScript.
Houd er rekening mee dat zowel jQuery Mobile als PhoneGap extra mobiele platforms ondersteunen, zoals BlackBerry OS, Symbian en anderen. In deze serie zullen we ons echter alleen richten op Android en iOS.
Verschillende voordelen van het ontwikkelen van native applicaties met behulp van jQuery Mobile en PhoneGap staan hieronder vermeld.
Aan de andere kant zijn er nadelen aan het ontwikkelen van een native applicatie met behulp van jQuery Mobile en PhoneGap. Sommige daarvan staan hieronder vermeld.
Zoals bij elk ontwikkelingsproject, moet u bovendien nog steeds platformspecifieke ontwikkel- en testtools gebruiken om uw toepassing op Android- en iOS-apparaten te testen en te implementeren..
Voor de voorbeeldtoepassing die in deze reeks is besproken, hebben we jQuery Mobile versie 1.0 RC1 en PhoneGap versie 1.1.0 gebruikt. Dat waren de nieuwste versies op het moment dat deze serie werd gemaakt.
Er zijn twee verschillende patronen van schermstroom, één voor breedbeeld-apparaten met een breedte van meer dan 500 pixels en één voor apparaten met een klein scherm waarbij de breedte van het scherm kleiner is dan 500 pixels. Met deze definitie wordt een iPad-apparaat als breedbeeld beschouwd, terwijl een iPod touch of een Motorola Droid-telefoon als een smal scherm wordt beschouwd. De drempelwaarde, 500, is een constante die is gedefinieerd in de toepassingscode.
Laten we eerst kijken naar de schermstroom voor breedbeeld-apparaten. Het beginscherm heeft twee knoppen met labels 'Schermnaam toevoegen' en 'Zoekterm toevoegen'. Er is een tekstveld onder de knoppen. Aan de linkeronderzijde van het scherm bevindt zich een lijst die bestaat uit de schermnaam en zoektermen die door de gebruiker zijn ingevoerd. De schermnamen zijn grijs en de zoektermen hebben een gele achtergrond.
Om een Twitter-schermnaam in te voeren, typt de gebruiker de naam in het tekstveld onder de knoppen en drukt hij op de knop 'Schermnaam toevoegen'. Evenzo, om een Twitter-zoekterm in te voeren, typt de gebruiker de term in het tekstveld onder de knoppen en drukt hij op de knop 'Zoekterm toevoegen'.
Als de gebruiker op de knop Verwijderen klikt aan de rechterkant van een lijstitem (weergegeven als een 'x' in een cirkel), wordt dat item uit de lijst verwijderd.
Als de gebruiker op een lijstitem klikt voor een Twitter-schermnaam, wordt een draaiwieltje weergegeven als een indicatie dat de gebruikerstijdlijn (tweets) voor die schermnaam wordt opgehaald van Twitter.
Nadat de applicatie de tijdlijn heeft ontvangen die hoort bij de schermnaam, worden ze aan de rechterkant van de pagina naast de lijst weergegeven. Dat zijn de laatste 11 tijdlijnitems die bij de schermnaam horen. De drempelwaarde 11 is een constante die is gedefinieerd in de toepassingscode.
Merk op dat het volgens de Twitter API mogelijk is om de tijdlijn van een gebruiker te achterhalen zonder authenticatie als hun tijdlijn niet beschermd / privé is. Onze applicatie houdt geen authenticatie in, vandaar dat alleen openbare tijdlijnen voor ons beschikbaar zijn.
Evenzo wordt, als de gebruiker op een lijst met items klikt voor een Twitter-zoekterm, een ronddraaiend wiel weergegeven als een indicator dat zoekresultaten worden opgehaald van Twitter, vergelijkbaar met het scherm in figuur 4. Na ontvangst van de zoekresultaten, de toepassing geeft ze weer aan de rechterkant van de pagina naast de lijst, vergelijkbaar met figuur 5. Dit zijn de laatste 11 resultaten die aan de zoekterm zijn gekoppeld. De drempelwaarde 11 is een constante die is gedefinieerd in de toepassingscode.
De tijdlijn of zoekresultaten kunnen URL-links bevatten. Als de gebruiker op een van deze koppelingen drukt, wordt een webbrowser geopend om de webpagina weer te geven die aan de koppeling is gekoppeld. Wanneer dit gebeurt, is de Tweets-applicatie niet langer actief.
Het volgende diagram vat de schermstroom samen die hierboven is besproken.
Voor apparaten met een klein scherm is de schermstroom vergelijkbaar, maar vanwege ruimtegebrek worden de invoer (lijstitems), de voortgangspagina en de resultaten in verschillende schermen weergegeven.
Het beginscherm, de pagina 'Ingangen', heeft de knoppen, het tekstveld en de lijst met schermnamen en zoektermen gestapeld.
Als de gebruiker op een lijstitem klikt, wordt de pagina 'Voortgang' als een afzonderlijk scherm weergegeven.
Wanneer de resultaten zijn ontvangen, wordt de voortgangspagina vervangen door de 'Resultaten'.
Als de gebruiker op een van de URL-links op de pagina Resultaten drukt, zal een browser-applicatie de webpagina in de link beginnen weer te geven. Wanneer dit gebeurt, is de Tweets-applicatie niet langer actief. Op Android-apparaten kan de gebruiker teruggaan naar de Tweets-app door op de terug-knop van het apparaat te drukken. Voor iOS-apparaten moet de gebruiker de browser sluiten en de Tweets-toepassing starten vanaf het startscherm door op het pictogram van de toepassing te klikken.
Het onderstaande diagram vat de schermstroom samen voor apparaten met een klein scherm.
We zullen nu bespreken hoe de schermen in onze applicatie worden weergegeven met behulp van de jQuery Mobile-pagina-elementen (hier lenen we wat materiaal uit mijn vorige zelfstudie Build an Contacts Application) en voor een gedetailleerde discussie over hoe pagina's worden geconstrueerd met jQuery Mobile framework, zie de sectie Anatomie van een pagina in de jQuery Mobile-referentiedocumentatie).
Een enkel HTML-bestand in het jQuery Mobile-framework bestaat uit één containerpagina met een of meer inhoudspagina's in de container. De containerpagina heeft een data-role = "pagina" kenmerk, terwijl de inhoudspagina's een data-role = "content" attribuut. Een inhoudspagina kan optioneel zowel een koptekst als een voettekst bevatten. In het onderstaande voorbeeld zijn er twee inhoudspagina's met zowel een koptekst als een voettekst, en één inhoudspagina zonder koptekst of voettekst.
.....................
Binnen een containerpagina is het de bedoeling dat er slechts één inhoudspagina tegelijk wordt weergegeven. Het idee is om logisch gerelateerde schermen samen te groeperen binnen een enkele containerpagina en elk daarvan te definiëren als een inhoudspagina. Die inhoudspagina's kunnen bijvoorbeeld gemeenschappelijke JavaScript-code delen.
In de Tweets-applicatie is er één containerpagina die op de fysieke pagina is opgeslagen index.html. Op die containerpagina worden alle inhoudspagina's opgeslagen die de toepassing nodig heeft. Voor de narrow-screen apparaten worden de schermen Input (Afbeelding 7), Progress (Figuur 8) en Resultaten (Figuur 9) weergegeven als afzonderlijke inhoudspagina's. Voor apparaten met een breedbeeldscherm is er slechts één inhoudspagina, genaamd 'Wide', die alle vereiste functionaliteit biedt. De volgende figuur vat deze discussie samen.
In het eerste deel van deze tutorial introduceerden we kort jQuery Mobile en PhoneGap en bespraken we cross-platform native applicaties met behulp van deze frameworks. Vervolgens presenteerden we de toepassing Tweets en beschreven we de schermstroom. Vervolgens hebben we een inleiding gegeven tot verschillende concepten op hoog niveau in het jQuery Mobile-framework. In het bijzonder zijn de container- en inhoudspagina's besproken.
In deel II zullen we beginnen met het bekijken van de Tweets-applicatie. In "Beoordeling van index.html", zal onze belangrijkste focus liggen op de statische structuur van de HTML en de jQuery Mobile-code die deel uitmaakt van de toepassingsschermen. Het gedeelte met de naam "Twitter API" geeft een overzicht van de Twitter API-methoden user_timeline en zoeken. Het volgende gedeelte, 'Code Review', geeft een beoordeling van de JavaScript-code die de toepassingsfunctionaliteit implementeert. Deel II zal de "Initiële paginalading", "Functies van het hulpprogramma", "Functies voor database-toegang" bespreken en vervolgens de discussie over "Core Business Logic Functions" starten.
