Share
In questa serie di tutorial in più parti, ti insegnerò come creare un'app Titanium Mobile dall'inizio alla fine. In particolare, imparerai come costruire un'app Pizza Shop che consentirà ai clienti di ordinare una pizza personalizzata in movimento. In questo tutorial, dimostrerò come impostare il progetto e creare una schermata "Crust Selection".
Apri Titanium e crea un nuovo progetto mobile. Ora è un buon momento per andare avanti e scaricare il file zip allegato a questo post. Il file zip allegato a questo post contiene una sottocartella chiamata "images". Una volta creato il progetto vuoto, posiziona la cartella "images" nella cartella "resources" del tuo nuovo progetto. Mentre sei all'interno della cartella "risorse", vai avanti e crea una nuova sottocartella chiamata "main_windows" e una sottocartella chiamata "include".
Passare al file Resources / app.js. C'è già un sacco di cose in questo file che non abbiamo bisogno. Vai avanti e rimuovi tutto e sostituiscilo con quanto segue:
Titanium.UI.setBackgroundColor ( '# 8C0221'); // - Crea la nostra finestra principale che conterrà tutte le nostre finestre secondarie var main = Ti.UI.createWindow (url: 'main_windows / main.js', height: Ti.Platform.displayCaps.platformHeight, width: Ti.Platform .displayCaps.platformWidth, fullscreen: true, navBarHidden: true); main.open ();
Quello che abbiamo fatto qui è impostare il nostro colore di sfondo, creato una nuova finestra chiamata "main" e quindi aprirla. Main terrà tutte le nostre finestre secondarie come croste e condimenti.
Si noti la proprietà URL sulla finestra. Nella cartella Risorse, crea una nuova cartella chiamata "main_windows" se non lo hai già fatto e un nuovo file JS chiamato main.js. La proprietà URL dice al compilatore di usare main.js come nostra finestra. Se salti questa parte, il titanio genererà un brutto errore rosso nell'emulatore.
Se non hai già creato un file main.js e lo hai salvato nella cartella main_windows, fallo ora. Apri main.js e aggiungi quanto segue:
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'); Se non hai creato una cartella "include" nella cartella delle risorse, fallo ora. Quindi, crea un nuovo file JS chiamato clock.js. Salvalo nella cartella "include" e aggiungi quanto segue:
var time = Ti.UI.createLabel (text: ", font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 14, color: '# fff', shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'right', width: Ti.Platform.displayCaps.platformWidth, height: 20, top: 45, left: -13); function getFormattedTime () var amPM = " ; var d = new Date (); var currentHour = d.getHours (); se (currentHour < 12) amPM = 'AM'; else amPM = 'PM'; if (currentHour == 0) currentHour = 12; if (currentHour > 12) currentHour = currentHour - 12; var currentMinute = d.getMinutes (); currentMinute = currentMinute + "; if (currentMinute.length == 1) currentMinute = '0' + currentMinute; time.text = currentHour + ':' + currentMinute +" + amPM; var clockInterval = setInterval (getFormattedTime, 5000); getFormattedTime (); win.add (tempo);
Quindi quello che abbiamo fatto è creare 3 sotto windows, impostare il nostro background e incluso un orologio che si aggiorna ogni 5 secondi. Il motivo per cui l'orologio è la nostra applicazione è impostato sulla modalità a schermo intero, quindi la barra di stato del dispositivo e l'ora predefiniti non verranno visualizzati. Vai avanti e compilare. Lo schermo dovrebbe apparire come l'immagine qui sotto:
Crea un nuovo file JS chiamato crusts.js e salvalo nella cartella main_windows. Puoi lasciarlo vuoto per ora. Torna a main.js. Abbiamo bisogno di aggiungere un metodo che apre la nostra finestra di croste, quindi aggiungi quanto segue a main.js
function openCrust (e) crusts.url = 'crusts.js'; crusts.open (); openCrust ();
Per spiegare quanto sopra: abbiamo creato un metodo chiamato openCrust (), abbiamo impostato la proprietà url nella nostra finestra delle croste su "crusts.js", e poi l'abbiamo aperta. Il motivo per cui stiamo passando un oggetto vuoto è perché in seguito in questa serie di tutorial, passeremo effettivamente i dati a questo metodo. Non hai ancora bisogno di compilare come non vedrai alcun cambiamento visibile.
Questo file conterrà una vista a scorrimento che consente all'utente di scorrere le varie croste offerte dalla nostra pizzeria. Aggiungeremo anche un pulsante successivo che porterà l'utente alla finestra dei condimenti:
var win = Ti.UI.currentWindow; // - Le nostre viste crust var handMade = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /Images/crust/hand.png'); var natural = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /images/crust/natural.png'); var panCrust = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /images/crust/pan.png'); var stuffedCrust = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /images/crust/stuffedCrust.png'); var thinNCrispy = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /images/crust/thinNcrispy.png'); var returnCrust; // - Crust reference var crusts = [title: 'Hand Made', percorso: '? /images/crust/hand.png ', title:' Natural ', percorso:'? /images/crust/natural.png ', title:' Pan Crust ', percorso:'? /images/crust/pan.png ', title:' Stuffed Crust ', percorso:'? /images/crust/stuffedCrust.png ', title:' Thin N Crispy Crust ', percorso:'? /images/crust/thinNcrispy.png ']; // - La nostra vista scroll che contiene le nostre viste crosta var scrollView = Ti.UI.createScrollableView (visualizzazioni: [handMade, natural, panCrust, stuffedCrust, thinNCrispy], showPagingControl: true, clipViews: false, top: 180, left: 30, a destra: 30, altezza: 180, opacità: 0); // - Titolo di crust var crustTitle = Ti.UI.createLabel (text: '1 Scegli una crosta', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 24, color: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', width: Ti.Platform.displayCaps.platformWidth, height: 58, left: 10); // - Sfondo titolo crust var crustTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /Images/crustHeaderBg.png', inizio: 100, a sinistra: -6, opacità: 0 ); crustTitleView.add (crustTitle); // - Etichetta di tipo crust var crustType = Ti.UI.createLabel (text: 'Hand Made', tipo di carattere: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 16, color: '# fff' , shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'center', width: Ti.Platform.displayCaps.platformWidth, height: 20, top: 170, opacity: 0); // - Pulsante Next var next = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/toppings_next.png', top: 385, opacity: 0); // - Se Android OS, usa la proprietà image invece di backgroundImage (Ti SDK bug) if (Ti.Platform.osname == 'android') next.image = '? /images/toppings_next.png '; next.addEventListener ('click', function (e) Ti.App.fireEvent ('toppings', crust: crusts [scrollView.currentPage] .title, percorso: crusts [scrollView.currentPage] .path); ); win.add (ScrollView); win.add (crustTitleView); win.add (crustType); win.add (successivo); // - Dissolvenza della scrollview in scrollView.animate (opacity: 1, duration: 500); // - Dissolvenza del titolo della crosta in crustTitleView.animate (opacity: 1, duration: 500); crustType.animate (opacity: 1, duration: 500); // - Fade il prossimo pulsante in next.animate (opacity: 1, duration: 500); // - Cambia il testo dell'etichetta del tipo crust quando l'utente scorre scrollView.addEventListener ('scroll', function () crustType.text = crusts [scrollView.currentPage] .title;); Quindi abbiamo creato le nostre viste di crosta, una vista di scorrimento e aggiunto le viste di crosta alla vista di scorrimento. Abbiamo anche creato un titolo personalizzato e un pulsante successivo. Vai avanti e compilare. La tua app dovrebbe ora avere questo aspetto e avere la funzionalità di scorrimento. Mentre scorri, noterai che il titolo sopra l'immagine della pizza cambierà in qualsiasi crosta ti trovi. Questo grazie all'evento "scroll" che abbiamo aggiunto alla nostra vista di scorrimento.
Nella parte 1 di questa serie, abbiamo creato la nostra finestra principale per contenere le nostre finestre secondarie. Abbiamo creato un metodo openCrust che evolverà attraverso questa serie di tutorial. È piuttosto semplice adesso. Abbiamo creato il nostro primo schermo essenziale, la finestra delle croste. Ciò consente all'utente di scorrere le croste che offriamo. Il pulsante successivo, o guarnizioni, attiva un evento personalizzato in background. Nella parte successiva di questo tutorial, torneremo al nostro file main.js e ascolteremo l'evento personalizzato che ci consentirà di iniziare ad aggiungere i condimenti alla nostra pizza!
