Share
Benvenuti alla terza puntata della nostra serie che illustra come costruire un'applicazione di ordinazione della pizza con Titanium Mobile. In questo tutorial, creeremo la schermata "Invia il tuo ordine".
Ora che l'utente è in grado di selezionare e deselezionare le guarnizioni, è necessario consentire all'utente di inviare effettivamente un ordine. Iniziamo modificando i dettagli sull'evento click all'interno toppings.js:
Accentsconagua
details.addEventListener ('click', function (e) var pizzaInfo = []; per (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); ); Ora, quando si preme il pulsante dei dettagli nella finestra dei condimenti, il codice sopra farà scorrere la nostra vasta gamma di condimenti e controllare il contenitore proprietà per ogni elemento dell'array. Se l'oggetto non è nullo, lo aggiungerà al nostro array temporaneo, chiamato pizzaInfo. Al termine del ciclo, verrà generato un nuovo evento personalizzato chiamato dettagli. Passeremo tre parametri a questo evento:
pizzaInfo).openDetails Evento Dobbiamo modificare il nostro main.js file per ascoltare il nostro evento personalizzato, quindi vai avanti e apri il file ora. Stai anche per aggiungere un nuovo metodo chiamato openDetails al codice:
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) toppings.close (); // - Se l'evento ha una proprietà crust, ciò significa che l'utente premi annulla una volta nella finestra delle guarnizioni se (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; crusts.open (); // - Questo metodo chiuderà la finestra dei condimenti e aprirà la funzione della finestra dei dettagli openDetails (e) toppings.close (); details.crust = e.crust; details.path = e.path; details.toppings = e.toppings; details.url = 'details.js'; details.open (); // - Fai in modo che la nostra app ascolti i nostri eventi personalizzati Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ( 'cancelToppings', openCrust); Ti.App.addEventListener ( 'dettagli', openDetails); openCrust (); Ok, il tuo main.js il file dovrebbe ora corrispondere al codice sopra. Nel codice precedente, abbiamo aggiunto un nuovo listener di eventi in fondo chiamato dettagli e quando l'app riceve quell'evento, vogliamo chiamare il openDetails metodo. Nel openDetails metodo, per prima cosa chiudiamo la finestra dei condimenti. Quindi impostiamo alcune proprietà nella finestra dei dettagli con i valori dell'evento che abbiamo passato toppings.js. Impostiamo anche la proprietà URL su details.js e infine chiamiamo il Aperto metodo.
Abbiamo bisogno di creare un nuovo file javascript chiamato details.js e salvalo nel main_windows cartella. Quello che vogliamo fare in questo file è aggiungere tre campi di testo:
NOTA: In un'applicazione reale, avremmo ovviamente più campi, ma per il bene di questo tutorial avremo creato solo tre campi.
Avremo anche un riepilogo della pizza che l'utente ha ordinato con un pulsante di invio dell'ordine. Iniziamo con l'interfaccia per questo:
var win = Ti.UI.currentWindow; var orderReq = Titanium.Network.createHTTPClient (); // - Nome Testo Campo var names = Titanium.UI.createTextField (color: '# 336699', inizio: 100, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Nome', backgroundImmagine: '? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Indirizzo1 Campo di testo var address1 = Titanium.UI.createTextField (color: '# 336699', inizio: 140, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Indirizzo 1', backgroundImage: ' ? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Indirizzo2 Campo di testo var address2 = Titanium.UI.createTextField (color: '# 336699', alto: 180, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: "Città, stato, codice postale" , backgroundImage: '? /images/textfield.png', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT); // - Ascolta il prossimo clic sulla tastiera, names.addEventListener ('return', function () address1.focus ();); address1.addEventListener ( 'ritorno', function () address2.focus ();); win.add (nomi); win.add (address1); win.add (address2); // - Questo metodo rende un bel riepilogo formattato della funzione di ordine degli utenti getFormattedPizza () var text = win.crust + 'pizza con: \ n'; if (win.toppings.length == 0) text + = '• Pianura (pizza al formaggio) \ n '; else 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 ); Il blocco di codice sopra può sembrare spaventoso, ma in realtà è piuttosto semplice. Iniziamo definendo il nostro vincere variabile così come il nostro orderReq variabile. Il orderReq variabile gestirà la nostra richiesta nel nostro file PHP che tratteremo nel prossimo tutorial di questa serie.
Quindi definiamo i nostri tre campi di testo e diamo loro alcune semplici proprietà. Aggiungiamo a ritorno ascoltatore di eventi sui campi di testo, quindi quando si preme successivo sulla tastiera, salta al campo di testo successivo. Facciamo un'etichetta chiamata pizzaInfoText e impostare il suo testo proprietà al nostro getFormattedPizza metodo. Questo metodo restituirà un elenco formattato della crosta e dei condimenti scelti. Se l'utente non ha selezionato nessun condimento, mostreremo il tipo di crosta e una semplice pizza al formaggio. Abbiamo anche fatto il nostro ordine e cancellato i pulsanti e li abbiamo sbiaditi. La tua interfaccia dovrebbe apparire così ora:
Quindi ti trovi nella schermata dell'ordine di invio e decidi di rimuovere i funghi dall'elenco. Bene, nessun problema! L'app conosce già i condimenti attualmente selezionati, quindi passeremo semplicemente a quell'array temp toppings.js e ricontrollare i condimenti. Per prima cosa dobbiamo aggiungere un listener di eventi al nostro pulsante di annullamento. Scorri fino alla fine del tuo details.js file e aggiungi questo:
// - Annulla evento pulsante. Torna alla finestra dei topping e ricorda le selezioni degli utenti cancel.addEventListener ('click', function () Ti.App.fireEvent ('cancelDetails', crust: win.crust, percorso: win.path, toppings: win. condimenti);); Stiamo licenziando ancora un altro evento personalizzato, questa volta chiamato cancelDetails, e ancora una volta passiamo tre parametri:
cancelDetails Evento Torniamo a main.js. Dobbiamo aggiungere un nuovo listener di eventi. Aggiungi quanto segue alla fine dei nostri ascoltatori di eventi.
Ti.App.addEventListener ( 'cancelDetails', openToppings);
Ora abbiamo già un openToppings metodo. Tuttavia, dobbiamo modificarlo.
// - Questo metodo chiuderà la finestra croste / dettagli e aprirà la funzione della finestra Toppings openToppings (e) if (e.toppings) details.close (); else crusts.close (); toppings.url = 'toppings.js'; toppings.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; toppings.open ();
Quindi, con il nostro metodo modificato, eseguiamo un controllo per la proprietà dei condimenti legata all'evento. Se non è nullo, vogliamo chiudere la finestra dei dettagli. Se è nullo, vogliamo chiudere la finestra della crosta. Aggiungiamo ancora le nostre proprietà personalizzate e quindi apriamo la finestra dei condimenti.
Quando torniamo vogliamo preselezionare le caselle di controllo del topping che abbiamo scelto in precedenza. Vogliamo anche aggiungere i condimenti alla pizza visivamente. Apri il toppings.js file e scorrere fino al createToppingsList metodo. La differenza tra la tua attuale e quella sotto è se win.returnToppings non è nullo, passerà attraverso il nostro array di condimenti più grandi e lo confronterà con il nostro array temporaneo. Se corrispondono, ricontrolla la casella di controllo, aggiungi la visuale alla crosta e aumenta il numero di condimenti.
/ * Questo metodo crea la lista di copertura. Poiché iOS non ha i componenti del segno di spunta, ho creato il mio usando una vista, un pulsante e scambiando l'immagine di sfondo * / 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); per (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 ); In questo tutorial abbiamo creato la schermata "Invia Oder" che è l'ultima schermata di cui avremo bisogno in questa serie di tutorial. Abbiamo anche aggiunto altri due eventi personalizzati alla nostra app che ci hanno permesso di saltare tra le schermate "Scegli Crosta" e "Invia ordine".
La parte successiva di questa serie ripercorrerà l'autenticazione del modulo necessaria per gestire gli invii e quindi inviare via e-mail l'ordine scelto insieme alle informazioni del cliente inviate (sarà necessario un server Web con un client di posta e PHP installato per inviare notifica degli ordini via e-mail).
