[TIMOB-17596] Android: ListView: add support for specifying templates post-creation as is possible on iOS
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Low |
Status | Closed |
Resolution | Duplicate |
Resolution Date | 2015-04-21T23:18:15.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | Android |
Labels | parity |
Reporter | Tim Poulsen |
Assignee | Ingo Muschenetz |
Created | 2014-09-02T15:00:31.000+0000 |
Updated | 2017-03-16T22:28:03.000+0000 |
Description
The following code (modified version of sample code from ListView docs page) will run on iOS, but fails on Android. iOS happens to support definition and assignment of templates post-creation despite the docs saying that they're creation-only. Android implements what the docs say.
Expected results: this should work on both platforms
<Alloy>
<Window class="container">
<ListView id="gallery"></ListView>
</Window>
</Alloy>
var myTemplate = {
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: '50dp', height: '50dp', left: 0
}
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'info', // Maps to a custom info property of the item data
properties: { // Sets the label properties
color: 'black',
font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
left: '60dp', top: 0,
}
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'es_info', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '60dp', top: '25dp',
}
}
]
};
$.gallery.templates = { 'template': myTemplate };
$.gallery.defaultItemTemplate = 'template';
var sections = [];
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
{ info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'apple.png'}},
{ info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.png'}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
var vegDataSet = [
{ info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'carrot.png'}},
{ info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.png'}}
];
vegSection.setItems(vegDataSet);
sections.push(vegSection);
var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
var grainDataSet = [
{ info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'corn.png'}},
{ info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}
];
grainSection.setItems(grainDataSet);
sections.push(grainSection);
$.gallery.setSections(sections);
$.index.open();
[~skypanther] Fixing this on Android will be challenging. Can we instead make it so Alloy does not trigger this bug?
I don't see how we could do so. The ListView gets defined and instantiated by the code generated from the XML. We'd have no way of knowing if or how the developer were later defining the templates in their controller code so that we could merge those two blocks of code. Would it be easier to update iOS to not support specifying templates post-creation? Maybe we should just update the docs to state that you can do that on iOS but not Android?
Closing ticket as duplicate.