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

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