Share
Sistemele de meniuri ale sistemelor de căutare permit utilizatorului să selecteze un element de meniu, să vizualizeze pagina elementului și apoi să "sapă" mai adânc sau să revină la un nivel. Un exemplu perfect este aplicația Setări din iOS.
Dacă încercați să construiți acest lucru pentru Android, veți observa că nu funcționează. Acest lucru se datorează faptului că Android nu utilizează TableViews destul de în același mod ca iOS. Iată ce a spus angajatul Appcelerator Dan Thorpe despre acest subiect:
Vom încerca să creăm un strat de bază care să funcționeze pe mai multe platforme pe toate dispozitivele acceptate. Pentru a face acest lucru, va trebui să fie în general non-UI și caracteristica UI va fi condus de ceea ce este o capacitate pe toate platformele. De exemplu, BlackBerry nu oferă file la toate. Acestea fiind spuse. Dacă doriți ca un UI să nu modifice aplicația, veți putea crea unul.
De asemenea, vom lucra la exploatarea, într-o manieră non-inter-platformă, a unor caracteristici specifice platformei. De exemplu, activitățile Android, intențiile, notificările, serviciile etc. vor fi în spațiul de nume Ti.Android și dacă utilizați aceste funcții pentru a construi o aplicație Android de cea mai bună calitate, utilizatorii dvs. o vor aprecia.
Pentru experiența ideală a utilizatorilor (UX) trebuie să scrieți metaforele UI ale platformei utilizată de Utilizator și să urmați UX-ul acelei platforme. Asta face toate căile. Un utilizator iPhone ar fi confundat de un port adevărat al unei aplicații Android. Un utilizator de blackberry nu ar fi putut chiar să folosească un port adevărat al unei aplicații pentru iPhone dacă are un dispozitiv cu tastatură.
Titlul Titanium, IMO, este un set comun de instrumente, un singur limbaj și suport de bibliotecă cross-platform, oriunde putem oferi.
Creați un nou proiect în Titanium. Numele nu contează. Cu toate acestea, dacă descărcați codul de probă, puteți utiliza butonul "Importați proiectul" din bara de instrumente pentru a selecta folderul care conține fișierul tiapp.xml, care, după cum implică numele, va importa proiectul.
Dacă deschidem fișierul Resurse / app.js, vom vedea codul Titaniu implicit. Cu toate acestea, nu vrem majoritatea acestui cod. Liniștește-te la asta:
Accentsconagua
// aceasta seta culoarea de fundal a vederii UIView (atunci când nu există ferestre / grupuri de file pe ea) Titanium.UI.setBackgroundColor ('# 000'); // creați grupul de taburi var tabGroup = Titanium.UI.createTabGroup (); // crează fila UI de bază și fereastra rădăcină var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (title: 'Tab 1', fereastra: win1); // meniul nostru de drilldown merge aici // adaugă tab-uri tabGroup.addTab (tab1); // deschide grupul tab tabGroup.open (); Acum avem un bun punct de plecare. Probabil că vă întrebați despre grupul de file cu o filă. Din anumite motive, cu Titanium trebuie să utilizați filele pentru a crea un meniu derulant. Să mergem mai departe și să loviți "Lansarea" în Titanium și să vedem ce avem.
Nu e bine. Nu vrem să avem o filă mare acolo!
Din fericire, acesta este un remediu destul de ușor. Pur și simplu setați proprietatea 'tabBarHidden' la true pentru win1. În timp ce suntem la el, să redenumim fereastra. Codul dvs. ar trebui să arate astfel:
// crează tab-ul UI de bază și fereastra rădăcină var win1 = Titanium.UI.createWindow (title: 'My Drilldown', backgroundColor: '# fff', tabBarHidden: true);
Ah, e mai bine.
Cea mai importantă parte a acestei aplicații este TableView, care va afișa rândurile de opțiuni utilizatorului. Să o creăm acum și să o punem acolo unde comentariul care spune că "meniul nostru de drilldown merge aici":
// creați containerul din meniul principal var main_menu = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); win1.add (main_menu);
Observați cum am împiedicat deplasarea mesei. Acest lucru este uneori de dorit dacă aveți doar câteva elemente de meniu.
Acum, că am creat tabelul principal, să adăugăm rândurile care se vor "conecta" la sub-TableViews:
// primul rând de opțiuni var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Aceasta este prima opțiune"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // se termină primul rând de opțiuni
Bine, am făcut câteva lucruri în blocul ăsta. Mai întâi, am creat un rând tabel gol și setați proprietatea 'hasChild' la true. Aceasta face ca săgeata mică săgeată să apară în partea dreaptă a rândului. Apoi, am creat o etichetă și am adăugat-o la rândul tabelului o dată-necompletat. Apoi am introdus rândul în meniu. Să repetăm acest proces de 3 ori, pentru ca acum să avem 4 opțiuni din meniul principal și codul care arată astfel:
// aceasta seta culoarea de fundal a vederii UIView (atunci când nu există ferestre / grupuri de file pe ea) Titanium.UI.setBackgroundColor ('# 000'); // creați grupul de taburi var tabGroup = Titanium.UI.createTabGroup (); // crează fila UI de bază și fereastra rădăcină var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (title: 'Tab 1', fereastra: win1); // creați containerul din meniul principal var main_menu = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); // primul rând de opțiuni var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Aceasta este prima opțiune"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // sfârșitul primei opțiuni rând // al doilea rând de opțiuni var secondItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (stânga: 9, text: "Aceasta este a doua opțiune"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // final al doilea rând de opțiuni // al treilea rând de opțiuni var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Aceasta este a treia opțiune"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // sfârșitul liniei de a treia opțiune // al patrulea rând de opțiuni var fourthItemRow = Ti.UI.createTableViewRow (hasChild: true); var fourthItemLabel = Ti.UI.createLabel (stânga: 9, text: "Aceasta este a patra opțiune"); fourthItemRow.add (fourthItemLabel); main_menu.appendRow (fourthItemRow); // sfârșitul celei de-a patra opțiuni row win1.add (main_menu); // adăugați tab-uri tabGroup.addTab (tab1); // deschide grupul tab tabGroup.open (); Aplicația ar trebui să arate astfel:
Crearea submeniurilor este un proces simplu. Creați o fereastră nouă și adăugați lucruri la ea. Cu toate acestea, truc este în afișarea acestei ferestre noi, ca parte a unui drilldown. Presupun că până acum sunteți familiarizați cu realizarea ferestrelor în Titanium, așa că am furnizat doar un cod de umplere de mai jos care se integrează bine cu codul de mai sus:
// sub fereastra 1 var sub_win1 = Ti.UI.createWindow (title: 'Sub-fereastră 1'); var sub_table1 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row1 = Ti.UI.createTableViewRow (); var sub_label1 = Ti.UI.createLabel (left: 9, text: "Aceasta este o sub-opțiune!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // sub fereastra 2 var sub_win2 = Ti.UI.createWindow (title: 'Sub-Window 2'); var sub_table2 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row2 = Ti.UI.createTableViewRow (); var sub_label2 = Ti.UI.createLabel (stânga: 9, text: "Aceasta este o sub-opțiune!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // sub fereastra 3 var sub_win3 = Ti.UI.createWindow (title: 'Sub-Window 3'); var sub_table3 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row3 = Ti.UI.createTableViewRow (); var sub_label3 = Ti.UI.createLabel (stânga: 9, text: "Aceasta este o sub-opțiune!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // sub fereastra 4 var sub_win4 = Ti.UI.createWindow (title: 'Sub-Window 4'); var sub_table4 = Ti.UI.createTableView (stil: Titanium.UI.iPhone.TableViewStyle.GROUPED); var sub_row4 = Ti.UI.createTableViewRow (); var sub_label4 = Ti.UI.createLabel (stânga: 9, text: "Aceasta este o sub-opțiune!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Aici se petrece magia: evenimente. Prin legarea unei funcții la ascultătorul evenimentului "clic" putem gestiona ceea ce se întâmplă atunci când un rând este selectat într-un TableView. Sa mergem!
// adăugați evenimentul la primul element firstItemRow.addEventListener ('click', funcția (e) tab1.open (sub_win1);); // adăugați evenimentul la al doilea element secondItemRow.addEventListener ('click', funcția (e) tab1.open (sub_win2);); // adăugați evenimentul la al treilea element thirdItemRow.addEventListener ("faceți clic", funcția (e) tab1.open (sub_win3);); // adăugați evenimentul la al patrulea element fourthItemRow.addEventListener ('click', funcția (e) tab1.open (sub_win4);); Surprinzător de simplu, nu-i așa? Ne întoarcem la fila "invizibilă" pe care o avem și deschidem o nouă fereastră. Dacă apăsați pe "Lansare" pentru această aplicație în Titanium, puteți vedea că butoanele din spate sunt generate automat pentru dvs.!
Navigarea pe 2 nivele este minunată ", ați putea spune," dar vreau să navighez 3 sau 4 sau 5 niveluri! " Din fericire, puteți pur și simplu urmați aceeași procedură așa cum a fost prezentată mai sus! Amintiți-vă, indiferent cât de adânci vă aflați în navigație, puteți să apelați întotdeauna tab1.open () și să vă deplasați chiar mai adânc. Titanium este cu siguranță un instrument fantastic, flexibil.
