Share
Bine ați venit la cea de-a treia tranșă din seria noastră care demonstrează cum să construiți o aplicație de comandă a pizza cu Titanium Mobile. În acest tutorial, vom crea ecranul "Trimiteți comanda".
Acum, că utilizatorul poate selecta și deselecta topping-urile, trebuie să permitem utilizatorului să trimită efectiv o comandă. Să începem prin modificarea evenimentului cu clicuri în interiorul detaliilor toppings.js:
Accentsconagua
details.addEventListener ('click', funcția (e) var pizzaInfo = []; pentru (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); ); Acum când apăsați pe butonul de detaliu în fereastra topping-uri, codul de mai sus va trece prin gama noastră de topuri și verificați recipient proprietate pentru fiecare element de matrice. Dacă elementul nu este nul, el îl va adăuga la matricea temp, numită pizzaInfo. După terminarea buclă, vom declanșa un nou eveniment personalizat numit Detalii. Vom trece trei parametri la acest eveniment:
pizzaInfo).openDetails Eveniment Trebuie să ne modificăm main.js fișier pentru a asculta evenimentul personalizat, așa că continuați și deschideți fișierul acum. De asemenea, veți adăuga o nouă metodă numită openDetails la codul:
var win = Ti.UI.currentWindow; // - Crearea sub-ferestrelor var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var detalii = Ti.UI.createWindow (); // - Am setat fundalul aici din moment ce această schimbare obiceiul win.backgroundImage = '? /images/bg_main.png "; // - Include ceasul nostru Ti.include ('? /Includes/clock.js'); // - Aceasta metoda va inchide fereastra cruste / detalii si va deschide functia fereastra topping openToppings (e) crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open (); // - Metoda va închide fereastra toppings și va deschide funcția fereastră crusts openCrust (e) toppings.close (); // - Dacă evenimentul are o proprietate crustă, înseamnă că utilizatorul a lovit anula o dată în fereastra toppings dacă (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Această metodă va închide fereastra topping-uri și va deschide funcția de fereastră de detalii openDetails (e) toppings.close (); details.crust = e.crust; details.path = e.path; details.toppings = e.toppings; detalii.url = 'details.js'; details.open (); // - Aplicația noastră să asculte evenimentele personalizate Ti.App.addEventListener ("toppings", openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'detalii', openDetails); openCrust (); Bine, tu main.js fișierul ar trebui să se potrivească acum cu codul de mai sus. În codul de mai sus, am adăugat un nou ascultător de evenimente în partea de jos numit detalii, iar când aplicația primește acel eveniment, dorim să sunăm la openDetails metodă. În openDetails metoda, închidem mai întâi fereastra topping-urilor. Apoi, setăm câteva proprietăți în fereastra de detalii cu valorile din evenimentul în care am trecut toppings.js. De asemenea, setăm proprietatea adresei URL la details.js și, în final, sunăm deschis metodă.
Trebuie să facem un nou fișier javascript numit details.js și salvați-l în main_windows pliant. Ceea ce vrem să facem în acest fișier este să adăugăm trei câmpuri de text:
NOTĂ: Într-o aplicație în lumea reală, vom avea în mod evident mai multe domenii, dar de dragul acestui tutorial vom crea doar trei domenii.
De asemenea, vom avea un rezumat al pizza pe care utilizatorul a comandat-o cu un buton de comandă de trimitere. Să începem cu interfața pentru aceasta:
var win = Ti.UI.currentWindow; var ordReq = Titanium.Network.createHTTPClient (); // - Nume Câmp text var names = Titanium.UI.createTextField (color: '# 336699', top: 100, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Name', backgroundImage: '? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, tastaturăTip: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adresă1 Câmp text var address1 = Titanium.UI.createTextField (color: '# 336699', top: 140, stânga: 10, lățimea: 300, înălțimea: 40, hintText: 'Address 1', backgroundImage: ? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, tastaturăTip: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Adresă2 Câmpul textului var address2 = Titanium.UI.createTextField (culoare: '# 336699', top: 180, stânga: 10, lățimea: 300, înălțimea: 40, hintText: , backgroundImage: '? /images/textfield.png', paddingLeft: 8, paddingRight: 8, tastaturăTip: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT); // - Ascultați pentru următorul clic pe plăcile cheii names.addEventListener ('return', function () address1.focus ();); address1.addEventListener ( 'return', funcția () address2.focus ();); win.add (nume); win.add (Adresa1); win.add (Adresa2); // - Această metodă face un sumar frumos formatat al funcției de comandă a utilizatorului getFormattedPizza () var text = win.crust + 'pizza cu: \ n'; dacă (win.toppings.length == 0) text + = '• Câmpie (pizza cu brânză) \ n '; altceva pentru (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 ); Blocul de cod de mai sus poate părea înfricoșător, dar într-adevăr este destul de simplu. Începem prin definirea noastră victorie variabilă, precum și cea a noastră orderReq variabil. orderReq Variabila va rezolva cererea noastră în fișierul nostru PHP pe care îl vom acoperi în tutorialul următor al acestei serii.
Apoi definim cele trei câmpuri de text și le oferim câteva proprietăți simple. Adăugăm a întoarcere ascultător de evenimente pe câmpurile de text, astfel încât atunci când loviți în continuare pe tastatură, el sări la câmpul de text următor. Facem o etichetă numită pizzaInfoText și setați-o text proprietatea noastră getFormattedPizza metodă. Această metodă va returna o listă formatată de crusta și topping-urile alese. Dacă utilizatorul nu a selectat topping-uri, vom afișa tipul de crustă și o simplă pizza de brânză. De asemenea, am făcut comenzile noastre și anulam butoanele și le-am decolorat. Interfața dvs. ar trebui să arate astfel:
Deci, sunteți în ecranul de comandă și decideți că doriți să eliminați ciupercile din lista dvs. de bază. Ei bine, nici o problemă! Aplicația cunoaște deja toppingurile pe care le-ați selectat în mod curent, așa că vom trece pur și simplu la acea matrice temp toppings.js și verificați din nou topurile. Mai întâi trebuie să adăugăm un ascultător al evenimentului butonului nostru de anulare. Derulați până la partea de jos a dvs. details.js fișier și adăugați aceasta:
// - Evenimentul buton Cancel. Se întoarce în fereastra topping-uri și își amintește selecțiile utilizatorilor cancel.addEventListener ('click', funcția () Ti.App.fireEvent ('cancelDetails', crust: win.crust, path: win.path, toppings: win. toppings);); Tragem încă un alt eveniment personalizat, de data aceasta numit cancelDetails, și din nou trecem trei parametri:
cancelDetails Eveniment Să ne întoarcem main.js. Trebuie să adăugăm un nou ascultător al evenimentului. Adăugați următoarele la sfârșitul ascultătorilor evenimentului nostru.
Ti.App.addEventListener ( 'cancelDetails', openToppings);
Acum avem deja unul openToppings metodă. Cu toate acestea, trebuie să îl modificăm.
// - Aceasta metoda va inchide fereastra cruste / detaliu si va deschide functia fereastra topping openToppings (e) if (e.toppings) details.close (); altceva crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open ();
Deci, prin metoda modificată, facem un control pentru proprietatea topping-urilor legate de eveniment. Dacă nu este nul, vrem să închidem fereastra cu detalii. Dacă este nul, vrem să închidem fereastra crustei. Încă mai adăugăm proprietățile noastre personalizate și apoi deschidem fereastra de topping.
Când ne întoarcem, vrem să preselectăm casetele de selectare ale topping-ului pe care l-am ales anterior. Vrem, de asemenea, să adăugăm toppingurile la pizza vizual. Deschideți toppings.js fișier și derulați în jos până la createToppingsList metodă. Diferența dintre cea curentă și cea de mai jos este dacă win.returnToppings nu este nulă, va trece printr-o matrice de topuri mai mari și o va compara cu matricea noastră temp. Dacă se potrivesc, verificați din nou caseta de selectare, adăugați vizualul la coajă și creșteți numărarea toppingurilor.
/ * Această metodă creează lista de completare. Având în vedere că iOS nu are componente de checkmark, am făcut propria mea folosind o vizualizare, un buton și schimbând imaginea de fundal * / function createToppingsList () scrollView.opacity = 0; scrollView.top = 155; scrollView.height = 120; scrollView.contentWidth = Ti.Platform.displayCaps.platformWidth; scrollView.contentHeight = 'auto'; scrollView.showVerticalScrollIndicator = adevărat; win.add (scrollView); pentru (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 ); În acest tutorial am creat ecranul "Submit Oder" care este ultimul ecran de care avem nevoie în această serie de tutori. De asemenea, am adăugat două aplicații personalizate în aplicația noastră, care ne-au permis să sară între ecranele "Alegeți Crust" și "Trimiteți comanda".
Următoarea parte a acestei serii se va baza pe realizarea autentificării formularului necesar pentru gestionarea trimiterilor și apoi prin trimiterea prin e-mail a comenzii selectate împreună cu informațiile despre client trimise (un server web cu un client de poștă și PHP instalat va fi necesar pentru a trimite comandă prin e-mail).
