JavaScript example for Flexbox

Change-Id: Icc08e4f646ef016a24c08bcd726c5cdcd8ff95a0

diff --git a/node-addon/examples/flex-container.js b/node-addon/examples/flex-container.js
new file mode 100644 (file)
index 0000000..81964d9
--- /dev/null
+++ b/node-addon/examples/flex-container.js
@@ -0,0 +1,140 @@
+ var window = {
+           x:0,
+           y:0,
+           width:1920,
+           height:1080,
+           transparent: false,
+           name:'Flexbox Demo'
+ };
+
+ var options = {
+    'window': window
+ }
+
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
+
+var imageDir = "./images/";
+
+var imageView;
+var currentImageIndex = 0;
+var imageNames = ["image-1.jpg", "image-2.jpg", "image-3.jpg"];
+
+var daliApp = {};
+
+daliApp.init = function() {
+
+  // Create the main flex container
+  var flexContainer = new dali.Control("FlexContainer");
+  flexContainer.parentOrigin = dali.TOP_LEFT;
+  flexContainer.anchorPoint = dali.TOP_LEFT;
+  flexContainer.widthResizePolicy = "FILL_TO_PARENT";
+  flexContainer.heightResizePolicy = "FILL_TO_PARENT";
+  flexContainer.backgroundColor = dali.COLOR_WHITE;
+  flexContainer.flexDirection = "column"; // display toolbar and content vertically
+
+  dali.stage.add( flexContainer );
+
+  // Create the toolbar area
+  var toolBar = new dali.Control("FlexContainer");
+  toolBar.parentOrigin = dali.TOP_LEFT;
+  toolBar.anchorPoint = dali.TOP_LEFT;
+  toolBar.backgroundColor = dali.COLOR_CYAN;
+  toolBar.flexDirection = "row"; // display toolbar items horizontally
+  toolBar.alignItems = "center"; // align toolbar items vertically center
+  toolBar.registerCustomProperty("flex", 0.1, dali.PROPERTY_READ_WRITE); // 10 percent of available space in the cross axis
+
+  flexContainer.add(toolBar);
+
+  // Create the content area
+  var content = new dali.Control("FlexContainer");
+  content.parentOrigin = dali.TOP_LEFT;
+  content.anchorPoint = dali.TOP_LEFT;
+  content.flexDirection = "row";
+  content.alignItems = "center"; // align items vertically center
+  content.justifyContent = "center"; // align items horizontally center
+  content.registerCustomProperty("flex", 0.9, dali.PROPERTY_READ_WRITE); // 90 percent of available space in the cross axis
+
+  flexContainer.add(content);
+
+  // Add a button to the left of the toolbar
+  var prevButton = new dali.Control("PushButton");
+  prevButton.name = "Prev";
+  prevButton.parentOrigin = dali.TOP_LEFT;
+  prevButton.anchorPoint = dali.TOP_LEFT;
+  prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
+  prevButton.labelText = "Prev";
+  prevButton.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the button
+
+  toolBar.add( prevButton );
+
+  // Add a title to the center of the toolbar
+  var title = new dali.Control("TextLabel");
+  title.parentOrigin = dali.TOP_LEFT;
+  title.anchorPoint = dali.TOP_LEFT;
+  title.widthResizePolicy = "USE_NATURAL_SIZE";
+  title.heightResizePolicy = "USE_NATURAL_SIZE";
+  title.horizontalAlignment = "CENTER";
+  title.verticalAlignment = "CENTER";
+  title.text = "Gallery";
+  title.pointSize = 28;
+  title.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE); // take all the available space left apart from the two buttons
+  title.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the title
+
+  toolBar.add( title );
+
+  // Add a button to the right of the toolbar
+  var nextButton = new dali.Control("PushButton");
+  nextButton.name = "Next";
+  nextButton.parentOrigin = dali.TOP_LEFT;
+  nextButton.anchorPoint = dali.TOP_LEFT;
+  nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
+  nextButton.labelText = "Next";
+  nextButton.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the button
+
+  toolBar.add( nextButton );
+
+  // Add an image to the center of the content area
+  imageView = new dali.Control("ImageView");
+  imageView.image = imageDir + imageNames[currentImageIndex];
+  imageView.parentOrigin = dali.TOP_LEFT;
+  imageView.anchorPoint = dali.TOP_LEFT;
+  content.add( imageView );
+
+  // Connect signal callback to button pressed signal
+  prevButton.on("pressed", daliApp.buttonPressedEvent);
+  nextButton.on("pressed", daliApp.buttonPressedEvent);
+}
+
+daliApp.buttonPressedEvent = function( button ) {
+
+  // Set the size of image view to its natural size
+  imageView.widthResizePolicy = "USE_NATURAL_SIZE";
+  imageView.heightResizePolicy = "USE_NATURAL_SIZE";
+
+  // Work out the index of the new image
+  if (button.name == "Prev") {
+    currentImageIndex--;
+  }
+  else {
+    currentImageIndex++;
+  }
+  currentImageIndex %= imageNames.length;
+
+  // Display the new image
+  imageView.image = imageDir + imageNames[Math.abs(currentImageIndex)];
+}
+
+function startup() {
+
+  daliApp.init();
+}
+
+startup();
+

