Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14176] Android ListView not properly handling templates property post-creation

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionDuplicate
Resolution Date2015-04-21T23:19:04.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelsandroid, listview
ReporterMarcus Williams
AssigneeIngo Muschenetz
Created2013-06-11T10:08:39.000+0000
Updated2017-03-22T22:03:19.000+0000

Description

As per the issue described here http://developer.appcelerator.com/question/153339/listview-empty-on-android#264068 Using the code below displays an empty listview on Android as per the attachment. index.xml
<Alloy>
    <Window class="container">
        <ListView id="eventsList"/>
    </Window>
</Alloy>
index.js
var section;
var plainTemplate = {
    childTemplates : [{// Image justified left
        type : 'Ti.UI.ImageView', // Use an image view for the image
        bindId : 'pic', // Maps to a custom pic property of the item data
        properties : {// Sets the image view properties
            width : '35dp',
            height : '35dp',
            left : '10dp',
            top : '15dp'
        }
    }, {// Title
        type : 'Ti.UI.Label', // Use a label for the title
        bindId : 'title', // Maps to a custom title property of the item data
        properties : {// Sets the label properties
            color : '#373e47',
            left : '55dp',
            top : '10dp',
            right : '10dp',
            height : '21dp',
        },
    }, {// Subtitle
        type : 'Ti.UI.Label', // Use a label for the subtitle
        bindId : 'date', // Maps to a custom subtitle property of the item data
        properties : {// Sets the label properties
            color : '#999999',
            left : '55dp',
            top : '30dp',
        }
    }],
};
 
$.eventsList.templates = {
    'template' : plainTemplate
};
$.eventsList.defaultItemTemplate = 'template';
 
function loadEvents() {
    var eventData = [];
 
            for (var i = 0; i < 10; i++) {
 
 
                eventData.push({
                    // Maps to the title component in the template
                    // Sets the text property of the Label component
                    title : {
                        text : "hello"
                    },
                    // Maps to the subtitle component in the template
                    // Sets the text property of the Label component
                    date : {
                        text : "hello"
                    },
                    // Maps to the pic component in the template
                    // Sets the image property of the ImageView component
                    pic : {
                        image : "/default.png"
                    },
                    // Sets the regular list data properties
                    properties : {
                        itemId : i,
                        accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,
                        height : "65dp"
                    }
                });
 
            section = Ti.UI.createListSection();
            section.setItems(eventData);
            $.eventsList.sections = [section];
        }
}
loadEvents();
 
$.index.open();
This can be resolved by moving the template code into a tss file as such. index.tss
"#eventsList": {
    templates: {
        'template': {
            childTemplates : [{// Image justified left
                type : 'Ti.UI.ImageView', // Use an image view for the image
                bindId : 'pic', // Maps to a custom pic property of the item data
                properties : {// Sets the image view properties
                    width : '35dp',
                    height : '35dp',
                    left : '10dp',
                    top : '15dp'
                }
            }, {// Title
                type : 'Ti.UI.Label', // Use a label for the title
                bindId : 'title1', // Maps to a custom title property of the item data
                properties : {// Sets the label properties
                    color : '#373e47',
                    left : '55dp',
                    top : '10dp',
                    right : '10dp',
                    height : '21dp',
                },
            }, {// Subtitle
                type : 'Ti.UI.Label', // Use a label for the subtitle
                bindId : 'date', // Maps to a custom subtitle property of the item data
                properties : {// Sets the label properties
                    color : '#999999',
                    left : '55dp',
                    top : '30dp',
                }
            }]
        }
    },
    defaultItemTemplate: 'template'
}
index.js
function loadEvents() {
    var eventData = [];
 
    for (var i = 0; i < 10; i++) {
        eventData.push({
            template: 'template',
 
            // Maps to the title component in the template
            // Sets the text property of the Label component
            title1 : {
                text : "hello"
            },
            // Maps to the subtitle component in the template
            // Sets the text property of the Label component
            date : {
                text : "hello"
            },
            // Maps to the pic component in the template
            // Sets the image property of the ImageView component
            pic : {
                image : "/shared.png"
            },
            // Sets the regular list data properties
            properties : {
                itemId : i,
                accessoryType : Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,
                height : "65dp"
            }
        });
    }
 
    var section = Ti.UI.createListSection();
    section.setItems(eventData);
    $.eventsList.sections = [section];
}
 
$.index.open();
 
loadEvents();

Attachments

FileDateSize
Screen Shot 2013-06-07 at 10.21.03.png2013-06-11T10:08:39.000+000018733

Comments

  1. Lee Morris 2017-03-22

    Closing ticket as duplicate and links to the related ticket has been provided above.

JSON Source