16 var dali = require('dali')( options );
20 var dali = require('../build/Release/dali')( options );
23 var imageDir = "./images/";
26 var currentImageIndex = 0;
27 var imageNames = ["image-1.jpg", "image-2.jpg", "image-3.jpg"];
31 daliApp.init = function() {
33 // Create the main flex container
34 var flexContainer = new dali.Control("FlexContainer");
35 flexContainer.parentOrigin = dali.TOP_LEFT;
36 flexContainer.anchorPoint = dali.TOP_LEFT;
37 flexContainer.widthResizePolicy = "FILL_TO_PARENT";
38 flexContainer.heightResizePolicy = "FILL_TO_PARENT";
39 flexContainer.backgroundColor = dali.COLOR_WHITE;
40 flexContainer.flexDirection = "column"; // display toolbar and content vertically
42 dali.stage.add( flexContainer );
44 // Create the toolbar area
45 var toolBar = new dali.Control("FlexContainer");
46 toolBar.parentOrigin = dali.TOP_LEFT;
47 toolBar.anchorPoint = dali.TOP_LEFT;
48 toolBar.backgroundColor = dali.COLOR_CYAN;
49 toolBar.flexDirection = "row"; // display toolbar items horizontally
50 toolBar.alignItems = "center"; // align toolbar items vertically center
51 toolBar.flex = 0.1; // 10 percent of available space in the cross axis
53 flexContainer.add(toolBar);
55 // Create the content area
56 var content = new dali.Control("FlexContainer");
57 content.parentOrigin = dali.TOP_LEFT;
58 content.anchorPoint = dali.TOP_LEFT;
59 content.flexDirection = "row";
60 content.alignItems = "center"; // align items vertically center
61 content.justifyContent = "center"; // align items horizontally center
62 content.flex = 0.9; // 90 percent of available space in the cross axis
64 flexContainer.add(content);
66 // Add a button to the left of the toolbar
67 var prevButton = new dali.Control("PushButton");
68 prevButton.name = "Prev";
69 prevButton.parentOrigin = dali.TOP_LEFT;
70 prevButton.anchorPoint = dali.TOP_LEFT;
71 prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
72 prevButton.labelText = "Prev";
73 prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
75 toolBar.add( prevButton );
77 // Add a title to the center of the toolbar
78 var title = new dali.Control("TextLabel");
79 title.parentOrigin = dali.TOP_LEFT;
80 title.anchorPoint = dali.TOP_LEFT;
81 title.widthResizePolicy = "USE_NATURAL_SIZE";
82 title.heightResizePolicy = "USE_NATURAL_SIZE";
83 title.horizontalAlignment = "CENTER";
84 title.verticalAlignment = "CENTER";
85 title.text = "Gallery";
87 title.flex = 1.0; // take all the available space left apart from the two buttons
88 title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title
92 // Add a button to the right of the toolbar
93 var nextButton = new dali.Control("PushButton");
94 nextButton.name = "Next";
95 nextButton.parentOrigin = dali.TOP_LEFT;
96 nextButton.anchorPoint = dali.TOP_LEFT;
97 nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
98 nextButton.labelText = "Next";
99 nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
101 toolBar.add( nextButton );
103 // Add an image to the center of the content area
104 imageView = new dali.Control("ImageView");
105 imageView.image = imageDir + imageNames[currentImageIndex];
106 imageView.parentOrigin = dali.TOP_LEFT;
107 imageView.anchorPoint = dali.TOP_LEFT;
108 content.add( imageView );
110 // Connect signal callback to button pressed signal
111 prevButton.on("pressed", daliApp.buttonPressedEvent);
112 nextButton.on("pressed", daliApp.buttonPressedEvent);
115 daliApp.buttonPressedEvent = function( button ) {
117 // Set the size of image view to its natural size
118 imageView.widthResizePolicy = "USE_NATURAL_SIZE";
119 imageView.heightResizePolicy = "USE_NATURAL_SIZE";
121 // Work out the index of the new image
122 if (button.name == "Prev") {
128 currentImageIndex %= imageNames.length;
130 // Display the new image
131 imageView.image = imageDir + imageNames[Math.abs(currentImageIndex)];