7 name:'scrollview-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 );
33 var imageDir = "./images/";
37 daliApp.createScrollView = function() {
39 // Create a scroll view
40 scrollView = new dali.Control("ScrollView");
41 stageSize = dali.stage.getSize();
42 scrollView.size = [stageSize.x, stageSize.y, 0.0];
43 scrollView.parentOrigin = dali.CENTER;
44 scrollView.anchorPoint = dali.CENTER;
46 dali.stage.add( scrollView );
48 // Add actors to a scroll view with 4 pages
51 for(var pageRow = 0; pageRow < pageRows; pageRow++)
53 for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
55 var pageActor = new dali.Control();
56 pageActor.widthResizePolicy = "FILL_TO_PARENT";
57 pageActor.heightResizePolicy = "FILL_TO_PARENT";
58 pageActor.parentOrigin = dali.CENTER;
59 pageActor.anchorPoint = dali.CENTER;
60 pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
61 pageActor.name = "pageActor" + pageColumn;
63 // Add images in a 5x4 grid layout for each page
67 var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
69 for(var row = 0; row < imageRows; row++)
71 for(var column = 0; column < imageColumns;column++)
73 var imageView = new dali.Control("ImageView");
74 var imageId = (row * imageColumns + column) % 2 + 1;
75 imageView.image = imageDir + "image-" + imageId + ".jpg";
76 imageView.parentOrigin = dali.CENTER;
77 imageView.anchorPoint = dali.CENTER;
78 imageView.size = imageSize;
79 imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
80 margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
82 pageActor.add(imageView);
83 var position = imageView.position;
87 scrollView.add( pageActor );
91 // Set scroll view to have 3 pages in X axis and allow page snapping,
92 // and also disable scrolling in Y axis.
94 xAxisScrollEnabled : true,
95 xAxisSnapToInterval : stageSize.x, // Define the snap points
96 xAxisScrollBoundary : stageSize.x * pageColumns, // i.e. Define 3 pages
97 yAxisScrollEnabled : false
100 scrollView.setScrollMode(scrollMode);
102 // Create a horizontal scroll bar in the bottom of scroll view (optional)
103 scrollBar = new dali.Control("ScrollBar");
104 scrollBar.parentOrigin = dali.BOTTOM_LEFT;
105 scrollBar.anchorPoint = dali.TOP_LEFT;
106 scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
107 scrollBar.heightResizePolicy = "FILL_TO_PARENT";
108 scrollBar.orientation = [0, 0, 270];
109 scrollBar.scrollDirection = "Horizontal";
110 scrollView.add(scrollBar);
112 // Connect to the onRelayout signal
113 scrollView.on("onRelayout", daliApp.onScrollViewRelayout);
116 daliApp.onScrollViewRelayout = function( button ) {
118 // Set the correct scroll bar size after size negotiation of scroll view is done
119 scrollBar.size = [0.0, scrollView.getRelayoutSize(dali.DIMENSION_WIDTH), 0.0 ];
127 daliApp.init = function()
129 daliApp.createScrollView();