Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1163] Using $.UI.create on a ListView with Custom Data templates causes to hide rows when templates are created programmatically.

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionDuplicate
Resolution Date2014-10-28T17:23:47.000+0000
Affected Version/sn/a
Fix Version/sAlloy 1.6.0
ComponentsRuntime, Styling
LabelsTCSupport, itemtemplate, listitem, listsection, listview
ReporterPatrick van Vuuren
AssigneeTim Poulsen
Created2014-10-07T08:27:14.000+0000
Updated2015-03-27T21:46:38.000+0000

Description

Problem Description

When using the $.UI.create function for ListViews using custom item templates causes the listitems not to show.

Steps to reproduce

1. Create a new mobile project 2. Add this testcase

index.xml:

<Alloy>
	<Window id="container" class="container">
	</Window>
</Alloy>

index.js (Example from docs)

// 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

FileDateSize
ALOY-1163.zip2014-10-28T17:26:30.000+00002113
iOS Simulator Screen Shot 7 okt. 2014 10.25.57.png2014-10-07T08:27:14.000+000049346
iOS Simulator Screen Shot 7 okt. 2014 10.26.23.png2014-10-07T08:27:14.000+0000113053

Comments

  1. Mauro Parra-Miranda 2014-10-14

    [~skypanther]: Hello Tim! The original reporter is [~Serfenia]. Thanks.
  2. 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.
  3. 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.
  4. Eric Merriman 2015-03-25

    Marking as duplicate of ALOY-1165. Will close this when I can validate the fix in ALOY-1165
  5. 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