Share
Dans cette série de tutoriels en plusieurs parties, je vais vous apprendre à créer une application de commande de pizza avec Titanium Mobile, du début à la fin. Dans ce tutoriel, nous allons créer l'écran "Choose Your Toppings".
À la fin de la partie 1, notre bouton suivant déclenchait un événement personnalisé. Il est maintenant temps de gérer cet événement personnalisé. L'événement personnalisé va résider dans notre main.js fichier, alors ouvrez ça. L’écouteur d’événements personnalisé recherche une méthode appelée openToppings, ajoutons cela aussi:
Accentsconagua
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'); // - Cette méthode fermera la fenêtre Crusts / Details et ouvrira la fonction de la fenêtre Tiffings openToppings (e) crusts.close (); toppings.url = 'toppings.js'; garnitures.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; garnitures.open (); // - La méthode fermera la fenêtre des toppings et ouvrira la fonction de la fenêtre crusts openCrust (e) crusts.url = 'crusts.js'; croûtes.open (); // - Demandez à notre application d'écouter nos événements personnalisés Ti.App.addEventListener ('toppings', openToppings); openCrust (); Ainsi, lorsque vous appuyez sur le bouton suivant dans la fenêtre des croûtes, le openToppings () la méthode va être appelée. Cela se traduira par:
Créons un nouveau fichier JS appelé toppings.js et enregistrez-le sur le main_windows dossier. Plutôt que de lire un long paragraphe de moi expliquant ce que fait tout ce code, je l'ai simplement commenté directement:
var win = Ti.UI.currentWindow; // - Scrollview pour notre liste de nappages, nombre maximal de nappages, numToppings pour référence var scrollView = Ti.UI.createScrollView (); var maxToppings = 6; var numToppings = 0; // - Ce sont nos garnitures. Titre est le libellé, chemin est le chemin de l'image et // - le conteneur conservera notre vue lorsqu'il sera sélectionné. Var toppings = [title: 'Bacon Bits', path: '? /images/toppings/bacon_bits.png',container:null, title: 'Beef', chemin: '? /images/toppings/beef.png',container:null, titre: 'Poulet grillé', chemin: '? /images/toppings/grilled_chicken.png',container:null, titre: 'Ham', chemin: '? /images/toppings/ham.png',container:null, titre: 'Saucisse italienne (émiettée)', chemin: '? /images/toppings/italian_sausage_crumbled.png',container:null, titre: 'saucisse italienne (tranchée)', chemin: '? /images/toppings/italian_sausage_sliced.png',container:null, titre: 'Jalapenos', chemin: '? /images/toppings/jalapenos.png',container:null, titre: 'Champignons', chemin: '? /images/toppings/mushrooms.png',container:null, titre: 'Olives noires', chemin: '? /images/toppings/olives_black.png',container:null, titre: 'Olives vertes', chemin: '? /images/toppings/olives_green.png',container:null, titre: 'Oignons rouges', chemin: '? /images/toppings/onions_red.png',container:null, title: 'White Onions', chemin: '? /images/toppings/onions_white.png',container:null, titre: 'Pepperoni', chemin: '? /images/toppings/pepperoni.png',container:null, titre: 'Banana Peppers', path: '? /images/toppings/peppers_banana.png',container:null, titre: 'Poivrons verts', chemin: '? /images/toppings/peppers_green.png',container:null, title: 'Red Peppers', path: '? /images/toppings/peppers_red.png',container:null, title: 'Pineapple', path: '? /images/toppings/pineapple.png',container:null, title: 'Pork', path: '? /images/toppings/pork.png',container:null, titre: 'Tomates en dés', chemin: '? /images/toppings/tomatoes_diced.png',container:null, titre: 'Tomates marinées', chemin: '? /images/toppings/tomatoes_marinated.png',container:null, titre: 'Tomates Roma', chemin: '? /images/toppings/tomatoes_roma.png',container:null]; // - toppings title var toppingsTitle = Ti.UI.createLabel (text: '2. Choisissez votre garniture', police: fontFamily: 'Verdana', fontWeight: 'bold', fontSize: 22, color: '# A90329 ', shadowColor:' # 333 ', shadowOffset: x: 1, y: 1, textAlign:' left ', largeur: Ti.Platform.displayCaps.platformWidth, hauteur: 58, gauche: 10); // - toppings title background var toppingsTitleView = Ti.UI.createView (width: 328, height: 58, backgroundImage: '? /images/crustHeaderBg.png', haut: 100, gauche: -6, opacité: 0 ) toppingsTitleView.add (toppingsTitle); // - contient l'image de la pizza var pizza = Ti.UI.createView (top: 270, width: 216, height: 156, backgroundImage: win.path); // - cela contiendra toutes les garnitures sélectionnées var toppingsHolder = Ti.UI.createView (width: 216, height: 156); pizza.add (garnitureHolder); win.add (pizza); win.add (toppingsTitleView); // - Détails du bouton var details = Ti.UI.createButton (largeur: 137, hauteur: 75, backgroundImage: '? /Images/details.png', en haut: 385, à gauche: 165, opacité: 0); // - Bouton Annuler var cancel = Ti.UI.createButton (width: 137, height: 75, backgroundImage: '? /Images/cancel.png', en haut: 385, à gauche: 10, opacité: 0); // - Sous Android, utilisez la propriété image au lieu de backgroundImage (bug du SDK Ti) si (Ti.Platform.osname == 'android') details.image = '? /images/details.png '; cancel.image = '? /images/cancel.png '; pizza.image = win.path; else pizza.opacity = 0; win.add (détails); win.add (annuler); // - Cancel click event retourne à la fenêtre de la croûte et transmet la croûte actuelle afin qu'elle sélectionne celle qui convient lors du retour cancel.addEventListener ('click', function (e) Ti.App.fireEvent ('cancelToppings', croûte: win.crust);); details.addEventListener ('clic', fonction (e) ); // - Fondu des vues et des boutons dans toppingsTitleView.animate (opacity: 1, duration: 500); pizza.animate (opacité: 1, durée: 500); details.animate (opacité: 1, durée: 500); cancel.animate (opacité: 1, durée: 500); Puisque nous avons ajouté nos trois propriétés personnalisées à la fenêtre des garnitures lors de son ouverture, nous pouvons les référencer en utilisant win.propertyName. Dans notre cas, nous avons défini l'image de la pizza sur win.path. Cela indique à la vue d'utiliser n'importe quelle image sélectionnée comme image d'arrière-plan. Allez-y et compilez. Une fois que vous avez dépassé la fenêtre des croûtes, vous ne pourrez plus revenir en arrière, mais vous pouvez voir que la fenêtre des nappages contient la croûte sélectionnée. La fenêtre de vos garnitures devrait ressembler à celle ci-dessous:
Nous voulons maintenant ajouter notre liste déroulante à la fenêtre des nappages. J'ai expliqué dans le code ce que chaque étape fait, mais, comme je le répète, iOS n'a pas vraiment de composant de case à cocher, alors je me suis lancé et j'ai créé mon propre fichier à l'aide de deux fichiers PNG, et j'ai simplement échanger l'image en fonction de la sélection. propriété sur la vue de la case à cocher.
Vous trouverez ci-dessous le code permettant de générer la liste et de gérer l'événement click pour chaque remplissage de la liste:
// - Cette méthode bascule un élément de recouvrement en cochant la propriété sélectionnée // - Elle fade un nouvel ajout et supprime également un ajout lorsque sa fonction est décochée toppingListClick (e) if (e.source.selected) e.source.selected = false; e.source.backgroundImage = '? /images/checkbox_no.png '; numToppings - = 1; if (toppings [e.source.toppingID] .container! = null) toppingsHolder.remove (toppings [e.source.toppingID] .container); garnitures [e.source.toppingID] .container = null; else // - Si numToppings est inférieur à maxToppings, ajoutez le nouveau sommet, sinon les alerter si (numToppings < maxToppings) e.source.selected = true; e.source.backgroundImage = '? /images/checkbox_yes.png'; var aTopping = Ti.UI.createView( backgroundImage:toppings[e.source.toppingID].path ); if (Ti.Platform.osname == 'android') aTopping.image = toppings[e.source.toppingID].path; else aTopping.opacity = 0; aTopping.animate( opacity:1, duration:500 ); toppingsHolder.add(aTopping); toppings[e.source.toppingID].container = aTopping; numToppings += 1; else alert("Hang on there cowboy! Let's not get carried away with toppings. " + numToppings + " is the max."); /* This method creates the topping list. Since iOS doesn't have checkbox components, I made my own using a view, a button and swapping out the background image */ function createToppingsList() scrollView.opacity = 0; scrollView.top = 155; scrollView.height = 120; scrollView.contentWidth = Ti.Platform.displayCaps.platformWidth; scrollView.contentHeight = 'auto'; scrollView.showVerticalScrollIndicator = true; win.add(scrollView); for (i = 0; i < toppings.length; i++) //-- The label var toppingLabel = Ti.UI.createLabel( text:toppings[i].title, font: fontFamily:'Verdana', fontWeight:'bold', fontSize:14 , color:'#fff', shadowColor:'#333', shadowOffset:x:1,y:1, textAlign:'left', width:Ti.Platform.displayCaps.platformWidth - 10, left:10 ); //-- We add a custom property 'selected' to our checkbox view var checkbox = Ti.UI.createView( width:340, height:16, backgroundImage:'? /images/checkbox_no.png', selected:false, toppingID:i ); var toggler = Ti.UI.createView( width:Ti.Platform.displayCaps.platformWidth, height:20, top: i * 20 ); //-- We use the singletap event rather than the click since its in a scroll view checkbox.addEventListener('singletap',toppingListClick); toggler.add(toppingLabel); toggler.add(checkbox); scrollView.add(toggler); scrollView.animate( opacity:1, duration:500 ); createToppingsList(); Enfin, nous appelons le createToppingsList méthode qui est appelée à chaque ouverture de la fenêtre. Dans la troisième partie de cette série de didacticiels, nous allons modifier cette méthode. Par conséquent, si l'utilisateur clique sur Annuler dans la fenêtre de commande, l'application mémorisera les garnitures précédemment sélectionnées par l'utilisateur. Pour l'instant, compilez et votre application devrait ressembler à ceci:
Vous pouvez aller de l'avant et cocher les cases pour voir leurs fonctionnalités.
Ainsi, lorsque vous commandez une pizza, vous pouvez décider de choisir une croûte différente. Puisque c'est une bonne possibilité, ajoutons cette fonctionnalité. L'événement clic sur le bouton d'annulation est déjà pris en charge. Nous organisons un événement personnalisé appelé cancelToppings et nous passons la croûte actuellement sélectionnée.
Afin de gérer cet événement, nous devons revenir à notre main.js déposer et ajouter et écouteur d'événements pour cela.
// - La méthode fermera la fenêtre des nappages et ouvrira la fonction de la fenêtre des croûtes openCrust (e) toppings.close (); // - Si l'événement a une propriété crust, cela signifie que l'utilisateur a appuyé sur annuler une fois // - dans la fenêtre des couvertures if (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; croûtes.open (); // - Demandez à notre application d'écouter nos événements personnalisés Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ('cancelToppings', openCrust); Vous pouvez donc voir que nous avons ajouté un autre écouteur d'événement. Quand il reçoit l’événement après que l’utilisateur a cliqué sur "annuler" dans les garnitures, il déclenche le openCrust méthode. Rappelez-vous dans la première partie comment j'ai dit que nous allons éventuellement lui transmettre des données. Bien, ce moment est venu. Dans l'événement de clic pour le bouton d'annulation, nous avons passé la croûte actuelle. Nous avons modifié le openCrust méthode en fermant la fenêtre des toppings et si la propriété crusts est dans l’événement, cela signifie qu’elle est appuyée sur cancel; je souhaite donc ajouter le type de croûte en tant que propriété de la fenêtre des croûtes. Cela nous permettra de sélectionner automatiquement la croûte précédemment sélectionnée. Nous allons couvrir cela dans la prochaine étape.
S'ouvrir crusts.js. Nous devons ajouter une condition pour vérifier si la propriété crusts existe dans la fenêtre. Vous voudrez placer ce code directement sous notre scrollView variable:
// - Si la fenêtre a la propriété crust, cela signifie que nous venons de la fenêtre // - toppings. Choisissez donc la dernière croûte sélectionnée connue si (win.crust) pour (i = 0; i < crusts.length; i++) if (win.crust == crusts[i].title) returnCrust = i; break; scrollView.scrollToView(returnCrust);
Si la propriété crust n'est pas nulle, cet extrait va parcourir en boucle notre tableau de croûtes existant et se rompre une fois que la propriété crust correspond au titre du tableau. Une fois qu'il a trouvé une correspondance, nous utilisons le scrollToView méthode sur notre scrollView. Cela présélectionnera notre croûte de notre dernière section.
Nous avons encore une partie à cette étape. Si vous avez compilé, vous remarquerez que le titre de la croûte est incorrect, nous devons donc résoudre ce problème. Insérer ce petit extrait sous notre crustType variable.
// - si returnCrust n'est pas nul, définissez l'étiquette du type de croûte if (returnCrust! = null) crustType.text = crusts [returnCrust] .title;
Problème résolu! Lorsque vous cliquez sur Annuler dans la fenêtre des garnitures, nous revenons à la fenêtre des croûtes et présélectionnons la croûte précédemment sélectionnée, ainsi que le titre de la croûte. Allez-y et testez-le. Sélectionnez une croûte, allez dans les garnitures et appuyez sur Annuler. Vous devriez pouvoir aller et venir autant que vous voulez!
Dans la deuxième partie, nous avons géré certains événements personnalisés nous permettant de naviguer entre certaines fenêtres à l’aide de notre openToppings et openCrust méthodes en main.js. Nous avons appris à transmettre des données entre fenêtres. Nous avons essentiellement créé un nouveau composant qui n'existe pas dans iOS, à savoir la case à cocher. Bien sûr, le SDK iOS a le commutateur à bascule, mais c’est moche et cela n’aurait pas l’air beau dans notre application. Dans la troisième partie de ce didacticiel, nous verrons comment accéder à la fenêtre de soumission de commande. Une fois dans la fenêtre, nous allons remplir certains champs de texte et, lors de la soumission, nous enverrons toutes nos informations de pizza à un script PHP. Le script PHP enverra ensuite l'adresse de votre choix par courrier électronique, en simulant la manière dont une commande entrerait s'il s'agissait d'une application réelle fonctionnant bien..
