From c3a41aa75b3340d1b670e1b276dd92232677224a Mon Sep 17 00:00:00 2001 From: Richard Huang Date: Wed, 23 Mar 2016 15:33:32 +0000 Subject: [PATCH] Flexbox Demo to demonstrates a proof of concept for FlexContainer UI control Change-Id: I20f7a13ebc19b54ab91194b9c6b87d787f23501d --- com.samsung.dali-demo.xml | 3 + examples/flex-container/flex-container-example.cpp | 384 +++++++++++++++++++++ 2 files changed, 387 insertions(+) create mode 100644 examples/flex-container/flex-container-example.cpp diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index 41ea452..2f98c85 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -148,4 +148,7 @@ + + + diff --git a/examples/flex-container/flex-container-example.cpp b/examples/flex-container/flex-container-example.cpp new file mode 100644 index 0000000..cd72351 --- /dev/null +++ b/examples/flex-container/flex-container-example.cpp @@ -0,0 +1,384 @@ +/* + * Copyright (c) 2016 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 +#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) + { + Stage stage = Dali::Stage::GetCurrent(); + stage.KeyEventSignal().Connect(this, &FlexContainerExample::OnKeyEvent); + stage.GetRootLayer().SetBehavior(Layer::LAYER_3D); + + Vector2 stageSize = Stage::GetCurrent().GetSize(); + + // Creates a default view with a default tool bar. + // The view is added to the stage. + 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.SetName("mFlexDirectionButton"); + mFlexDirectionButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-change.png" ); + mFlexDirectionButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-change-selected.png" ); + mFlexDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexDirectionButtonClicked); + mFlexDirectionButton.SetLeaveRequired( 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.SetName("mFlexWrapButton"); + mFlexWrapButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-edit.png" ); + mFlexWrapButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-edit-selected.png" ); + mFlexWrapButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexWrapButtonClicked); + mFlexWrapButton.SetLeaveRequired( 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.SetName("mContentDirectionButton"); + mContentDirectionButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-replace.png" ); + mContentDirectionButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-replace-selected.png" ); + mContentDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnContentDirectionButtonClicked); + mContentDirectionButton.SetLeaveRequired( 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.SetName("mJustifyContentButton"); + mJustifyContentButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-reset.png" ); + mJustifyContentButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-reset-selected.png" ); + mJustifyContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnJustifyContentButtonClicked); + mJustifyContentButton.SetLeaveRequired( 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.SetName("mAlignItemsButton"); + mAlignItemsButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-highp.png" ); + mAlignItemsButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-highp-selected.png" ); + mAlignItemsButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignItemsButtonClicked); + mAlignItemsButton.SetLeaveRequired( 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.SetName("mAlignContentButton"); + mAlignContentButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-effect-cross.png" ); + mAlignContentButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-effect-cross-selected.png" ); + mAlignContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignContentButtonClicked); + mAlignContentButton.SetLeaveRequired( true ); + mToolBar.AddControl( mAlignContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); + + // Create the base flex container + mFlexContainer = FlexContainer::New(); + mFlexContainer.SetParentOrigin(ParentOrigin::TOP_LEFT); + mFlexContainer.SetAnchorPoint(AnchorPoint::TOP_LEFT); + mFlexContainer.SetSize( stageSize.width, stageSize.height - VIEW_STYLE.mToolBarHeight ); + mFlexContainer.SetY(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.RegisterProperty("flexMargin", Vector4(10.0f, 10.0f, 10.0f, 10.0f), Property::READ_WRITE); + mFlexPropertyLabel.RegisterProperty("flex", 0.05f, Property::READ_WRITE); // 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.SetParentOrigin(ParentOrigin::TOP_LEFT); + mFlexItemContainer.SetAnchorPoint(AnchorPoint::TOP_LEFT); + mFlexItemContainer.SetBackgroundColor( Color::YELLOW ); + mFlexItemContainer.RegisterProperty("flex", 0.95f, Property::READ_WRITE); // 95 pecent of the container size in the main axis + mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection); + mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap); + 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.SetAnchorPoint( AnchorPoint::TOP_LEFT ); + flexItem.SetParentOrigin( 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.SetUnselectedImage(""); + flexItem.SetSelectedImage(""); + + // Add a label to the button so that we can identify each item more easily + std::ostringstream index; + index << i + 1; + flexItem.SetLabelText(index.str()); + flexItem.SetName("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.SetSize(stageSize.width / NUM_FLEX_ITEMS * 1.25f, (stageSize.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.state == 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; +}; + +void RunTest(Application& app) +{ + FlexContainerExample test(app); + + app.MainLoop(); +} + +int DALI_EXPORT_API main(int argc, char **argv) +{ + Application app = Application::New(&argc, &argv, DEMO_THEME_PATH); + + RunTest(app); + + return 0; +} -- 2.7.4