/* * Copyright (c) 2020 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * */ #include #include "shared/view.h" #include #include using namespace Dali; using namespace Dali::Toolkit; namespace { const int NUM_FLEX_ITEMS = 8; const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" ); const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" ); const DemoHelper::ViewStyle VIEW_STYLE( 0.08f, 0.45f, 80.f, 4.f ); const std::string FLEX_DIRECTION[] = { "column", "columnReverse", "row", "rowReverse" }; const unsigned int NUM_FLEX_DIRECTION = sizeof(FLEX_DIRECTION) / sizeof(std::string); const std::string FLEX_WRAP[] = { "noWrap", "Wrap" }; const unsigned int NUM_FLEX_WRAP = sizeof(FLEX_WRAP) / sizeof(std::string); const std::string CONTENT_DIRECTION[] = { "inherit", "LTR", "RTL" }; const unsigned int NUM_CONTENT_DIRECTION = sizeof(CONTENT_DIRECTION) / sizeof(std::string); const std::string JUSTIFY_CONTENT[] = { "flexStart", "center", "flexEnd", "spaceBetween", "spaceAround" }; const unsigned int NUM_JUSTIFY_CONTENT = sizeof(JUSTIFY_CONTENT) / sizeof(std::string); const std::string ALIGN_ITEMS[] = { "flexStart", "center", "flexEnd", "stretch" }; const unsigned int NUM_ALIGN_ITEMS = sizeof(ALIGN_ITEMS) / sizeof(std::string); const std::string ALIGN_CONTENT[] = { "flexStart", "center", "flexEnd", "stretch" }; const unsigned int NUM_ALIGN_CONTENT = sizeof(ALIGN_CONTENT) / sizeof(std::string); } // unnamed namespace /** * This example demonstrates a proof of concept for FlexContainer UI control. * The flexbox properties can be changed by pressing different buttons in the * toolbar. */ class FlexContainerExample : public ConnectionTracker { public: /** * Constructor * @param application class, stored as reference */ FlexContainerExample( Application& application ) : mApplication( application ), mCurrentFlexDirection( FlexContainer::ROW ), mCurrentFlexWrap( FlexContainer::WRAP ), mCurrentContentDirection( FlexContainer::INHERIT), mCurrentJustifyContent( FlexContainer::JUSTIFY_FLEX_START ), mCurrentAlignItems( FlexContainer::ALIGN_FLEX_START ), mCurrentAlignContent( FlexContainer::ALIGN_FLEX_START ) { // Connect to the Application's Init signal mApplication.InitSignal().Connect(this, &FlexContainerExample::OnInit); } /** * This method gets called once the main loop of application is up and running */ void OnInit(Application& app) { auto window = app.GetWindow(); window.KeyEventSignal().Connect(this, &FlexContainerExample::OnKeyEvent); window.GetRootLayer().SetProperty( Layer::Property::BEHAVIOR,Layer::LAYER_3D ); Vector2 windowSize = window.GetSize(); // Creates a default view with a default tool bar. // The view is added to the window. Layer contents = DemoHelper::CreateView( mApplication, mView, mToolBar, BACKGROUND_IMAGE, TOOLBAR_IMAGE, "" ); // Create a flex direction toggle button. (left of toolbar) mFlexDirectionButton = Toolkit::PushButton::New(); mFlexDirectionButton.SetProperty( Dali::Actor::Property::NAME,"mFlexDirectionButton"); mFlexDirectionButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change.png" ); mFlexDirectionButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change-selected.png" ); mFlexDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexDirectionButtonClicked); mFlexDirectionButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mFlexDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create a flex wrap toggle button. (left of toolbar) mFlexWrapButton = Toolkit::PushButton::New(); mFlexWrapButton.SetProperty( Dali::Actor::Property::NAME,"mFlexWrapButton"); mFlexWrapButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit.png" ); mFlexWrapButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit-selected.png" ); mFlexWrapButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexWrapButtonClicked); mFlexWrapButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mFlexWrapButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create a content direction toggle button. (left of toolbar) mContentDirectionButton = Toolkit::PushButton::New(); mContentDirectionButton.SetProperty( Dali::Actor::Property::NAME,"mContentDirectionButton"); mContentDirectionButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace.png" ); mContentDirectionButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace-selected.png" ); mContentDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnContentDirectionButtonClicked); mContentDirectionButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mContentDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create a justify content toggle button. (right of toolbar) mJustifyContentButton = Toolkit::PushButton::New(); mJustifyContentButton.SetProperty( Dali::Actor::Property::NAME,"mJustifyContentButton"); mJustifyContentButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset.png" ); mJustifyContentButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset-selected.png" ); mJustifyContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnJustifyContentButtonClicked); mJustifyContentButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mJustifyContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create a align items toggle button. (right of toolbar) mAlignItemsButton = Toolkit::PushButton::New(); mAlignItemsButton.SetProperty( Dali::Actor::Property::NAME,"mAlignItemsButton"); mAlignItemsButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp.png" ); mAlignItemsButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp-selected.png" ); mAlignItemsButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignItemsButtonClicked); mAlignItemsButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mAlignItemsButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create a align content toggle button. (right of toolbar) mAlignContentButton = Toolkit::PushButton::New(); mAlignContentButton.SetProperty( Dali::Actor::Property::NAME,"mAlignContentButton"); mAlignContentButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross.png" ); mAlignContentButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross-selected.png" ); mAlignContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignContentButtonClicked); mAlignContentButton.SetProperty( Actor::Property::LEAVE_REQUIRED, true ); mToolBar.AddControl( mAlignContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create the base flex container mFlexContainer = FlexContainer::New(); mFlexContainer.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::TOP_LEFT); mFlexContainer.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_LEFT); mFlexContainer.SetProperty( Actor::Property::SIZE, Vector2( windowSize.width, windowSize.height - VIEW_STYLE.mToolBarHeight ) ); mFlexContainer.SetProperty( Actor::Property::POSITION_Y, VIEW_STYLE.mToolBarHeight); mFlexContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN); // column as main axis contents.Add(mFlexContainer); // Add a text label to the container for showing the recently updated flexbox property value mFlexPropertyLabel = TextLabel::New( FLEX_DIRECTION[mCurrentFlexDirection] ); mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX_MARGIN, Vector4(10.0f, 10.0f, 10.0f, 10.0f)); mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX, 0.05f); // 5 pecent of the container size in the main axis mFlexPropertyLabel.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER"); mFlexPropertyLabel.SetProperty(TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER"); mFlexContainer.Add( mFlexPropertyLabel ); // Create the flex container for the flex items and add it to the base flex container mFlexItemContainer = FlexContainer::New(); mFlexItemContainer.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::TOP_LEFT); mFlexItemContainer.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_LEFT); mFlexItemContainer.SetBackgroundColor( Color::YELLOW ); mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection); mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap); mFlexItemContainer.SetProperty(FlexContainer::ChildProperty::FLEX, 0.95f); // 95 pecent of the container size in the main axis mFlexContainer.Add(mFlexItemContainer); // Create flex items and add them to the container for (int i = 0; i < NUM_FLEX_ITEMS; i++) { PushButton flexItem = PushButton::New(); flexItem.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT ); flexItem.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT ); // Set different background colour to help to identify different items flexItem.SetBackgroundColor(Vector4(static_cast(i) / NUM_FLEX_ITEMS, static_cast(NUM_FLEX_ITEMS - i) / NUM_FLEX_ITEMS, 1.0f, 1.0f)); flexItem.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, "" ); flexItem.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, "" ); // Add a label to the button so that we can identify each item more easily std::ostringstream index; index << i + 1; flexItem.SetProperty( Toolkit::Button::Property::LABEL, index.str() ); flexItem.SetProperty( Dali::Actor::Property::NAME,"FlexItem " + index.str()); // Set a fixed size to the items so that we can wrap the line and test these // flex properties that only work when there are multiple lines in the layout flexItem.SetResizePolicy(ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS); // Make sure there are still extra space in the line after wrapping 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) ); mFlexItemContainer.Add( flexItem ); } // Update the title SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] ); } bool OnFlexDirectionButtonClicked( Toolkit::Button button ) { mCurrentFlexDirection = static_cast( ( mCurrentFlexDirection + 1 ) % NUM_FLEX_DIRECTION ); mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection); SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] ); return true; } bool OnFlexWrapButtonClicked( Toolkit::Button button ) { mCurrentFlexWrap = static_cast( ( mCurrentFlexWrap + 1 ) % NUM_FLEX_WRAP ); mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap); SetTitle( "Flex wrap", FLEX_WRAP[mCurrentFlexWrap] ); return true; } bool OnContentDirectionButtonClicked( Toolkit::Button button ) { mCurrentContentDirection = static_cast( ( mCurrentContentDirection + 1 ) % NUM_CONTENT_DIRECTION ); mFlexItemContainer.SetProperty(FlexContainer::Property::CONTENT_DIRECTION, mCurrentContentDirection); SetTitle( "Content direction", CONTENT_DIRECTION[mCurrentContentDirection] ); return true; } bool OnJustifyContentButtonClicked( Toolkit::Button button ) { mCurrentJustifyContent = static_cast( ( mCurrentJustifyContent + 1 ) % NUM_JUSTIFY_CONTENT ); mFlexItemContainer.SetProperty(FlexContainer::Property::JUSTIFY_CONTENT, mCurrentJustifyContent); SetTitle( "Justify content", JUSTIFY_CONTENT[mCurrentJustifyContent] ); return true; } bool OnAlignItemsButtonClicked( Toolkit::Button button ) { mCurrentAlignItems = static_cast( ( mCurrentAlignItems + 1 ) % ( NUM_ALIGN_ITEMS + 1 ) ); mCurrentAlignItems = mCurrentAlignItems < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignItems; // skip auto as it is invalid for alignItems property mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_ITEMS, mCurrentAlignItems ); SetTitle( "Align Items", ALIGN_ITEMS[mCurrentAlignItems - 1] ); return true; } bool OnAlignContentButtonClicked( Toolkit::Button button ) { mCurrentAlignContent = static_cast( ( mCurrentAlignContent + 1 ) % (NUM_ALIGN_CONTENT + 1 ) ); mCurrentAlignContent = mCurrentAlignContent < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignContent; // skip auto as it is invalid for alignContent property mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_CONTENT, mCurrentAlignContent); SetTitle( "Align content", ALIGN_CONTENT[mCurrentAlignContent - 1] ); return true; } private: /** * Sets/Updates the title of the View and the value of the recently updated * flexbox property. * * @param[in] title The new title for the view. * @param[in] propertyValue The value of the flexbox property. */ void SetTitle(const std::string& title, const std::string& propertyValue) { if(!mTitleActor) { mTitleActor = DemoHelper::CreateToolBarLabel( "" ); // Add title to the tool bar. mToolBar.AddControl( mTitleActor, VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter ); } // Update the title and property value mTitleActor.SetProperty( TextLabel::Property::TEXT, title ); mFlexPropertyLabel.SetProperty( TextLabel::Property::TEXT, propertyValue ); } /** * Main key event handler */ void OnKeyEvent(const KeyEvent& event) { if(event.GetState() == KeyEvent::DOWN) { if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) ) { mApplication.Quit(); } } } private: Application& mApplication; Toolkit::Control mView; Toolkit::ToolBar mToolBar; TextLabel mTitleActor; ///< The Toolbar's Title. FlexContainer mFlexContainer; FlexContainer mFlexItemContainer; TextLabel mFlexPropertyLabel; FlexContainer::FlexDirection mCurrentFlexDirection; FlexContainer::WrapType mCurrentFlexWrap; FlexContainer::ContentDirection mCurrentContentDirection; FlexContainer::Justification mCurrentJustifyContent; FlexContainer::Alignment mCurrentAlignItems; FlexContainer::Alignment mCurrentAlignContent; Toolkit::PushButton mFlexDirectionButton; Toolkit::PushButton mFlexWrapButton; Toolkit::PushButton mContentDirectionButton; Toolkit::PushButton mJustifyContentButton; Toolkit::PushButton mAlignItemsButton; Toolkit::PushButton mAlignContentButton; }; int DALI_EXPORT_API main(int argc, char **argv) { Application app = Application::New(&argc, &argv, DEMO_THEME_PATH); FlexContainerExample test(app); app.MainLoop(); return 0; }