5 ItemFactory is for storing the data of {{#crossLink "ItemView"}}ItemView{{/crossLink}}
6 and creating actors for ItemView on request. Each item in ItemView is identified by a
7 unique ID, and has a linear order from 0.
9 A JSON file should be provided to ItemFactory which defines the templates of items
10 to be used to create the actors. Multiple templates can be defined in the JSON file
11 for different type of items.
13 ### Simple example of creating a JSON template for items
24 "anchorPoint":"TOP_LEFT",
25 "parentOrigin":"TOP_LEFT",
33 "rendererType" : "image",
34 "imageUrl": "{icon_path}"
36 "position":[20.0, 0.0, 0.0],
37 "size":[70.0, 70.0, 0.0],
38 "color":[1.0,1.0,1.0,1.0],
39 "anchorPoint":"CENTER_LEFT",
40 "parentOrigin":"CENTER_LEFT",
45 "anchorPoint":"CENTER_LEFT",
46 "parentOrigin":"CENTER_RIGHT",
48 "position": [30.0, 0.0, 0.0],
49 "size":[200.0, 70.0, 0.0],
51 "fontFamily":"HelveticaNeue",
53 "horizontalAlignment":"BEGIN",
54 "verticalAlignment":"CENTER",
55 "textColor": [1.0,0.0,1.0,1.0],
66 The data of items should be provided to ItemFactory as an array of property maps
67 in which each map contains the data for each item, including the template to be used
68 to build the actor and the pairs of key/value to be used to replace the constants
69 defined in the template. The order of property maps in the array represents the actual
70 order of items in ItemView.
72 ### Example of defining the data of an ItemView with two items
76 { "template" : "template-item",
77 "icon_path" : "icon0.png",
78 "title_text" : "Item 0" },
79 { "template" : "template-item",
80 "icon_path" : "icon1.png",
81 "title_text" : "Item 1" }
85 This means ItemFactory will use the template "template-item" defined in the JSON file
86 to create the item for ItemView and replace the constants "icon_path" and "title_text"
87 in the template with their actual values, e.g. "icon0.png" and "Item 0". Each item can
88 have different template and different data.
90 ### Example of creating an ItemFactory with the above JSON template and link it with an ItemView
92 ![ ](../assets/img/item-view/list.png)
95 // Define the data of 100 items
96 var itemViewData = [];
97 for (var itemId = 0; itemId < 100; itemId++)
100 itemData["template"] = "template-item";
101 itemData["icon_path"] = "icon" + itemId + ".png";
102 itemData["title_text"] = "Item " + itemId;
103 itemViewData[itemId] = itemData;
106 // Create the item factory and set the JSON template file and item view data
107 var itemFactory = new dali.ItemFactory();
108 itemFactory.jsonTemplateFile = "./item-template.json"; // Set the JSON template file
109 itemFactory.data = itemViewData; // Set the ItemView data
111 // Create the item view with the given item factory
112 var itemView = new dali.Control("ItemView", itemFactory);
113 itemView.size = [stageSize.x, stageSize.y, 0.0];
114 itemView.parentOrigin = dali.CENTER_LEFT;
115 itemView.anchorPoint = dali.CENTER_LEFT;
116 dali.stage.add( itemView );
118 // Add a list layout to ItemView (multiple layouts can be added to the same ItemView)
119 itemView.addLayout(dali.ITEM_LAYOUT_LIST);
121 // Set custom item size for the list layout
122 // If set, this will overide the predefined item size in the list layout
123 itemView.setItemSize(0, [350, 100, 0]); // 0 means the first layout added to ItemView
125 // Acticate the list layout (which will layout the items as a list)
126 itemView.activateLayout(0, itemView.size); // 0 means the first layout added to ItemView
129 ### Example of changing the data of items in ItemView dynamically
132 var data = itemFactory.data;
133 data[itemId]["icon_path"] = "new-icon.png";
134 data[itemId]["title_text"] = "New Item";
135 itemFactory.data = data; // ItemView will update the changed items immediately
143 * Sets the file name of JSON template that contains the templates for items.
146 * itemFactory.jsonTemplateFile = "item-template.json"; // ItemFactory will look for the template from this JSON file
149 * @property jsonTemplateFile
154 * Sets the data of ItemView
156 * The data is an array of property maps in which each map contains the data
157 * for each item, including the template to be used to build the actor and
158 * the pairs of key/value to be used to replace the constants defined in the
159 * template. The order of property maps in the array represents the actual
160 * order of items in ItemView.
163 * var itemViewData = [
164 * { "template" : "template-item",
165 * "icon_path" : "icon0.png",
166 * "title_text" : "Item 0" },
167 * { "template" : "template-item",
168 * "icon_path" : "icon1.png",
169 * "title_text" : "Item 1" }
172 * itemFactory.data = itemViewData; // ItemFactory will create items from this data