examples/flex-container/flex-container-example.cpp

   1 /*
   2  * Copyright (c) 2019 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 #include <sstream>
  19 #include "shared/view.h"
  20
  21 #include <dali/dali.h>
  22 #include <dali-toolkit/dali-toolkit.h>
  23
  24 using namespace Dali;
  25 using namespace Dali::Toolkit;
  26
  27 namespace
  28 {
  29
  30 const int NUM_FLEX_ITEMS = 8;
  31
  32 const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" );
  33 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
  34
  35 const DemoHelper::ViewStyle VIEW_STYLE( 0.08f, 0.45f, 80.f, 4.f );
  36
  37 const std::string FLEX_DIRECTION[] = {
  38     "column",
  39     "columnReverse",
  40     "row",
  41     "rowReverse"
  42 };
  43
  44 const unsigned int NUM_FLEX_DIRECTION = sizeof(FLEX_DIRECTION) / sizeof(std::string);
  45
  46 const std::string FLEX_WRAP[] = {
  47     "noWrap",
  48     "Wrap"
  49 };
  50
  51 const unsigned int NUM_FLEX_WRAP = sizeof(FLEX_WRAP) / sizeof(std::string);
  52
  53 const std::string CONTENT_DIRECTION[] = {
  54     "inherit",
  55     "LTR",
  56     "RTL"
  57 };
  58
  59 const unsigned int NUM_CONTENT_DIRECTION = sizeof(CONTENT_DIRECTION) / sizeof(std::string);
  60
  61 const std::string JUSTIFY_CONTENT[] = {
  62     "flexStart",
  63     "center",
  64     "flexEnd",
  65     "spaceBetween",
  66     "spaceAround"
  67 };
  68
  69 const unsigned int NUM_JUSTIFY_CONTENT = sizeof(JUSTIFY_CONTENT) / sizeof(std::string);
  70
  71 const std::string ALIGN_ITEMS[] = {
  72     "flexStart",
  73     "center",
  74     "flexEnd",
  75     "stretch"
  76 };
  77
  78 const unsigned int NUM_ALIGN_ITEMS = sizeof(ALIGN_ITEMS) / sizeof(std::string);
  79
  80 const std::string ALIGN_CONTENT[] = {
  81     "flexStart",
  82     "center",
  83     "flexEnd",
  84     "stretch"
  85 };
  86
  87 const unsigned int NUM_ALIGN_CONTENT = sizeof(ALIGN_CONTENT) / sizeof(std::string);
  88
  89 } // unnamed namespace
  90
  91 /**
  92  * This example demonstrates a proof of concept for FlexContainer UI control.
  93  * The flexbox properties can be changed by pressing different buttons in the
  94  * toolbar.
  95  */
  96 class FlexContainerExample : public ConnectionTracker
  97 {
  98 public:
  99
 100   /**
 101    * Constructor
 102    * @param application class, stored as reference
 103    */
 104   FlexContainerExample( Application& application )
 105   : mApplication( application ),
 106     mCurrentFlexDirection( FlexContainer::ROW ),
 107     mCurrentFlexWrap( FlexContainer::WRAP ),
 108     mCurrentContentDirection( FlexContainer::INHERIT),
 109     mCurrentJustifyContent( FlexContainer::JUSTIFY_FLEX_START ),
 110     mCurrentAlignItems( FlexContainer::ALIGN_FLEX_START ),
 111     mCurrentAlignContent( FlexContainer::ALIGN_FLEX_START )
 112   {
 113     // Connect to the Application's Init signal
 114     mApplication.InitSignal().Connect(this, &FlexContainerExample::OnInit);
 115   }
 116
 117   /**
 118    * This method gets called once the main loop of application is up and running
 119    */
 120   void OnInit(Application& app)
 121   {
 122     Stage stage = Dali::Stage::GetCurrent();
 123     stage.KeyEventSignal().Connect(this, &FlexContainerExample::OnKeyEvent);
 124     stage.GetRootLayer().SetBehavior(Layer::LAYER_3D);
 125
 126     Vector2 stageSize = Stage::GetCurrent().GetSize();
 127
 128     // Creates a default view with a default tool bar.
 129     // The view is added to the stage.
 130     Layer contents = DemoHelper::CreateView( mApplication,
 131                                              mView,
 132                                              mToolBar,
 133                                              BACKGROUND_IMAGE,
 134                                              TOOLBAR_IMAGE,
 135                                              "" );
 136
 137     // Create a flex direction toggle button. (left of toolbar)
 138     mFlexDirectionButton = Toolkit::PushButton::New();
 139     mFlexDirectionButton.SetProperty( Dali::Actor::Property::NAME,"mFlexDirectionButton");
 140     mFlexDirectionButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change.png" );
 141     mFlexDirectionButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change-selected.png" );
 142     mFlexDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexDirectionButtonClicked);
 143     mFlexDirectionButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 144     mToolBar.AddControl( mFlexDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 145
 146     // Create a flex wrap toggle button. (left of toolbar)
 147     mFlexWrapButton = Toolkit::PushButton::New();
 148     mFlexWrapButton.SetProperty( Dali::Actor::Property::NAME,"mFlexWrapButton");
 149     mFlexWrapButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit.png" );
 150     mFlexWrapButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit-selected.png" );
 151     mFlexWrapButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexWrapButtonClicked);
 152     mFlexWrapButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 153     mToolBar.AddControl( mFlexWrapButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 154
 155     // Create a content direction toggle button. (left of toolbar)
 156     mContentDirectionButton = Toolkit::PushButton::New();
 157     mContentDirectionButton.SetProperty( Dali::Actor::Property::NAME,"mContentDirectionButton");
 158     mContentDirectionButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace.png" );
 159     mContentDirectionButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace-selected.png" );
 160     mContentDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnContentDirectionButtonClicked);
 161     mContentDirectionButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 162     mToolBar.AddControl( mContentDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 163
 164     // Create a justify content toggle button. (right of toolbar)
 165     mJustifyContentButton = Toolkit::PushButton::New();
 166     mJustifyContentButton.SetProperty( Dali::Actor::Property::NAME,"mJustifyContentButton");
 167     mJustifyContentButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset.png" );
 168     mJustifyContentButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset-selected.png" );
 169     mJustifyContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnJustifyContentButtonClicked);
 170     mJustifyContentButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 171     mToolBar.AddControl( mJustifyContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 172
 173     // Create a align items toggle button. (right of toolbar)
 174     mAlignItemsButton = Toolkit::PushButton::New();
 175     mAlignItemsButton.SetProperty( Dali::Actor::Property::NAME,"mAlignItemsButton");
 176     mAlignItemsButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp.png" );
 177     mAlignItemsButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp-selected.png" );
 178     mAlignItemsButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignItemsButtonClicked);
 179     mAlignItemsButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 180     mToolBar.AddControl( mAlignItemsButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 181
 182     // Create a align content toggle button. (right of toolbar)
 183     mAlignContentButton = Toolkit::PushButton::New();
 184     mAlignContentButton.SetProperty( Dali::Actor::Property::NAME,"mAlignContentButton");
 185     mAlignContentButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross.png" );
 186     mAlignContentButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross-selected.png" );
 187     mAlignContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignContentButtonClicked);
 188     mAlignContentButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true );
 189     mToolBar.AddControl( mAlignContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 190
 191     // Create the base flex container
 192     mFlexContainer = FlexContainer::New();
 193     mFlexContainer.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::TOP_LEFT);
 194     mFlexContainer.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_LEFT);
 195     mFlexContainer.SetProperty( Actor::Property::SIZE, Vector2( stageSize.width, stageSize.height - VIEW_STYLE.mToolBarHeight ) );
 196     mFlexContainer.SetProperty( Actor::Property::POSITION_Y, VIEW_STYLE.mToolBarHeight);
 197     mFlexContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN); // column as main axis
 198     contents.Add(mFlexContainer);
 199
 200     // Add a text label to the container for showing the recently updated flexbox property value
 201     mFlexPropertyLabel = TextLabel::New( FLEX_DIRECTION[mCurrentFlexDirection] );
 202     mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX_MARGIN, Vector4(10.0f, 10.0f, 10.0f, 10.0f));
 203     mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX, 0.05f); // 5 pecent of the container size in the main axis
 204     mFlexPropertyLabel.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER");
 205     mFlexPropertyLabel.SetProperty(TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER");
 206     mFlexContainer.Add( mFlexPropertyLabel );
 207
 208     // Create the flex container for the flex items and add it to the base flex container
 209     mFlexItemContainer = FlexContainer::New();
 210     mFlexItemContainer.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::TOP_LEFT);
 211     mFlexItemContainer.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_LEFT);
 212     mFlexItemContainer.SetBackgroundColor( Color::YELLOW );
 213     mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection);
 214     mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap);
 215     mFlexItemContainer.SetProperty(FlexContainer::ChildProperty::FLEX, 0.95f); // 95 pecent of the container size in the main axis
 216     mFlexContainer.Add(mFlexItemContainer);
 217
 218     // Create flex items and add them to the container
 219     for (int i = 0; i < NUM_FLEX_ITEMS; i++)
 220     {
 221       PushButton flexItem = PushButton::New();
 222       flexItem.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT );
 223       flexItem.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT );
 224
 225       // Set different background colour to help to identify different items
 226       flexItem.SetBackgroundColor(Vector4(static_cast<float>(i) / NUM_FLEX_ITEMS, static_cast<float>(NUM_FLEX_ITEMS - i) / NUM_FLEX_ITEMS, 1.0f, 1.0f));
 227       flexItem.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, "" );
 228       flexItem.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, "" );
 229
 230       // Add a label to the button so that we can identify each item more easily
 231       std::ostringstream index;
 232       index << i + 1;
 233       flexItem.SetProperty( Toolkit::Button::Property::LABEL, index.str() );
 234       flexItem.SetProperty( Dali::Actor::Property::NAME,"FlexItem " + index.str());
 235
 236       // Set a fixed size to the items so that we can wrap the line and test these
 237       // flex properties that only work when there are multiple lines in the layout
 238       flexItem.SetResizePolicy(ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS);
 239       // Make sure there are still extra space in the line after wrapping
 240       flexItem.SetProperty( Actor::Property::SIZE, Vector2(stageSize.width / NUM_FLEX_ITEMS * 1.25f, (stageSize.height - VIEW_STYLE.mToolBarHeight) * 0.95f / NUM_FLEX_ITEMS * 1.25f) );
 241
 242       mFlexItemContainer.Add( flexItem );
 243     }
 244
 245     // Update the title
 246     SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] );
 247   }
 248
 249   bool OnFlexDirectionButtonClicked( Toolkit::Button button )
 250   {
 251     mCurrentFlexDirection = static_cast<FlexContainer::FlexDirection>( ( mCurrentFlexDirection + 1 ) % NUM_FLEX_DIRECTION );
 252     mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection);
 253     SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] );
 254
 255     return true;
 256   }
 257
 258   bool OnFlexWrapButtonClicked( Toolkit::Button button )
 259   {
 260     mCurrentFlexWrap = static_cast<FlexContainer::WrapType>( ( mCurrentFlexWrap + 1 ) % NUM_FLEX_WRAP );
 261     mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap);
 262     SetTitle( "Flex wrap", FLEX_WRAP[mCurrentFlexWrap] );
 263
 264     return true;
 265   }
 266
 267   bool OnContentDirectionButtonClicked( Toolkit::Button button )
 268   {
 269     mCurrentContentDirection = static_cast<FlexContainer::ContentDirection>( ( mCurrentContentDirection + 1 ) % NUM_CONTENT_DIRECTION );
 270     mFlexItemContainer.SetProperty(FlexContainer::Property::CONTENT_DIRECTION, mCurrentContentDirection);
 271     SetTitle( "Content direction", CONTENT_DIRECTION[mCurrentContentDirection] );
 272
 273     return true;
 274   }
 275
 276   bool OnJustifyContentButtonClicked( Toolkit::Button button )
 277   {
 278     mCurrentJustifyContent = static_cast<FlexContainer::Justification>( ( mCurrentJustifyContent + 1 ) % NUM_JUSTIFY_CONTENT );
 279     mFlexItemContainer.SetProperty(FlexContainer::Property::JUSTIFY_CONTENT, mCurrentJustifyContent);
 280     SetTitle( "Justify content", JUSTIFY_CONTENT[mCurrentJustifyContent] );
 281
 282     return true;
 283   }
 284
 285   bool OnAlignItemsButtonClicked( Toolkit::Button button )
 286   {
 287     mCurrentAlignItems = static_cast<FlexContainer::Alignment>( ( mCurrentAlignItems + 1 ) % ( NUM_ALIGN_ITEMS + 1 ) );
 288     mCurrentAlignItems = mCurrentAlignItems < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignItems; // skip auto as it is invalid for alignItems property
 289     mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_ITEMS, mCurrentAlignItems );
 290     SetTitle( "Align Items", ALIGN_ITEMS[mCurrentAlignItems - 1] );
 291
 292     return true;
 293   }
 294
 295   bool OnAlignContentButtonClicked( Toolkit::Button button )
 296   {
 297     mCurrentAlignContent = static_cast<FlexContainer::Alignment>( ( mCurrentAlignContent + 1 ) % (NUM_ALIGN_CONTENT + 1 ) );
 298     mCurrentAlignContent = mCurrentAlignContent < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignContent; // skip auto as it is invalid for alignContent property
 299     mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_CONTENT, mCurrentAlignContent);
 300     SetTitle( "Align content", ALIGN_CONTENT[mCurrentAlignContent - 1] );
 301
 302     return true;
 303   }
 304
 305 private:
 306
 307   /**
 308    * Sets/Updates the title of the View and the value of the recently updated
 309    * flexbox property.
 310    *
 311    * @param[in] title The new title for the view.
 312    * @param[in] propertyValue The value of the flexbox property.
 313    */
 314   void SetTitle(const std::string& title, const std::string& propertyValue)
 315   {
 316     if(!mTitleActor)
 317     {
 318       mTitleActor = DemoHelper::CreateToolBarLabel( "" );
 319       // Add title to the tool bar.
 320       mToolBar.AddControl( mTitleActor, VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
 321     }
 322
 323     // Update the title and property value
 324     mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
 325     mFlexPropertyLabel.SetProperty( TextLabel::Property::TEXT, propertyValue );
 326   }
 327
 328   /**
 329    * Main key event handler
 330    */
 331   void OnKeyEvent(const KeyEvent& event)
 332   {
 333     if(event.state == KeyEvent::Down)
 334     {
 335       if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
 336       {
 337         mApplication.Quit();
 338       }
 339     }
 340   }
 341
 342 private:
 343
 344   Application& mApplication;
 345
 346   Toolkit::Control mView;
 347   Toolkit::ToolBar mToolBar;
 348   TextLabel mTitleActor;             ///< The Toolbar's Title.
 349
 350   FlexContainer mFlexContainer;
 351   FlexContainer mFlexItemContainer;
 352   TextLabel mFlexPropertyLabel;
 353
 354   FlexContainer::FlexDirection mCurrentFlexDirection;
 355   FlexContainer::WrapType mCurrentFlexWrap;
 356   FlexContainer::ContentDirection mCurrentContentDirection;
 357   FlexContainer::Justification mCurrentJustifyContent;
 358   FlexContainer::Alignment mCurrentAlignItems;
 359   FlexContainer::Alignment mCurrentAlignContent;
 360
 361   Toolkit::PushButton mFlexDirectionButton;
 362   Toolkit::PushButton mFlexWrapButton;
 363   Toolkit::PushButton mContentDirectionButton;
 364   Toolkit::PushButton mJustifyContentButton;
 365   Toolkit::PushButton mAlignItemsButton;
 366   Toolkit::PushButton mAlignContentButton;
 367 };
 368
 369 int DALI_EXPORT_API main(int argc, char **argv)
 370 {
 371   Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
 372   FlexContainerExample test(app);
 373   app.MainLoop();
 374   return 0;
 375 }