Share
In questa serie di tutorial in più parti, ti insegnerò come costruire un'app per ordinare pizze con Titanium Mobile dall'inizio alla fine. In questo tutorial creeremo la schermata "Scegli i tuoi condimenti".
Alla fine della parte 1, il nostro prossimo pulsante ha attivato un evento personalizzato. Ora è il momento di gestire quell'evento personalizzato. L'evento personalizzato risiederà nel nostro main.js file, quindi aprilo. Il listener di eventi personalizzato sta cercando un metodo chiamato openToppings, quindi aggiungiamo anche questo:
Accentsconagua
var win = Ti.UI.currentWindow; // - Crea il sotto windows var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var details = Ti.UI.createWindow (); // - Impostiamo lo sfondo qui poiché questo non cambierà win.backgroundImage = '? /images/bg_main.png '; // - Include il nostro orologio Ti.include ('? /Includes/clock.js'); // - Questo metodo chiuderà la finestra di croste / dettagli e aprirà la funzione della finestra Toppings openToppings (e) crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open (); // - Il metodo chiuderà la finestra dei condimenti e aprirà la funzione della finestra delle croste openCrust (e) crusts.url = 'crusts.js'; crusts.open (); // - Fai in modo che la nostra app ascolti i nostri eventi personalizzati Ti.App.addEventListener ('toppings', openToppings); openCrust (); Quindi, quando si preme il pulsante successivo nella finestra delle croste, il openToppings () il metodo sarà chiamato. Ciò si tradurrà in:
Creiamo un nuovo file JS chiamato toppings.js e salvarlo nel main_windows cartella. Piuttosto che leggere un lungo paragrafo di me che spiega cosa fa tutto questo codice, ho semplicemente commentato il codice direttamente:
var win = Ti.UI.currentWindow; // - Scrollview per la nostra lista di condimenti, guarnizioni massime, numToppings per var di riferimento scrollView = Ti.UI.createScrollView (); var maxToppings = 6; var numToppings = 0; // - Questi sono i nostri condimenti. Il titolo è l'etichetta, il percorso è il percorso dell'immagine e // - il contenitore manterrà la nostra vista quando è selezionato var toppings = [title: 'Bacon Bits', percorso: '? /images/toppings/bacon_bits.png',container:null, title: 'Beef', percorso: '? /images/toppings/beef.png',container:null, title: "Pollo alla griglia", percorso: "? /images/toppings/grilled_chicken.png',container:null, title: 'Ham', percorso: '? /images/toppings/ham.png',container:null, title: 'Italian Sausage (Crumbled)', percorso: '? /images/toppings/italian_sausage_crumbled.png',container:null, title: 'Italian Sausage (Sliced)', percorso: '? /images/toppings/italian_sausage_sliced.png',container:null, title: 'Jalapenos', percorso: '? /images/toppings/jalapenos.png',container:null, title: 'Mushrooms', percorso: '? /images/toppings/mushrooms.png',container:null, title: 'Black Olive', percorso: '? /images/toppings/olives_black.png',container:null, title: 'Olive verdi', percorso: '? /images/toppings/olives_green.png',container:null, title: 'Red Onions', percorso: '? /images/toppings/onions_red.png',container:null, title: 'White Onions', percorso: '? /images/toppings/onions_white.png',container:null, title: 'Pepperoni', percorso: '? /images/toppings/pepperoni.png',container:null, title: 'Banana Peppers', percorso: '? /images/toppings/peppers_banana.png',container:null, title: 'Green Peppers', percorso: '? /images/toppings/peppers_green.png',container:null, title: 'Red Peppers', percorso: '? /images/toppings/peppers_red.png',container:null, title: 'Pineapple', percorso: '? /images/toppings/pineapple.png',container:null, title: 'Pork', percorso: '? /images/toppings/pork.png',container:null, title: 'Diced Tomatoes', percorso: '? /images/toppings/tomatoes_diced.png',container:null, title: 'Marinated Tomatoes', percorso: '? /images/toppings/tomatoes_marinated.png',container:null, title: 'Roma Tomatoes', percorso: '? /images/toppings/tomatoes_roma.png',container:null]; // - toppings title var toppingsTitle = Ti.UI.createLabel (text: '2 Scegli i tuoi condimenti', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 22, color: '# 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', inizio: 100, a sinistra: -6, opacità: 0 ); toppingsTitleView.add (toppingsTitle); // - contiene la pizza image var pizza = Ti.UI.createView (top: 270, width: 216, height: 156, backgroundImage: win.path); // - questo manterrà tutte le guarnizioni selezionate var toppingsHolder = Ti.UI.createView (width: 216, height: 156); pizza.add (toppingsHolder); win.add (pizza); win.add (toppingsTitleView); // - Dettagli Button var details = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/details.png', top: 385, left: 165, opacity: 0); // - Pulsante Cancel var cancel = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/cancel.png', top: 385, left: 10, opacity: 0); // - Se Android OS, usa la proprietà image invece di 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 (dettagli); win.add (annullare); // - Annulla evento click torna alla finestra crust e passa la crosta corrente in modo che selezioni quella corretta quando restituisce cancel.addEventListener ('click', function (e) Ti.App.fireEvent ('cancelToppings', crust: win.crust);); details.addEventListener ('click', function (e) ); // - Dissolvenza delle viste e dei pulsanti in ToppingsTitleView.animate (opacity: 1, duration: 500); pizza.animate (opacità: 1, durata: 500); details.animate (opacity: 1, duration: 500); cancel.animate (opacity: 1, duration: 500); Dal momento che abbiamo aggiunto le nostre tre proprietà personalizzate alla finestra dei topping al momento dell'apertura, possiamo fare riferimento a esse usando win.propertyName. Nel nostro caso, impostiamo l'immagine della pizza su win.path. Questo sta dicendo alla vista di usare qualsiasi immagine che abbiamo selezionato come immagine di sfondo. Vai avanti e compilare. Una volta superata la finestra delle croste, non sarai in grado di tornare indietro o avanti, ma puoi vedere che la finestra dei condimenti contiene qualsiasi crosta che hai selezionato. La finestra dei condimenti dovrebbe essere simile alla seguente:
Vogliamo ora aggiungere il nostro elenco scorrevole alla finestra dei condimenti. Ho spiegato nel codice cosa fa ogni passaggio, ma, per ribadire, iOS non ha realmente un componente checkbox, quindi sono andato avanti e ho creato il mio usando due file PNG, e ho appena cambiato l'immagine in base alla selezione proprietà sulla vista checkbox.
Di seguito è riportato il codice per la generazione dell'elenco nonché la gestione dell'evento click per ciascun topping nell'elenco:
// - Questo metodo alterna un elemento di topping controllando la proprietà selezionata // - Dissolverà un nuovo topping e rimuoverà anche un topping quando viene toppata la funzione 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 // - Se numToppings è inferiore a maxToppings, aggiungi il nuovo topping else avvisalo se (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(); Infine, chiamiamo il createToppingsList metodo che viene chiamato ogni volta che si apre la finestra. Nella terza parte di questa serie di tutorial, modificheremo tale metodo in modo che se l'utente preme Annulla nella finestra dell'ordine di invio, l'app ricorderà quali modifiche l'utente aveva precedentemente selezionato. Per ora, compila e la tua app dovrebbe apparire così:
Puoi andare avanti e controllare le caselle on e off per vedere la loro funzionalità.
Quindi, quando ordini una pizza, potresti decidere di ottenere una crosta diversa. Dato che è una buona possibilità, aggiungiamo questa funzionalità. L'evento di clic sul pulsante Annulla è già gestito. Stiamo licenziando un evento personalizzato chiamato cancelToppings e stiamo passando la crosta attualmente selezionata.
Per gestire questo evento, dobbiamo tornare al nostro main.js file e aggiungi e listener di eventi per questo.
// - Il metodo chiuderà la finestra dei condimenti e aprirà la funzione della finestra delle croste openCrust (e) toppings.close (); // - Se l'evento ha una proprietà crust, ciò significa che l'utente premi annulla una volta // - nella finestra dei toppings if (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Fai in modo che la nostra app ascolti i nostri eventi personalizzati Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Quindi puoi vedere che abbiamo aggiunto un altro listener di eventi. Quando riceve l'evento dopo che l'utente ha premuto "cancella" nei condimenti, scatterà il openCrust metodo. Ricorda nella prima parte come ho detto che passeremo i dati ad esso alla fine? Bene, è giunto il momento. Nell'evento click per il pulsante Annulla abbiamo passato la crosta attuale. Abbiamo modificato il openCrust metodo chiudendo la finestra dei condimenti e se la proprietà delle croste è nell'evento, significa che premono Cancel, quindi voglio aggiungere il tipo crust come proprietà alla finestra delle croste. Ciò che questo farà è consentirci di selezionare automaticamente la crosta precedentemente selezionata. Lo esamineremo nel prossimo passaggio.
Aprire crusts.js. Abbiamo bisogno di aggiungere un condizionale per verificare se la proprietà delle croste esiste nella finestra. Dovrai inserire questo codice direttamente sotto il nostro ScrollView variabile:
// - Se la finestra ha la proprietà crust, significa che proviene dalla finestra // - toppings, quindi scegli l'ultima crosta selezionata nota if (win.crust) for (i = 0; i < crusts.length; i++) if (win.crust == crusts[i].title) returnCrust = i; break; scrollView.scrollToView(returnCrust);
Se la proprietà crust non è nullo, ciò che farà questo snippet è il loop della nostra matrice di croste esistente e interromperà una volta che la proprietà crust corrisponde al titolo nella matrice. Una volta trovata una corrispondenza, usiamo il scrollToView metodo sul nostro ScrollView. Questo preselezionerà la nostra crosta dalla nostra ultima sezione.
Abbiamo un'altra parte in questa fase. Se hai compilato, noterai che il titolo della crosta è sbagliato, quindi dobbiamo sistemarlo. Inserisci questo piccolo snippet sotto il nostro crustType variabile.
// - se returnCrust non è nullo, imposta l'etichetta del tipo crust if (returnCrust! = null) crustType.text = crusts [returnCrust] .title;
Problema risolto! Quando si colpisce cancel sulla finestra di condimenti, torniamo alla finestra di croste e preselezionare la crosta che avevamo selezionato prima e abbinare il titolo della crosta. Vai avanti e provalo. Seleziona una crosta, vai ai condimenti e premi Annulla. Dovresti essere in grado di andare avanti e indietro quanto vuoi!
Nella seconda parte, abbiamo gestito alcuni eventi personalizzati che ci hanno permesso di navigare tra alcune finestre con l'aiuto del nostro openToppings e openCrust metodi in main.js. Abbiamo imparato a passare i dati tra le finestre. Abbiamo essenzialmente creato un nuovo componente che non esiste in iOS, che è la casella di controllo. Certo, l'SDK di iOS ha l'interruttore di attivazione, ma questo è brutto e non apparirebbe bene nella nostra applicazione. Nella terza parte di questo tutorial, vedremo come andare alla finestra dell'ordine di invio. Una volta nella finestra, compileremo alcuni campi di testo e, al momento dell'invio, invieremo tutte le nostre informazioni sulla pizza su uno script PHP. Lo script PHP invierà quindi l'indirizzo e-mail a tua scelta, simulando il modo in cui un ordine verrebbe inserito se si trattasse di un'applicazione funzionante del mondo reale.
