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)
21 //var dali = require('../build/Release/dali')( options );
24 var dali = require('dali')( options );
30 var imageDir = "./images/";
34 daliApp.createScrollView = function() {
36 // Create a scroll view
37 scrollView = new dali.Control("ScrollView");
38 stageSize = dali.stage.getSize();
39 scrollView.size = [stageSize.x, stageSize.y, 0.0];
40 scrollView.parentOrigin = dali.CENTER;
41 scrollView.anchorPoint = dali.CENTER;
43 dali.stage.add( scrollView );
45 // Add actors to a scroll view with 4 pages
48 for(var pageRow = 0; pageRow < pageRows; pageRow++)
50 for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
52 var pageActor = new dali.Control();
53 pageActor.widthResizePolicy = "FILL_TO_PARENT";
54 pageActor.heightResizePolicy = "FILL_TO_PARENT";
55 pageActor.parentOrigin = dali.CENTER;
56 pageActor.anchorPoint = dali.CENTER;
57 pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
58 pageActor.name = "pageActor" + pageColumn;
60 // Add images in a 5x4 grid layout for each page
64 var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
66 for(var row = 0; row < imageRows; row++)
68 for(var column = 0; column < imageColumns;column++)
70 var imageView = new dali.Control("ImageView");
71 var imageId = (row * imageColumns + column) % 2 + 1;
72 imageView.image = imageDir + "image-" + imageId + ".jpg";
73 imageView.parentOrigin = dali.CENTER;
74 imageView.anchorPoint = dali.CENTER;
75 imageView.size = imageSize;
76 imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
77 margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
79 pageActor.add(imageView);
80 var position = imageView.position;
84 scrollView.add( pageActor );
88 // Set scroll view to have 3 pages in X axis and allow page snapping,
89 // and also disable scrolling in Y axis.
91 xAxisScrollEnabled : true,
92 xAxisSnapToInterval : stageSize.x, // Define the snap points
93 xAxisScrollBoundary : stageSize.x * pageColumns, // i.e. Define 3 pages
94 yAxisScrollEnabled : false
97 scrollView.setScrollMode(scrollMode);
99 // Create a horizontal scroll bar in the bottom of scroll view (optional)
100 scrollBar = new dali.Control("ScrollBar");
101 scrollBar.parentOrigin = dali.BOTTOM_LEFT;
102 scrollBar.anchorPoint = dali.TOP_LEFT;
103 scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
104 scrollBar.heightResizePolicy = "FILL_TO_PARENT";
105 scrollBar.orientation = [0, 0, 270];
106 scrollBar.scrollDirection = "Horizontal";
107 scrollView.add(scrollBar);
109 // Connect to the onRelayout signal
110 scrollView.on("onRelayout", daliApp.onScrollViewRelayout);
113 daliApp.onScrollViewRelayout = function( button ) {
115 // Set the correct scroll bar size after size negotiation of scroll view is done
116 scrollBar.size = [0.0, scrollView.getRelayoutSize(dali.DIMENSION_WIDTH), 0.0 ];
124 daliApp.init = function()
126 daliApp.createScrollView();