diff --git a/node-addon/examples/images/image-3.jpg b/node-addon/examples/images/image-3.jpg
new file mode 100644 (file)
index 0000000..8dee462
Binary files /dev/null and b/node-addon/examples/images/image-3.jpg differ

diff --git a/node-addon/examples/item-view.js b/node-addon/examples/item-view.js
index 5abfcfc740e65074cde7df320a6944ffb4613982..4b3e0dca9e5694b98d5babc00b86b78fc550e4e3 100644 (file)
--- a/node-addon/examples/item-view.js
+++ b/node-addon/examples/item-view.js
@@ -17,11 +17,14 @@
     'viewMode': viewMode,
  }
 
-//desktop
-//var dali = require('../build/Release/dali')( options );
-
-//target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var items = [];
 var button;

diff --git a/node-addon/examples/line-mesh.js b/node-addon/examples/line-mesh.js
index 0385dae19f5bafc254686bdc45ac6ad36dec3d55..bca516d843432eeb91cddc428da652e92a3f25a0 100644 (file)
--- a/node-addon/examples/line-mesh.js
+++ b/node-addon/examples/line-mesh.js
@@ -17,11 +17,14 @@
     'view-mode': viewMode,
  }
 
-// desktop
-//var dali = require('../build/Release/dali')( options );
-
-// target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var daliApp = {};
 

diff --git a/node-addon/examples/mesh-morph.js b/node-addon/examples/mesh-morph.js
index 1f59d36772307627ba1c84621d3a85d83a1ed6ef..14f3888d79b8f09052062a0fa5011fdbba72c998 100644 (file)
--- a/node-addon/examples/mesh-morph.js
+++ b/node-addon/examples/mesh-morph.js
@@ -17,11 +17,14 @@
     'view-mode': viewMode,
  }
 
-// desktop
-//var dali = require('../build/Release/dali')( options );
-
-// target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var daliApp = {};
 

diff --git a/node-addon/examples/point-mesh.js b/node-addon/examples/point-mesh.js
index c5f539e4fc558199ae84b844aa74fe2fc726f252..f33656164f647f60eb90633e49eb5eec36f2d116 100644 (file)
--- a/node-addon/examples/point-mesh.js
+++ b/node-addon/examples/point-mesh.js
@@ -20,11 +20,14 @@
 var imageDir = "./images/";
 
 
-// desktop
-//var dali = require('../build/Release/dali')( options );
-
-// target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var daliApp = {};
 

diff --git a/node-addon/examples/scroll-view.js b/node-addon/examples/scroll-view.js
index d0cf3e5e13436f8d65430ed57260958f429e01d3..eab2bc28f82e487e1b614911dee9acfa9cb04df1 100644 (file)
--- a/node-addon/examples/scroll-view.js
+++ b/node-addon/examples/scroll-view.js
@@ -17,11 +17,14 @@
     'viewMode': viewMode,
  }
 
-//desktop
-//var dali = require('../build/Release/dali')( options );
-
-//target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var stageSize;
 var scrollView;

diff --git a/node-addon/examples/texture-mesh.js b/node-addon/examples/texture-mesh.js
index 514f20c92bb999e9864379d6ae08fbd61bbe359c..27f7744ede2d125b3b3bd26052bd70dfda58e058 100644 (file)
--- a/node-addon/examples/texture-mesh.js
+++ b/node-addon/examples/texture-mesh.js
@@ -20,11 +20,14 @@
 var imageDir = "./images/";
 
 
-// desktop
-//var dali = require('../build/Release/dali')( options );
-
-// target
-var dali = require('dali')( options );
+try {
+  // target
+  var dali = require('dali')( options );
+}
+catch(err) {
+  // desktop
+  var dali = require('../build/Release/dali')( options );
+}
 
 var daliApp = {};