jQuery Mobile Framework - Een zelfstudie voor formulieren

Stap 1: Demo-paginastructuur van de toepassing

Onze demo-applicatie bestaat uit een enkele html-pagina, index.html, die bestaat uit een containerpagina zoals hieronder getoond:

 
  
... 
 
... 
 
   
... 
   
... 
   
... 
 
... 
 
 ... 

• De hoofdinhoud bevat het formulier dat door de gebruiker moet worden ingevuld en heeft zowel een koptekst als een voettekst.
• Dialooginhoud wordt alleen weergegeven als een vereist formulierveld ontbreekt wanneer het formulier wordt ingediend. Het bestaat uit een waarschuwing en een OK-knop om het dialoogvenster te sluiten. Merk op dat het geen koptekst of voettekst heeft.
• Transitie-inhoud wordt weergegeven nadat het formulier is verzonden totdat het antwoord van de server is ontvangen. Het bestaat uit een "spinner" -afbeelding met korte tekst waarin de gebruiker wordt geïnformeerd dat zijn formulier wordt ingediend. Overgangsinhoud heeft ook geen koptekst of voettekst.
• Bevestigingsinhoud wordt weergegeven nadat een antwoord van de server is ontvangen. Het toont het bevestigingsnummer voor de gebruiker. Bevestigingsinhoud heeft zowel een koptekst als een voettekst.

Contentovergangen worden weergegeven in het onderstaande schema:

Aanvullende opmerkingen over de codelijst hierboven:

• De data-theme kenmerk stelt ons in staat om te kiezen uit beschikbare stijlen in het jQuery Mobile-framework:
  . 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.
• Headers worden geleverd met een terugknop. We hadden geen back-knoppen nodig en kozen er daarom voor ze te verbergen data-nobackbtn = "true".
• Het is mogelijk om tekst op te geven die in de voettekst moet worden weergegeven tussen de
  -tags. In onze toepassing hebben we tekst in de voettekst weggelaten. Als gevolg hiervan ziet de gebruiker in het voettekstje alleen een dunne balk die hetzelfde is gekleurd als de koptekst. Bij tekst heeft de voettekst een vergelijkbare hoogte als de voettekst met de tekst erin.

Formulierelementen

Ons claimformulier bestaat uit de volgende velden:

• verscheidene invoer velden van het type tekst: verzendnummer, voornaam, achternaam, e-mail, telefoon, straatnaam, stad en postcode. Alle velden zijn verplicht, behalve Telefoon.
• EEN kiezen element voor Staat. dit is een verplicht veld.
• EEN textarea element voor een gebruiker om informatie over de ontbrekende of beschadigde zending in te voeren. dit is een verplicht veld.

Laten we als voorbeeld het tekstveld voor verzendnummer bekijken:

 
 Verzendingsnummer*  

We gebruikten een label met een voor attribuut waarvan de waarde gelijk is aan de ID kaart van de invoer element het label is gekoppeld aan. Verder hebben we de label en invoer in een div met data-rol attribuut gewaardeerd als fieldcontain. jQuery Mobile-framework gebruikt de fieldcontain attribuutwaarde voor speciale styling. Bekijk bovendien name = "shipNo_r". Voor deze specifieke toepassing hebben we besloten om de waarde van de te definiëren naam attribuut van een vereist formulierelement als de waarde van de ID kaart attribuut toegevoegd door _r. Als het element niet vereist is, is de waarde van de naam attribuut zal hetzelfde zijn als de waarde van de ID kaart attribuut. Omdat Phone bijvoorbeeld geen verplicht veld is, wordt het als volgt gedefinieerd:

 
 Telefoon  

Zoals we later zullen zien, zal deze speciale naamgevingsconventie ons helpen ontbrekende velden te ontdekken tijdens het indienen van formulieren.

Een ander opvallend vormelement is de kiezen element. Vergelijkbaar met het bovenstaande, de waarde van de voor attribuut is hetzelfde als de id van de kiezen element het label is gekoppeld aan. Ook de label en kiezen zijn ingepakt in een div met de data-rol attribuutwaarde als de fieldcontain. Met de lange lijst met opties die we in deze toepassing hebben, zal jQuery Mobile framework de lijst openen op een nieuwe pagina wanneer de gebruiker zich richt op de kiezen element.

 
 Staat*  Selecteer een staat Alabama Alaska Arizona...  

De formulierpagina zoals weergegeven in een Android 2.2-telefoon wordt hieronder weergegeven. De gebruiker zal door de pagina bladeren om toegang te krijgen tot de elementen in het formulier:

Hetzelfde formulier wordt weergegeven op een iPod touch met iOS 4.1:

Stap 2: Variabele definities

We zullen verwijzen naar verschillende elementen op de html-pagina in onze code. Het is logisch om die verwijzingen slechts één keer te definiëren en ze opnieuw te gebruiken als dat nodig is. Om deze reden declareren we globaal gebruikte variabelen evenals constanten in de hoofd deel van de pagina:

