7 name:'itemview-example'
11 'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
12 'stereoBase': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
22 var dali = require('dali')( options );
26 var dali = require('../build/Release/dali')( options );
36 var currentLayoutIndex = 0;
37 var totalItemCount = 100;
39 var imageDir = "./images/";
43 daliApp.createItemView = function() {
45 // Create item view data
46 var itemViewData = [];
47 for (var itemId = 0; itemId < totalItemCount; itemId++)
50 data["template"] = "template-item-list"; // Create items initially with list template
51 data["icon_path"] = imageDir + "icon-" + itemId % 3 + ".png";
52 data["title_text"] = "Item " + itemId;
53 itemViewData[itemId] = data;
56 // Create item factory and set the data
57 itemFactory = new dali.ItemFactory();
58 itemFactory.jsonTemplateFile = "./scripts/item-template.json";
59 itemFactory.data = itemViewData;
62 stageSize = dali.stage.getSize();
63 itemView = new dali.Control("ItemView", itemFactory);
64 itemView.size = [stageSize.x, stageSize.y, 0.0];
65 itemView.parentOrigin = dali.CENTER_LEFT;
66 itemView.anchorPoint = dali.CENTER_LEFT;
67 itemView.refreshInterval = 4.0;
69 // Add item view to the stage
70 dali.stage.add( itemView );
72 // Create scroll bar for item view
73 var scrollBar = new dali.Control("ScrollBar");
74 scrollBar.parentOrigin = dali.TOP_RIGHT;
75 scrollBar.anchorPoint = dali.TOP_RIGHT;
76 scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
77 scrollBar.heightResizePolicy = "FILL_TO_PARENT";
78 itemView.add(scrollBar);
80 // Add the list and grid layouts
81 itemView.addLayout(dali.ITEM_LAYOUT_LIST); // layout index 0
82 itemView.addLayout(dali.ITEM_LAYOUT_GRID); // layout index 1
84 // Set custom item size for list layout
85 itemView.setItemSize(0, [stageSize.x, stageSize.y * 0.1, 0.0]);
87 // Set custom item size for grid layout
88 var layoutMargin = 120;
89 itemView.setItemSize(1, [(stageSize.x - layoutMargin) / 4, stageSize.y * 0.2, 0.0]);
91 // Activate the list layout
92 itemView.activateLayout(0, itemView.size);
94 // Create button for layout switching
95 button = new dali.Control("PushButton");
96 button.size = [100.0, 60.0, 0.0];
97 button.position = [-20.0, 20.0, 0.0];
98 button.parentOrigin = dali.TOP_RIGHT;
99 button.anchorPoint = dali.TOP_RIGHT;
100 button.labelText = "Switch";
101 dali.stage.add( button );
103 // Connect a signal callback to button pressed signal
104 button.on("pressed", daliApp.buttonPressedEvent);
107 daliApp.buttonPressedEvent = function( button ) {
109 // Calculate the layout index for the next layout to switch to
110 currentLayoutIndex++;
111 currentLayoutIndex = currentLayoutIndex % itemView.getLayoutCount();
113 // Activate the next layout
114 itemView.activateLayout(currentLayoutIndex, [stageSize.x, stageSize.y, 0.0], 0.0);
116 // Change the item template in item view data as we want to change the layout of the items
117 var data = itemFactory.data;
118 for (var itemId = 0; itemId < totalItemCount; itemId++)
120 if(currentLayoutIndex == 0)
123 data[itemId]["template"] = "template-item-list"; // Create items with list template
128 data[itemId]["template"] = "template-item-grid"; // Create items with grid template
131 itemFactory.data = data;
139 daliApp.init = function()
141 daliApp.createItemView();