Share
În această serie multi-part tutorial, vă voi învăța cum să construiți o aplicație de comandă a pizza cu Titanium Mobile de la început până la sfârșit. În acest tutorial, vom crea ecranul "Alegeți toppingurile".
La sfârșitul părții 1, am avut următorul buton de lansare a unui eveniment personalizat. Acum este momentul să vă ocupați de acest eveniment personalizat. Evenimentul personalizat se va afla în noi main.js dosar, atât de deschis încât sus. Ascultatorul evenimentului personalizat caută o metodă numită openToppings, asa ca sa adaugam si asta:
Accentsconagua
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) crusts.url = 'crusts.js'; crusts.open (); // - Aplicația noastră să asculte evenimentele personalizate Ti.App.addEventListener ("toppings", openToppings); openCrust (); Deci, când ați lovit următorul buton în fereastra de cruste, openToppings () se va numi metoda. Acest lucru va duce la:
Să creăm un nou fișier JS numit toppings.js și salvați-l la main_windows pliant. Mai degrabă decât să citesc un paragraf lung din mine care explică ce face acest cod, tocmai am comentat codul direct:
var win = Ti.UI.currentWindow; // - Scrollview pentru lista noastră de topuri, maxim topings, numToppings pentru referință var scrollView = Ti.UI.createScrollView (); var maxToppings = 6; var numToppings = 0; // - Acestea sunt toppingurile noastre. Titlul este eticheta, calea este calea imaginii și // - containerul va ține punctul nostru de vedere atunci când este selectat var toppings = [title: 'Bacon Bits', cale: '? /images/toppings/bacon_bits.png',container:null, title: "Carne de vită", cale: "? /images/toppings/beef.png',container:null, title: 'Pui la grătar', cale: '? /images/toppings/grilled_chicken.png',container:null, title: 'Ham', cale: '? /images/toppings/ham.png',container:null, title: "Cârnați italieni", cale: "? /images/toppings/italian_sausage_crumbled.png',container:null, title: "Cârnați italieni (felii)", cale: '? /images/toppings/italian_sausage_sliced.png',container:null, title: 'Jalapenos', calea: '? /images/toppings/jalapenos.png',container:null, title: "Ciuperci", cale: "? /images/toppings/mushrooms.png',container:null, title: 'Măsline negre', cale: '? /images/toppings/olives_black.png',container:null, title: "Măsline verzi", calea: "? /images/toppings/olives_green.png',container:null, title: 'Ceapă roșie', cale: '? /images/toppings/onions_red.png',container:null, title: 'Ceapă albă', cale: '? /images/toppings/onions_white.png',container:null, title: 'Pepperoni', cale: '? /images/toppings/pepperoni.png',container:null, title: "Banana Peppers", cale: '? /images/toppings/peppers_banana.png',container:null, title: 'Green Peppers', cale: '? /images/toppings/peppers_green.png',container:null, title: "Red Peppers", calea: "? /images/toppings/peppers_red.png',container:null, title: 'Pineapple', cale: '? /images/toppings/pineapple.png',container:null, title: 'Carne de porc', cale: '? /images/toppings/pork.png',container:null, title: 'Diced Tomatoes', cale: '? /images/toppings/tomatoes_diced.png',container:null, title: "Tomate marinate", cale: "? /images/toppings/tomatoes_marinated.png',container:null, title: "Roșii români", cale: "? /images/toppings/tomatoes_roma.png',container:null]; // - nume toppings var toppingsTitle = Ti.UI.createLabel (text: '2. Alegeți toppingurile', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 22 A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign: "stânga", lățimea: Ti.Platform.displayCaps.platformWidth, înălțimea: 58, stânga: 10); // - toppings titlul fundal var toppingsTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /images/crustHeaderBg.png', top: 100, left: -6, opacity: 0 ); toppingsTitleView.add (toppingsTitle); // - pastreaza imaginea pizza var pizza = Ti.UI.createView (top: 270, lățimea: 216, înălțimea: 156, backgroundImage: win.path); // - aceasta va păstra toate topurile selectate var toppingsHolder = Ti.UI.createView (width: 216, height: 156); pizza.add (toppingsHolder); win.add (pizza); win.add (toppingsTitleView); // - Detalii Button var details = Ti.UI.createButton (lățime: 137, înălțime: 75, fundalImage: '? /Images/details.png', sus: 385, stânga: 165, opacitate: 0); // - Anulare Buton var anulează = Ti.UI.createButton (lățime: 137, înălțime: 75, fundal: "? /Images/cancel.png", sus: 385, stânga: 10, opacitate: 0); // - Dacă sistemul de operare Android, folosiți proprietatea imaginii în loc de backgroundImage (bug-ul SDK) dacă (Ti.Platform.osname == 'android') details.image = '? /images/details.png "; cancel.image = '? /images/cancel.png "; pizza.image = win.path; altceva pizza.opacity = 0; win.add (detalii); win.add (anulare); // - Anulați evenimentul clic se întoarce în fereastra crustei și trece crusta curentă, așa că selectează cea corectă atunci când se întoarce cancel.addEventListener ('click', funcția (e) Ti.App.fireEvent ('cancelToppings', crusta: win.crust);); details.addEventListener ("clic", funcția (e) ); // - Fadează vederile și butoanele din toppingsTitleView.animate (opacity: 1, duration: 500); pizza.animate (opacitate: 1, durata: 500); details.animate (opacitate: 1, durata: 500); cancel.animate (opacitate: 1, durata: 500); De când am adăugat cele trei proprietăți personalizate în fereastra topping-urilor atunci când a fost deschisă, putem să le folosim win.propertyName. În cazul nostru, setăm imaginea pizza win.path. Asta spune ca vederea să folosească oricare imagine pe care am selectat-o ca imagine de fundal. Mergeți și compilați-vă. După ce treceți de fereastra de cruste, nu veți mai putea să vă întoarceți sau să vă întoarceți încă, dar puteți vedea că fereastra de topuri va conține oricare crustă pe care ați selectat-o. Fereastra de topping ar trebui să arate similar cu cea de mai jos:
Vrem să adăugăm acum lista noastră derulantă în fereastra de topuri. Am explicat în cod ceea ce face fiecare pas, dar, pentru a reitera, iOS nu are într-adevăr o componentă de casetă, așa că am făcut-o și am făcut propria mea folosire a două fișiere PNG și am schimbat doar imaginea bazată pe selectat proprietăți în caseta de bifare.
Mai jos este codul pentru generarea listei și manipularea evenimentului clic pentru fiecare topping din listă:
// - Această metodă comută un element de vârf prin verificarea proprietății selectate // - Se va estompa o nouă completare și, de asemenea, se va elimina o topping atunci când devine necontrolată funcția toppingListClick (e) if (e.source.selected) e.source.selected = false; e.source.backgroundImage = '? /images/checkbox_no.png "; numToppings - = 1; dacă (toppings [e.source.toppingID] .container! = null) toppingsHolder.remove (toppings [e.source.toppingID] .container); toppings [e.source.toppingID] .container = null; altceva // - Dacă numToppings este mai mică decât maxToppings, adăugați noul topping altul alertează-l dacă (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(); În cele din urmă, numim createToppingsList care se numește de fiecare dată când se deschide fereastra. În partea a treia a acestei serii de tutori, vom modifica acea metodă astfel încât, dacă utilizatorul lovește anularea în fereastra de trimitere a comenzii, aplicația își va aminti ce topuri le-a selectat anterior. Pentru moment, compilați și aplicația dvs. ar trebui să arate astfel:
Puteți să mergeți mai departe și să verificați casetele pentru a vedea funcționalitatea acestora.
Deci, atunci când comandați o pizza, puteți decide că doriți să obțineți o crustă diferită. Deoarece aceasta este o bună posibilitate, să adăugăm acea funcționalitate. Evenimentul cu click pe butonul de anulare este deja ocupat. Suntem lansați la un eveniment personalizat numit cancelToppings și trecem crusta selectată în prezent.
Pentru a face față acestui eveniment, trebuie să ne întoarcem la noi main.js fișier și adăugați și ascultător de eveniment pentru el.
// - 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 // // - în fereastra toppings dacă (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Aplicația noastră să asculte evenimentele personalizate Ti.App.addEventListener ("toppings", openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Deci puteți vedea că am adăugat un alt ascultător al evenimentului. Când primește evenimentul după ce utilizatorul lovește "anula" în topping-uri, acesta va declanșa openCrust metodă. Amintiți-vă, într-o parte, cum am spus că vom transmite date în cele din urmă? Ei bine, a sosit momentul. În evenimentul de clic pentru butonul de anulare am trecut crusta curentă. Am modificat openCrust prin închiderea ferestrei toppings și dacă proprietatea crusts este în eveniment, înseamnă că au lovit anula, așa că vreau să adaug tipul de crustă ca proprietate în fereastra crusts. Ceea ce va face acest lucru este să ne permitem să selectăm automat crusta selectată anterior. Vom acoperi acest lucru în pasul următor.
Deschide crusts.js. Trebuie să adăugăm o condiție pentru a verifica dacă proprietatea de cruste există pe fereastră. Veți dori să plasați acest cod direct sub codul nostru scrollView variabil:
// - Dacă fereastra are proprietatea crustă, înseamnă că venim din fereastra // - toppings, deci alegeți ultima crustă selectată cunoscută dacă (win.crust) for (i = 0; i < crusts.length; i++) if (win.crust == crusts[i].title) returnCrust = i; break; scrollView.scrollToView(returnCrust);
Dacă proprietatea crustă nu este nulă, ceea ce va face acest fragment va fi prin intermediul matricei noastre de cruste existente și va fi ruptă odată ce proprietatea crustei se potrivește cu titlul din matrice. Odată ce găsește un meci, vom folosi scrollToView metoda de pe noi scrollView. Acest lucru va preselect crusta noastră din ultima noastră secțiune.
Mai avem o parte din acest pas. Dacă ați compilat, veți observa că titlul crustei este greșit, așa că trebuie să rezolvăm asta. Introduceți acest fragment mic în secțiunea noastră crustType variabil.
// - dacă returnCrust nu este nul, setați eticheta de tip crust dacă (returnCrust! = null) crustType.text = crusts [returnCrust] .title;
Problema rezolvata! Atunci când apăsați anulați pe fereastra topping-uri, mergem înapoi la fereastra cruste și preselectați crusta pe care am selectat-o înainte, precum și potrivirea titlului crust. Mergeți și încercați. Selectați o crustă, accesați toppingurile și apăsați anulați. Ar trebui să puteți merge înainte și înapoi cât doriți!
În partea a doua, am tratat câteva evenimente personalizate care ne-au permis să navigăm între câteva ferestre cu ajutorul nostru openToppings și openCrust metode în main.js. Am aflat despre trecerea datelor între ferestre. Am creat în esență o componentă nouă care nu există în iOS, care este caseta de selectare. Sigur, SDK-ul iOS are comutatorul de comutare, dar este urât și nu ar arăta bine în aplicația noastră. În partea a treia a acestui tutorial, vom acoperi mersul la fereastra de comandă. Odată pe fereastră, vom completa câmpurile de text și, la trimiterea, vom trimite toate informațiile despre pizza la un script PHP. Scriptul PHP va trimite prin e-mail adresa dorită, simulând modul în care ar intra o comandă dacă ar fi o aplicație de lucru reală.
