Share
Les systèmes de menu d'exploration permettent à l'utilisateur de sélectionner un élément de menu, d'afficher la page de l'élément, puis de "creuser" plus profondément ou de remonter d'un niveau. L’application Paramètres sur iOS en est un exemple parfait..
Si vous essayez de construire ceci pour Android, vous remarquerez que cela ne fonctionne pas. En effet, Android n'utilise pas TableViews de la même manière que iOS. Voici ce que Dan Thorpe, employé d’Appcelerator, a dit sur ce sujet:
Nous allons examiner la possibilité de créer une couche de base qui fonctionne sur plusieurs plates-formes sur tous les appareils pris en charge. Pour ce faire, il devra essentiellement s'agir essentiellement de non-interface utilisateur et la fonctionnalité d'interface utilisateur dépendra de la capacité de toutes les plates-formes. Par exemple, BlackBerry ne fournit pas d'onglets. Cela étant dit. Si vous voulez une application sans changements d'interface utilisateur, vous pourrez en créer une.
Nous allons également travailler à exploiter, d’une manière non multiplate-forme, les fonctionnalités propres à la plate-forme. Par exemple, les activités, les intentions, les notifications, les services, etc. d'Android, ils figureront dans l'espace de noms Ti.Android. Si vous utilisez ces fonctionnalités pour créer une application Android de premier ordre, vos utilisateurs l'apprécieront..
Pour une expérience utilisateur idéale (UX), vous devez écrire dans les métaphores de l'interface utilisateur de la plate-forme utilisée par l'utilisateur et suivre l'UX de cette plate-forme. Cela fonctionne à tous points de vue. Un utilisateur d'iPhone serait dérouté par un véritable port d'une application Android. Un utilisateur de Blackberry ne pourrait même pas utiliser le véritable port d'une application iPhone s'il dispose d'un périphérique uniquement à clavier..
La force de Titanium, IMO, est un ensemble d'outils commun, un langage unique et une prise en charge de bibliothèques multiplateformes partout où nous pouvons le fournir..
Créez un nouveau projet en titane. Le nom n'a pas d'importance. Toutefois, si vous téléchargez mon exemple de code, vous pouvez utiliser le bouton "Importer un projet" dans la barre d’outils pour sélectionner le dossier contenant le fichier tiapp.xml, qui importera le projet, comme son nom l’indique..
Si nous ouvrons le fichier Resources / app.js, nous verrons le code Titanium par défaut. Cependant, nous ne voulons pas la plupart de ce code. Atténuez ceci:
Accentsconagua
// ceci définit la couleur d'arrière-plan de l'UIView maître (lorsqu'il n'y a pas de groupes de fenêtres / onglets dessus) Titanium.UI.setBackgroundColor ('# 000'); // crée un groupe d'onglets var tabGroup = Titanium.UI.createTabGroup (); // crée un onglet d'interface utilisateur de base et une fenêtre racine var win1 = Titanium.UI.createWindow (titre: 'Onglet 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (titre: 'Onglet 1', fenêtre: win1); // notre menu détaillé va ici // ajouter des onglets tabGroup.addTab (tab1); // ouvre le groupe d'onglets tabGroup.open (); Nous avons maintenant un bon point de départ. Vous vous interrogez probablement sur le groupe d'onglets avec 1 onglet. Pour une raison quelconque, avec Titanium, vous devez utiliser des onglets pour créer un menu détaillé. Allons-y et appuyez sur "Lancer" dans Titanium et voyons ce que nous obtenons..
Euh oh, ce n'est pas bon. Nous ne voulons pas avoir un gros onglet là-bas!
Heureusement, c'est une solution assez facile. Définissez simplement la propriété 'tabBarHidden' sur true pour win1. Pendant que nous y sommes, renommons la fenêtre. Votre code devrait maintenant ressembler à ceci:
// crée un onglet d'interface utilisateur de base et une fenêtre racine var win1 = Titanium.UI.createWindow (title: 'My Drilldown', My Drilldown ', backgroundColor:' # fff ', tabBarHidden: true);
Ah c'est mieux.
La partie la plus importante de cette application est la TableView, qui affichera les rangées d'options pour l'utilisateur. Créons-le maintenant et mettez-le là où se trouve le commentaire "notre menu détaillé va ici":
// crée le conteneur du menu principal var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); win1.add (menu principal);
Remarquez comment nous avons empêché le défilement de la table. Ceci est parfois souhaitable si vous ne disposez que de quelques éléments de menu.
Maintenant que nous avons créé la table principale, ajoutons les lignes qui seront "liées" à la sous-TableViews:
// première ligne d'options var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Ceci est la première option"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // fin de la première ligne d'option
Ok, alors nous avons fait quelques choses dans ce bloc. Tout d'abord, nous avons créé une ligne de tableau vide et avons défini la propriété 'hasChild' sur true. Cela fait apparaître la petite flèche grise sur le côté droit de la ligne. Ensuite, nous avons créé une étiquette et l'avons ajoutée à la ligne de tableau une fois vide. Nous avons ensuite ajouté la ligne au menu. Répétons ce processus 3 fois de plus pour avoir maintenant 4 options de menu principal et un code qui ressemble à ceci:
// ceci définit la couleur d'arrière-plan de l'UIView maître (lorsqu'il n'y a pas de groupes de fenêtres / onglets dessus) Titanium.UI.setBackgroundColor ('# 000'); // crée un groupe d'onglets var tabGroup = Titanium.UI.createTabGroup (); // crée un onglet d'interface utilisateur de base et une fenêtre racine var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (titre: 'Onglet 1', fenêtre: win1); // crée le conteneur du menu principal var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); // première ligne d'options var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Ceci est la première option"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // fin de la première ligne d'option // deuxième ligne d'option var secondItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (left: 9, text: "Ceci est la deuxième option"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // fin de la deuxième ligne d'option // troisième ligne d'option var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Ceci est la troisième option"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // fin de la troisième ligne d'option // quatrième ligne d'option var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Ceci est la quatrième option"); quatriemeItemRow.add (quatriemeItemLabel); main_menu.appendRow (thirdItemRow); // fin de la quatrième ligne d'option win1.add (main_menu); // ajouter des onglets tabGroup.addTab (tab1); // ouvre le groupe d'onglets tabGroup.open (); Votre application devrait maintenant ressembler à ceci:
La création des sous-menus est un processus simple. Vous créez une nouvelle fenêtre et y ajoutez des éléments. Cependant, l’astuce consiste à afficher cette nouvelle fenêtre dans le cadre d’une analyse détaillée. Je suppose maintenant que vous êtes habitué à créer des fenêtres dans Titanium, je vous fournis donc ci-dessous un code de remplissage qui s'intègre bien au code ci-dessus:
// sous-fenêtre 1 var sub_win1 = Ti.UI.createWindow (title: 'Sub-Window 1'); var sub_table1 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row1 = Ti.UI.createTableViewRow (); var sub_label1 = Ti.UI.createLabel (left: 9, text: "Ceci est une sous-option!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // sous-fenêtre 2 var sub_win2 = Ti.UI.createWindow (title: 'Sub-Window 2'); var sub_table2 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row2 = Ti.UI.createTableViewRow (); var sub_label2 = Ti.UI.createLabel (left: 9, text: "Ceci est une sous-option!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // sous-fenêtre 3 var sub_win3 = Ti.UI.createWindow (title: 'Sub-Window 3'); var sub_table3 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row3 = Ti.UI.createTableViewRow (); var sub_label3 = Ti.UI.createLabel (left: 9, text: "Ceci est une sous-option!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // sous-fenêtre 4 var sub_win4 = Ti.UI.createWindow (title: 'Sub-Window 4'); var sub_table4 = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row4 = Ti.UI.createTableViewRow (); var sub_label4 = Ti.UI.createLabel (left: 9, text: "Ceci est une sous-option!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Voici où la magie opère: les événements. En liant une fonction à l'écouteur d'événement 'click', nous pouvons gérer ce qui se produit lorsqu'une ligne est sélectionnée dans un TableView. Allons-y!
// ajoute l'événement au premier élément firstItemRow.addEventListener ('click', function (e) tab1.open (sub_win1);); // ajoute l'événement au second élément secondItemRow.addEventListener ('click', function (e) tab1.open (sub_win2);); // ajoute l'événement au troisième élément thirdItemRow.addEventListener ('click', function (e) tab1.open (sub_win3);); // ajoute l'événement au quatrième élément thirdItemRow.addEventListener ('click', function (e) tab1.open (sub_win4);); Étonnamment simple, n'est-ce pas! Nous revenons simplement à l'onglet "invisible" que nous avons et ouvrons une nouvelle fenêtre. Si vous cliquez sur "Lancer" pour cette application en titane, vous pouvez voir que les boutons de retour sont générés automatiquement pour vous.!
"La navigation à 2 niveaux est excellente", pourrait-on dire, "mais je veux une navigation à 3, 4 ou 5 niveaux!" Heureusement, vous pouvez simplement suivre la procédure décrite ci-dessus! N'oubliez pas que vous pouvez toujours appeler tab1.open () et aller plus loin, quelle que soit la profondeur de votre navigation. Le titane est certainement un outil fantastique et flexible.
