4 # Flex Container {#flex-container}
6 Flexbox is a CSS3 web layout model which allows responsive elements within a container, automatically arranged to different size screens or devices.
8 FlexContainer implements a subset of the Flexbox spec (defined by W3C) at: https://www.w3.org/TR/css-flexbox-1/
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.
13 Below is an illustration of the various directions and terms as applied to a flex container with the "flex direction" defined as "row".
15 ![ ](../assets/img/flex-container/flex-container.jpg)
16 ![ ](flex-container/flex-container.jpg)
18 DALi supports the following subset of Flexbox properties.
20 ## Properties supported by flex container:
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)
29 ___________________________________________________________________________________________________
31 ## contentDirection {#content-direction}
33 contentDirection specifies the primary direction in which content is ordered on a line.
35 | LTR (left-to-right) | RTL (right-to-left) |
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) |
39 The possible values for this property are:
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 |
51 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
52 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::CONTENT_DIRECTION, Dali::Toolkit::FlexContainer::RTL );
57 var flexContainer = new dali.Control("FlexContainer");
58 flexContainer.contentDirection = "RTL";
60 ___________________________________________________________________________________________________
62 ## flexDirection {#flex-direction}
64 flexDirection specifies the direction of the main axis which determines the direction that flex items are laid out.
66 ![ ](../assets/img/flex-container/flex-direction.jpg)
67 ![ ](flex-container/flex-direction.jpg)
69 The possible values for this property are:
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 |
82 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
83 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW_REVERSE );
88 var flexContainer = new dali.Control("FlexContainer");
89 flexContainer.flexDirection = "rowReverse";
91 ___________________________________________________________________________________________________
93 ## flexWrap {#flex-wrap}
95 flexWrap specifies whether the flex items should wrap or not if there is no enough room for them on one flex line.
97 ![ ](../assets/img/flex-container/flex-wrap.jpg)
98 ![ ](flex-container/flex-wrap.jpg)
100 The possible values for this property are:
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 |
111 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
112 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_WRAP, Dali::Toolkit::FlexContainer::NO_WRAP );
117 var flexContainer = new dali.Control("FlexContainer");
118 flexContainer.flexWrap = "noWrap";
120 ___________________________________________________________________________________________________
122 ## justifyContent {#justify-content}
124 justifyContent specifies the alignment of flex items when they do not use all available space on the main axis.
126 ![ ](../assets/img/flex-container/justify-content.jpg)
127 ![ ](flex-container/justify-content.jpg)
129 The possible values for this property are:
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 |
143 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
144 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::JUSTIFY_CONTENT, Dali::Toolkit::FlexContainer::JUSTIFY_SPACE_BETWEEN );
149 var flexContainer = new dali.Control("FlexContainer");
150 flexContainer.justifyContent = "spaceBetween";
152 ___________________________________________________________________________________________________
154 ## alignItems {#align-items}
156 alignItems specifies the alignment of flex items when they do not use all available space on the cross axis.
158 ![ ](../assets/img/flex-container/align-items.jpg)
159 ![ ](flex-container/align-items.jpg)
161 The possible values for this property are:
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 |
174 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
175 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_ITEMS, Dali::Toolkit::FlexContainer::ALIGN_FLEX_START );
180 var flexContainer = new dali.Control("FlexContainer");
181 flexContainer.alignItems = "flexStart";
183 ___________________________________________________________________________________________________
185 ## alignContent {#align-content}
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.
189 ![ ](../assets/img/flex-container/align-content.jpg)
190 ![ ](flex-container/align-content.jpg)
192 The possible values for this property are:
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 |
204 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
205 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::ALIGN_CONTENT, Dali::Toolkit::FlexContainer::ALIGN_FLEX_END );
210 var flexContainer = new dali.Control("FlexContainer");
211 flexContainer.alignContent = "flexEnd";
213 ___________________________________________________________________________________________________
215 ## Custom properties supported by flex item:
218 + [alignSelf](@ref align-self)
219 + [flexMargin](@ref flex-margin)
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.
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.
225 ___________________________________________________________________________________________________
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).
233 ![ ](../assets/img/flex-container/flex.jpg)
234 ![ ](flex-container/flex.jpg)
239 Below is the example code for the items to achieve the proportion of free space as illustrated above.
244 // Create the flex container
245 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
247 // Set the flex direction to lay out the items horizontally
248 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW );
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 );
255 Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
256 item2.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 3.0f );
257 flexContainer.Add( item2 );
259 Dali::Toolkit::Control item3 = Dali::Toolkit::Control::New();
260 item3.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
261 flexContainer.Add( item3 );
263 Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
264 item4.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 2.0f );
265 flexContainer.Add( item4 );
267 Dali::Toolkit::Control item5 = Dali::Toolkit::Control::New();
268 item5.SetProperty( Dali::Toolkit::FlexContainer::ChildProperty::FLEX, 1.0f );
269 flexContainer.Add( item5 );
276 // Create the flex container
277 var flexContainer = new dali.Control("FlexContainer");
279 // Set the flex direction to lay out the items horizontally
280 flexContainer.flexDirection = "row";
282 // Create flex items and set the proportion
283 var item1 = new dali.Control();
285 flexContainer.add(item1);
287 var item2 = new dali.Control();
289 flexContainer.add(item2);
291 var item3 = new dali.Control();
293 flexContainer.add(item3);
295 var item4 = new dali.Control();
297 flexContainer.add(item4);
299 var item5 = new dali.Control();
301 flexContainer.add(item5);
304 ___________________________________________________________________________________________________
306 ## alignSelf {#align-self}
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.
310 ![ ](../assets/img/flex-container/align-self.jpg)
311 ![ ](flex-container/align-self.jpg)
313 The possible values for this property are:
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 |
325 Below is the example code for the items to achieve the alignment on the cross axis as illustrated above.
330 // Create the flex container
331 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
333 // Set the flex direction to lay out the items horizontally
334 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::ROW );
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 );
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 );
344 Dali::Toolkit::Control item2 = Dali::Toolkit::Control::New();
345 flexContainer.Add( item2 ); // item2 is aligned at the beginning of the container
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 );
351 Dali::Toolkit::Control item4 = Dali::Toolkit::Control::New();
352 flexContainer.Add( item4 ); // item4 is aligned at the beginning of the container
359 // Create the flex container
360 var flexContainer = new dali.Control("FlexContainer");
362 // Set the flex direction to lay out the items horizontally
363 flexContainer.flexDirection = "row";
365 // Set the items to be aligned at the beginning of the container on the cross axis by default
366 flexContainer.alignItems = "flexStart";
368 // Create flex items and add them to the flex container
369 var item1 = new dali.Control();
370 item1.alignSelf = "center"; // Align item1 at the center of the container
371 flexContainer.add(item1);
373 var item2 = new dali.Control();
374 flexContainer.add(item2); // item2 is aligned at the beginning of the container
376 var item3 = new dali.Control();
377 item1.alignSelf = "flexEnd"; // Align item3 at the bottom of the container
378 flexContainer.add(item3);
380 var item4 = new dali.Control();
381 flexContainer.add(item4); // item4 is aligned at the beginning of the container
384 ___________________________________________________________________________________________________
386 ## flexMargin {#flex-margin}
388 Each flex item inside the flex container is treated as a box (in CSS term) which is made up of:
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.
395 ![ ](../assets/img/flex-container/flex-margin.jpg)
396 ![ ](flex-container/flex-margin.jpg)
398 In DALi, the size of the flex item = content size + padding + border.
400 flexMargin specifies the space around the flex item.
407 // Create the flex container
408 Dali::Toolkit::FlexContainer flexContainer = Dali::Toolkit::FlexContainer::New();
411 Dali::Toolkit::Control item = Dali::Toolkit::Control::New();
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) );
416 // Add the item to the container
417 flexContainer.Add( item );
423 // Create the flex container
424 var flexContainer = new dali.Control("FlexContainer");
427 var item = new dali.Control();
429 // Add the margin around the item
430 item.flexMargin = [10.0, 10.0, 10.0, 10.0];
432 // Add the item to the container
433 flexContainer.add(item);
436 ___________________________________________________________________________________________________
438 ## Example of creating Flexbox layout using FlexContainer
440 Now let's see how to create a Gallery like layout (as shown below) using FlexContainer.
442 ![ ](../assets/img/flex-container/flexbox-demo.jpg)
443 ![ ](flex-container/flexbox-demo.jpg)
445 Firstly, we create a flex container as the whole view and set its resize policy to fill its parent (i.e. the stage).
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
457 // Add it to the stage
458 Dali::Stage::GetCurrent().Add( flexContainer );
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
472 // Add it to the stage
473 dali.stage.add( flexContainer );
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.
481 // Display toolbar and content vertically
482 flexContainer.SetProperty( Dali::Toolkit::FlexContainer::Property::FLEX_DIRECTION, Dali::Toolkit::FlexContainer::COLUMN );
488 // Display toolbar and content vertically
489 flexContainer.flexDirection = "column";
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.
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
503 // Add it to the main container
504 flexContainer.Add( toolBar );
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
516 // Add it to the main container
517 flexContainer.add(toolBar);
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.
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
535 toolBar.flexDirection = "row"; // display toolbar items horizontally
536 toolBar.alignItems = "center"; // align toolbar items vertically center
537 toolBar.flex = 0.1; // 10 percent of available space in the cross axis
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.
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
555 // Add it to the main container
556 flexContainer.Add( content );
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.flex = 0.9; // 90 percent of available space in the cross axis
571 // Add it to the main container
572 flexContainer.add(content);
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.
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 );
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 );
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 );
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 );
615 // Set the button text
616 labelMap[ "text" ] = "Next";
617 nextButton.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
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.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
632 toolBar.add( prevButton );
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.flex = 1.0; // take all the available space left apart from the two buttons
644 title.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the title
646 toolBar.add( title );
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.flexMargin = [10, 10, 10, 10]; // set 10 pixel margin around the button
657 toolBar.add( nextButton );
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.
662 Finally, we will add the image to the content area.
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 );
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 );
685 As you can see, it is easy to make flexible containers in DALi. We can use these concepts to create responsive layouts.
687 @class _Guide_Flex_Container