Share
Dans cette série de tutoriels en plusieurs parties, je vais vous apprendre à créer une application Titanium Mobile de bout en bout. Plus précisément, vous apprendrez à créer une application Pizza Shop qui permettra aux clients de commander une pizza personnalisée à emporter. Dans ce tutoriel, je vais montrer comment configurer le projet et créer un écran "Sélection de la croûte".
Ouvrez Titanium et créez un nouveau projet mobile. C'est maintenant le bon moment pour télécharger le fichier zip joint à ce message. Le fichier zip joint à cet article contient un sous-dossier appelé "images". Une fois que vous avez créé votre projet vide, placez le dossier "images" dans le dossier "ressources" de votre nouveau projet. Dans le dossier "ressources", créez un nouveau sous-dossier appelé "main_windows", ainsi qu'un sous-dossier appelé "includes"..
Accédez au fichier Resources / app.js. Il y a déjà beaucoup de choses dans ce fichier dont nous n’avons pas besoin. Allez-y, supprimez tout et remplacez-le par ce qui suit:
Accentsconagua
Titanium.UI.setBackgroundColor ('# 8C0221'); // - Crée notre fenêtre principale qui contiendra toutes nos sous-fenêtres var main = Ti.UI.createWindow (url: 'main_windows / main.js', height: Ti.Platform.displayCaps.platformHeight, width: Ti.Platform .displayCaps.platformWidth, plein écran: true, navBarHidden: true); main.open (); Ce que nous avons fait ici est de définir notre couleur d’arrière-plan, de créer une nouvelle fenêtre appelée "principale", puis de l’ouvrir. Main tiendra toutes nos fenêtres secondaires comme des croûtes et des nappages.
Notez la propriété URL dans la fenêtre. Dans le dossier Ressources, créez un nouveau dossier appelé "main_windows" si vous ne l’avez pas encore fait et un nouveau fichier JS appelé main.js. La propriété URL indique au compilateur d'utiliser main.js comme fenêtre. Si vous ignorez cette partie, Titanium émettra une erreur rouge laide dans l'émulateur..
Si vous n'avez pas encore créé un fichier main.js et que vous l'avez enregistré dans le dossier main_windows, faites-le maintenant. Ouvrez main.js et ajoutez ce qui suit:
var win = Ti.UI.currentWindow; // - Crée les sous-fenêtres var crusts = Ti.UI.createWindow (); garnitures var = Ti.UI.createWindow (); var details = Ti.UI.createWindow (); // - Nous définissons le fond ici car cela ne changera pas win.backgroundImage = '? /images/bg_main.png '; // - Inclut notre horloge Ti.include ('? /Includes/clock.js'); Si vous n'avez pas créé de dossier "inclut" dans le dossier de ressources, faites-le maintenant. Ensuite, créez un nouveau fichier JS appelé clock.js. Enregistrez-le dans le dossier "includes" et ajoutez les éléments suivants:
var time = Ti.UI.createLabel (text: ", police: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 14, couleur: '# 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 (); 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 (heure);
Nous avons donc créé 3 sous-fenêtres, défini notre arrière-plan et inclus une horloge mise à jour toutes les 5 secondes. La raison de l'horloge est que notre application est configurée en mode plein écran. Par conséquent, la barre d'état et l'heure par défaut du périphérique ne sont pas affichées. Allez-y et compilez. Votre écran devrait ressembler à l'image ci-dessous:
Créez un nouveau fichier JS appelé crusts.js et enregistrez-le dans le dossier main_windows. Vous pouvez laisser le champ vide pour l'instant. Retournez à main.js. Nous devons ajouter une méthode qui ouvre notre fenêtre de croûtes, ajoutez donc ce qui suit à main.js
fonction openCrust (e) crusts.url = 'crusts.js'; croûtes.open (); openCrust ();
Pour expliquer ce qui précède: nous avons créé une méthode appelée openCrust (), nous avons défini la propriété url de notre fenêtre de croûtes sur "crusts.js", puis nous l'avons ouverte. La raison pour laquelle nous passons un objet vide est que plus tard dans cette série de tutoriels, nous allons effectivement transmettre des données à cette méthode. Vous n'avez pas besoin de compiler pour l'instant car vous ne verrez aucun changement visible.
Ce fichier contient une vue de défilement qui permet à l’utilisateur de parcourir les différentes croûtes offertes par notre pizzeria. Nous allons également ajouter un bouton suivant qui amènera l'utilisateur à la fenêtre des garnitures:
var win = Ti.UI.currentWindow; // - Nos vues de la croûte 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; // - Référence de la croûte var crusts = [titre: 'Fait à la main', chemin: '? /images/crust/hand.png ', titre:' Naturel ', chemin:'? /images/crust/natural.png ', titre:' Pan Crust ', chemin:'? /images/crust/pan.png ', titre:' Croûte farcie ', chemin:'? /images/crust/stuffedCrust.png ', titre:' Croûte mince et croustillante ', chemin:'? /images/crust/thinNcrispy.png ']; // - Notre vue de défilement contenant nos vues de croûte var scrollView = Ti.UI.createScrollableView (views: [handMade, natural, panCrust, stuffedCrust, thinNCrispy], showPagingControl: true, clipViews: false, top: 180, gauche: 30, droite: 30, hauteur: 180, opacité: 0); // - Titre de la croûte var crustTitle = Ti.UI.createLabel (text: '1. Choisissez une croûte', police: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 24, color: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', largeur: Ti.Platform.displayCaps.platformWidth, hauteur: 58, gauche: 10); // - Titre de la croûte, arrière-plan var crustTitleView = Ti.UI.createView (largeur: 328, hauteur: 58, backgroundImage: '? /Images/crustHeaderBg.png', haut: 100, gauche: -6, opacité: 0 ) crustTitleView.add (crustTitle); // - Etiquette de type de croûte var crustType = Ti.UI.createLabel (text: 'Hand Made', police: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 16, color: '# fff' , shadowColor: '# 333', shadowOffset: x: 1, y: 1, textAlign: 'center', largeur: Ti.Platform.displayCaps.platformWidth, hauteur: 20, haut: 170, opacité: 0); // - Bouton Suivant var next = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/toppings_next.png', en haut: 385, opacité: 0); // - Sous Android, utilisez la propriété image au lieu de backgroundImage (bug du SDK Ti) if (Ti.Platform.osname == 'android') next.image = '? /images/toppings_next.png '; next.addEventListener ('clic', fonction (e) Ti.App.fireEvent ('garnitures', crust: crusts [scrollView.currentPage]. titre, path: crusts [scrollView.currentPage] .path); ) win.add (scrollView); win.add (crustTitleView); win.add (type de crust); win.add (suivant); // - Fondu de la vue de défilement dans scrollView.animate (opacity: 1, duration: 500); // - Efface le titre de la croûte dans crustTitleView.animate (opacity: 1, duration: 500); crustType.animate (opacity: 1, duration: 500); // - Fondu du bouton suivant dans next.animate (opacity: 1, duration: 500); // - Change le texte de l'étiquette de type de croûte lorsque l'utilisateur fait défiler scrollView.addEventListener ('scroll', function () crustType.text = crusts [scrollView.currentPage] .title;); Nous avons donc créé nos vues de la croûte, une vue de défilement et ajouté les vues de la croûte à la vue du défilement. Nous avons également créé un titre personnalisé et un bouton Suivant. Allez-y et compilez. Votre application devrait maintenant ressembler à ceci et disposer de la fonctionnalité de balayage. Au fur et à mesure que vous glissez, vous remarquerez que le titre au-dessus de l'image de la pizza se modifie en une croûte quelconque. C’est grâce à l’événement "scroll" que nous avons ajouté à notre vue scroll.
Dans la partie 1 de cette série, nous avons créé notre fenêtre principale pour contenir nos sous-fenêtres. Nous avons créé une méthode openCrust qui évoluera à travers cette série de tutoriels. C'est assez basique en ce moment. Nous avons créé notre premier écran essentiel, la fenêtre des croûtes. Cela permet à l'utilisateur de parcourir les croûtes que nous proposons. Le bouton suivant, ou les composants, déclenche un événement personnalisé en arrière-plan. Dans la prochaine partie de ce didacticiel, nous reviendrons sur notre fichier main.js et écouterons l’événement personnalisé qui nous permettra de commencer à ajouter des garnitures à notre pizza.!
