Share
I sistemi di menu di drilldown consentono all'utente di selezionare una voce di menu, visualizzare la pagina dell'oggetto e quindi "scavare" più in profondità o tornare indietro di un livello. Un esempio perfetto è l'app Impostazioni su iOS.
Se provi a creare questo per Android, noterai che non funziona. Questo perché Android non utilizza TableViews nello stesso modo in cui lo fa iOS. Ecco cosa ha da dire Dan Thorpe, dipendente di Appcelerator:
Stiamo esaminando la creazione di un livello base che funzioni su più piattaforme su tutti i dispositivi supportati. Per fare ciò, in pratica dovrà essere per lo più non UI e la funzionalità dell'interfaccia utente sarà guidata da ciò che è una funzionalità su tutte le piattaforme. Ad esempio, blackberry non fornisce tabulazioni. Detto ciò. Se vuoi una app per la modifica dell'interfaccia utente, sarai in grado di crearne una.
Stiamo anche lavorando allo sfruttamento, in modo non cross-platform, delle funzionalità specifiche della piattaforma. Ad esempio Attività, Intenti, Notifiche, Servizi, ecc. Saranno nello spazio dei nomi Ti.Android e se utilizzi queste funzionalità per creare un'app Android di migliore qualità, i tuoi utenti lo apprezzeranno.
Per l'esperienza utente ideale (UX) dovresti scrivere alle metafore dell'interfaccia utente della piattaforma che l'Utente usa e segue l'UX di quella piattaforma. Funziona in tutti i modi. Un utente iPhone verrebbe confuso da una vera porta di un'app Android. Un utente BlackBerry non sarebbe nemmeno in grado di utilizzare una vera porta di un'app per iPhone se ha un dispositivo solo tastiera.
La forza del titanio, IMO, è un insieme comune di strumenti, una sola lingua e il supporto di librerie multipiattaforma ovunque possiamo fornirlo.
Crea un nuovo progetto in Titanium. Il nome non ha importanza. Tuttavia, se scarichi il mio codice di esempio, puoi utilizzare il pulsante "Importa progetto" nella barra degli strumenti per selezionare la cartella contenente il file tiapp.xml, che, come suggerisce il nome, importerà il progetto.
Se apriamo il file Resources / app.js, vedremo il codice Titanium predefinito. Tuttavia, non vogliamo la maggior parte di quel codice. Riducilo a questo:
Accentsconagua
// questo imposta il colore di sfondo del master UIView (quando non ci sono gruppi di finestre / tab su di esso) Titanium.UI.setBackgroundColor ('# 000'); // crea il gruppo di schede var tabGroup = Titanium.UI.createTabGroup (); // crea la scheda dell'interfaccia utente di base e la finestra root var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (title: 'Tab 1', window: win1); // il nostro menu di drilldown va qui // aggiungi schede tabGroup.addTab (tab1); // apre il gruppo di schede tabGroup.open (); Ora abbiamo un buon punto di partenza. Probabilmente ti starai chiedendo il gruppo di schede con 1 scheda. Per qualche ragione con Titanium è necessario utilizzare le schede per creare un menu di drilldown. Andiamo avanti e colpiamo "Launch" in Titanium e vediamo cosa otteniamo.
Uh oh, non va bene. Non vogliamo avere una grande scheda laggiù!
Fortunatamente questa è una soluzione piuttosto semplice. Basta impostare la proprietà 'tabBarHidden' su true per win1. Mentre ci siamo, rinominiamo la finestra. Il tuo codice dovrebbe ora apparire come questo:
// crea la scheda dell'interfaccia utente di base e la finestra root var win1 = Titanium.UI.createWindow (title: 'My Drilldown', backgroundColor: '# fff', tabBarHidden: true);
Ah, è meglio.
La parte più importante di questa app è il TableView, che visualizza le righe di opzioni per l'utente. Creiamo ora e inseritelo dove il commento che dice "il nostro menu di drilldown va qui":
// crea il contenitore del menu principale var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); win1.add (MAIN_MENU);
Si noti come abbiamo impedito lo scorrimento della tabella. Talvolta ciò è desiderabile se si dispone solo di alcune voci di menu.
Ora che abbiamo creato la tabella principale, aggiungiamo le righe che "collegheranno" alle sub-TableViews:
// prima opzione row var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Questa è la prima opzione"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // termina la prima riga dell'opzione
Ok, quindi abbiamo fatto alcune cose in quel blocco. Innanzitutto, abbiamo creato una riga vuota della tabella e impostato la proprietà 'hasChild' su true. Questo fa apparire la piccola freccia grigia sul lato destro della riga. Successivamente, abbiamo creato un'etichetta e l'abbiamo aggiunta alla riga della tabella vuota una volta. Abbiamo quindi aggiunto la riga al menu. Ripetiamo questo processo altre 3 volte in modo che ora abbiamo 4 opzioni del menu principale e il codice che assomiglia a questo:
// questo imposta il colore di sfondo del master UIView (quando non ci sono gruppi di finestre / tab su di esso) Titanium.UI.setBackgroundColor ('# 000'); // crea il gruppo di schede var tabGroup = Titanium.UI.createTabGroup (); // crea la scheda dell'interfaccia utente di base e la finestra root var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (title: 'Tab 1', window: win1); // crea il contenitore del menu principale var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); // prima opzione row var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Questa è la prima opzione"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // end first opzione row // second option row var secondItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (left: 9, text: "Questa è la seconda opzione"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // end second option row // third opzione row var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Questa è la terza opzione"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // end terzo opzione row // fourth opzione row var fourthItemRow = Ti.UI.createTableViewRow (hasChild: true); var fourthItemLabel = Ti.UI.createLabel (left: 9, text: "Questa è la quarta opzione"); fourthItemRow.add (fourthItemLabel); main_menu.appendRow (fourthItemRow); // termina la quarta riga di opzioni win1.add (main_menu); // aggiungi schede tabGroup.addTab (tab1); // apre il gruppo di schede tabGroup.open (); La tua app dovrebbe ora avere questo aspetto:
La creazione dei sottomenu è un processo semplice. Crei una nuova finestra e aggiungi cose ad essa. Tuttavia, il trucco sta nel mostrare questa nuova finestra come parte di un drill-down. Presumo che ormai tu abbia familiarità con Windows in Titanium, quindi ti fornisco solo un codice di riempimento che si integra bene con il codice qui sopra:
// sub window 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: "Questa è un'opzione secondaria!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // sub window 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: "Questa è un'opzione secondaria!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // sub window 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: "Questa è un'opzione secondaria!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // sub window 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: "Questa è un'opzione secondaria!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Qui è dove avviene la magia: gli eventi. Associando una funzione al listener di eventi 'click' possiamo gestire cosa succede quando una riga viene selezionata in un TableView. Andiamo!
// aggiungi l'evento al primo elemento firstItemRow.addEventListener ('click', function (e) tab1.open (sub_win1);); // aggiungi l'evento al secondo elemento secondItemRow.addEventListener ('click', function (e) tab1.open (sub_win2);); // aggiungi l'evento al terzo elemento thirdItemRow.addEventListener ('click', function (e) tab1.open (sub_win3);); // aggiungi l'evento al quarto elemento fourthItemRow.addEventListener ('click', function (e) tab1.open (sub_win4);); Sorprendentemente semplice, no? Torniamo alla scheda "invisibile" che abbiamo e apriamo una nuova finestra. Se premi "Avvia" per questa applicazione in Titanium, puoi vedere che i pulsanti posteriori sono generati automaticamente per te!
"La navigazione a 2 livelli è eccezionale", si potrebbe dire, "ma voglio una navigazione a 3 o 4 o 5 livelli!" Fortunatamente, puoi semplicemente seguire la stessa procedura appena mostrata! Ricorda che, indipendentemente dalla profondità della navigazione, puoi sempre chiamare tab1.open () e spostarti ancora più in profondità. Il titanio è certamente uno strumento fantastico e flessibile.
