Share
Drilldown-menusystemen stellen de gebruiker in staat een menu-item te selecteren, de pagina van het item te bekijken en vervolgens dieper te graven of een niveau hoger te gaan. Een perfect voorbeeld is de app Instellingen op iOS.
Als je dit probeert te bouwen voor Android, zul je merken dat het niet werkt. Dat komt omdat Android TableViews niet op dezelfde manier gebruikt als iOS. Hier is wat Appcelerator-medewerker Dan Thorpe te zeggen had over deze thread:
We gaan kijken naar het creëren van een kernlaag die cross-platform werkt op alle ondersteunde apparaten. Om dat te doen, zal het in principe grotendeels non-UI moeten zijn en de UI-functie zal worden aangedreven door wat een mogelijkheid is op alle platforms. Blackberry biedt bijvoorbeeld helemaal geen tabbladen. Dat gezegd hebbende. Als u een app zonder gebruikersinterface wilt, kunt u er een maken.
We gaan ook werken aan het platformonafhankelijk exploiteren op een platformonafhankelijke manier. Bijvoorbeeld Android-activiteiten, intenties, meldingen, services, etc. ze bevinden zich in de Ti.Android-naamruimte en als u deze functies gebruikt om een beste Android-app te bouwen, zullen uw gebruikers het waarderen.
Voor de ideale gebruikerservaring (UX) moet u naar de UI-metaforen schrijven van het platform dat de gebruiker gebruikt en de UX van dat platform volgen. Dat werkt op alle manieren. Een iPhone-gebruiker zou in de war raken door een echte poort van een Android-app. Een BlackBerry-gebruiker zou zelfs geen echte poort van een iPhone-app kunnen gebruiken als deze een apparaat met alleen een toetsenbord heeft.
De kracht van Titanium, IMO, is een veelgebruikt geheel van tooling, een enkele taal en cross-platform bibliotheekondersteuning overal waar we het kunnen bieden.
Maak een nieuw project in Titanium. De naam doet er niet toe. Als u echter mijn voorbeeldcode downloadt, kunt u de knop "Project importeren" op de werkbalk gebruiken om de map te selecteren die het bestand tiapp.xml bevat, dat, zoals de naam al aangeeft, het project importeert.
Als we het bestand Resources / app.js openen, zien we de standaard Titanium-code. We willen echter niet het grootste deel van die code. Maak het hier op neer:
Accentsconagua
// hiermee wordt de achtergrondkleur van de hoofd-UIView ingesteld (als er geen vensters / tabgroepen op staan) Titanium.UI.setBackgroundColor ('# 000'); // maak tabgroep var tabGroup = Titanium.UI.createTabGroup (); // maak basis UI tab en root venster var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff'); var tab1 = Titanium.UI.createTab (title: 'Tab 1', venster: win1); // ons drilldown-menu gaat hier // tabbladen tabGroup.addTab toevoegen (tab1); // open tabblad groep tabGroup.open (); Nu hebben we een goed startpunt. Je vraagt je waarschijnlijk af over de tabgroep met 1 tab. Om een bepaalde reden met Titanium moet je tabbladen gebruiken om een drilldown-menu te maken. Laten we doorgaan en "Lancering" in Titanium starten en zien wat we krijgen.
Oh dat is niet goed. We willen daar geen grote tab hebben!
Gelukkig is dit een vrij gemakkelijke oplossing. Stel eenvoudig de eigenschap 'tabBarHidden' in op true voor win1. Terwijl we bezig zijn, laten we het venster hernoemen. Uw code zou er nu als volgt uit moeten zien:
// create base UI tab en root venster var win1 = Titanium.UI.createWindow (title: 'My Drilldown', backgroundColor: '# fff', tabBarHidden: true);
Ah, dat is beter.
Het belangrijkste onderdeel van deze app is de TableView, die de rijen met opties voor de gebruiker weergeeft. Laten we het nu maken en plaatsen waar de opmerking die zegt "ons drill-downmenu hier naartoe gaat":
// maak het hoofdmenu container var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); win1.add (main_menu);
Let op hoe we hebben voorkomen dat de tafel wordt geschoven. Dit is soms wenselijk als u maar een paar menu-items hebt.
Nu we de hoofdtabel hebben gemaakt, laten we de rijen toevoegen die worden "gekoppeld" aan de sub-TableViews:
// eerste optie rij var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Dit is de eerste optie"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // einde eerste optie rij
Oké, dus we hebben een paar dingen in dat blok gedaan. Eerst hebben we een lege tabelrij gemaakt en de eigenschap 'hasChild' op true gezet. Hierdoor verschijnt de kleine grijze pijl aan de rechterkant van de rij. Vervolgens hebben we een label gemaakt en dit aan de lege rij met één rij toegevoegd. Vervolgens hebben we de rij aan het menu toegevoegd. Laten we dit proces nog 3 keer herhalen, zodat we nu 4 hoofdmenu-opties hebben en een code die er als volgt uitziet:
// hiermee wordt de achtergrondkleur van de hoofd-UIView ingesteld (als er geen vensters / tabgroepen op staan) Titanium.UI.setBackgroundColor ('# 000'); // maak tabgroep var tabGroup = Titanium.UI.createTabGroup (); // maak basis UI tab en root venster var win1 = Titanium.UI.createWindow (title: 'Tab 1', backgroundColor: '# fff', tabBarHidden: true); var tab1 = Titanium.UI.createTab (title: 'Tab 1', venster: win1); // maak het hoofdmenu container var main_menu = Ti.UI.createTableView (style: Titanium.UI.iPhone.TableViewStyle.GROUPED, scrollable: false); // eerste optie rij var firstItemRow = Ti.UI.createTableViewRow (hasChild: true); var firstItemLabel = Ti.UI.createLabel (left: 9, text: "Dit is de eerste optie"); firstItemRow.add (firstItemLabel); main_menu.appendRow (firstItemRow); // einde eerste optie rij // tweede optie rij var secondeItemRow = Ti.UI.createTableViewRow (hasChild: true); var secondItemLabel = Ti.UI.createLabel (left: 9, text: "Dit is de tweede optie"); secondItemRow.add (secondItemLabel); main_menu.appendRow (secondItemRow); // einde tweede optie rij // derde optie rij var thirdItemRow = Ti.UI.createTableViewRow (hasChild: true); var thirdItemLabel = Ti.UI.createLabel (left: 9, text: "Dit is de derde optie"); thirdItemRow.add (thirdItemLabel); main_menu.appendRow (thirdItemRow); // einde derde optie rij // vierde optie rij var fourthItemRow = Ti.UI.createTableViewRow (hasChild: true); var fourthItemLabel = Ti.UI.createLabel (left: 9, text: "Dit is de vierde optie"); fourthItemRow.add (fourthItemLabel); main_menu.appendRow (fourthItemRow); // einde vierde optierij win1.add (hoofdmenu); // tabbladen tabGroup.addTab toevoegen (tab1); // open tabblad groep tabGroup.open (); Uw app zou er nu als volgt uit moeten zien:
Het maken van de submenu's is een eenvoudig proces. U maakt een nieuw venster en voegt er dingen aan toe. Het is echter de kunst om dit nieuwe venster weer te geven als onderdeel van een drill-down. Ik ga er nu van uit dat je bekend bent met het maken van vensters in Titanium, dus ik voorzie alleen een aantal vulcode hieronder die goed integreert met de bovenstaande code:
// subvenster 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: "Dit is een suboptie!"); sub_row1.add (sub_label1); sub_table1.appendRow (sub_row1); sub_win1.add (sub_table1); // subvenster 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: "Dit is een suboptie!"); sub_row2.add (sub_label2); sub_table2.appendRow (sub_row2); sub_win2.add (sub_table2); // subvenster 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: "Dit is een suboptie!"); sub_row3.add (sub_label3); sub_table3.appendRow (sub_row3); sub_win3.add (sub_table3); // subvenster 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: "Dit is een suboptie!"); sub_row4.add (sub_label4); sub_table4.appendRow (sub_row4); sub_win4.add (sub_table4);
Hier gebeurt de magie: gebeurtenissen. Door een functie te binden aan de 'click'-gebeurtenislistener, kunnen we omgaan met wat er gebeurt als een rij wordt geselecteerd in een TableView. Laten we gaan!
// voeg de gebeurtenis toe aan het eerste item firstItemRow.addEventListener ('klik', functie (e) tab1.open (sub_win1);); // voeg de gebeurtenis toe aan het tweede item secondItemRow.addEventListener ('klik', functie (e) tab1.open (sub_win2);); // voeg de gebeurtenis toe aan het derde item thirdItemRow.addEventListener ('klik', functie (e) tab1.open (sub_win3);); // voeg de gebeurtenis toe aan het vierde item fourthItemRow.addEventListener ('klik', functie (e) tab1.open (sub_win4);); Verrassend eenvoudig, is het niet! We gaan gewoon terug naar de "onzichtbare" tab die we hebben en openen een nieuw venster. Als je "Lancering" voor deze applicatie in Titanium aanvinkt, kun je zien dat de knoppen op de achterkant automatisch voor je worden gegenereerd!
"Navigatie op 2 niveaus is geweldig," zou je kunnen zeggen, "maar ik wil navigatie op 3, 4 of 5 niveaus!" Gelukkig kun je gewoon dezelfde procedure volgen als hierboven werd getoond! Onthoud dat, ongeacht hoe diep u zich in de navigatie bevindt, u altijd tab1.open () kunt bellen en nog dieper kunt gaan. Titanium is zeker een fantastische, flexibele tool.
