From 2766107506720d8bf4531964b8ad2816af968a53 Mon Sep 17 00:00:00 2001 From: Richard Huang Date: Fri, 20 May 2016 10:42:11 +0100 Subject: [PATCH] Update JavaScript demo and programming guide for Flexbox Change-Id: Ic1da8a763b352e67682c8954dc0c01e87437ce92 --- .../flex-container.md | 28 +++++++++++----------- node-addon/examples/flex-container.js | 12 +++++----- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/content/shared-javascript-and-cpp-documentation/flex-container.md b/docs/content/shared-javascript-and-cpp-documentation/flex-container.md index 056ea1e..09392c8 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/flex-container.md +++ b/docs/content/shared-javascript-and-cpp-documentation/flex-container.md @@ -281,23 +281,23 @@ flexContainer.flexDirection = "row"; // Create flex items and set the proportion var item1 = new dali.Control(); -item1.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE); +item1.flex = 1.0; flexContainer.add(item1); var item2 = new dali.Control(); -item2.registerCustomProperty("flex", 3.0, dali.PROPERTY_READ_WRITE); +item2.flex = 3.0; flexContainer.add(item2); var item3 = new dali.Control(); -item3.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE); +item3.flex = 1.0; flexContainer.add(item3); var item4 = new dali.Control(); -item4.registerCustomProperty("flex", 2.0, dali.PROPERTY_READ_WRITE); +item4.flex = 2.0; flexContainer.add(item4); var item5 = new dali.Control(); -item5.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE); +item5.flex = 1.0; flexContainer.add(item5); ~~~ @@ -367,14 +367,14 @@ flexContainer.alignItems = "flexStart"; // Create flex items and add them to the flex container var item1 = new dali.Control(); -item1.registerCustomProperty("alignSelf", "center", dali.PROPERTY_READ_WRITE); // Align item1 at the center of the container +item1.alignSelf = "center"; // Align item1 at the center of the container flexContainer.add(item1); var item2 = new dali.Control(); flexContainer.add(item2); // item2 is aligned at the beginning of ther container var item3 = new dali.Control(); -item1.registerCustomProperty("alignSelf", "flexEnd", dali.PROPERTY_READ_WRITE); // Align item3 at the bottom of the container +item1.alignSelf = "flexEnd"; // Align item3 at the bottom of the container flexContainer.add(item3); var item4 = new dali.Control(); @@ -427,7 +427,7 @@ var flexContainer = new dali.Control("FlexContainer"); var item = new dali.Control(); // Add the margin around the item -item.registerCustomProperty("flexMargin", [10.0, 10.0, 10.0, 10.0], dali.PROPERTY_READ_WRITE); +item.flexMargin = [10.0, 10.0, 10.0, 10.0]; // Add the item to the container flexContainer.add(item); @@ -534,7 +534,7 @@ toolBar.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.1f ); 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 +toolBar.flex = 0.1; // 10 percent of available space in the cross axis ~~~ Then we create another flex container as the content area to display the image, and it will be displayed in the bottom of the main container. @@ -566,7 +566,7 @@ 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 +content.flex = 0.9; // 90 percent of available space in the cross axis // Add it to the main container flexContainer.add(content); @@ -627,7 +627,7 @@ 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 +prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button toolBar.add( prevButton ); @@ -640,8 +640,8 @@ title.heightResizePolicy = "USE_NATURAL_SIZE"; title.horizontalAlignment = "CENTER"; title.verticalAlignment = "CENTER"; title.text = "Gallery"; -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 +title.flex = 1.0; // take all the available space left apart from the two buttons +title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title toolBar.add( title ); @@ -652,7 +652,7 @@ 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 +nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button toolBar.add( nextButton ); ~~~ diff --git a/node-addon/examples/flex-container.js b/node-addon/examples/flex-container.js index 81964d9..467d2a2 100644 --- a/node-addon/examples/flex-container.js +++ b/node-addon/examples/flex-container.js @@ -48,7 +48,7 @@ daliApp.init = function() { 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 + toolBar.flex = 0.1; // 10 percent of available space in the cross axis flexContainer.add(toolBar); @@ -59,7 +59,7 @@ daliApp.init = function() { 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 + content.flex = 0.9; // 90 percent of available space in the cross axis flexContainer.add(content); @@ -70,7 +70,7 @@ daliApp.init = function() { 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 + prevButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button toolBar.add( prevButton ); @@ -84,8 +84,8 @@ daliApp.init = function() { 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 + title.flex = 1.0; // take all the available space left apart from the two buttons + title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title toolBar.add( title ); @@ -96,7 +96,7 @@ daliApp.init = function() { 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 + nextButton.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button toolBar.add( nextButton ); -- 2.7.4