Toewijzingen van die variabelen worden gedaan in jQuery $ (Document) .ready () functie met ID selectors, zoals hieronder getoond. (Herinner dat jQuery $ (Document) .ready () functie wordt aangeroepen wanneer de volledige DOM-hiërarchie op de pagina is geladen. Die functie is de beste locatie om onze variabelen te initialiseren.) We definiëren ook inputMapVar als een verzameling bestaande uit allemaal invoer elementen met _r in hun naam attribuut (de functie-aanroep $ ( 'Input [* name = "_ r"]) selecteert al dergelijke elementen).

Stap 3: functies voor inhoudselectie

Laten we nu eens kijken naar de inhoudselectiefuncties die door event handlers worden genoemd.

Voor het verbergen en weergeven van de hoofdinhoud en de koptekst / voettekst gebruiken we de hideMain () en showMain () functies:

 function hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide ();  function showHain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show (); 

Voor het verbergen en weergeven van de overgangsinhoud gebruiken we de hideContentTransition () en showContentTransition () functies:

 function hideContentTransition () contentTransitionVar.hide ();  function showContentTransition () contentTransitionVar.show (); 

Voor het verbergen en weergeven van de dialooginhoud gebruiken we de hideContentDialog () en showContentDialog () functies:

 function hideContentDialog () contentDialogVar.hide ();  function showContentDialog () contentDialogVar.show (); 

Om de inhoud van de bevestiging en de koptekst / voettekst te verbergen en weer te geven, gebruiken we de hideConfirmation () en showConfirmation () functies:

 function hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide ();  function showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show (); 

Wanneer de pagina is geladen, moet alleen de hoofdinhoud worden weergegeven. Om deze reden zijn andere inhoudspagina's verborgen:

We bespreken hoe je die functies voor inhoudselectie kunt koppelen aan de onderstaande gebeurtenishandlers.

Stap 4: Formulierverzending

Wanneer een gebruiker op de verzendknop drukt, moeten we de formuliergegevens valideren voordat het formulier daadwerkelijk wordt ingediend. Om het eenvoudig te houden, controleren we alleen of alle vereiste velden zijn opgegeven. Als formuliervalidatie succesvol is, geven we de overgangsinhoud weer die bestaat uit een spinnerafbeelding met een korte tekst waarin de gebruiker wordt geïnformeerd dat zijn formulier wordt verzonden. Als de validatie mislukt, tonen we de dialooginhoud die bestaat uit een waarschuwing en een OK-knop om het dialoogvenster te sluiten.

Formuliervalidatie

Labels van de formulierelementen met ontbrekende gegevens worden rood gemarkeerd. Voor dit doel voegen we een nieuwe stijlklasse toe met de naam missing en extend the jQuery Mobile label klasse.

 label.missing color: # FF0000; font-weight: bold; 

Hieronder ziet u de gebeurtenishandler voor het indienen van formulieren. In de typische jQuery-notatie, de identifier voor formulier 1 wordt doorgegeven aan de object-aanroep jQuery om de verzendgebeurtenis af te handelen:

 $ ('# form1'). submit (function () var err = false; // Verberg de hoofdinhoud hideMain (); // Reset de eerder gemarkeerde formulierelementen stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (function (index) $ (this) .prev (). removeClass (MISSING);); // Voer formuliervalidatie-invoer uitMapVar.each (functie (index) if ($ (this) .val ( ) == null || $ (this) .val () == EMPTY) $ (this) .prev (). addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / / Als de validatie mislukt, toon dan de inhoud van het dialoogvenster als (err == true) showContentDialog (); return false; // Als de validatie is geslaagd, toon dan Transition content showContentTransition (); // Dien het formulier $ .post ("/ forms / in requestProcessor.php ", form1Var.serialize (), function (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;);

We hebben een foutmarkering ingesteld op vals en verberg de hoofdinhoud die het formulier bevat. Vervolgens resetten we de eerder gemarkeerde labels op elk lid van de verzameling inputMapVar. Om dat te doen, geven we een inline-functie door als argument voor elk() dat bevat gewoon . $ (This) .prev () removeClass (ontbrekende);. Let daar op deze is de geselecteerde invoer element en prev () geeft de onmiddellijke vorige broer of zus terug die de. is label geassocieerd.

De staat voor selectie van de status en wat voor claimbeschrijving zijn geen tekstvelden. Daarom hebben de bijbehorende labels hun stijlen afzonderlijk gereset.

Nadat alle eerder gemarkeerde labels zijn gereset, gaan we terug naar de vereiste invoer elementen om te controleren of een van deze een ontbrekende waarde heeft. Als dat het geval is, voegen we de ontbrekende klasse toe aan het label dat is gekoppeld aan het invoerveld:

 // Voer formuliervalidatie-invoer uitMapVar.each (functie (index) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev () .addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true;  if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; 

Bovendien is de foutmarkering ingesteld op true en wordt het foutdialoogvenster weergegeven. De onderstaande figuur toont het foutdialoogvenster in onze Android 2.2-telefoon:

Nadat de gebruiker op de knop OK heeft gedrukt, wordt de gebruiker de formulierpagina met de ontbrekende velden gemarkeerd weergegeven, zoals hieronder wordt weergegeven. In die afbeelding is de oriëntatie van het telefoonscherm horizontaal. Houd er rekening mee dat elk label en het tekstveld van de broer of zus in één regel worden weergegeven in tegenstelling tot de verticale richting in afbeelding 3, waar het label zich boven het tekstveld bevindt.

Aan de andere kant, als validatie succesvol is, tonen we de overgangsinhoud en verzenden we het formulier zoals hieronder besproken.

Het indienen van het formulier via Ajax

Het indienen van het formulier maakt gebruik van de jQuery Mobile post functie die drie argumenten accepteert:

 $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), function (data) ...);

• Het eerste argument is de server-URL waarnaar het formulier moet worden verzonden.
• De tweede is de inhoud van het formulier om in te dienen. Om de inhoud van het formulier te krijgen, bellen we gewoon serialize () op het jQuery-object door het de ID voor ons formulier door te geven.
• Het derde argument is een in-line functie om het antwoord te verwerken, gegevens, teruggestuurd vanaf de server.

Merk op dat de post functie voert een Ajax-oproep uit die van nature asynchroon is. Onmiddellijk na het bellen van de post, programma-uitvoering zal doorgaan met het retourneren van false van de voorleggen functie en gebruiker zullen de Transition-inhoud gaan zien.

De in-line functie om het antwoord te verwerken, wordt alleen uitgevoerd wanneer de server antwoord geeft. Voor de eenvoud, de servertoepassing die de formuliergegevens verwerkt, requestProcessor.php, geeft een hardcoded claim-id terug die de gebruiker kan gebruiken voor toekomstig gebruik. Voordat u de claim-id verzendt requestProcessor.php, het slaapt 4 seconden om de verwerkingstijd van de server te emuleren. Het is in deze periode dat de applicatie de Transition-inhoud weergeeft.

Wanneer het serverantwoord wordt ontvangen, wordt de gebeurtenishandlercode uitgevoerd. De eerste stap is het invullen van de span tag met de naam bevestiging met de waarde die wordt geretourneerd door de server. Dit is gewoon gedaan met:

 confirmationVar.text (data);

Vervolgens verbergen we de Transition-inhoud en tonen we de inhoud van de bevestiging die de inhoud bevat span tag met de naam bevestiging:

 
 
Er is een nieuwe claim gemaakt op basis van gegevens die u heeft ingediend.
 
Uw bevestigingsnummer is:  
 

De bevestigingspagina die wordt weergegeven in onze Android 2.2-telefoon, wordt hieronder weergegeven (de richting van de telefoon is horizontaal):

Dezelfde bevestigingspagina wordt als volgt op een iPod touch weergegeven (oriëntatie is verticaal):

De broncode implementeren

De broncode voor de zelfstudie heeft een eenvoudige mapstructuur. Alle bronnen worden opgeslagen in een map met de naam vormen. In die map zijn er twee submappen, css en img. De css map bevat colors.css, welke heeft de label.missing klasse, en img winkel wait.gif, de spinner afbeelding. De index.html en requestProcessor.php bestanden staan ​​direct onder de vormen map. In onze testen hebben we een Apache-webserver gebruikt met versie 2.2.11 met PHP-versie 5.3.0. Als u de vormen map direct onder de DocumentRoot van de webserver kunt u de toepassing openen via http: // [your_host_name] /folder/index.html.

Conclusie

In deze tutorial introduceerden we basisbegrippen uit het jQuery Mobile-framework met focus op paginastructuur, basisstyling, formulierelementen en Ajax-formulierinzending. Een voorbeeld van een applicatie voor het verwerken van claims werd geïntroduceerd om deze concepten te demonstreren. We hebben schermafdrukken gemaakt van verschillende pagina's van de applicatie die werd uitgevoerd in een Android 2.2-telefoon en een iPod touch-apparaat met iOS 4.1. Enkele opmerkingen en slotopmerkingen worden hieronder gegeven:

• Omdat jQuery Mobile is gebouwd op basis van jQuery, kunnen degenen die al bekend zijn met het jQuery-framework, gemakkelijk aan de slag met het jQuery Mobile-framework.
• Het vermogen van het framework om meerdere inhoudspagina's op één html-pagina te vertegenwoordigen met ingebouwde functies om die inhoudspagina's te tonen / verbergen leek erg handig om een ​​formulierapplicatie te maken met verschillende weergaven afhankelijk van de status. Deze techniek kan bijvoorbeeld worden toegepast om gebruikershandleidingen in 'wizardstijl' of enquêteformulieren met meerdere pagina's te implementeren.
• Getest op desktop-, Android 2.2- en iOS 4.1-platforms, zowel de look-and-feel en functionele aspecten van de voorbeeldtoepassing waren consistent. Tijdens de ontwikkeling moet het mogelijk zijn om de belangrijkste aspecten van een jQuery Mobile-applicatie snel te testen en te debuggen in een desktopplatform. Vervolgens kunnen meer tests worden uitgevoerd op de afzonderlijke apparaten en browsers waarvan wordt verwacht dat de toepassing deze ondersteunt.