[TIMOB-14176] Android ListView not properly handling templates property post-creation
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Critical |
Status | Closed |
Resolution | Duplicate |
Resolution Date | 2015-04-21T23:19:04.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | Android |
Labels | android, listview |
Reporter | Marcus Williams |
Assignee | Ingo Muschenetz |
Created | 2013-06-11T10:08:39.000+0000 |
Updated | 2017-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
File | Date | Size |
---|---|---|
Screen Shot 2013-06-07 at 10.21.03.png | 2013-06-11T10:08:39.000+0000 | 18733 |
Closing ticket as duplicate and links to the related ticket has been provided above.