// Create a custom template that displays an image on the left,
// then a title next to it with a subtitle below it.
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',
}
}
]
};
var listView = $.UI.create("ListView", {
// Maps myTemplate dictionary to 'template' string
templates: { 'template': myTemplate },
// Use 'template', that is, the myTemplate dict created earlier
// for all items as long as the template property is not defined for an item.
defaultItemTemplate: 'template'
});
var sections = [];
var fruitSection = $.UI.create("ListSection", { headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
// the text property of info maps to the text property of the title label
// the text property of es_info maps to text property of the subtitle label
// the image property of pic maps to the image property of the image view
{ 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 = $.UI.create("ListSection", { 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 = $.UI.create("ListSection", { 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);
listView.setSections(sections);
$.container.add(listView);
$.container.open();
However, switching to Ti.UI.create() {} works:
index.js:
// Create a custom template that displays an image on the left,
// then a title next to it with a subtitle below it.
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',
}
}
]
};
var listView = Ti.UI.createListView({
// Maps myTemplate dictionary to 'template' string
templates: { 'template': myTemplate },
// Use 'template', that is, the myTemplate dict created earlier
// for all items as long as the template property is not defined for an item.
defaultItemTemplate: 'template'
});
var sections = [];
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
// the text property of info maps to the text property of the title label
// the text property of es_info maps to text property of the subtitle label
// the image property of pic maps to the image property of the image view
{ 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);
listView.setSections(sections);
$.container.add(listView);
$.container.open();
3. Test in device
Results
According to the Appcelerator documentation Alloy Dynamic Styles "Since Alloy 1.2.0, Alloy supports changing styles dynamically or during runtime. There are two methods to support dynamic styling in Alloy. You can either generate a dynamic style dictionary that can be passed to applyProperties or a create method, or modify TSS class styles to an existing component on the fly."
Using "$.UI.create" in SDK 3.4.0.GA and Alloy 1.5.1 causes listview rows hide. Whether in SDK 3.3.0.GA and Alloy 1.4.0 it works fine.
Extra information
Both examples used to work in Ti SDK 3.3.X and iOS 7.X and Alloy 1.4.X
Attachments
File | Date | Size |
ALOY-1163.zip | 2014-10-28T17:26:30.000+0000 | 2113 |
iOS Simulator Screen Shot 7 okt. 2014 10.25.57.png | 2014-10-07T08:27:14.000+0000 | 49346 |
iOS Simulator Screen Shot 7 okt. 2014 10.26.23.png | 2014-10-07T08:27:14.000+0000 | 113053 |
Comments
- Mauro Parra-Miranda 2014-10-14
[~skypanther]: Hello Tim! The original reporter is [~Serfenia]. Thanks.
- Tim Poulsen 2014-10-28
Tested and confirmed as an issue with Alloy 1.5.1.
Tested and is no longer an issue with Alloy 1.6 (pre-release)
I'm resolving this as Duplicate because it has been resolved by ALOY-1165. The nested objects in the $.UI.create() calls were getting improperly merged resulting in invalid code which caused the items to not be rendered.
- Tim Poulsen 2014-10-28
Sample app attached. Create a new Alloy project, then unzip the attachment here and copy contents to your app's app folder.
- Eric Merriman 2015-03-25
Marking as duplicate of ALOY-1165. Will close this when I can validate the fix in ALOY-1165
- Eric Merriman 2015-03-27
Closing as duplicate of ALOY-1165 which was just verified as fixed in Alloy 1.6.0-alpha.
JSON Source