Share
În această serie multi-part tutorial, vă voi învăța cum să construiți o aplicație Titanium Mobile de la început până la sfârșit. În mod specific, veți afla cum să creați o aplicație Pizza Shop care să permită clienților să comande o pizza personalizată în mișcare. În acest tutorial, voi demonstra cum să configurați proiectul și să creați un ecran "Crust Selection".
Deschideți Titanul și creați un nou proiect mobil. Acum este un moment bun pentru a merge și a descărca fișierul zip atașat la acest post, de asemenea. Fișierul zip atașat la această postare conține un subfolder numit "imagini". Odată ce ați creat proiectul gol, plasați folderul "imagini" în folderul "resurse" al noului proiect. În timp ce se află în dosarul "resurse", continuați și creați un subfolder nou numit "main_windows", precum și un subfolder numit "include".
Navigați la fișierul Resurse / app.js. Există o mulțime de lucruri în acest dosar, deja de care nu avem nevoie. Continuați și eliminați totul și înlocuiți-l cu următoarele:
Titanium.UI.setBackgroundColor ( '# 8C0221'); // - Creati fereastra principala care va contine toate sub-ferestrele noastre var main = Ti.UI.createWindow (url: 'main_windows / main.js', inaltime: Ti.Platform.displayCaps.platformHeight, lățime: Ti.Platform .displayCaps.platformWidth, fullscreen: true, navBarHidden: true); main.open ();
Ceea ce am făcut aici este setarea culorii de fundal, a făcut o fereastră nouă numită "principală", și apoi a deschis-o. Main va păstra toate sub ferestrele noastre cum ar fi cruste și toppings.
Observați proprietatea URL din fereastră. În directorul Resurse, creați un folder nou numit "main_windows" dacă nu ați făcut-o deja și un nou fișier JS numit main.js. Proprietatea URL indică compilatorului să folosească main.js ca fereastră. Dacă ignorați această parte, Titanium va arunca o eroare roșie urâtă în emulator.
Dacă nu ați făcut deja un fișier principal.js și l-ați salvat în directorul main_windows, faceți acest lucru acum. Deschideți main.js și adăugați următoarele:
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'); Dacă nu ați creat un folder "include" în directorul resurse, faceți-l acum. Apoi, creați un nou fișier JS numit clock.js. Salvați-l în folderul "include" și adăugați următoarele:
var timp = Ti.UI.createLabel (text: ", font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 14, shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: "dreapta", lățimea: Ti.Platform.displayCaps.platformWidth, înălțimea: 20, top: 45, stânga: -13); ; var d = data nouă (); Var curentHour = d.getHours (); dacă (currentHour < 12) amPM = 'AM'; else amPM = 'PM'; if (currentHour == 0) currentHour = 12; if (currentHour > 12) currentHour = currentHour - 12; var actualMinute = d.getMinute (); (actualMinute.length == 1) currentMinute = '0' + curentMinute; time.text = curent + + ':' + curentMinute + '+ amPM; var ceasInterval = setInterval (getFormattedTime, 5000); getFormattedTime (); win.add (timp);
Deci, ceea ce am făcut a fost crearea a 3 sub ferestre, setarea fundalului nostru și a inclus un ceas care se actualizează la fiecare 5 secunde. Motivul pentru ceas este că aplicația noastră este setată la modul fullscreen, astfel încât bara de stare implicită a dispozitivului și ora nu vor fi afișate. Mergeți și compilați-vă. Ecranul dvs. ar trebui să arate ca imaginea de mai jos:
Creați un nou fișier JS numit crusts.js și salvați-l în directorul main_windows. Acum îl puteți lăsa necompletat. Du-te înapoi la main.js. Trebuie să adăugăm o metodă care deschide fereastra noastră de cruste, deci adăugați următoarele la main.js
funcția openCrust (e) crusts.url = 'crusts.js'; crusts.open (); openCrust ();
Pentru a explica cele de mai sus: am făcut o metodă numită openCrust (), am setat proprietatea url pe fereastra crusts la "crusts.js", apoi am deschis-o. Motivul pentru care trecem un obiect gol este că, mai târziu, în această serie de tutori, vom trece de fapt date către această metodă. Nu aveți nevoie să compilați încă, deoarece nu veți vedea nici o schimbare vizibilă.
Acest fișier va conține o vizualizare de navigare care permite utilizatorului să treacă prin diferitele cruste oferite de magazinul nostru de pizza. De asemenea, vom adăuga un buton următor care va duce utilizatorul la fereastra de topuri:
var win = Ti.UI.currentWindow; // - Afișarea crustei noastre var handMade = Ti.UI.createView (width: 216, height: 156, backgroundImage: '? /Images/crust/hand.png'); var natural = Ti.UI.createView (lățime: 216, înălțimea: 156, fundalImage: '? /images/crust/natural.png'); var panCrust = Ti.UI.createView (lățime: 216, înălțimea: 156, fundalImage: '? /images/crust/pan.png'); var stuffedCrust = Ti.UI.createView (lățime: 216, înălțimea: 156, fundalImage: '? /images/crust/stuffedCrust.png'); var thinNCrispy = Ti.UI.createView (lățime: 216, înălțimea: 156, backgroundImage: '? /images/crust/thinNcrispy.png'); var returnCrust; // - Crust reference var crusts = [title: 'Made Made', cale: '? /images/crust/hand.png ', title:' Natural ', cale:'? /images/crust/natural.png ', title:' Pan Crust ', cale:'? /images/crust/pan.png ', title: "Crust umplute", cale: "? /images/crust/stuffedCrust.png ', title: "Crusta Thin N Crispy", cale: "? /images/crust/thinNcrispy.png ']; // - Vederea noastră de parcurgere care conține vederile noastre crustă var scrollView = Ti.UI.createScrollableView (vizualizări: [handmade, natural, panCrust, stuffedCrust, thinNCrispy], showPagingControl: true, clipViews: false, top: 30, dreapta: 30, înălțime: 180, opacitate: 0); // - Titlul de crusta var crustTitle = Ti.UI.createLabel (text: '1. Alegeți o crustă', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 24 A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' stânga ', lățime: Ti.Platform.displayCaps.platformWidth, înălțime: 58, stânga: 10); // - Crust titlul fundal var crustTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /Images/crustHeaderBg.png', top: 100, left: -6, opacity: 0 ); crustTitleView.add (crustTitle); // - Eticheta de crustă var crustType = Ti.UI.createLabel (text: 'Made Made', font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 16 , shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'centru', lățime: Ti.Platform.displayCaps.platformWidth, înălțime: 20, top: 170, opacitate: 0); // - Butonul Următor var următoare = Ti.UI.createButton (lățime: 137, înălțime: 75, imagine de fundal: '? /Images/toppings_next.png', sus: 385, opacitate: 0); // - Dacă sistemul de operare Android, folosiți proprietatea imaginii în loc de backgroundImage (bug-ul TiK) dacă (Ti.Platform.osname == 'android') next.image = '? /images/toppings_next.png "; next.addEventListener ('click', funcția (e) Ti.App.fireEvent ('toppings', crust: crusts [scrollView.currentPage] .title, path: crusts [scrollView.currentPage] .path); ); win.add (scrollView); win.add (crustTitleView); win.add (crustType); win.add (următor); // - Fadează scrollview în scrollView.animate (opacity: 1, duration: 500); // - Fade titlul crust în crustTitleView.animate (opacity: 1, duration: 500); crustType.animate (opacitate: 1, durata: 500); // - Fade următorul buton în următoarea. (Opacity: 1, duration: 500); // - Schimbă textul etichetei de tip crust când utilizatorul scrollView.addEventListener ('scroll', funcția () crustType.text = crusts [scrollView.currentPage] .title;); Așadar, am creat vederile noastre cruste, o vizualizare de derulare și am adăugat vederile cruste pe ecranul de defilare. Am creat, de asemenea, un titlu personalizat și un buton următor. Mergeți și compilați-vă. Aplicația dvs. ar trebui să arate astfel și să aibă funcționalitatea de derulare. Pe măsură ce glisați, veți observa că titlul de deasupra imaginii pizza se va schimba la orice crustă vă aflați. Aceasta este datorită evenimentului "scroll" pe care l-am adăugat în vizualizarea noastră de defilare.
În partea a 1 a acestei serii, am creat fereastra principală pentru a conține ferestrele noastre secundare. Am creat o metodă openCrust care va evolua prin această serie de tutoriale. Este destul de simplu acum. Am creat primul ecran esențial, fereastra de cruste. Acest lucru permite utilizatorului să treacă prin crustele pe care le oferim. Următorul buton sau butonul de tipărire declanșează un eveniment personalizat în fundal. În următoarea parte a acestui tutorial, ne vom uita înapoi la fișierul principal.js și vom asculta pentru evenimentul personalizat care ne va permite să începem să adăugăm toppinguri la pizza noastră!
