docs/content/shared-javascript-and-cpp-documentation/flex-container.md

   1 <!--
   2 /**-->
   3
   4 # Flex Container  {#flex-container}
   5
   6 Flexbox is a CSS3 web layout model which allows responsive elements within a container, automatically arranged to different size screens or devices.
   7
   8 FlexContainer implements a subset of the Flexbox spec (defined by W3C) at: https://www.w3.org/TR/css-flexbox-1/
   9
  10 The flex container has the ability to alter the width and/or height of its children (i.e. flex items) to best fill the available space on any display device.
  11 The container expands items to fill available free space, or shrinks them to prevent overflow.
  12
  13 Below is an illustration of the various directions and terms as applied to a flex container with the "flex direction" defined as "row".
  14
  15 ![ ](../assets/img/flex-container/flex-container.jpg)
  16 ![ ](flex-container/flex-container.jpg)
  17
  18 DALi supports the following subset of Flexbox properties.
  19
  20 ## Properties supported by flex container:
  21
  22  + [contentDirection](@ref content-direction)
  23  + [flexDirection](@ref flex-direction)
  24  + [flexWrap](@ref flex-wrap)
  25  + [justifyContent](@ref justify-content)
  26  + [alignItems](@ref align-items)
  27  + [alignContent](@ref align-content)
  28
  29 ___________________________________________________________________________________________________
  30
  31 ## contentDirection {#content-direction}
  32
  33 contentDirection specifies the primary direction in which content is ordered on a line.
  34
  35 | LTR (left-to-right) | RTL (right-to-left) |
  36 |--------|--------|
  37 | ![ ](../assets/img/flex-container/content-direction-ltr.jpg) ![ ](flex-container/content-direction-ltr.jpg) | ![ ](../assets/img/flex-container/content-direction-rtl.jpg) ![ ](flex-container/content-direction-rtl.jpg) |
  38
  39 The possible values for this property are:
  40
  41 | Property Value | Description                                 |
  42 |----------------|---------------------------------------------|
  43 | INHERIT        | Inherits the same direction from the parent |
  44 | LTR            | From left to right                          |
  45 | RTL            | From right to left                          |
  46
  47 ### Usage
  48
  49 ~~~{.cpp}
  50 // C++
  51 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
  52 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::CONTENT_DIRECTION, Dali::Toolkit::FlexContainer::RTL );
  53 ~~~
  54
  55 ~~~{.js}
  56 // JavaScript
  57 var flexContainer = new dali.Control("FlexContainer");
  58 flexContainer.contentDirection = "RTL";
  59 ~~~
  60 ___________________________________________________________________________________________________
  61
  62 ## flexDirection {#flex-direction}
  63
  64 flexDirection specifies the direction of the main axis which determines the direction that flex items are laid out.
  65
  66 ![ ](../assets/img/flex-container/flex-direction.jpg)
  67 ![ ](flex-container/flex-direction.jpg)
  68
  69 The possible values for this property are:
  70
  71 | Property Value | Description                                 |
  72 |----------------|---------------------------------------------|
  73 | COLUMN         | The flex items are laid out vertically as a column                          |
  74 | COLUMN_REVERSE | The flex items are laid out vertically as a column, but in reverse order    |
  75 | ROW            | The flex items are laid out horizontally as a row                       |
  76 | ROW_REVERSE    | The flex items are laid out horizontally as a row, but in reverse order |
  77
  78 ### Usage
  79
  80 ~~~{.cpp}
  81 // C++
  82 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
  83 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW_REVERSE );
  84 ~~~
  85
  86 ~~~{.js}
  87 // JavaScript
  88 var flexContainer = new dali.Control("FlexContainer");
  89 flexContainer.flexDirection = "rowReverse";
  90 ~~~
  91 ___________________________________________________________________________________________________
  92
  93 ## flexWrap {#flex-wrap}
  94
  95 flexWrap specifies whether the flex items should wrap or not if there is no enough room for them on one flex line.
  96
  97 ![ ](../assets/img/flex-container/flex-wrap.jpg)
  98 ![ ](flex-container/flex-wrap.jpg)
  99
 100 The possible values for this property are:
 101
 102 | Property Value | Description                                 |
 103 |----------------|---------------------------------------------|
 104 | NO_WRAP        | Flex items laid out in single line (shrunk to fit the flex container along the main axis) |
 105 | WRAP           | Flex items laid out in multiple lines if needed                                           |
 106
 107 ### Usage
 108
 109 ~~~{.cpp}
 110 // C++
 111 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 112 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_WRAP, Dali::Toolkit::FlexContainer::NO_WRAP );
 113 ~~~
 114
 115 ~~~{.js}
 116 // JavaScript
 117 var flexContainer = new dali.Control("FlexContainer");
 118 flexContainer.flexWrap = "noWrap";
 119 ~~~
 120 ___________________________________________________________________________________________________
 121
 122 ## justifyContent {#justify-content}
 123
 124 justifyContent specifies the alignment of flex items when they do not use all available space on the main axis.
 125
 126 ![ ](../assets/img/flex-container/justify-content.jpg)
 127 ![ ](flex-container/justify-content.jpg)
 128
 129 The possible values for this property are:
 130
 131 | Property Value | Description                                 |
 132 |----------------|---------------------------------------------|
 133 | JUSTIFY_FLEX_START      | Items are positioned at the beginning of the container                     |
 134 | JUSTIFY_CENTER          | Items are positioned at the center of the container                        |
 135 | JUSTIFY_FLEX_END        | Items are positioned at the end of the container                           |
 136 | JUSTIFY_SPACE_BETWEEN   | Items are positioned with equal space between the lines                    |
 137 | JUSTIFY_SPACE_AROUND    | Items are positioned with equal space before, between, and after the lines |
 138
 139 ### Usage
 140
 141 ~~~{.cpp}
 142 // C++
 143 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 144 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::JUSTIFY_CONTENT, Dali::Toolkit::FlexContainer::JUSTIFY_SPACE_BETWEEN );
 145 ~~~
 146
 147 ~~~{.js}
 148 // JavaScript
 149 var flexContainer = new dali.Control("FlexContainer");
 150 flexContainer.justifyContent = "spaceBetween";
 151 ~~~
 152 ___________________________________________________________________________________________________
 153
 154 ## alignItems {#align-items}
 155
 156 alignItems specifies the alignment of flex items when they do not use all available space on the cross axis.
 157
 158 ![ ](../assets/img/flex-container/align-items.jpg)
 159 ![ ](flex-container/align-items.jpg)
 160
 161 The possible values for this property are:
 162
 163 | Property Value | Description                                 |
 164 |----------------|---------------------------------------------|
 165 | ALIGN_FLEX_START | Items are aligned at the beginning of the container |
 166 | ALIGN_CENTER     | Items are aligned at the center of the container    |
 167 | ALIGN_FLEX_END   | Items are aligned at the end of the container       |
 168 | ALIGN_STRETCH    | Items are stretched to fit the container            |
 169
 170 ### Usage
 171
 172 ~~~{.cpp}
 173 // C++
 174 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 175 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_FLEX_START );
 176 ~~~
 177
 178 ~~~{.js}
 179 // JavaScript
 180 var flexContainer = new dali.Control("FlexContainer");
 181 flexContainer.alignItems = "flexStart";
 182 ~~~
 183 ___________________________________________________________________________________________________
 184
 185 ## alignContent {#align-content}
 186
 187 alignContent specifies the alignment of flex lines when they do not use all available space on the cross axis, so only works when there are multiple lines.
 188
 189 ![ ](../assets/img/flex-container/align-content.jpg)
 190 ![ ](flex-container/align-content.jpg)
 191
 192 The possible values for this property are:
 193
 194 | Property Value | Description                                 |
 195 |----------------|---------------------------------------------|
 196 | ALIGN_FLEX_START | Items are aligned at the beginning of the container |
 197 | ALIGN_CENTER     | Items are aligned at the center of the container    |
 198 | ALIGN_FLEX_END   | Items are aligned at the end of the container       |
 199
 200 ### Usage
 201
 202 ~~~{.cpp}
 203 // C++
 204 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 205 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_CONTENT, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END );
 206 ~~~
 207
 208 ~~~{.js}
 209 // JavaScript
 210 var flexContainer = new dali.Control("FlexContainer");
 211 flexContainer.alignContent = "flexEnd";
 212 ~~~
 213 ___________________________________________________________________________________________________
 214
 215 ## Custom properties supported by flex item:
 216
 217  + [flex](@ref flex)
 218  + [alignSelf](@ref align-self)
 219  + [flexMargin](@ref flex-margin)
 220
 221 These non-animatable properties are registered dynamically to each child which would be added to the flex container, and once added their values can not be changed.
 222
 223 When an actor is added to the flex container, these properties are checked to decide how to lay out the actor inside the flex container.
 224
 225 ___________________________________________________________________________________________________
 226
 227 ## flex {#flex}
 228
 229 By default, the items in the flex container are not flexible. If set, this property makes the item flexible, which means the item can alter its width/height in order to receive the specified proportion of the free space in the flex container.
 230 If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.
 231 Flex items will not shrink below their minimum size (if set using Dali::Actor::SetMinimumSize).
 232
 233 ![ ](../assets/img/flex-container/flex.jpg)
 234 ![ ](flex-container/flex.jpg)
 235
 236
 237 ### Usage
 238
 239 Below is the example code for the items to achieve the proportion of free space as illustrated above.
 240
 241 ~~~{.cpp}
 242 // C++
 243
 244 // Create the flex container
 245 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 246
 247 // Set the flex direction to lay out the items horizontally
 248 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW );
 249
 250 // Create flex items and set the proportion
 251 Dali::Toolkit::Control item1 = Dali::Toolkit::Control::New();
 252 item1.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
 253 flexContainer.Add( item1 );
 254
 255 Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
 256 item2.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 3.0f );
 257 flexContainer.Add( item2 );
 258
 259 Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
 260 item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
 261 flexContainer.Add( item3 );
 262
 263 Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
 264 item4.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 2.0f );
 265 flexContainer.Add( item4 );
 266
 267 Dali::Toolkit::Control item5 = Dali::Toolkit::Control::New();
 268 item5.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
 269 flexContainer.Add( item5 );
 270
 271 ~~~
 272
 273 ~~~{.js}
 274 // JavaScript
 275
 276 // Create the flex container
 277 var flexContainer = new dali.Control("FlexContainer");
 278
 279 // Set the flex direction to lay out the items horizontally
 280 flexContainer.flexDirection = "row";
 281
 282 // Create flex items and set the proportion
 283 var item1 = new dali.Control();
 284 item1.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE);
 285 flexContainer.add(item1);
 286
 287 var item2 = new dali.Control();
 288 item2.registerCustomProperty("flex", 3.0, dali.PROPERTY_READ_WRITE);
 289 flexContainer.add(item2);
 290
 291 var item3 = new dali.Control();
 292 item3.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE);
 293 flexContainer.add(item3);
 294
 295 var item4 = new dali.Control();
 296 item4.registerCustomProperty("flex", 2.0, dali.PROPERTY_READ_WRITE);
 297 flexContainer.add(item4);
 298
 299 var item5 = new dali.Control();
 300 item5.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE);
 301 flexContainer.add(item5);
 302
 303 ~~~
 304 ___________________________________________________________________________________________________
 305
 306 ## alignSelf {#align-self}
 307
 308 alignSelf specifies how the item will align along the cross axis, if set, this overrides the default alignment for all items defined by the container’s [alignItems](@ref align-items) property.
 309
 310 ![ ](../assets/img/flex-container/align-self.jpg)
 311 ![ ](flex-container/align-self.jpg)
 312
 313 The possible values for this property are:
 314
 315 | Property Value | Description                                 |
 316 |----------------|---------------------------------------------|
 317 | ALIGN_AUTO       | Items inherit the same alignment from the parent by default (as specified by the container’s [alignItems](@ref align-items) property) |
 318 | ALIGN_FLEX_START | Items are aligned at the beginning of the container |
 319 | ALIGN_CENTER     | Items are aligned at the center of the container    |
 320 | ALIGN_FLEX_END   | Items are aligned at the end of the container       |
 321 | ALIGN_STRETCH    | Items are stretched to fit the container            |
 322
 323 ### Usage
 324
 325 Below is the example code for the items to achieve the alignment on the cross axis as illustrated above.
 326
 327 ~~~{.cpp}
 328 // C++
 329
 330 // Create the flex container
 331 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 332
 333 // Set the flex direction to lay out the items horizontally
 334 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW );
 335
 336 // Set the items to be aligned at the beginning of the container on the cross axis by default
 337 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_FLEX_START );
 338
 339 // Create flex items and add them to the flex container
 340 Dali::Toolkit::Control item1 = Dali::Toolkit::Control::New();
 341 item1.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::ALIGN_SELF, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // Align item1 at the center of the container
 342 flexContainer.Add( item1 );
 343
 344 Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
 345 flexContainer.Add( item2 ); // item2 is aligned at the beginning of ther container
 346
 347 Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
 348 item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::ALIGN_SELF, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END ); // Align item3 at the bottom of the container
 349 flexContainer.Add( item3 );
 350
 351 Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
 352 flexContainer.Add( item4 ); // item4 is aligned at the beginning of ther container
 353
 354 ~~~
 355
 356 ~~~{.js}
 357 // JavaScript
 358
 359 // Create the flex container
 360 var flexContainer = new dali.Control("FlexContainer");
 361
 362 // Set the flex direction to lay out the items horizontally
 363 flexContainer.flexDirection = "row";
 364
 365 // Set the items to be aligned at the beginning of the container on the cross axis by default
 366 flexContainer.alignItems = "flexStart";
 367
 368 // Create flex items and add them to the flex container
 369 var item1 = new dali.Control();
 370 item1.registerCustomProperty("alignSelf", "center", dali.PROPERTY_READ_WRITE); // Align item1 at the center of the container
 371 flexContainer.add(item1);
 372
 373 var item2 = new dali.Control();
 374 flexContainer.add(item2); // item2 is aligned at the beginning of ther container
 375
 376 var item3 = new dali.Control();
 377 item1.registerCustomProperty("alignSelf", "flexEnd", dali.PROPERTY_READ_WRITE); // Align item3 at the bottom of the container
 378 flexContainer.add(item3);
 379
 380 var item4 = new dali.Control();
 381 flexContainer.add(item4); // item4 is aligned at the beginning of ther container
 382
 383 ~~~
 384 ___________________________________________________________________________________________________
 385
 386 ## flexMargin {#flex-margin}
 387
 388 Each flex item inside the flex container is treated as a box (in CSS term) which is made up of:
 389
 390  + content: The content of the item.
 391  + padding: The space around the content (inside the border) of the item.
 392  + border: The border that goes around the padding and the content of the item.
 393  + flexMargin: The space outside the border.
 394
 395 ![ ](../assets/img/flex-container/flex-margin.jpg)
 396 ![ ](flex-container/flex-margin.jpg)
 397
 398 In DALi, the size of the flex item = content size + padding + border.
 399
 400 flexMargin specifies the space around the flex item.
 401
 402 ### Usage
 403
 404 ~~~{.cpp}
 405 // C++
 406
 407 // Create the flex container
 408 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 409
 410 // Create flex item
 411 Dali::Toolkit::Control item = Dali::Toolkit::Control::New();
 412
 413 // Add the margin around the item
 414 item.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX_MARGIN, Vector4(10.0f, 10.0f, 10.0f, 10.0f) );
 415
 416 // Add the item to the container
 417 flexContainer.Add( item );
 418 ~~~
 419
 420 ~~~{.js}
 421 // JavaScript
 422
 423 // Create the flex container
 424 var flexContainer = new dali.Control("FlexContainer");
 425
 426 // Create flex items
 427 var item = new dali.Control();
 428
 429 // Add the margin around the item
 430 item.registerCustomProperty("flexMargin", [10.0, 10.0, 10.0, 10.0], dali.PROPERTY_READ_WRITE);
 431
 432 // Add the item to the container
 433 flexContainer.add(item);
 434 ~~~
 435
 436 ___________________________________________________________________________________________________
 437
 438 ## Example of creating Flexbox layout using FlexContainer
 439
 440 Now let's see how to create a Gallery like layout (as shown below) using FlexContainer.
 441
 442 ![ ](../assets/img/flex-container/flexbox-demo.jpg)
 443 ![ ](flex-container/flexbox-demo.jpg)
 444
 445 Firstly, we create a flex container as the whole view and set its resize policy to fill its parent (i.e. the stage).
 446
 447 ~~~{.cpp}
 448 // C++
 449
 450 // Create the main flex container
 451 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
 452 flexContainer.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 453 flexContainer.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 454 flexContainer.SetResizePolicy( Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::ALL_DIMENSIONS );
 455 flexContainer.SetBackgroundColor( Dali::Color::WHITE ); // set the background color to be white
 456
 457 // Add it to the stage
 458 Dali::Stage::GetCurrent().Add( flexContainer );
 459 ~~~
 460
 461 ~~~{.js}
 462 // JavaScript
 463
 464 // Create the main flex container
 465 var flexContainer = new dali.Control("FlexContainer");
 466 flexContainer.parentOrigin = dali.TOP_LEFT;
 467 flexContainer.anchorPoint = dali.TOP_LEFT;
 468 flexContainer.widthResizePolicy = "FILL_TO_PARENT";
 469 flexContainer.heightResizePolicy = "FILL_TO_PARENT";
 470 flexContainer.backgroundColor = dali.COLOR_WHITE; // set the background color to be white
 471
 472 // Add it to the stage
 473 dali.stage.add( flexContainer );
 474 ~~~
 475
 476 We want to set the flex direction of this main container to column, as we want the toolbar and the actual content to be displayed vertically.
 477
 478 ~~~{.cpp}
 479 // C++
 480
 481 // Display toolbar and content vertically
 482 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::COLUMN );
 483 ~~~
 484
 485 ~~~{.js}
 486 // JavaScript
 487
 488 // Display toolbar and content vertically
 489 flexContainer.flexDirection = "column";
 490 ~~~
 491
 492 Now we create a flex container as the toolbar and add it to the main container. Because the flex direction in the main container is column, the toolbar will be arranged on the top of the main container.
 493
 494 ~~~{.cpp}
 495 // C++
 496
 497 // Create the toolbar
 498 Dali::Toolkit::FlexContainer toolBar = Dali::Toolkit::FlexContainer::New();
 499 toolBar.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 500 toolBar.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 501 toolBar.SetBackgroundColor( Dali::Color::CYAN ); // Set the background color for the toolbar
 502
 503 // Add it to the main container
 504 flexContainer.Add( toolBar );
 505 ~~~
 506
 507 ~~~{.js}
 508 // JavaScript
 509
 510 // Create the toolbar area
 511 var toolBar = new dali.Control("FlexContainer");
 512 toolBar.parentOrigin = dali.TOP_LEFT;
 513 toolBar.anchorPoint = dali.TOP_LEFT;
 514 toolBar.backgroundColor = dali.COLOR_CYAN; // Set the background color for the toolbar
 515
 516 // Add it to the main container
 517 flexContainer.add(toolBar);
 518 ~~~
 519
 520 We want the buttons and title to be displayed horizontally and vertically aligned to the center of the toolbar, so we set its flex direction to row and set its alignItems property to center.
 521 We also want the toolbar and the actual content to share the height of the main container, so that the toolbar will occupy 10 percent of the whole vertical space and the content will occupy the rest of the vertical space.
 522 This can be achieved by setting the flex property.
 523
 524 ~~~{.cpp}
 525 // C++
 526
 527 toolBar.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW ); // display toolbar items horizontally
 528 toolBar.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // align toolbar items vertically center
 529 toolBar.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.1f ); // 10 percent of available space in the cross axis
 530 ~~~
 531
 532 ~~~{.js}
 533 // JavaScript
 534
 535 toolBar.flexDirection = "row"; // display toolbar items horizontally
 536 toolBar.alignItems = "center"; // align toolbar items vertically center
 537 toolBar.registerCustomProperty("flex", 0.1, dali.PROPERTY_READ_WRITE); // 10 percent of available space in the cross axis
 538 ~~~
 539
 540 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.
 541 We want the item inside it to be horizontally and vertically centered, so that the image will always be in the center of the content area.
 542
 543 ~~~{.cpp}
 544 // C++
 545
 546 // Create the content area
 547 Dali::Toolkit::FlexContainer content = Dali::Toolkit::FlexContainer::New();
 548 content.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 549 content.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 550 content.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW ); // display items horizontally
 551 content.SetProperty( Dali::Toolkit::FlexContainer::Property::JUSTIFY_CONTENT, Dali::Toolkit::FlexContainer::JUSTIFY_CENTER ); // align items horizontally center
 552 content.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_CENTER ); // align items vertically center
 553 content.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 0.9f ); // 90 percent of available space in the cross axis
 554
 555 // Add it to the main container
 556 flexContainer.Add( content );
 557 ~~~
 558
 559 ~~~{.js}
 560 // JavaScript
 561
 562 // Create the content area
 563 var content = new dali.Control("FlexContainer");
 564 content.parentOrigin = dali.TOP_LEFT;
 565 content.anchorPoint = dali.TOP_LEFT;
 566 content.flexDirection = "row";
 567 content.alignItems = "center"; // align items vertically center
 568 content.justifyContent = "center"; // align items horizontally center
 569 content.registerCustomProperty("flex", 0.9, dali.PROPERTY_READ_WRITE); // 90 percent of available space in the cross axis
 570
 571 // Add it to the main container
 572 flexContainer.add(content);
 573 ~~~
 574
 575 Now we start to add items to the toolbar. The toolbar will have one button on the left, one button on the right, and a title always in the center (regardless of the screen size).
 576 To achieve that, we can simply make the title flexible so that it will automatically take all the available horizontal space left.
 577 We will also add some space around the items so that the layout looks nicer.
 578
 579 ~~~{.cpp}
 580 // C++
 581
 582 // Add a button to the left of the toolbar
 583 Dali::Toolkit::PushButton prevButton = Dali::Toolkit::PushButton::New();
 584 prevButton.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 585 prevButton.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 586 prevButton.SetMinimumSize( Dali::Vector2( 100.0f, 60.0f ) ); // this is the minimum size the button should keep
 587 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
 588 toolBar.Add( prevButton );
 589
 590 // Set the button text
 591 Dali::Property::Map labelMap;
 592 labelMap[ "text" ]      = "Prev";
 593 labelMap[ "textColor" ] = Dali::Color::BLACK;
 594 prevButton.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
 595
 596 // Add a title to the center of the toolbar
 597 Dali::Toolkit::TextLabel title = Dali::Toolkit::TextLabel::New( "Gallery" );
 598 title.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 599 title.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 600 title.SetResizePolicy( Dali::ResizePolicy::USE_NATURAL_SIZE, Dali::Dimension::ALL_DIMENSIONS );
 601 title.SetProperty( Dali::Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
 602 title.SetProperty( Dali::Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
 603 title.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f ); // take all the available space left apart from the two buttons
 604 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
 605 toolBar.Add( title );
 606
 607 // Add a button to the right of the toolbar
 608 Dali::Toolkit::PushButton nextButton = Dali::Toolkit::PushButton::New();
 609 nextButton.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 610 nextButton.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 611 nextButton.SetMinimumSize( Dali::Vector2( 100.0f, 60.0f ) ); // this is the minimum size the button should keep
 612 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
 613 toolBar.Add( nextButton );
 614
 615 // Set the button text
 616 labelMap[ "text" ] = "Next";
 617 nextButton.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
 618 ~~~
 619
 620 ~~~{.js}
 621 // JavaScript
 622
 623 // Add a button to the left of the toolbar
 624 var prevButton = new dali.Control("PushButton");
 625 prevButton.name = "Prev";
 626 prevButton.parentOrigin = dali.TOP_LEFT;
 627 prevButton.anchorPoint = dali.TOP_LEFT;
 628 prevButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
 629 prevButton.labelText = "Prev";
 630 prevButton.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the button
 631
 632 toolBar.add( prevButton );
 633
 634 // Add a title to the center of the toolbar
 635 var title = new dali.Control("TextLabel");
 636 title.parentOrigin = dali.TOP_LEFT;
 637 title.anchorPoint = dali.TOP_LEFT;
 638 title.widthResizePolicy = "USE_NATURAL_SIZE";
 639 title.heightResizePolicy = "USE_NATURAL_SIZE";
 640 title.horizontalAlignment = "CENTER";
 641 title.verticalAlignment = "CENTER";
 642 title.text = "Gallery";
 643 title.registerCustomProperty("flex", 1.0, dali.PROPERTY_READ_WRITE); // take all the available space left apart from the two buttons
 644 title.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the title
 645
 646 toolBar.add( title );
 647
 648 // Add a button to the right of the toolbar
 649 var nextButton = new dali.Control("PushButton");
 650 nextButton.name = "Next";
 651 nextButton.parentOrigin = dali.TOP_LEFT;
 652 nextButton.anchorPoint = dali.TOP_LEFT;
 653 nextButton.minimumSize = [100.0, 60.0]; // this is the minimum size the button should keep
 654 nextButton.labelText = "Next";
 655 nextButton.registerCustomProperty("flexMargin", [10, 10, 10, 10], dali.PROPERTY_READ_WRITE); // set 10 pixel margin around the button
 656
 657 toolBar.add( nextButton );
 658 ~~~
 659
 660 This is really neat when running on devices with different size or changing from different orientation, because the toolbar will expand or shrink based on the available space and the title will always be in the center, therefore the layout of the toolbar will keep the same.
 661
 662 Finally, we will add the image to the content area.
 663
 664 ~~~{.cpp}
 665 // C++
 666
 667 // Add an image to the center of the content area
 668 Dali::Toolkit::ImageView imageView = Dali::Toolkit::ImageView::New( "image.jpg" );
 669 imageView.SetParentOrigin( Dali::ParentOrigin::TOP_LEFT );
 670 imageView.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
 671 content.Add( imageView );
 672 ~~~
 673
 674 ~~~{.js}
 675 // JavaScript
 676
 677 // Add an image to the center of the content area
 678 imageView = new dali.Control("ImageView");
 679 imageView.image = "image.jpg";
 680 imageView.parentOrigin = dali.TOP_LEFT;
 681 imageView.anchorPoint = dali.TOP_LEFT;
 682 content.add( imageView );
 683 ~~~
 684
 685 As you can see, it is easy to make flexible containers in DALi. We can use these concepts to create responsive layouts.
 686
 687 @class _Guide_Flex_Container
 688
 689 */