{ "id": "137714", "key": "ALOY-1163", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "11113", "key": "ALOY", "name": "Alloy", "projectCategory": { "id": "10400", "description": "Tools for developing applications", "name": "Tooling" } }, "fixVersions": [ { "id": "16596", "name": "Alloy 1.6.0", "archived": false, "released": true, "releaseDate": "2015-05-21" } ], "resolution": { "id": "3", "description": "The problem is a duplicate of an existing issue.", "name": "Duplicate" }, "resolutiondate": "2014-10-28T17:23:47.000+0000", "created": "2014-10-07T08:27:14.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [ "TCSupport", "itemtemplate", "listitem", "listsection", "listview" ], "versions": [], "issuelinks": [ { "id": "46850", "type": { "id": "10002", "name": "Duplicate", "inward": "is duplicated by", "outward": "duplicates" }, "outwardIssue": { "id": "138054", "key": "ALOY-1165", "fields": { "summary": "Compile error when merging backgroundGradient", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "High", "id": "2" }, "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false } } } } ], "assignee": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "updated": "2015-03-27T21:46:38.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "12329", "name": "Runtime", "description": "Generic bucket for uncategorized runtime issues" }, { "id": "13603", "name": "Styling", "description": "TSS, dynamic styling, styling API" } ], "description": "h4. Problem Description\r\nWhen using the $.UI.create function for ListViews using custom item templates causes the listitems not to show.\r\n\r\nh4. Steps to reproduce\r\n1. Create a new mobile project\r\n2. Add this testcase\r\nh4. index.xml:\r\n{code}\r\n\r\n\t\r\n\t\r\n\r\n{code}\r\n\r\nh4. index.js (Example from docs)\r\n{code}\r\n// Create a custom template that displays an image on the left, \r\n// then a title next to it with a subtitle below it.\r\nvar myTemplate = {\r\n childTemplates: [\r\n { // Image justified left\r\n type: 'Ti.UI.ImageView', // Use an image view for the image\r\n bindId: 'pic', // Maps to a custom pic property of the item data\r\n properties: { // Sets the image view properties\r\n width: '50dp', height: '50dp', left: 0\r\n }\r\n },\r\n { // Title \r\n type: 'Ti.UI.Label', // Use a label for the title \r\n bindId: 'info', // Maps to a custom info property of the item data\r\n properties: { // Sets the label properties\r\n color: 'black',\r\n font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },\r\n left: '60dp', top: 0,\r\n }\r\n },\r\n { // Subtitle\r\n type: 'Ti.UI.Label', // Use a label for the subtitle\r\n bindId: 'es_info', // Maps to a custom es_info property of the item data\r\n properties: { // Sets the label properties\r\n color: 'gray',\r\n font: { fontFamily:'Arial', fontSize: '14dp' },\r\n left: '60dp', top: '25dp',\r\n }\r\n }\r\n ]\r\n};\r\n\r\nvar listView = $.UI.create(\"ListView\", {\r\n // Maps myTemplate dictionary to 'template' string\r\n templates: { 'template': myTemplate },\r\n // Use 'template', that is, the myTemplate dict created earlier\r\n // for all items as long as the template property is not defined for an item.\r\n defaultItemTemplate: 'template'\r\n});\r\nvar sections = [];\r\n\r\nvar fruitSection = $.UI.create(\"ListSection\", { headerTitle: 'Fruits / Frutas'});\r\nvar fruitDataSet = [\r\n // the text property of info maps to the text property of the title label\r\n // the text property of es_info maps to text property of the subtitle label\r\n // the image property of pic maps to the image property of the image view\r\n { info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'apple.png'}},\r\n { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.png'}}\r\n];\r\nfruitSection.setItems(fruitDataSet);\r\nsections.push(fruitSection);\r\n\r\nvar vegSection = $.UI.create(\"ListSection\", { headerTitle: 'Vegetables / Verduras'});\r\nvar vegDataSet = [\r\n { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'carrot.png'}},\r\n { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.png'}}\r\n];\r\nvegSection.setItems(vegDataSet);\r\nsections.push(vegSection);\r\n\r\nvar grainSection = $.UI.create(\"ListSection\", { headerTitle: 'Grains / Granos'});\r\nvar grainDataSet = [\r\n { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'corn.png'}},\r\n { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}\r\n];\r\ngrainSection.setItems(grainDataSet);\r\nsections.push(grainSection);\r\n\r\nlistView.setSections(sections);\r\n$.container.add(listView);\r\n$.container.open();\r\n{code}\r\n\r\nHowever, switching to Ti.UI.create() {} works:\r\nindex.js:\r\n{code}\r\n// Create a custom template that displays an image on the left, \r\n// then a title next to it with a subtitle below it.\r\nvar myTemplate = {\r\n childTemplates: [\r\n { // Image justified left\r\n type: 'Ti.UI.ImageView', // Use an image view for the image\r\n bindId: 'pic', // Maps to a custom pic property of the item data\r\n properties: { // Sets the image view properties\r\n width: '50dp', height: '50dp', left: 0\r\n }\r\n },\r\n { // Title \r\n type: 'Ti.UI.Label', // Use a label for the title \r\n bindId: 'info', // Maps to a custom info property of the item data\r\n properties: { // Sets the label properties\r\n color: 'black',\r\n font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },\r\n left: '60dp', top: 0,\r\n }\r\n },\r\n { // Subtitle\r\n type: 'Ti.UI.Label', // Use a label for the subtitle\r\n bindId: 'es_info', // Maps to a custom es_info property of the item data\r\n properties: { // Sets the label properties\r\n color: 'gray',\r\n font: { fontFamily:'Arial', fontSize: '14dp' },\r\n left: '60dp', top: '25dp',\r\n }\r\n }\r\n ]\r\n};\r\n\r\nvar listView = Ti.UI.createListView({\r\n // Maps myTemplate dictionary to 'template' string\r\n templates: { 'template': myTemplate },\r\n // Use 'template', that is, the myTemplate dict created earlier\r\n // for all items as long as the template property is not defined for an item.\r\n defaultItemTemplate: 'template'\r\n});\r\nvar sections = [];\r\n\r\nvar fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});\r\nvar fruitDataSet = [\r\n // the text property of info maps to the text property of the title label\r\n // the text property of es_info maps to text property of the subtitle label\r\n // the image property of pic maps to the image property of the image view\r\n { info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'apple.png'}},\r\n { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.png'}}\r\n];\r\nfruitSection.setItems(fruitDataSet);\r\nsections.push(fruitSection);\r\n\r\nvar vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});\r\nvar vegDataSet = [\r\n { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'carrot.png'}},\r\n { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.png'}}\r\n];\r\nvegSection.setItems(vegDataSet);\r\nsections.push(vegSection);\r\n\r\nvar grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});\r\nvar grainDataSet = [\r\n { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'corn.png'}},\r\n { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}\r\n];\r\ngrainSection.setItems(grainDataSet);\r\nsections.push(grainSection);\r\n\r\nlistView.setSections(sections);\r\n$.container.add(listView);\r\n$.container.open();\r\n{code}\r\n3. Test in device\r\n\r\nh4. Results\r\nAccording 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.\"\r\n\r\nUsing \"$.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.\r\n\r\nh4. Extra information\r\nBoth examples used to work in Ti SDK 3.3.X and iOS 7.X and Alloy 1.4.X\r\n", "attachment": [ { "id": "52220", "filename": "ALOY-1163.zip", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2014-10-28T17:26:30.000+0000", "size": 2113, "mimeType": "application/zip" }, { "id": "51824", "filename": "iOS Simulator Screen Shot 7 okt. 2014 10.25.57.png", "author": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-10-07T08:27:14.000+0000", "size": 49346, "mimeType": "image/png" }, { "id": "51825", "filename": "iOS Simulator Screen Shot 7 okt. 2014 10.26.23.png", "author": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2014-10-07T08:27:14.000+0000", "size": 113053, "mimeType": "image/png" } ], "flagged": false, "summary": "Using $.UI.create on a ListView with Custom Data templates causes to hide rows when templates are created programmatically.", "creator": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "Serfenia", "key": "serfenia", "displayName": "Patrick van Vuuren", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "iOS 8, Ti SDK 3.4.0, Alloy 1.5.0\r\n\r\nCLI version 3.4.0, \r\nTitanium SDK version 3.4.0.GA, 3.3.0.GA\r\nAlloy Version 1.5.1, 1.4.0\r\niOS Simulator 8.0, 7.1", "closedSprints": [ { "id": 248, "state": "closed", "name": "2014 Sprint 22 Alloy", "startDate": "2014-10-27T13:32:25.636Z", "endDate": "2014-11-10T13:32:00.000Z", "completeDate": "2014-11-10T15:54:03.714Z", "originBoardId": 124 } ], "comment": { "comments": [ { "id": "328005", "author": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "body": "[~skypanther]: Hello Tim! The original reporter is [~Serfenia]. Thanks. ", "updateAuthor": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "created": "2014-10-14T10:24:06.000+0000", "updated": "2014-10-14T10:24:06.000+0000" }, { "id": "329778", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "Tested and confirmed as an issue with Alloy 1.5.1.\r\nTested and is no longer an issue with Alloy 1.6 (pre-release)\r\n\r\nI'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.", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2014-10-28T17:23:47.000+0000", "updated": "2014-10-28T17:23:47.000+0000" }, { "id": "329782", "author": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "body": "Sample app attached. Create a new Alloy project, then unzip the attachment here and copy contents to your app's app folder. ", "updateAuthor": { "name": "skypanther", "key": "skypanther", "displayName": "Tim Poulsen", "active": true, "timeZone": "America/New_York" }, "created": "2014-10-28T17:26:30.000+0000", "updated": "2014-10-28T17:26:30.000+0000" }, { "id": "347355", "author": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Marking as duplicate of ALOY-1165. Will close this when I can validate the fix in ALOY-1165\r\n", "updateAuthor": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-03-25T23:00:46.000+0000", "updated": "2015-03-25T23:00:46.000+0000" }, { "id": "347595", "author": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Closing as duplicate of ALOY-1165 which was just verified as fixed in Alloy 1.6.0-alpha.", "updateAuthor": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-03-27T21:46:32.000+0000", "updated": "2015-03-27T21:46:32.000+0000" } ], "maxResults": 6, "total": 6, "startAt": 0 } } }