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)
21 //var dali = require('../build/Release/dali')( options );
24 var dali = require('dali')( options );
33 var currentLayoutIndex = 0;
34 var totalItemCount = 100;
36 var imageDir = "./images/";
40 daliApp.createItemView = function() {
42 // Create item view data
43 var itemViewData = [];
44 for (var itemId = 0; itemId < totalItemCount; itemId++)
47 data["template"] = "template-item-list"; // Create items initially with list template
48 data["icon_path"] = imageDir + "icon-" + itemId % 3 + ".png";
49 data["title_text"] = "Item " + itemId;
50 itemViewData[itemId] = data;
53 // Create item factory and set the data
54 itemFactory = new dali.ItemFactory();
55 itemFactory.jsonTemplateFile = "./scripts/item-template.json";
56 itemFactory.data = itemViewData;
59 stageSize = dali.stage.getSize();
60 itemView = new dali.Control("ItemView", itemFactory);
61 itemView.size = [stageSize.x, stageSize.y, 0.0];
62 itemView.parentOrigin = dali.CENTER_LEFT;
63 itemView.anchorPoint = dali.CENTER_LEFT;
64 itemView.refreshInterval = 4.0;
66 // Add item view to the stage
67 dali.stage.add( itemView );
69 // Create scroll bar for item view
70 var scrollBar = new dali.Control("ScrollBar");
71 scrollBar.parentOrigin = dali.TOP_RIGHT;
72 scrollBar.anchorPoint = dali.TOP_RIGHT;
73 scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
74 scrollBar.heightResizePolicy = "FILL_TO_PARENT";
75 itemView.add(scrollBar);
77 // Add the list and grid layouts
78 itemView.addLayout(dali.ITEM_LAYOUT_LIST); // layout index 0
79 itemView.addLayout(dali.ITEM_LAYOUT_GRID); // layout index 1
81 // Set custom item size for list layout
82 itemView.setItemSize(0, [stageSize.x, stageSize.y * 0.1, 0.0]);
84 // Set custom item size for grid layout
85 var layoutMargin = 120;
86 itemView.setItemSize(1, [(stageSize.x - layoutMargin) / 4, stageSize.y * 0.2, 0.0]);
88 // Activate the list layout
89 itemView.activateLayout(0, itemView.size);
91 // Create button for layout switching
92 button = new dali.Control("PushButton");
93 button.size = [100.0, 60.0, 0.0];
94 button.position = [-20.0, 20.0, 0.0];
95 button.parentOrigin = dali.TOP_RIGHT;
96 button.anchorPoint = dali.TOP_RIGHT;
97 button.labelText = "Switch";
98 dali.stage.add( button );
100 // Connect a signal callback to button pressed signal
101 button.on("pressed", daliApp.buttonPressedEvent);
104 daliApp.buttonPressedEvent = function( button ) {
106 // Calculate the layout index for the next layout to switch to
107 currentLayoutIndex++;
108 currentLayoutIndex = currentLayoutIndex % itemView.getLayoutCount();
110 // Activate the next layout
111 itemView.activateLayout(currentLayoutIndex, [stageSize.x, stageSize.y, 0.0], 0.0);
113 // Change the item template in item view data as we want to change the layout of the items
114 var data = itemFactory.data;
115 for (var itemId = 0; itemId < totalItemCount; itemId++)
117 if(currentLayoutIndex == 0)
120 data[itemId]["template"] = "template-item-list"; // Create items with list template
125 data[itemId]["template"] = "template-item-grid"; // Create items with grid template
128 itemFactory.data = data;
136 daliApp.init = function()
138 daliApp.createItemView();