// Create flex items and set the proportion
Dali::Toolkit::Control item1 = Dali::Toolkit::Control::New();
-item1.RegisterProperty( "flex", 1.0f, Dali::Property::READ_WRITE );
+item1.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
flexContainer.Add( item1 );
Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
-item2.RegisterProperty( "flex", 3.0f, Dali::Property::READ_WRITE );
+item2.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 3.0f );
flexContainer.Add( item2 );
Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
-item3.RegisterProperty( "flex", 1.0f, Dali::Property::READ_WRITE );
+item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
flexContainer.Add( item3 );
Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
-item4.RegisterProperty( "flex", 2.0f, Dali::Property::READ_WRITE );
+item4.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 2.0f );
flexContainer.Add( item4 );
Dali::Toolkit::Control item5 = Dali::Toolkit::Control::New();
-item5.RegisterProperty( "flex", 1.0f, Dali::Property::READ_WRITE );
+item5.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
flexContainer.Add( item5 );
~~~
// 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);
~~~
// Create flex items and add them to the flex container
Dali::Toolkit::Control item1 = Dali::Toolkit::Control::New();
-item1.RegisterProperty( "alignSelf", Dali::Toolkit::FlexContainer::ALIGN_CENTER, Dali::Property::READ_WRITE ); // Align item1 at the center of the container
+item1.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::ALIGN_SELF, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // Align item1 at the center of the container
flexContainer.Add( item1 );
Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
-flexContainer.Add( item2 ); // item2 is aligned at the beginning of ther container
+flexContainer.Add( item2 ); // item2 is aligned at the beginning of the container
Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
-item3.RegisterProperty( "alignSelf", Dali::Toolkit::FlexContainer::ALIGN_FLEX_END, Dali::Property::READ_WRITE ); // Align item3 at the bottom of the container
+item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::ALIGN_SELF, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END ); // Align item3 at the bottom of the container
flexContainer.Add( item3 );
Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
-flexContainer.Add( item4 ); // item4 is aligned at the beginning of ther container
+flexContainer.Add( item4 ); // item4 is aligned at the beginning of the container
~~~
// 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
+flexContainer.add(item2); // item2 is aligned at the beginning of the 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();
-flexContainer.add(item4); // item4 is aligned at the beginning of ther container
+flexContainer.add(item4); // item4 is aligned at the beginning of the container
~~~
___________________________________________________________________________________________________
Dali::Toolkit::Control item = Dali::Toolkit::Control::New();
// Add the margin around the item
-item.RegisterProperty( "flexMargin", Vector4(10.0f, 10.0f, 10.0f, 10.0f), Dali::Property::READ_WRITE );
+item.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX_MARGIN, Vector4(10.0f, 10.0f, 10.0f, 10.0f) );
// Add the item to the container
flexContainer.Add( item );
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);
toolBar.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW ); // display toolbar items horizontally
toolBar.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // align toolbar items vertically center
-toolBar.RegisterProperty( "flex", 0.1f, Dali::Property::READ_WRITE ); // 10 percent of available space in the cross axis
+toolBar.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.1f ); // 10 percent of available space in the cross axis
~~~
~~~{.js}
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.
content.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW ); // display items horizontally
content.SetProperty( Dali::Toolkit::FlexContainer::Property::JUSTIFY_CONTENT, Dali::Toolkit::FlexContainer::JUSTIFY_CENTER ); // align items horizontally center
content.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // align items vertically center
-content.RegisterProperty( "flex", 0.9f, Dali::Property::READ_WRITE ); // 90 percent of available space in the cross axis
+content.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.9f ); // 90 percent of available space in the cross axis
// Add it to the main container
flexContainer.Add( content );
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);
prevButton.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
prevButton.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
prevButton.SetMinimumSize( Dali::Vector2( 100.0f, 60.0f ) ); // this is the minimum size the button should keep
-prevButton.RegisterProperty( "flexMargin", Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f), Dali::Property::READ_WRITE ); // set 10 pixel margin around the button
+prevButton.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX_MARGIN, Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f) ); // set 10 pixel margin around the button
toolBar.Add( prevButton );
// Set the button text
title.SetResizePolicy( Dali::ResizePolicy::USE_NATURAL_SIZE, Dali::Dimension::ALL_DIMENSIONS );
title.SetProperty( Dali::Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
title.SetProperty( Dali::Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
-title.RegisterProperty( "flex", 1.0f, Dali::Property::READ_WRITE ); // take all the available space left apart from the two buttons
-title.RegisterProperty( "flexMargin", Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f), Dali::Property::READ_WRITE ); // set 10 pixel margin around the title
+title.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f ); // take all the available space left apart from the two buttons
+title.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX_MARGIN, Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f) ); // set 10 pixel margin around the title
toolBar.Add( title );
// Add a button to the right of the toolbar
nextButton.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
nextButton.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
nextButton.SetMinimumSize( Dali::Vector2( 100.0f, 60.0f ) ); // this is the minimum size the button should keep
-nextButton.RegisterProperty( "flexMargin", Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f), Dali::Property::READ_WRITE ); // set 10 pixel margin around the button
+nextButton.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX_MARGIN, Dali::Vector4(10.0f, 10.0f, 10.0f, 10.0f) ); // set 10 pixel margin around the button
toolBar.Add( nextButton );
// Set the button text
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 );
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 );
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 );
~~~