Share
In deze meerdelige lessenreeks leer ik je hoe je van het begin tot het einde een Titanium Mobile-app maakt. In het bijzonder leert u hoe u een Pizza Shop-app maakt waarmee klanten onderweg een aangepaste pizza kunnen bestellen. In deze tutorial zal ik demonstreren hoe het project moet worden ingesteld en een scherm voor korstselectie moet worden gemaakt.
Open Titanium en maak een nieuw mobiel project. Dit is een goed moment om verder te gaan en het zipbestand dat aan deze post is toegevoegd ook te downloaden. Het zip-bestand dat aan dit bericht is gekoppeld, bevat een submap met de naam "images". Nadat u uw lege project hebt gemaakt, plaatst u de map "images" in de map "resources" van uw nieuwe project. Terwijl u zich in de map "resources" bevindt, moet u doorgaan en een nieuwe submap met de naam "main_windows" maken, evenals een submap genaamd "includes".
Blader naar het bestand Resources / app.js. Er zijn al veel dingen in dit bestand die we niet nodig hebben. Ga je gang en verwijder alles en vervang het door het volgende:
Titanium.UI.setBackgroundColor ( '# 8C0221'); // - Maak een hoofdvenster met al onze subvensters var main = Ti.UI.createWindow (url: 'main_windows / main.js', height: Ti.Platform.displayCaps.platformHoogte, breedte: Ti.Platform .displayCaps.platformWidth, fullscreen: true, navBarHidden: true); main.open ();
Wat we hier hebben gedaan, is onze achtergrondkleur instellen, een nieuw venster met de naam "hoofd" gemaakt en vervolgens geopend. Main zal al onze subvensters bevatten zoals korsten en toppings.
Let op de URL-eigenschap in het venster. Maak in de map Resources een nieuwe map met de naam 'main_windows' als je dit nog niet hebt gedaan en een nieuw JS-bestand met de naam main.js. De eigenschap URL vertelt de compiler om main.js als ons venster te gebruiken. Als je dit onderdeel overslaat, gooit Titanium een lelijke rode fout in de emulator.
Als u nog geen main.js-bestand hebt gemaakt en dit in de map main_windows hebt opgeslagen, doet u dit nu. Open main.js en voeg het volgende toe:
Accentsconagua
var win = Ti.UI.currentWindow; // - Maak de subvensters var crusts = Ti.UI.createWindow (); var toppings = Ti.UI.createWindow (); var details = Ti.UI.createWindow (); // - We hebben de achtergrond hier ingesteld, omdat dit niet zal veranderen win.backgroundImage = '? /images/bg_main.png '; // - Omvat onze klok Ti.include ('? /Includes/clock.js'); Als u geen map "includes" in de map resources hebt gemaakt, doet u dit nu. Maak vervolgens een nieuw JS-bestand met de naam clock.js. Sla het op in de map "includes" en voeg het volgende toe:
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 = nieuwe datum (); var currentHour = d.getHours (); if (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 (tijd);
We hebben dus 3 subvensters gemaakt, onze achtergrond ingesteld en een klok bijgevoegd die elke 5 seconden wordt bijgewerkt. De reden voor de klok is dat onze applicatie is ingesteld op de modus Volledig scherm, zodat de standaard statusbalk en tijd van het apparaat niet worden weergegeven. Ga je gang en compileer. Uw scherm zou er als volgt uit moeten zien:
Maak een nieuw JS-bestand met de naam crusts.js en sla het op in de map main_windows. Je kunt het nu leeg laten voor nu. Ga terug naar main.js. We moeten een methode toevoegen die ons korstjesvenster opent, dus voeg het volgende toe aan main.js
function openCrust (e) crusts.url = 'crusts.js'; crusts.open (); openCrust ();
Om het bovenstaande te verklaren: we hebben een methode gemaakt met de naam openCrust (), we hebben de eigenschap url in ons korstvenster ingesteld op 'crusts.js' en vervolgens hebben we deze geopend. De reden waarom we een leeg object doorgeven, is omdat we later in deze zelfstudiegroep gegevens daadwerkelijk aan deze methode zullen doorgeven. U hoeft het nog niet te compileren omdat u geen zichtbare verandering zult zien.
Dit bestand bevat een scrolweergave waarmee de gebruiker door de verschillende korsten kan vegen die onze pizzawinkel aanbiedt. We voegen ook een volgende knop toe waarmee de gebruiker naar het bovenste venster gaat:
var win = Ti.UI.currentWindow; // - Onze korstweergaven 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; // - Korstreferentie var crusts = [title: 'Hand Made', pad: '? /images/crust/hand.png ', title:' Natuurlijk ', pad:'? /images/crust/natural.png ', title:' Pan Crust ', pad:'? /images/crust/pan.png ', title:' Stuffed Crust ', pad:'? /images/crust/stuffedCrust.png ', title:' Thin N Crispy Crust ', pad:'? /images/crust/thinNcrispy.png ']; // - Onze schuifweergave met onze korstweergaven var scrollView = Ti.UI.createScrollableView (views: [handMade, natural, panCrust, stuffedCrust, thinNCrispy], showPagingControl: true, clipViews: false, top: 180, left: 30, rechts: 30, hoogte: 180, dekking: 0); // - Korst titel var crustTitle = Ti.UI.createLabel (text: '1. Kies een korst', 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); // - Korst titel achtergrond var crustTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /Images/crustHeaderBg.png', top: 100, left: -6, troebelheid: 0 ); crustTitleView.add (crustTitle); // - Type korstsoort var crustType = Ti.UI.createLabel (text: 'Hand Made', lettertype: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 16, kleur: '# fff' , shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'center', width: Ti.Platform.displayCaps.platformWidth, height: 20, top: 170, onacity: 0); // - Volgende knop var volgende = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/toppings_next.png', top: 385, opacity: 0); // - Als Android OS de eigenschap image gebruikt in plaats van backgroundImage (Ti SDK-bug) if (Ti.Platform.osname == 'android') next.image = '? /images/toppings_next.png '; next.addEventListener ('klik', functie (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 (volgende); // - Vervaag de scrollweergave in scrollView.animate (onacity: 1, duration: 500); // - Vervaag de korsttitel in crustTitleView.animate (opacity: 1, duration: 500); crustType.animate (opacity: 1, duration: 500); // - Vervaag de volgende knop in next.animate (onacity: 1, duration: 500); // - Wijzigt de labeltekst van het korsttype wanneer de gebruiker scrolt scrollView.addEventListener ('scroll', function () crustType.text = crusts [scrollView.currentPage] .title;); Dus hebben we onze korstweergaven gemaakt, een schuifweergave en de korstweergaven aan de schuifweergave toegevoegd. We hebben ook een aangepaste titel en een volgende knop gemaakt. Ga je gang en compileer. Uw app zou er nu zo uit moeten zien en beschikken over de veegfunctionaliteit. Terwijl je veegt, merk je dat de titel boven de pizza-afbeelding verandert in de korst waarop je je bevindt. Dat is te danken aan de "scroll" -gebeurtenis die we aan onze schuifweergave hebben toegevoegd.
In deel 1 van deze serie hebben we ons hoofdvenster gemaakt om onze subvensters te bevatten. We hebben een openCrust-methode ontwikkeld die door deze reeks zelfstudies zal evolueren. Het is vrij eenvoudig nu. We hebben ons eerste essentiële scherm gemaakt, het korstvenster. Dit stelt de gebruiker in staat om door de korsten te vegen die wij aanbieden. De volgende knop of toppings-knop vuurt een aangepaste gebeurtenis op de achtergrond. In het volgende deel van deze tutorial kijken we terug naar ons main.js-bestand en luisteren we naar het aangepaste evenement waarmee we toppings kunnen toevoegen aan onze pizza!
