Share
I denne multi-del opplæringsserien lærer jeg deg hvordan du bygger en Titanium Mobile app fra start til slutt. Spesielt lærer du hvordan du bygger en Pizza Shop-app som gjør det mulig for kunder å bestille en tilpasset pizza på farten. I denne veiledningen vil jeg demonstrere hvordan du konfigurerer prosjektet og oppretter en "Crust Selection" skjerm.
Åpne Titanium og opprett et nytt mobilprosjekt. Nå er det en god tid å gå videre og laste ned zip-filen som er vedlagt dette innlegget. Zip-filen som er vedlagt dette innlegget inneholder en undermappe som heter "bilder". Når du har opprettet ditt tomme prosjekt, plasserer du "bilder" -mappen i det nye prosjektets "ressurser" -mappe. Mens du er inne i mappen "ressurser", fortsett og opprett en ny undermappe som heter "main_windows", samt en undermappe som heter "inkluderer".
Bla til ressursen / app.js-filen. Det er mange ting i denne filen allerede som vi ikke trenger. Gå videre og fjern alt og erstatt det med følgende:
Titanium.UI.setBackgroundColor ( '# 8C0221'); // - Opprett vårt hovedvindu som vil inneholde alle våre undervinduer var main = Ti.UI.createWindow (url: 'main_windows / main.js', høyde: Ti.Platform.displayCaps.platformHeight, width: Ti.Platform .displayCaps.platformWidth, fullskjerm: true, navBarHidden: true); main.open ();
Det vi gjorde her er satt vår bakgrunnsfarge, laget et nytt vindu kalt "main", og så åpnet det. Main vil holde alle våre undervinduer som skorper og pålegg.
Legg merke til nettadressegenskapen i vinduet. I mappen Resources, lag en ny mappe som heter "main_windows" hvis du ikke allerede har og en ny JS-fil kalt main.js. Nettadressegenskapen forteller at kompilatoren bruker main.js som vårt vindu. Hvis du hopper over denne delen, vil Titanium kaste en stygg rød feil i emulatoren.
Hvis du ikke allerede har laget en main.js-fil og lagret den i main_windows-mappen, gjør du det nå. Åpne main.js og legg til følgende:
Accentsconagua
var win = Ti.UI.currentWindow; // - Opprett subvinduer var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var detaljer = Ti.UI.createWindow (); // - Vi angir bakgrunnen her siden dette vil ikke endre win.backgroundImage = '? /images/bg_main.png '; // - Inkluder våre klokke Ti.include ('? /Includes/clock.js'); Hvis du ikke har opprettet en "inneholder" -mappe i ressursmappen, gjør du det nå. Deretter oppretter du en ny JS-fil kalt clock.js. Lagre den i mappen "inneholder" og legg til følgende:
vartid = Ti.UI.createLabel (text: ", font: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 14, farge: '# fff', shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'høyre', bredde: Ti.Platform.displayCaps.platformBredde, høyde: 20, topp: 45, venstre: -13); funksjon getFormattedTime () var amPM = " ; var d = ny dato (); var currentHour = d.getHours (); hvis (currentHour < 12) amPM = 'AM'; else amPM = 'PM'; if (currentHour == 0) currentHour = 12; if (currentHour > 12) currentHour = currentHour - 12; var currentMinute = d.getMinutes (); currentMinute = currentMinute + "; hvis (currentMinute.length == 1) currentMinute = '0' + currentMinute; time.text = currentHour + ':' + currentMinute +" + amPM; var clockInterval = setInterval (getFormattedTime, 5000); getFormattedTime (); win.add (tid);
Så hva vi gjorde er å lage 3 subvinduer, sett bakgrunnen vår og inkluderte en klokke som oppdateres hvert 5. sekund. Årsaken til klokken er at vår søknad er satt til fullskjermmodus, slik at statuslinjen og tidspunktet for standard enhet ikke vises. Gå videre og kompilere. Skjermen din bør se ut som bildet nedenfor:
Opprett en ny JS-fil kalt crusts.js og lagre den i main_windows-mappen. Du kan la det være tomt for nå. Gå tilbake til main.js. Vi må legge til en metode som åpner vårt skorpevindu, så legg til følgende til main.js
funksjon openCrust (e) crusts.url = 'crusts.js'; crusts.open (); openCrust ();
For å forklare det ovennevnte: Vi laget en metode som heter openCrust (), vi satte urlegenskapen på vårt skorpe-vindu til "crusts.js", og så åpnet vi den. Grunnen til at vi passerer et tomt objekt er fordi senere i denne opplæringsserien, vil vi faktisk passere data til denne metoden. Du trenger ikke å kompilere ennå, siden du ikke ser noen synlig forandring.
Denne filen vil inneholde en rullevisning som gjør det mulig for brukeren å sveipe gjennom de forskjellige skorpeene som tilbys av vår pizzabutikk. Vi vil også legge til en neste knapp som vil ta brukeren til toppingsvinduet:
var win = Ti.UI.currentWindow; // - Våre skorpsvisninger var handMade = Ti.UI.createView (bredde: 216, høyde: 156, backgroundImage: '? /Images/crust/hand.png'); var naturlig = Ti.UI.createView (bredde: 216, høyde: 156, backgroundImage: '? /images/crust/natural.png'); var panCrust = Ti.UI.createView (bredde: 216, høyde: 156, backgroundImage: '? /images/crust/pan.png'); var stuffedCrust = Ti.UI.createView (bredde: 216, høyde: 156, backgroundImage: '? /images/crust/stuffedCrust.png'); var thinNCrispy = Ti.UI.createView (bredde: 216, høyde: 156, backgroundImage: '? /images/crust/thinNcrispy.png'); var returnCrust; // - Crust reference var crusts = [tittel: 'Håndlaget', sti: '? /images/crust/hand.png ', title:' Natural ', sti:'? /images/crust/natural.png ', title:' Pan Crust ', sti:'? /images/crust/pan.png ', title:' Stuffed Crust ', sti:'? /images/crust/stuffedCrust.png ', title:' Tynn N Crispy Crust ', sti:'? /images/crust/thinNcrispy.png ']; // - Vårt rullevisning som inneholder våre skorpevisninger var scrollView = Ti.UI.createScrollableView (visninger: [handMade, naturlig, panCrust, stuffedCrust, thinNCrispy], showPagingControl: true, clipViews: false, topp: 180, venstre: 30, høyre: 30, høyde: 180, opasitet: 0); // - Crust title var crustTitle = Ti.UI.createLabel (text: '1. Velg en skare', skrifttype: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 24, color: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', bredde: Ti.Platform.displayCaps.platformWidth, høyde: 58, venstre: 10); // - Crust title background var crustTitleView = Ti.UI.createView (bredde: 328, høyde: 58, backgroundImage: '? /Images/crustHeaderBg.png', topp: 100, venstre: -6, opasitet: 0 ); crustTitleView.add (crustTitle); // - Krusttypeetikett var crustType = Ti.UI.createLabel (text: 'Hand Made', skrifttype: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 16, farge: '# fff' , shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'senter', bredde: Ti.Platform.displayCaps.platformWidth, høyde: 20, topp: 170, opacity: 0); // - Neste knapp var neste = Ti.UI.createButton (bredde: 137, høyde: 75, backgroundImage: '? /Images/toppings_next.png', topp: 385, opacity: 0); // - Hvis android OS, bruk bildegenskapen i stedet for backgroundImage (Ti SDK bug) hvis (Ti.Platform.osname == 'android') next.image = '? /images/toppings_next.png '; next.addEventListener ('klikk', funksjon (e) Ti.App.fireEvent ('toppings', crust: crusts [scrollView.currentPage] .title, path: crusts [scrollView.currentPage] .sti); ); win.add (scrollView); win.add (crustTitleView); win.add (crustType); win.add (neste); // - Fade rulleskjermen i scrollView.animate (opacity: 1, duration: 500); // - Fade skorpe tittelen i crustTitleView.animate (opacity: 1, duration: 500); crustType.animate (opacity: 1, duration: 500); // - Fade neste knapp i next.animate (opacity: 1, duration: 500); // - Endrer skorpen type etiketttekst når brukeren ruller scrollView.addEventListener ('scroll', funksjon () crustType.text = crusts [scrollView.currentPage] .title;); Så vi lagde våre skorpeutsikt, en rullevisning, og lagde skorpevisningen til rullevisningen. Vi har også opprettet en egendefinert tittel og en neste knapp. Gå videre og kompilere. Appen din skal nå se slik ut og ha swiping-funksjonaliteten. Når du sveiper, vil du legge merke til tittelen over pizzabildet vil forandre seg til hvilken skorpe du er på. Det er takket være "rulle" -eventet vi har lagt til i rullevisningen.
I del 1 av denne serien opprettet vi hovedvinduet for å inneholde våre undervinduer. Vi opprettet en openCrust-metode som vil utvikle seg gjennom denne serien av opplæringsprogrammer. Det er ganske grunnleggende akkurat nå. Vi opprettet vår første essensielle skjermbildet, crusts-vinduet. Dette tillater brukeren å sveipe gjennom skorpene vi tilbyr. Den neste, eller toppings-knappen, skyver en tilpasset hendelse i bakgrunnen. I neste del av denne opplæringen vil vi se tilbake til vår main.js-fil og lytte etter den tilpassede hendelsen som gjør at vi kan begynne å legge på toppings på pizzaen vår!
