Running Ti Studio 3.2.x and SDK 3.2.2 on OSX Mavericks. Having read case studies and examples of Alloy framework and its clean form, I am trying to convert my app, which is working fine in traditional titanium, into an Alloy-based implementation. Developing for Android and iOS devices
If I can get some help with converting my main dashboard into an Alloy implementation, it will go a long way for me to do the rest (the linked views and controller functions).
Here's what I know I need to do, create views, styles, and controllers from the existing codes. I have determined the current dashboard.js (shown below) will need at least 3 views in displaying the 3x3 matrix of icons (image, label, and the view that contains the icon matrix). I will appreciate any pointers and/or code snippets that may even go away from my current codebase. I am not welded to the current code.
dashboard.js:
var icons = []; // private function addIcon(obj) { var intMargin = 5; var view = Ti.UI.createView({ // backgroundColor: 'orange', bottom: intMargin, height: Ti.UI.SIZE, id: obj.id, layout: 'vertical', left: intMargin, right: intMargin, top: intMargin, width: 80 }); if (obj.action) { view.addEventListener('click', function (e) { obj.action({ id: obj.id, title: obj.title }); }); } var img = Ti.UI.createImageView({ height: Ti.UI.SIZE, image: obj.icon, touchEnabled: false, width: Ti.UI.SIZE }); view.add(img); var lbl = Ti.UI.createLabel({ height: Ti.UI.SIZE, image: obj.icon, color: '#fff', text: obj.title, textAlign: 'center', top: 5, touchEnabled: false, width: Ti.UI.FILL }); view.add(lbl); return view; } // public function add(obj) { icons.push({ id: obj.id, icon: obj.icon, title: obj.title }); } function show(obj) { var view = Ti.UI.createView({ // backgroundColor: '#FFF', height: Ti.UI.SIZE, layout: 'horizontal', top: '120dp', width: Ti.UI.SIZE }); var intIcon = 0, intIcons = icons.length, icon; for (intIcon = 0; intIcon < intIcons; intIcon = intIcon + 1) { icon = addIcon({ icon: icons[intIcon].icon, id: icons[intIcon].id, title: icons[intIcon].title, action: obj.action }); view.add(icon); } return view; } exports.add = add; exports.show = show;Screenshot of opening view: 