Share
Welkom bij de derde aflevering in onze serie waarin wordt gedemonstreerd hoe je een applicatie voor het bestellen van pizza's met Titanium Mobile maakt. In deze zelfstudie maken we het scherm 'Uw bestelling verzenden'.
Nu de gebruiker toppings kan selecteren en deselecteren, moeten we de gebruiker toestaan om daadwerkelijk een bestelling in te dienen. Laten we beginnen met het wijzigen van de click-gebeurtenis binnenin toppings.js:
Accentsconagua
details.addEventListener ('klik', functie (e) var pizzaInfo = []; for (var i = 0; i < toppings.length; i++) if (toppings[i].container != null) pizzaInfo.push(toppings[i].title); Ti.App.fireEvent('details',crust:win.crust,path:win.path,toppings:pizzaInfo); ); Als je nu op de knop Details in het bovenste gedeelte van het venster klikt, loopt de bovenstaande code door onze gigantische reeks toppings en controleer je de houder eigenschap voor elk arrayitem. Als het item niet nul is, wordt het toegevoegd aan onze temp-array, genaamd pizzaInfo. Nadat de lus is voltooid, starten we een nieuw aangepast evenement met de naam gegevens. We zullen drie parameters doorgeven aan dit evenement:
pizzaInfo).openDetails Evenement We moeten onze wijzigen main.js bestand om te luisteren naar ons aangepaste evenement, dus ga je gang en open dat bestand nu. Je gaat ook een nieuwe methode toevoegen genaamd openDetails naar de code:
var win = Ti.UI.currentWindow; // - Maak de subvensters var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var details = Ti.UI.createWindow (); // - We hebben de achtergrond hier ingesteld, omdat dit niet zal veranderen win.backgroundImage = '? /images/bg_main.png '; // - Omvat onze klok Ti.include ('? /Includes/clock.js'); // - Deze methode zal het venster korsten / details sluiten en de functie openparing van het bovenste laagvenster openen (e) crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open (); // - De methode zal het toppingsvenster sluiten en de korstvensterfunctie openen openCrust (e) toppings.close (); // - Als de gebeurtenis een eigenschap van korst heeft, betekent dit dat de gebruiker eenmaal opheffen in het bovenste venster klikt als (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Deze methode zal het toppingsvenster sluiten en de detailsvensterfunctie openen openDetails (e) toppings.close (); details.crust = e.crust; details.path = e.path; details.toppings = e.toppings; details.url = 'details.js'; details.open (); // - Laat onze app luisteren naar onze aangepaste evenementen Ti.App.addEventListener ('toppings', openThing); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'details', openDetails); openCrust (); Oké, jouw main.js bestand moet nu overeenkomen met de bovenstaande code. In de bovenstaande code hebben we onderaan een nieuwe gebeurtenislistener toegevoegd met de details en wanneer de app die gebeurtenis ontvangt, willen we de openDetails methode. In de openDetails methode, we sluiten eerst het bovenste laag venster. Vervolgens stellen we een aantal eigenschappen in het detailvenster in met de waarden van de gebeurtenis die we hebben doorgegeven toppings.js. We hebben ook de eigenschap URL ingesteld op details.js en bellen uiteindelijk de Open methode.
We moeten een nieuw javascript-bestand maken met de naam details.js en sla het op in de main_windows map. Wat we in dit bestand willen doen, is drie tekstvelden toevoegen:
OPMERKING: in een toepassing in de echte wereld zouden we uiteraard meer velden hebben, maar in het belang van deze tutorial zullen we slechts drie velden hebben gemaakt.
We hebben ook een samenvatting van de pizza die de gebruiker heeft besteld met een knop om de bestelling in te dienen. Laten we beginnen met de interface hiervoor:
var win = Ti.UI.currentWindow; var orderReq = Titanium.Network.createHTTPClient (); // - Naam Tekst Veld var names = Titanium.UI.createTextField (color: '# 336699', top: 100, left: 10, width: 300, height: 40, hintText: 'Name', backgroundImage: '? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adres1 Tekstveld var address1 = Titanium.UI.createTextField (color: '# 336699', top: 140, left: 10, width: 300, height: 40, hintText: 'Address 1', backgroundImage: ' ? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adres2 Tekstveld var address2 = Titanium.UI.createTextField (color: '# 336699', boven: 180, links: 10, width: 300, height: 40, hintText: 'City, State, Zip Code' , backgroundImage: '? /images/textfield.png', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT); // - Luister naar de volgende klik op de namen van de toetsenborden .addEventListener ('return', function () address1.focus ();); address1.addEventListener ( 'return' functie () address2.focus ();); win.add (namen); win.add (address1); win.add (adres2); // - Deze methode maakt een mooie opgemaakte samenvatting van de gebruikersorderfunctie getFormattedPizza () var text = win.crust + 'pizza met: \ n'; if (win.toppings.length == 0) text + = '• Gewoon (kaaspizza) \ n '; else voor (var i = 0; i < win.toppings.length; i++) text += '• ' + win.toppings[i] + '\n'; return text; //-- Are formatted text field var pizzaInfoText = Ti.UI.createLabel( text:getFormattedPizza(), font: fontFamily:'Verdana', fontSize:14 , color:'#fff', shadowColor:'#333', shadowOffset:x:1,y:1, textAlign:'left', width:Ti.Platform.displayCaps.platformWidth, height:160, top:210, left:10 ); win.add(pizzaInfoText); //-- Order Button var order = Ti.UI.createButton( width:137, height:75, backgroundImage:'? /images/order.png', top:385, left:165, opacity:0 ); //-- Cancel Button var cancel = Ti.UI.createButton( width:137, height:75, backgroundImage:'? /images/cancel.png', top:385, left:10, opacity:0 ); //-- If android OS, use the image property instead of backgroundImage (Ti SDK bug) if (Ti.Platform.osname == 'android') order.image = '? /images/order.png'; cancel.image = '? /images/cancel.png'; win.add(order); win.add(cancel); //-- Fade the order button in order.animate( opacity:1, duration:500 ); //-- Fade the cancel button in cancel.animate( opacity:1, duration:500 ); Het bovenstaande codeblok ziet er misschien eng uit, maar eigenlijk is het vrij eenvoudig. We beginnen met het definiëren van onze winnen zowel variabel als onze orderReq variabel. De orderReq variabele zal ons verzoek verwerken naar ons PHP-bestand dat we in de volgende tutorial van deze serie zullen behandelen.
Vervolgens definiëren we onze drie tekstvelden en geven ze enkele eenvoudige eigenschappen. We voegen een toe terugkeer gebeurtenislistener op de tekstvelden, dus wanneer u op het toetsenbord op Volgende drukt, springt het naar het volgende tekstveld. We maken een label genaamd pizzaInfoText en stel zijn tekst eigendom van onze getFormattedPizza methode. Deze methode retourneert een opgemaakte lijst van onze gekozen korsten en toppings. Als de gebruiker geen toppings heeft geselecteerd, wordt het korsttype en een eenvoudige kaaspizza weergegeven. We hebben ook onze bestelling- en annuleerknoppen gemaakt en deze vervaagd. Uw interface zou er nu als volgt uit moeten zien:
U bevindt zich dus in het scherm met de verzendopdracht en u besluit dat u paddestoelen uit uw toplijst wilt verwijderen. Nou geen probleem! De app kent de toppings die je momenteel hebt geselecteerd al, dus we zullen die temp-array gewoon weer doorgeven toppings.js en controleer de toppings opnieuw. We moeten eerst een gebeurtenislistener toevoegen aan onze annuleerknop. Scroll naar de onderkant van uw details.js bestand en voeg dit toe:
// - Annuleer knopgebeurtenis. Keert terug naar het toppingsvenster en onthoudt de gebruikersselecties cancel.addEventListener ('click', function () Ti.App.fireEvent ('cancelDetails', crust: win.crust, path: win.path, toppings: win. toppings);); We schieten nog een ander aangepast evenement, dit keer genoemd cancelDetails, en opnieuw passeren we drie parameters:
cancelDetails Evenement Laten we teruggaan naar main.js. We moeten een nieuwe gebeurtenislistener toevoegen. Voeg het volgende toe aan het einde van onze evenementlisteners.
Ti.App.addEventListener ( 'cancelDetails', openToppings);
Nu hebben we al een openToppings methode. We moeten het echter wel wijzigen.
// - Deze methode sluit het venster korsten / details en opent de functie openpompen van het bovenste laagvenster (e) if (e.toppings) details.close (); else crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open ();
Dus, met onze aangepaste methode, doen we een controle voor de topping-eigenschap die aan de gebeurtenis is gekoppeld. Als het niet nul is, willen we het detailsvenster sluiten. Als het null is, willen we het korstvenster sluiten. We voegen nog steeds onze aangepaste eigenschappen toe en openen vervolgens ons bovenste laag venster.
Wanneer we teruggaan, willen we de selectievakjes van de topping die we eerder hebben gekozen, vooraf selecteren. We willen ook de toppings visueel aan de pizza toevoegen. Open de toppings.js bestand en scrol omlaag naar de createToppingsList methode. Het verschil tussen uw huidige en die hieronder is als win.returnToppings is niet nul, het zal door onze grotere toppings-array lopen en het vergelijken met onze temp-array. Als ze overeenkomen, controleer dan het selectievakje opnieuw, voeg visueel toe aan de korst en verhoog ons aantal toppings.
/ * Deze methode maakt de toplijst. Omdat iOS geen vinkje heeft, heb ik mijn eigen gemaakt met behulp van een weergave, een knop en het omzetten van de achtergrondafbeelding * / functie createToppingsList () scrollView.opacity = 0; scrollView.top = 155; scrollView.height = 120; scrollView.contentWidth = Ti.Platform.displayCaps.platformWidth; scrollView.contentHeight = 'auto'; scrollView.showVerticalScrollIndicator = true; win.add (ScrollView); voor (i = 0; i < toppings.length; i++) //-- The label var toppingLabel = Ti.UI.createLabel( text:toppings[i].title, font: fontFamily:'Verdana', fontWeight:'bold', fontSize:14 , color:'#fff', shadowColor:'#333', shadowOffset:x:1,y:1, textAlign:'left', width:Ti.Platform.displayCaps.platformWidth - 10, left:10 ); //-- We add a custom property 'selected' to our checkbox view var checkbox = Ti.UI.createView( width:340, height:16, backgroundImage:'? /images/checkbox_no.png', selected:false, toppingID:i ); //-- if the user hits cancel in the details window, we go back and repopulate the list with previously checked toppings if (win.returnToppings) for (j = 0; j < win.returnToppings.length; j++) if (win.returnToppings[j] == toppings[i].title) var aTopping = Ti.UI.createView( backgroundImage:toppings[i].path ); if (Ti.Platform.osname == 'android') aTopping.image = toppings[i].path; else aTopping.opacity = 0; aTopping.animate( opacity:1, duration:500 ); toppingsHolder.add(aTopping); toppings[i].container = aTopping; checkbox.backgroundImage = '? /images/checkbox_yes.png'; checkbox.selected = true; numToppings += 1; var toggler = Ti.UI.createView( width:Ti.Platform.displayCaps.platformWidth, height:20, top: i * 20 ); //-- We use the singletap event rather than the click since its in a scroll view checkbox.addEventListener('singletap',toppingListClick); toggler.add(toppingLabel); toggler.add(checkbox); scrollView.add(toggler); scrollView.animate( opacity:1, duration:500 ); In deze tutorial hebben we het "Submit Oder" -scherm gecreëerd, het laatste scherm dat we in deze tutorialserie nodig zullen hebben. We hebben ook twee aangepaste evenementen toegevoegd aan onze app waarmee we konden schakelen tussen de schermen 'Choose Crust' en 'Submit Order'.
Het volgende deel van deze serie gaat over het doen van de formulierverificatie die nodig is om de inzendingen af te handelen en vervolgens de gekozen bestelling samen met de ingediende klantinformatie te e-mailen (een webserver met een e-mailclient en PHP is geïnstalleerd om de e-mail ordermelding).
