Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

Converting Titanium App to Alloy framework

$
0
0

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: ![Screen shot](http://i58.tinypic.com/2d7d74l.png "Opening Screen")

Viewing all articles
Browse latest Browse all 8068

Trending Articles