Share
I denne multi-del opplæringsserien lærer jeg deg hvordan du bygger en pizza bestillingsapp med Titanium Mobile fra start til slutt. I denne opplæringen lager vi "Velg din toppings" -skjermen.
På slutten av del 1 hadde vi vår neste knapp ved å skyte en tilpasset hendelse. Det er nå på tide å håndtere den tilpassede hendelsen. Den tilpassede hendelsen kommer til å ligge i vår main.js fil, så åpne den opp. Den tilpassede hendelseslytteren leter etter en metode som kalles openToppings, så la oss legge til det også:
Accentsconagua
var win = Ti.UI.currentWindow; // - Opprett subvinduer var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var detaljer = Ti.UI.createWindow (); // - Vi angir bakgrunnen her siden dette vil ikke endre win.backgroundImage = '? /images/bg_main.png '; // - Inkluder våre klokke Ti.include ('? /Includes/clock.js'); // - Denne metoden vil lukke skorpen / detaljer vinduet og åpne toppings vinduet funksjonen openToppings (e) crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open (); // - Metoden vil lukke toppingsvinduet og åpne crusts-vinduet funksjonen openCrust (e) crusts.url = 'crusts.js'; crusts.open (); // - Få appen vår å lytte etter våre tilpassede arrangementer Ti.App.addEventListener ('toppings', openToppings); openCrust (); Så, når du treffer neste knapp i skorpe-vinduet, blir den openToppings () Metoden kommer til å bli kalt. Det vil resultere i:
La oss lage en ny JS-fil som heter toppings.js og lagre den til main_windows mappe. I stedet for å lese et langt avsnitt av meg som forklarer hva denne koden gjør, har jeg bare kommentert koden direkte:
var win = Ti.UI.currentWindow; // - Scrollview for vår toppings liste, maksimale toppings, numToppings for referanse var scrollView = Ti.UI.createScrollView (); var maxToppings = 6; var numToppings = 0; // - Dette er våre toppings. Tittelen er etiketten, banen er bildebanen og // - beholderen holder vår visning når den er valgt var toppings = [title: 'Bacon Bits', path: '? /images/toppings/bacon_bits.png',container:null, title: 'Beef', sti: '? /images/toppings/beef.png',container:null, title: 'Grillet kylling', sti: '? /images/toppings/grilled_chicken.png',container:null, title: 'skinke', sti: '? /images/toppings/ham.png',container:null, title: 'Italiensk pølse (smuldret)', sti: '? /images/toppings/italian_sausage_crumbled.png',container:null, title: 'Italiensk pølse (skiver)', sti: '? /images/toppings/italian_sausage_sliced.png',container:null, title: 'Jalapenos', sti: '? /images/toppings/jalapenos.png',container:null, title: 'sopp', sti: '? /images/toppings/mushrooms.png',container:null, title: 'Black Olives', sti: '? /images/toppings/olives_black.png',container:null, title: 'Green Olives', sti: '? /images/toppings/olives_green.png',container:null, title: 'Red Onions', sti: '? /images/toppings/onions_red.png',container:null, title: 'White Onions', sti: '? /images/toppings/onions_white.png',container:null, title: 'Pepperoni', sti: '? /images/toppings/pepperoni.png',container:null, title: 'Banana Peppers', sti: '? /images/toppings/peppers_banana.png',container:null, title: 'Green Peppers', sti: '? /images/toppings/peppers_green.png',container:null, title: 'Red Peppers', sti: '? /images/toppings/peppers_red.png',container:null, title: 'Ananas', sti: '? /images/toppings/pineapple.png',container:null, title: 'Svinekjøtt', sti: '? /images/toppings/pork.png',container:null, title: 'Diced Tomater', sti: '? /images/toppings/tomatoes_diced.png',container:null, title: 'Marinerte tomater', sti: '? /images/toppings/tomatoes_marinated.png',container:null, title: 'Roma Tomater', sti: '? /images/toppings/tomatoes_roma.png',container:null]; // - toppings tittelen var toppingsTitle = Ti.UI.createLabel (text: '2. Velg toppfraktene', skrifttype: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 22, color: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', bredde: Ti.Platform.displayCaps.platformWidth, høyde: 58, venstre: 10); // - toppings tittel bakgrunn var toppingsTitleView = Ti.UI.createView (bredde: 328, høyde: 58, backgroundImage: '? /images/crustHeaderBg.png', topp: 100, venstre: -6, opasitet: 0 ); toppingsTitleView.add (toppingsTitle); // - holder pizzabildet pizza = Ti.UI.createView (topp: 270, bredde: 216, høyde: 156, backgroundImage: win.path); // - dette vil holde alle de valgte toppings var toppingsHolder = Ti.UI.createView (bredde: 216, høyde: 156); pizza.add (toppingsHolder); win.add (pizza); win.add (toppingsTitleView); // - Detaljer Button var detaljer = Ti.UI.createButton (bredde: 137, høyde: 75, backgroundImage: '? /Images/details.png', topp: 385, venstre: 165, opacity: 0); // - Avbryt Knapp var avbryt = Ti.UI.createButton (bredde: 137, høyde: 75, backgroundImage: '? /Images/cancel.png', topp: 385, venstre: 10, opacity: 0); // - Hvis android OS, bruk bildegenskapen i stedet for backgroundImage (Ti SDK bug) hvis (Ti.Platform.osname == 'android') details.image = '? /images/details.png '; cancel.image = '? /images/cancel.png '; pizza.image = win.path; ellers pizza.opacity = 0; win.add (detaljer); win.add (avbryt); // - Avbryt klikkhendelse går tilbake til skorpevinduet og passerer gjeldende skorpe, slik at den velger den riktige når du returnerer avbryt.addEventListener ('klikk', funksjon (e) Ti.App.fireEvent ('cancelToppings', skorpe: win.crust);); detaljer.addEventListener ('klikk', funksjon (e) ); // - Fade visningene og knappene i toppingsTitleView.animate (opacity: 1, duration: 500); pizza.animate (opacity: 1, duration: 500); detaljer.animate (opacity: 1, duration: 500); cancel.animate (opacity: 1, duration: 500); Siden vi la våre tre egendefinerte egenskaper til toppingsvinduet når det ble åpnet, kan vi referere dem med win.propertyName. I vårt tilfelle setter vi pizzabildet til win.path. Det forteller visningen å bruke hvilket bilde vi valgte som bakgrunnsbilde. Gå videre og kompilere. Når du kommer forbi vinduet med skorpe, vil du ikke kunne gå tilbake eller videresende ennå, men du kan se at toppingsvinduet vil inneholde hvilken skare du har valgt. Din påfyllingsvindu bør se ut som den nedenfor:
Vi vil nå legge til vår rullbare liste i toppingsvinduet. Jeg har forklart i koden hva hvert trinn gjør, men for å gjenta, har iOS egentlig ikke en kryssboks-komponent, så jeg gikk videre og laget min egen med to PNG-filer, og jeg bytter bare bildet basert på den valgte eiendom i avkrysningsruten.
Nedenfor er koden for generering av listen, samt håndtering av klikkhendelsen for hver topping i listen:
// - Denne metoden skifter et topping-element ved å markere den valgte eiendommen // - Det vil fade en ny topping i og også fjerne et topping når det blir ukontrollert funksjon toppingListClick (e) if (e.source.selected) e.source.selected = false; e.source.backgroundImage = '? /images/checkbox_no.png '; numToppings - = 1; hvis (toppings [e.source.toppingID] .container = null) toppingsHolder.remove (toppings [e.source.toppingID] .container); pålegg [e.source.toppingID] .container = null; else // - Hvis numToppings er mindre enn maxToppings, legg til den nye toppingen, varsle dem om (numToppings < 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(); Til slutt kaller vi createToppingsList Metode som blir kalt hver gang vinduet åpnes. I del tre av denne opplæringsserien vil vi modifisere den metoden, så hvis brukeren treffer avbryt i bestillingsvinduet, vil appen huske hvilke påfyllinger brukeren tidligere hadde valgt. For nå, kompilere og appen din skal se slik ut:
Du kan gå videre og merke av og på boksene for å se funksjonaliteten deres.
Så når du bestiller en pizza, kan du bestemme deg for å få en annen skorpe. Siden det er en god mulighet, la vi legge til den funksjonaliteten. Avbryt knappen klikk hendelsen er allerede tatt vare på. Vi skyter en tilpasset hendelse som heter cancelToppings og vi passerer den gjeldende valgte skorpeen.
For å håndtere denne hendelsen må vi gå tilbake til vår main.js fil og legg til og hendelse lytter for det.
// - Metoden lukker toppingsvinduet og åpner skorsteinsvinduets funksjon openCrust (e) toppings.close (); // - Hvis hendelsen har en skorpeegenskap, betyr det at brukeren slår avbryt en gang // - i toppingsvinduet hvis (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Få appen vår å lytte etter våre tilpassede arrangementer Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Så du kan se vi la til en annen hendelselytter. Når den mottar hendelsen etter at brukeren slår "avbryt" i toppings, vil den brenne openCrust metode. Husk i del ett hvordan jeg sa at vi vil passere data til det til slutt? Vel, den tiden er kommet. I klikkhendelsen for Avbryt-knappen passerte vi gjeldende skorpe. Vi har endret openCrust metode ved å lukke toppingsvinduet og hvis skareegenskapen er i tilfelle, betyr det at de slår avbryt, så jeg vil legge til skorpe-typen som en eiendom til skorpe-vinduet. Hva dette vil gjøre er å tillate oss å automatisk velge den tidligere valgte skorpen. Vi vil dekke det i neste trinn.
Åpne opp crusts.js. Vi må legge til en betingelse for å sjekke om skorpenes eiendom eksisterer på vinduet. Du vil ønske å plassere denne koden direkte under vår scrollView variabel:
// - Hvis vinduet har skareegenskapen, betyr det at vi kommer fra // - toppingsvinduet, så velg den sist kjente valgte skorpeen hvis (win.crust) for (i = 0; i < crusts.length; i++) if (win.crust == crusts[i].title) returnCrust = i; break; scrollView.scrollToView(returnCrust);
Hvis skareegenskapen ikke er null, hva dette kuttet vil gjøre, er sløyfe gjennom vår eksisterende skorpe-matrise og bryte når skareegenskapen samsvarer med tittelen i matrisen. Når den finner en kamp, bruker vi scrollToView metode på vår scrollView. Dette vil forutse vår skorpe fra vår siste del.
Vi har en del til dette trinnet. Hvis du kompilerte, vil du legge merke til at tittelen på skorpen er feil, så vi må fikse det. Sett inn denne lille teksten under vår crustType variabel.
// - hvis returnCrust ikke er null, angi skorpen type etiketten hvis (returnCrust! = null) crustType.text = crusts [returnCrust] .title;
Problemet løst! Når du treffer avbryt på toppingsvinduet, går vi tilbake til skorpe-vinduet og forvalter skorstenen vi hadde valgt før, så vel som å passe til skorstetittel. Gå videre og test det ut. Velg en skorpe, gå til pålegg, og klikk på avbryt. Du bør kunne gå frem og tilbake så mye du vil!
I del to håndterte vi noen tilpassede hendelser som tillot oss å navigere mellom noen vinduer ved hjelp av vår openToppings og openCrust metoder i main.js. Vi lærte om å overføre data mellom vinduer. Vi har hovedsakelig opprettet en ny komponent som ikke eksisterer i iOS som er avkrysningsboksen. Sikker, iOS SDK har bryteren, men det er stygg og vil ikke se bra ut i vår søknad. I del tre av denne opplæringen vil vi dekke å gå til innleveringsvinduet. En gang i vinduet fyller vi ut noen tekstfelter, og ved innsending vil vi sende all vår pizzainfo til et PHP-skript. PHP-skriptet vil da sende e-postadressen til ditt valg, og simulere hvordan en ordre ville komme inn hvis dette var en virkelighets, arbeidsansøkning.
