Select items by class in Alloy Titanium

Question

In Alloy Titanium, I can access XML elements with their id $.element_id but how do I get elements by their class ?

I have

<View id="main" layout="horizontal" horizontalWrap="true">
    <Button left="4%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
    <Button left="13%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
    <Button class="top30" left="4%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
    <Button class="top30" left="13%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
    <Button class="top30" left="4%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
    <Button class="top30" left="13%" width="125dp" height="125dp" backgroundImage="menus/woodblock.png"></Button>
</View>

And I want to get all class="top30"

score 7 · Accepted Answer · answered May 15 '14 at 18:54

7

There is no way in Alloy to access views directly by using their class except by iterating over all possible views on the screen and checking their className value.

If all your views with class="top30" are children of the same view you can try using Titanium.UI.View.children property:

var i, view
for (i in $.main.children) {
    view = $.main.children[i];
    if (view.className === 'top30') {
        /* Do your operation here */
    }
}

answered May 15 '14 at 18:54

daniula

6,898
4
32
49

Great answer ! Is there no plan for Appcelerator to add such possibility ? Maybe for v4 ? – Kalzem May 15 '14 at 19:04
Probably not, id's serves their role here perfectly. However, I'm not working on Alloy code, so I'm just guessing. – daniula May 15 '14 at 19:05
2

For info about upcoming plans for Alloy, watch Tony Lukasavage's "Alloy 2.0" presentation at [tiConf 2014 link](http://www.tidev.io/2014/05/11/ticonf-us-roundup/) NYC earlier this month. Scroll down and look for his name in speaker list. If you don't know, Tony is the original author of Alloy. He's now busy getting 2.0 ready for production. – Mike S. May 28 '14 at 12:34
3

To get the CSS type 'class' you need `view.classes` rather than `view.className`, at least in the current version of Titanium Alloy as of 2015-08-30. – sventechie Aug 30 '15 at 20:12

score 0 · Answer 2 · edited Oct 30 '15 at 20:20

0

I took the daninula posted and refactored it into a commonJS module. Untested but could be useful.

Find it here: https://gist.github.com/shouse/06f447884fbc85ec122c

Or just try the code:

/**
 * @method getViewByClass
 * This will take a class and an optional parent and find children with that class
 * Untested but will likely work
 * @param {String} _class Class name
 * @param {Object} _parent Optional param to specify parent to iterate through
 */ 
exports.getViewByClass = function(_class, _parent) {
    _parent = _parent || $.main;
    var classArray = [];
    _.each(_parent.children, function(child){
        if (child.className === _class) {
            classArray.push(child);
        }
    });

    return classArray;
};

edited Oct 30 '15 at 20:20

B Squared

23
5

answered Jul 04 '15 at 15:52

Steven H

357
2
9

To make this work completely you'd probably want to make the call recursive and to have an optional paramater to specify recursive depth for performance reasons – Steven H Jul 04 '15 at 16:02
1

`view.classes` would be more useful, at least in the current version of Titanium Alloy. You might need to set `autoStyle="true"` on the `` to make it work. – sventechie Aug 30 '15 at 20:20

Select items by class in Alloy Titanium

2 Answers2