From: Richard Huang Date: Mon, 9 May 2016 09:05:39 +0000 (+0100) Subject: JavaScript example for Flexbox X-Git-Tag: dali_1.1.34~7^2 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=9481ac41b5d77438d5656a8ccd8c86c4ab04eeea 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 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 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 5abfcfc..4b3e0dc 100644 --- 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 0385dae..bca516d 100644 --- 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 1f59d36..14f3888 100644 --- 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 c5f539e..f336561 100644 --- 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 d0cf3e5..eab2bc2 100644 --- 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 514f20c..27f7744 100644 --- 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 = {};