Share
In deze meerdelige lessenreeks leer ik je hoe je van start tot finish een pizza-bestelapp met Titanium Mobile kunt bouwen. In deze zelfstudie maken we het scherm 'Choose Your Toppings'.
Aan het einde van deel 1 hadden we onze volgende knop om een aangepast evenement te starten. Het is nu tijd om dat aangepaste evenement af te handelen. Het aangepaste evenement zal in onze main.js bestand, dus open dat. De aangepaste gebeurtenislistener zoekt een methode genaamd openToppings, dus laten we dat ook toevoegen:
Accentsconagua
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 functies van het korstvenster openen openCrust (e) crusts.url = 'crusts.js'; crusts.open (); // - Laat onze app luisteren naar onze aangepaste evenementen Ti.App.addEventListener ('toppings', openThing); openCrust (); Dus als je op de volgende knop in het korstvenster drukt, is de openToppings () methode wordt gebeld. Dat zal resulteren in:
Laten we een nieuw JS-bestand maken met de naam toppings.js en sla het op in de main_windows map. In plaats van een lange alinea van mij te lezen die uitlegt wat al deze code doet, heb ik de code rechtstreeks becommentarieerd:
var win = Ti.UI.currentWindow; // - Scrollview voor onze toppingslijst, maximum toppings, numToppings voor referentie var scrollView = Ti.UI.createScrollView (); var maxTuppings = 6; var numToppings = 0; // - Dit zijn onze toppings. Titel is het label, pad is het afbeeldingspad en // - container houdt onze weergave vast wanneer het is geselecteerd var toppings = [title: 'Bacon Bits', pad: '? /images/toppings/bacon_bits.png',container:null, title: 'Beef', pad: '? /images/toppings/beef.png',container:null, title: 'Grilled Chicken', pad: '? /images/toppings/grilled_chicken.png',container:null, title: 'Ham', pad: '? /images/toppings/ham.png',container:null, title: 'Italian Sausage (Crumbled)', pad: '? /images/toppings/italian_sausage_crumbled.png',container:null, title: 'Italian Sausage (Sliced)', pad: '? /images/toppings/italian_sausage_sliced.png',container:null, title: 'Jalapenos', pad: '? /images/toppings/jalapenos.png',container:null, title: 'Mushrooms', path: '? /images/toppings/mushrooms.png',container:null, title: 'Black Olives', pad: '? /images/toppings/olives_black.png',container:null, title: 'Groene Olijven', pad: '? /images/toppings/olives_green.png',container:null, title: 'Red Onions', pad: '? /images/toppings/onions_red.png',container:null, title: 'White Onions', pad: '? /images/toppings/onions_white.png',container:null, title: 'Pepperoni', pad: '? /images/toppings/pepperoni.png',container:null, title: 'Banana Peppers', pad: '? /images/toppings/peppers_banana.png',container:null, title: 'Green Peppers', pad: '? /images/toppings/peppers_green.png',container:null, title: 'Red Peppers', pad: '? /images/toppings/peppers_red.png',container:null, title: 'Pineapple', pad: '? /images/toppings/pineapple.png',container:null, title: 'Pork', pad: '? /images/toppings/pork.png',container:null, title: 'Diced Tomatoes', pad: '? /images/toppings/tomatoes_diced.png',container:null, title: 'Gemarineerde tomaten', pad: '? /images/toppings/tomatoes_marinated.png',container:null, title: 'Roma Tomatoes', pad: '? /images/toppings/tomatoes_roma.png',container:null]; // - toppings titel var toppingsTitle = Ti.UI.createLabel (tekst: '2. Kies je toppings', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 22, kleur: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', width: Ti.Platform.displayCaps.platformWidth, height: 58, left: 10); // - toppings title background var toppingsTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /images/crustHeaderBg.png', top: 100, left: -6, troebelheid: 0 ); toppingsTitleView.add (toppingsTitle); // - houdt het pizzabeeld vast var pizza = Ti.UI.createView (top: 270, width: 216, height: 156, backgroundImage: win.path); // - dit bevat alle geselecteerde toppings var toppingsHolder = Ti.UI.createView (width: 216, height: 156); pizza.add (toppingsHolder); win.add (pizza); win.add (toppingsTitleView); // - Details Knop var details = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/details.png', top: 385, left: 165, onacity: 0); // - Annuleren Knop var cancel = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/cancel.png', top: 385, left: 10, opacity: 0); // - Als Android OS, gebruik de eigenschap image in plaats van backgroundImage (Ti SDK-bug) if (Ti.Platform.osname == 'android') details.image = '? /images/details.png '; cancel.image = '? /images/cancel.png '; pizza.image = win.path; else pizza.opacity = 0; win.add (details); win.add (annuleren); // - Klikgebeurtenis annuleren gaat terug naar het korstvenster en geeft de huidige korst door zodat het de juiste korrektie selecteert bij het retourneren cancel.addEventListener ('klik', functie (e) Ti.App.fireEvent ('cancelToppings', korst: win.crust);); details.addEventListener ('klik', functie (e) ); // - Vervaag de weergaven en knoppen in toppingsTitleView.animate (opacity: 1, duration: 500); pizza.animate (opacity: 1, duration: 500); details.animate (opacity: 1, duration: 500); cancel.animate (opacity: 1, duration: 500); Omdat we onze drie aangepaste eigenschappen aan het toppings-venster hebben toegevoegd toen deze werd geopend, kunnen we ze gebruiken via win.propertyName. In ons geval hebben we de pizza-afbeelding ingesteld win.path. Dat is het idee om elke afbeelding die we als achtergrondafbeelding hebben gebruikt, te gebruiken. Ga je gang en compileer. Zodra je voorbij het korstjesvenster bent, kun je nog niet terug of vooruit gaan, maar je kunt zien dat het bovenste laagvenster de korst bevat die je hebt geselecteerd. Uw toppings-venster moet er ongeveer zo uitzien:
We willen nu onze schuifbare lijst toevoegen aan het toppings-venster. Ik heb in de code uitgelegd wat elke stap doet, maar om te herhalen, iOS heeft niet echt een checkbox-component, dus ik ging door en maakte mijn eigen met behulp van twee PNG-bestanden, en ik verander gewoon de afbeelding op basis van de geselecteerde eigenschap in de checkbox-weergave.
Hieronder ziet u de code voor het genereren van de lijst en het verwerken van de klikgebeurtenis voor elke topping in de lijst:
// - Deze methode schakelt een topping-item in door de geselecteerde eigenschap te controleren // - Het zal een nieuwe topping infaden en ook een topping verwijderen wanneer het uitgeschakeld wordt. Functie toppingListClick (e) if (e.source.selected) e.source.selected = false; e.source.backgroundImage = '? /images/checkbox_no.png '; numToppings - = 1; if (toppings [e.source.toppingID] .container! = null) toppingsHolder.remove (toppings [e.source.toppingID] .container); toppings [e.source.toppingID] .container = null; else // - Als numToppings minder is dan maxToppings, voeg de nieuwe topping toe anders waarschuw ze als (numThingings < maxToppings) e.source.selected = true; e.source.backgroundImage = '? /images/checkbox_yes.png'; var aTopping = Ti.UI.createView( backgroundImage:toppings[e.source.toppingID].path ); if (Ti.Platform.osname == 'android') aTopping.image = toppings[e.source.toppingID].path; else aTopping.opacity = 0; aTopping.animate( opacity:1, duration:500 ); toppingsHolder.add(aTopping); toppings[e.source.toppingID].container = aTopping; numToppings += 1; else alert("Hang on there cowboy! Let's not get carried away with toppings. " + numToppings + " is the max."); /* This method creates the topping list. Since iOS doesn't have checkbox components, I made my own using a view, a button and swapping out the background image */ function 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); for (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 ); 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 ); createToppingsList(); Ten slotte noemen we het createToppingsList methode die wordt aangeroepen telkens het venster wordt geopend. In deel drie van deze tutorialserie zullen we die methode aanpassen, dus als de gebruiker op Annuleren klikt in het venster voor de bestelling, onthoudt de app welke toppings de gebruiker eerder had geselecteerd. Voor nu compileren en je app zou er als volgt uit moeten zien:
U kunt doorgaan en de vakjes in- en uitschakelen om hun functionaliteit te zien.
Dus als je een pizza bestelt, kun je besluiten dat je een andere korst wilt. Omdat dat een goede mogelijkheid is, laten we die functionaliteit toevoegen. De annuleerknop klikgebeurtenis is al geregeld. We starten een aangepast evenement met de naam cancelToppings en we passeren de momenteel geselecteerde korst.
Om deze gebeurtenis aan te kunnen, moeten we teruggaan naar onze main.js bestand en toe te voegen en gebeurtenis luisteraar voor.
// - De methode zal het toppingsvenster sluiten en de functie korstvenster openen openCrust (e) toppings.close (); // - Als de gebeurtenis een korst-eigenschap heeft, betekent dit dat de gebruiker eenmaal op // drukt in het bovenste venster als (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Laat onze app luisteren naar onze aangepaste evenementen Ti.App.addEventListener ('toppings', openThing); Ti.App.addEventListener ( 'cancelToppings', openCrust); U kunt dus zien dat we een andere gebeurtenislistener hebben toegevoegd. Wanneer het de gebeurtenis ontvangt nadat de gebruiker "cancel" in toppings heeft geraakt, zal het de openCrust methode. Herinner je je in deel een hoe ik zei dat we er uiteindelijk gegevens aan zullen doorgeven? Welnu, die tijd is gekomen. In de klikgebeurtenis voor de annuleerknop hebben we de huidige korst gepasseerd. We hebben de openCrust methode door het bovenste laagvenster te sluiten en als de eigenschap korsten zich voordoet in de gebeurtenis, betekent dit dat ze op cancel klikken, dus ik wil het korsttype toevoegen als een eigenschap aan het korstervenster. Wat dit zal doen is ons in staat stellen om automatisch de eerder geselecteerde korst te selecteren. We zullen dat in de volgende stap behandelen.
Doe open crusts.js. We moeten een voorwaardelijke toevoegen om te controleren of de eigenschap korsten in het venster aanwezig is. U zult deze code direct onder onze willen plaatsen ScrollView variabele:
// - Als het venster de eigenschap korst heeft, betekent dit dat we afkomstig zijn uit het // - toppings-venster, dus kies de laatst bekende geselecteerde korst als (win.crust) for (i = 0; i < crusts.length; i++) if (win.crust == crusts[i].title) returnCrust = i; break; scrollView.scrollToView(returnCrust);
Als de eigenschap korst niet nul is, wordt dit fragment doorlopen in de bestaande array van korsten en wordt de eigenschap gebroken zodra de eigenschap korst overeenkomt met de titel in de array. Zodra het een overeenkomst heeft gevonden, gebruiken we de scrollToView methode op onze ScrollView. Dit zal onze korst vooraf selecteren uit onze laatste sectie.
We hebben nog een deel aan deze stap. Als je hebt gecompileerd, zul je merken dat de naam van de korst fout is, dus dat moeten we oplossen. Plaats dit kleine fragment onder onze crustType veranderlijk.
// - als returnCrust niet nul is, stelt u het label van het korsttype in als (returnCrust! = null) crustType.text = crusts [returnCrust] .title;
Probleem opgelost! Wanneer je annuleert in het bovenste venster, gaan we terug naar het korstvenster en selecteren we de korst die we eerder hadden geselecteerd, evenals de korsttitel. Ga je gang en test het. Selecteer een korst, ga naar toppings en druk op Annuleren. Je zou zoveel mogelijk heen en weer moeten kunnen gaan als je wilt!
In deel twee hebben we enkele aangepaste gebeurtenissen afgehandeld waarmee we met behulp van ons konden navigeren tussen sommige vensters openToppings en openCrust methoden in main.js. We hebben geleerd over het doorgeven van gegevens tussen vensters. We hebben in essentie een nieuwe component gemaakt die niet bestaat in iOS en dat is het selectievakje. Natuurlijk, de iOS SDK heeft de tuimelschakelaar, maar dat is lelijk en ziet er niet goed uit in onze applicatie. In deel drie van deze tutorial gaan we in op het venster met de verzendopdracht. Eenmaal in het venster vullen we een aantal tekstvelden in en na indiening sturen we al onze pizza-informatie naar een PHP-script. Het PHP-script stuurt vervolgens een e-mail naar het adres van uw keuze, waarbij wordt gesimuleerd hoe een bestelling zou komen als dit een echte, werkende toepassing was.
