Share
Velkommen til den tredje delen i serien vår som demonstrerer hvordan du bygger en pizza bestillingsprogram med Titanium Mobile. I denne opplæringen lager vi skjermbildet "Send inn bestillingen".
Nå som brukeren er i stand til å velge og fravelge påfyll, må vi tillate brukeren å faktisk sende inn en bestilling. La oss begynne med å endre detaljene, klikk hendelsen inni toppings.js:
Accentsconagua
detaljer.addEventListener ('klikk', funksjon (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); ); Nå når du trykker på detaljknappen i toppingsvinduet, vil koden ovenfor løpe gjennom vårt gigantiske utvalg av påfyll og sjekke container Egenskapen for hvert array element. Hvis elementet ikke er null, vil det legge til det i vårt temp array, kalt pizzaInfo. Etter at sløyfen er ferdig, brenner vi en ny tilpasset hendelse som heter detaljer. Vi sender tre parametere til denne hendelsen:
pizzaInfo).openDetails Begivenhet Vi må endre vår main.js fil for å lytte etter vår tilpassede hendelse, så fortsett og åpne den filen nå. Du skal også legge til en ny metode som heter openDetails til koden:
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 lukker toppingsvinduet og åpner skorsteinsvinduets funksjon openCrust (e) toppings.close (); // - Hvis hendelsen har en skorpeegenskap, betyr det at brukeren treffer avbryt en gang i toppingsvinduet hvis (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Denne metoden vil lukke toppingsvinduet og åpne detaljvinduet funksjonen openDetails (e) toppings.close (); details.crust = e.crust; details.path = e.path; details.toppings = e.toppings; details.url = 'details.js'; details.open (); // - Få appen vår å lytte etter våre tilpassede arrangementer Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'detaljer', openDetails); openCrust (); Ok, din main.js filen skal nå matche koden ovenfor. I den ovennevnte koden la vi til en ny hendelselytter i nedre kalt detaljer, og når appen mottar den hendelsen, vil vi ringe til openDetails metode. I openDetails metode, vi lukker først toppingsvinduet. Vi stiller da noen egenskaper på detaljeringsvinduet med verdiene fra hendelsen vi passerte inn toppings.js. Vi stiller også URL-egenskapen til details.js og ringe til slutt åpen metode.
Vi må lage en ny javascriptfil kalt details.js og lagre det i main_windows mappe. Det vi vil gjøre i denne filen, er å legge til tre tekstfelter:
MERK: I en virkelighetsapplikasjon vil vi selvsagt ha flere felt, men for denne opplærings skyld vil vi bare ha skapt tre felt.
Vi skal også ha en oppsummering av pizzaen brukeren har bestilt med en innleveringskode. La oss starte med grensesnittet for dette:
var win = Ti.UI.currentWindow; var orderReq = Titanium.Network.createHTTPClient (); // - Navn Tekstfelt var navn = Titanium.UI.createTextField (farge: '# 336699', topp: 100, venstre: 10, bredde: 300, høyde: 40, hintText: 'Name', backgroundImage: '? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adresse1 Tekstfelt var address1 = Titanium.UI.createTextField (color: '# 336699', topp: 140, venstre: 10, bredde: 300, høyde: 40, hintText: 'Adresse 1', backgroundImage: ' ? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adresse2 Tekstfelt var address2 = Titanium.UI.createTextField (farge: '# 336699', topp: 180, venstre: 10, bredde: 300, høyde: 40, hintText: 'By, Stat, Postnummer' , backgroundImage: '? /images/textfield.png', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT); // - Lytt til neste klikk på tastaturkortene.addEventListener ('return', funksjon () address1.focus ();); address1.addEventListener ( 'tilbake', funksjon () address2.focus ();); win.add (navn); win.add (Adresse 1); win.add (Address2); // - Denne metoden gjør en fin formatert oppsummering av brukerens ordrefunksjon getFormattedPizza () var text = win.crust + 'pizza med: \ n'; hvis (win.toppings.length == 0) text + = '• Vanlig (ostpizza) \ n '; ellers for (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 ); Ovennevnte blokk av kode kan se skummelt ut, men egentlig er det ganske enkelt. Vi starter med å definere vår vinne variabel så vel som vår orderReq variabel. De orderReq variabel vil håndtere vår forespørsel ut til vår PHP-fil som vi vil dekke i neste opplæring i denne serien.
Vi definerer da våre tre tekstfelt og gir dem noen enkle egenskaper. Vi legger til en komme tilbake hendelseslytter i tekstfeltene, så når du treffer neste på tastaturet hopper det til neste tekstfelt. Vi lager en etikett pizzaInfoText og sett dens tekst eiendom til vår getFormattedPizza metode. Denne metoden vil returnere en formatert liste over våre valgte skorpe og påfyll. Hvis brukeren valgte ingen påfyll, vil vi vise skorpen og en enkel ostepizza. Vi har også gjort vår bestilling og kansellerer knapper og bleknet inn. Grensesnittet ditt skal se slik ut nå:
Så du er på skjermbildet for innlevering, og du bestemmer deg for å fjerne sopp fra din toppliste. Vel, ikke noe problem! Appen kjenner allerede toppings du har valgt for øyeblikket, så vi vil bare sende det temparettet tilbake til toppings.js og kontroller påfyllingene. Vi må først legge til en hendelseslytter til avbryt-knappen. Bla til bunnen av din details.js fil og legg til dette:
// - Avbryt knapphendelse. Går tilbake til toppingsvinduet og husker brukerens valg avbryt.addEventListener ('klikk', funksjon () Ti.App.fireEvent ('cancelDetails', crust: win.crust, sti: win.path, toppings: win. toppings);); Vi skyter enda en tilpasset hendelse, denne gangen heter cancelDetails, og igjen passerer vi tre parametere:
cancelDetails Begivenhet La oss gå tilbake til main.js. Vi må legge til en ny hendelselytter. Legg til følgende til slutten av våre arrangementslyttere.
Ti.App.addEventListener ( 'cancelDetails', openToppings);
Nå har vi allerede en openToppings metode. Vi må imidlertid endre det.
// - Denne metoden vil lukke skorpen / detaljer-vinduet og åpne toppingsvinduets funksjon openToppings (e) if (e.toppings) details.close (); ellers crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open ();
Så, med vår modifiserte metode, gjør vi en sjekk for toppingsegenskapen knyttet til arrangementet. Hvis det ikke er null, vil vi lukke detaljvinduet. Hvis det er null, vil vi lukke skarevinduet. Vi legger fortsatt til våre egendefinerte egenskaper og åpner deretter vårt toppingsvindu.
Når vi går tilbake, ønsker vi å forhåndsse i avmerkingsboksene til topping vi tidligere valgte. Vi vil også legge til pålegget til pizzaen visuelt. Åpne opp toppings.js fil og bla ned til createToppingsList metode. Forskjellen mellom din nåværende og den nedenfor er hvis win.returnToppings er ikke null, det vil gå gjennom vårt større toppings array og sammenligne det med vår temp array. Hvis de samsvarer, merker du av i avmerkingsboksen, legger den visuelle til skorpe, og øker vår toppings telling.
/ * Denne metoden lager topplisten. Siden iOS ikke har merkekomponenter, har jeg laget min egen ved å bruke en visning, en knapp og bytte ut bakgrunnsbildet * / funksjonen 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 ); //-- 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 ); I denne opplæringen opprettet vi "Send Oder" skjermen som er den siste skjermen vi trenger i denne opplæringsserien. Vi har også lagt til to flere egendefinerte hendelser i vår app som tillot oss å hoppe mellom skjermbildene "Choose Crust" og "Submit Order".
Neste del av denne serien vil gå over med å gjøre skjemaautentiseringen nødvendig for å håndtere innleveringer, og deretter sende den bestilte bestillingen sammen med kundeinformasjonen (en webserver med en postklient og PHP installert vil være nødvendig for å sende den e-postordrevarsling).
