Share
Bienvenue au troisième volet de notre série, qui explique comment créer une application de commande de pizzas avec Titanium Mobile. Dans ce tutoriel, nous allons créer l'écran "Soumettre votre commande".
Maintenant que l'utilisateur peut sélectionner et désélectionner les garnitures, nous devons lui permettre de soumettre une commande. Commençons par modifier les détails de l'événement click à l'intérieur toppings.js:
Accentsconagua
details.addEventListener ('click', fonction (e) var pizzaInfo = []; pour (var i = 0; i < toppings.length; i++) if (toppings[i].container != null) pizzaInfo.push(toppings[i].title); Ti.App.fireEvent('details',crust:win.crust,path:win.path,toppings:pizzaInfo); ); À présent, lorsque vous appuyez sur le bouton Détails de la fenêtre des garnitures, le code ci-dessus parcourt notre vaste ensemble de garnitures et vérifie la récipient propriété pour chaque élément du tableau. Si l'élément n'est pas null, il sera ajouté à notre tableau temporaire, appelé pizzaInfo. Une fois la boucle terminée, nous déclencherons un nouvel événement personnalisé appelé détails. Nous allons passer trois paramètres à cet événement:
pizzaInfo).openDetails un événement Nous devons modifier notre main.js fichier à écouter pour notre événement personnalisé, alors allez-y et ouvrez ce fichier maintenant. Vous allez également ajouter une nouvelle méthode appelée openDetails au code:
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 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 nappages si (e.crust) crusts.crust = e.crust; crusts.url = 'crusts.js'; croûtes.open (); // - Cette méthode fermera la fenêtre des toppings et ouvrira la fonction de la fenêtre de détails openDetails (e) toppings.close (); details.crust = e.crust; details.path = e.path; details.toppings = e.toppings; details.url = 'details.js'; details.open (); // - Demandez à notre application d'écouter nos événements personnalisés Ti.App.addEventListener ('toppings', openToppings); Ti.App.addEventListener ('cancelToppings', openCrust); Ti.App.addEventListener ('details', openDetails); openCrust (); D'accord, votre main.js Le fichier doit maintenant correspondre au code ci-dessus. Dans le code ci-dessus, nous avons ajouté un nouvel écouteur d'événement au bas de l'écran appelé détails et lorsque l'application reçoit cet événement, nous souhaitons appeler le openDetails méthode. dans le openDetails méthode, nous fermons d’abord la fenêtre des nappages. Nous définissons ensuite certaines propriétés dans la fenêtre de détails avec les valeurs de l'événement que nous avons transmis toppings.js. Nous définissons également la propriété URL sur details.js et appelons enfin le ouvrir méthode.
Nous devons créer un nouveau fichier javascript appelé details.js et enregistrez-le dans le main_windows dossier. Ce que nous voulons faire dans ce fichier est d’ajouter trois champs de texte:
REMARQUE: dans une application réelle, nous aurions évidemment plus de champs, mais dans l’intérêt de ce tutoriel, nous n’aurons créé que trois champs..
Nous allons également avoir un résumé de la pizza que l'utilisateur a commandée avec un bouton de commande. Commençons par l'interface pour ceci:
var win = Ti.UI.currentWindow; var orderReq = Titanium.Network.createHTTPClient (); // - Nom du champ de texte var names = Titanium.UI.createTextField (color: '# 336699', en haut: 100, à gauche: 10, en largeur: 300, en hauteur: 40, hintText: 'Nom', backgroundImage: '? /images/textfield.png ', paddingLeft: 8, paddingRight: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Champ de texte Address1 var address1 = Titanium.UI.createTextField (color: '# 336699', en haut: 140, à gauche: 10, en largeur: 300, en hauteur: 40, hintText: 'Address 1', backgroundImage: ' ? /images/textfield.png ', paddingLeft: 8, paddingDroit: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_NEXT, suppressReturn: false); // - Champ de texte Address2 var address2 = Titanium.UI.createTextField (color: '# 336699', en haut: 180, à gauche: 10, en largeur: 300, en hauteur: 40, hintText: 'Ville, État, code postal' , backgroundImage: '? /images/textfield.png', paddingLeft: 8, paddingDroit: 8, keyboardType: Titanium.UI.KEYBOARD_DEFAULT, returnKeyType: Titanium.UI.RETURNKEY_DEFAULT); // - Ecoutez le prochain clic sur le tableau des noms de touches.addEventListener ('return', function () address1.focus ();); address1.addEventListener ('return', function () address2.focus ();); win.add (noms); win.add (adresse1); win.add (adresse2); // - Cette méthode constitue un résumé formaté de la fonction de commande des utilisateurs getFormattedPizza () var text = win.crust + 'pizza with: \ n'; if (win.toppings.length == 0) text + = '• Nature (pizza au fromage) \ n '; else for (var i = 0; i < win.toppings.length; i++) text += '• ' + win.toppings[i] + '\n'; return text; //-- Are formatted text field var pizzaInfoText = Ti.UI.createLabel( text:getFormattedPizza(), font: fontFamily:'Verdana', fontSize:14 , color:'#fff', shadowColor:'#333', shadowOffset:x:1,y:1, textAlign:'left', width:Ti.Platform.displayCaps.platformWidth, height:160, top:210, left:10 ); win.add(pizzaInfoText); //-- Order Button var order = Ti.UI.createButton( width:137, height:75, backgroundImage:'? /images/order.png', top:385, left:165, opacity:0 ); //-- Cancel Button var cancel = Ti.UI.createButton( width:137, height:75, backgroundImage:'? /images/cancel.png', top:385, left:10, opacity:0 ); //-- If android OS, use the image property instead of backgroundImage (Ti SDK bug) if (Ti.Platform.osname == 'android') order.image = '? /images/order.png'; cancel.image = '? /images/cancel.png'; win.add(order); win.add(cancel); //-- Fade the order button in order.animate( opacity:1, duration:500 ); //-- Fade the cancel button in cancel.animate( opacity:1, duration:500 ); Le bloc de code ci-dessus peut sembler effrayant, mais en réalité, il est assez simple. Nous commençons par définir notre gagner variable ainsi que notre orderReq variable. le orderReq La variable gérera notre requête sur notre fichier PHP que nous couvrirons dans le prochain tutoriel de cette série..
Nous définissons ensuite nos trois champs de texte et leur donnons des propriétés simples. Nous ajoutons un revenir écouteur d'événement sur les champs de texte afin que lorsque vous appuyez sur la touche suivante sur le clavier, il passe au champ de texte suivant. Nous fabriquons une étiquette appelée pizzaInfoText et mettre sa texte propriété à notre getFormattedPizza méthode. Cette méthode renverra une liste formatée de la croûte et des nappages choisies. Si l'utilisateur n'a sélectionné aucune garniture, nous afficherons le type de croûte et une pizza au fromage simple. Nous avons également passé notre commande et annulé les boutons et les a estompés. Votre interface devrait maintenant ressembler à ceci:
Vous êtes donc dans l'écran de commande de soumission et vous décidez de supprimer les champignons de votre liste de garnitures. Eh bien, pas de problème! L’application connaît déjà les garnitures que vous avez sélectionnées actuellement. Nous allons donc simplement renvoyer ce tableau temporaire à toppings.js et revérifier les garnitures. Nous devons d’abord ajouter un écouteur d’événement à notre bouton Annuler. Faites défiler vers le bas de votre details.js déposer et ajouter ceci:
// - Annuler bouton événement. Revient à la fenêtre des garnitures et mémorise les sélections des utilisateurs cancel.addEventListener ('click', function () Ti.App.fireEvent ('cancelDetails', crust: win.crust, chemin: win.path, toppings: win. garnitures);); Nous lançons un autre événement personnalisé, appelé cette fois-ci annulerDétails, et encore nous passons trois paramètres:
annulerDétails un événement Revenons à main.js. Nous devons ajouter un nouvel écouteur d'événement. Ajoutez ce qui suit à la fin de nos auditeurs d'événements.
Ti.App.addEventListener ('cancelDetails', openToppings); Maintenant nous avons déjà un openToppings méthode. Nous devons cependant le modifier.
// - Cette méthode fermera la fenêtre des croûtes / détails et ouvrira la fonction de la fenêtre des toppings openToppings (e) if (e.toppings) details.close (); else crusts.close (); toppings.url = 'toppings.js'; garnitures.crust = e.crust; toppings.path = e.path; toppings.returnToppings = e.toppings; garnitures.open ();
Donc, avec notre méthode modifiée, nous vérifions la propriété des nappages liée à l'événement. Si ce n'est pas null, nous voulons fermer la fenêtre de détails. S'il est nul, nous voulons fermer la fenêtre de la croûte. Nous ajoutons toujours nos propriétés personnalisées, puis ouvrons notre fenêtre de garnitures..
Lorsque nous revenons en arrière, nous voulons présélectionner les cases à cocher de la garniture que nous avons précédemment choisie. Nous voulons également ajouter visuellement les garnitures à la pizza. Ouvrez le toppings.js fichier et faites défiler jusqu'à la createToppingsList méthode. La différence entre votre actuel et celui ci-dessous est si win.returnToppings n'est pas nul, il va parcourir notre plus grand tableau de nappages et le comparer à notre tableau temporaire. Si elles correspondent, revérifiez la case à cocher, ajoutez le visuel à la croûte et augmentez le nombre de garnitures..
/ * Cette méthode crée la liste de tête. Comme iOS ne comporte pas de composants cochés, j'ai créé le mien en utilisant une vue, un bouton et en remplaçant l'image d'arrière-plan * / 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); pour (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 ); //-- if the user hits cancel in the details window, we go back and repopulate the list with previously checked toppings if (win.returnToppings) for (j = 0; j < win.returnToppings.length; j++) if (win.returnToppings[j] == toppings[i].title) var aTopping = Ti.UI.createView( backgroundImage:toppings[i].path ); if (Ti.Platform.osname == 'android') aTopping.image = toppings[i].path; else aTopping.opacity = 0; aTopping.animate( opacity:1, duration:500 ); toppingsHolder.add(aTopping); toppings[i].container = aTopping; checkbox.backgroundImage = '? /images/checkbox_yes.png'; checkbox.selected = true; numToppings += 1; 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 ); Dans ce didacticiel, nous avons créé l’écran «Submit Oder» (Soumettre l’ordre) qui est le dernier écran dont nous aurons besoin dans cette série de didacticiels. Nous avons également ajouté deux autres événements personnalisés à notre application qui nous permettaient de basculer entre les écrans "Choisir la croûte" et "Soumettre la commande"..
La prochaine partie de cette série traitera de l'authentification du formulaire nécessaire pour traiter les soumissions, puis de l'envoi de la commande choisie avec les informations client soumises (un serveur Web avec un client de messagerie et PHP installé sera nécessaire pour envoyer le message. notification de commande par courrier électronique).
