Running Titanium SDK 3.2.2, Studio 3.2.x, on an OSX Mavericks box and developing for android and iOS. I am trying to convert an app that is working in traditional Titanium into an Alloy framework. I have succeeded in separating some of the codes into MVC framework but stuck in a mud right now. See the UI that I had working below and how far I 've gotten converting it into Alloy version. I just can't have the menu icons displayed in a matrix using the same code I have used before. Subsequent icon is being overwritten by the new icon and displayed in the same position (see dashboard.js). Not sure how to make the icons read and displayed in relative fashioning the dashboard view. The menu icons I am trying to arrange in matrix form are defined in the icons[] array. Please help.
UI in traditional Titanium (desired layout):
Trying to replicate this GUI using Alloy framework but stuck. See the screenshot of how far I got:
dashboard.xml:
<Alloy> <View id="iconView"> <ImageView id="iconImage" onClick="showTabGroup"> <Label id="iconLbls" /> </ImageView> </View> </Alloy>dashboard.tss
"#iconView": { bottom: Alloy.Globals.margin, height: Ti.UI.SIZE, layout: 'vertical', // layout: 'horizontal', // image: '/images/dashboard/about.png', left: Alloy.Globals.margin, right: Alloy.Globals.margin, top: Alloy.Globals.margin, width: 80 } "#iconImage": { // bottom: Alloy.Globals.margin, height: Ti.UI.SIZE, image: '/images/dashboard/about.png', width: Ti.UI.SIZE } "#iconLbls": { height: Ti.UI.SIZE, color: '#fff', text:'Bisi', textAlign: 'center', image: '/images/dashboard/about.png', // top: Alloy.Globals.margin, top: 5, touchEnabled: false, width: Ti.UI.FILL }dashboard.js
// add icons to the dashboard view by replacing the image property of the icons style id. var icons = [ { id: 1, title: 'Sermon', icon: '/images/dashboard/sermon.png' }, { id: 2, title: 'Prayer', icon: '/images/dashboard/prayer.png' }, { id: 3, title: 'Give', icon: '/images/dashboard/give.png' }, { id: 4, title: 'News', icon: '/images/dashboard/news.png' }, { id: 5, title: 'Training', icon: '/images/dashboard/training.png' }, { id: 6, title: 'Events', icon: '/images/dashboard/events.png' }, { id: 7, title: 'About', icon: '/images/dashboard/about.png' }, { id: 8, title: 'Location', icon: '/images/dashboard/location.png' }, { id: 9, title: 'Contact', icon: '/images/dashboard/contact.png' } ]; // var Dashboard = require('/dashboard'); var intIcon = 0, intIcons = icons.length, dash; for (intIcon = 0; intIcon < intIcons; intIcon = intIcon + 1) { $.iconImage.image = icons[intIcon].icon; $.iconLbls.text = icons[intIcon].title; } // Open the tabGroup window corresponding to the clicked dashboard icon function showTabGroup(){ Alloy.CreateController('dashboard').getView().open(); }Thanks as you assist.