{ "id": "171485", "key": "MOD-2409", "fields": { "issuetype": { "id": "7", "description": "gh.issue.story.desc", "name": "Story", "subtask": false }, "project": { "id": "10034", "key": "MOD", "name": "Appcelerator Modules", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "10000", "description": "", "name": "Done" }, "resolutiondate": "2018-05-08T05:42:02.000+0000", "created": "2018-04-10T01:20:05.000+0000", "priority": { "name": "None", "id": "6" }, "labels": [ "ListView", "Windows", "template" ], "versions": [], "issuelinks": [], "assignee": { "name": "kiguchi", "key": "kota", "displayName": "Kota Iguchi", "active": false, "timeZone": "America/Los_Angeles" }, "updated": "2018-05-11T16:44:10.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": [], "description": "h6.Query:\r\nCustomer is trying to get to implement the module https://github.com/appcelerator-modules/ti.xaml.listview in Ti Windows project, where there happens to be multiple ListViews in different screens. Each ListView obviously has its own UI appearance (so they have defined several templates for each ListItems). \r\n\r\nSo we're kind of figuring out how would we 'translate' these templates to this module. The thing is that judging by its documentation and this https://github.com/appcelerator-modules/ti.xaml.listview/blob/master/windows/include/TiXamlListView.hpp#L73-L75 it would appear that you can only have one template definition in a single project. \r\n\r\nSo the question here is: Given a project with: \r\n\r\nScreen 1 - Contains ListView1 \r\nScreen 2 - Contains ListView2 \r\nScreen 3 - Contains ListView3 \r\nScreen N - Contains ListViewN \r\n\r\nAnd each ListView's ListItems look different by design - \r\n\r\nHow can we style all of this ListVIews' items with the given module implementation? ", "attachment": [], "flagged": false, "summary": "TI.XAML.LISTVIEW - ListItem templates for multiple ListViews", "creator": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "subtasks": [], "reporter": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "environment": null, "comment": { "comments": [ { "id": "436686", "author": { "name": "kiguchi", "key": "kota", "displayName": "Kota Iguchi", "active": false, "timeZone": "America/Los_Angeles" }, "body": "In order to use multiple styles in the project, use {{defaultItemTemplate}} property. It searches for the template with the given key in the {{>}} and apply the style, that way you can use multiple styles in one project. \r\n\r\nHere's an example:\r\n\r\n{code:title=app.js}\r\nvar ListView = require('ti.xaml.listview');\r\nvar win = Ti.UI.createWindow({ backgroundColor: 'green', layout: 'vertical' });\r\n\r\nvar items0 = [],\r\n items1 = [],\r\n items2 = [];\r\n\r\nfor (var i = 0; i < 20; i++) {\r\n items0.push({ properties: { title: 'Fruit ' + i, image: 'Square150x150Logo.png' } });\r\n items1.push({ properties: { title: 'Vegetable ' + i, image: 'Square150x150Logo.png' } });\r\n items2.push({ properties: { title: 'Meat ' + i, image: 'Square150x150Logo.png' } });\r\n}\r\n\r\nvar fruitSection = Ti.UI.createListSection({\r\n headerTitle: 'Fruits',\r\n items: items0\r\n}),\r\n vegSection = Ti.UI.createListSection({\r\n headerTitle: 'Vegetables',\r\n items: items1\r\n }),\r\n meatSecion = Ti.UI.createListSection({\r\n headerTitle: 'Meats',\r\n items: items2\r\n });\r\n\r\nvar listView1 = new ListView({\r\n width: Ti.UI.FILL,\r\n height: '40%',\r\n sections: [fruitSection, vegSection]\r\n});\r\n\r\nvar listView2 = new ListView({\r\n width: Ti.UI.FILL,\r\n height: '40%',\r\n defaultItemTemplate: 'itemTemplate2',\r\n sections: [meatSecion]\r\n});\r\n\r\nwin.add(listView1);\r\nwin.add(listView2);\r\nwin.open();\r\n{code}\r\n\r\nIn this case, the code {{defaultItemTemplate: 'itemTemplate2'}} searches for {{}} data template in the style xml. For instance check out the template below.\r\n\r\n{code:title=ListViewItemTemplate.xaml}\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n{code}", "updateAuthor": { "name": "kiguchi", "key": "kota", "displayName": "Kota Iguchi", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2018-04-10T05:56:57.000+0000", "updated": "2018-04-10T05:56:57.000+0000" }, { "id": "436687", "author": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "body": "Thanks a lot. Will inform user now. ", "updateAuthor": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "created": "2018-04-10T05:59:45.000+0000", "updated": "2018-04-10T05:59:45.000+0000" }, { "id": "437451", "author": { "name": "kiguchi", "key": "kota", "displayName": "Kota Iguchi", "active": false, "timeZone": "America/Los_Angeles" }, "body": "I think this can be closed for now. Feel free to reopen if that's not the case.\r\n", "updateAuthor": { "name": "kiguchi", "key": "kota", "displayName": "Kota Iguchi", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2018-05-08T05:42:02.000+0000", "updated": "2018-05-08T05:42:02.000+0000" }, { "id": "437583", "author": { "name": "arohini", "key": "arohini", "displayName": "Ajith Rohini", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~kiguchi], Many thanks for your help here!", "updateAuthor": { "name": "arohini", "key": "arohini", "displayName": "Ajith Rohini", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-05-11T16:44:10.000+0000", "updated": "2018-05-11T16:44:10.000+0000" } ], "maxResults": 4, "total": 4, "startAt": 0 } } }