2 * Copyright (c) 2017 Samsung Electronics Co., Ltd.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
19 #include "shared/view.h"
21 #include <dali/dali.h>
22 #include <dali-toolkit/dali-toolkit.h>
23 #include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
26 using namespace Dali::Toolkit;
31 const int NUM_FLEX_ITEMS = 8;
33 const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" );
34 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
36 const DemoHelper::ViewStyle VIEW_STYLE( 0.08f, 0.45f, 80.f, 4.f );
38 const std::string FLEX_DIRECTION[] = {
45 const unsigned int NUM_FLEX_DIRECTION = sizeof(FLEX_DIRECTION) / sizeof(std::string);
47 const std::string FLEX_WRAP[] = {
52 const unsigned int NUM_FLEX_WRAP = sizeof(FLEX_WRAP) / sizeof(std::string);
54 const std::string CONTENT_DIRECTION[] = {
60 const unsigned int NUM_CONTENT_DIRECTION = sizeof(CONTENT_DIRECTION) / sizeof(std::string);
62 const std::string JUSTIFY_CONTENT[] = {
70 const unsigned int NUM_JUSTIFY_CONTENT = sizeof(JUSTIFY_CONTENT) / sizeof(std::string);
72 const std::string ALIGN_ITEMS[] = {
79 const unsigned int NUM_ALIGN_ITEMS = sizeof(ALIGN_ITEMS) / sizeof(std::string);
81 const std::string ALIGN_CONTENT[] = {
88 const unsigned int NUM_ALIGN_CONTENT = sizeof(ALIGN_CONTENT) / sizeof(std::string);
90 } // unnamed namespace
93 * This example demonstrates a proof of concept for FlexContainer UI control.
94 * The flexbox properties can be changed by pressing different buttons in the
97 class FlexContainerExample : public ConnectionTracker
103 * @param application class, stored as reference
105 FlexContainerExample( Application& application )
106 : mApplication( application ),
107 mCurrentFlexDirection( FlexContainer::ROW ),
108 mCurrentFlexWrap( FlexContainer::WRAP ),
109 mCurrentContentDirection( FlexContainer::INHERIT),
110 mCurrentJustifyContent( FlexContainer::JUSTIFY_FLEX_START ),
111 mCurrentAlignItems( FlexContainer::ALIGN_FLEX_START ),
112 mCurrentAlignContent( FlexContainer::ALIGN_FLEX_START )
114 // Connect to the Application's Init signal
115 mApplication.InitSignal().Connect(this, &FlexContainerExample::OnInit);
119 * This method gets called once the main loop of application is up and running
121 void OnInit(Application& app)
123 Stage stage = Dali::Stage::GetCurrent();
124 stage.KeyEventSignal().Connect(this, &FlexContainerExample::OnKeyEvent);
125 stage.GetRootLayer().SetBehavior(Layer::LAYER_3D);
127 Vector2 stageSize = Stage::GetCurrent().GetSize();
129 // Creates a default view with a default tool bar.
130 // The view is added to the stage.
131 Layer contents = DemoHelper::CreateView( mApplication,
138 // Create a flex direction toggle button. (left of toolbar)
139 mFlexDirectionButton = Toolkit::PushButton::New();
140 mFlexDirectionButton.SetName("mFlexDirectionButton");
141 mFlexDirectionButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change.png" );
142 mFlexDirectionButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-change-selected.png" );
143 mFlexDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexDirectionButtonClicked);
144 mFlexDirectionButton.SetLeaveRequired( true );
145 mToolBar.AddControl( mFlexDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
147 // Create a flex wrap toggle button. (left of toolbar)
148 mFlexWrapButton = Toolkit::PushButton::New();
149 mFlexWrapButton.SetName("mFlexWrapButton");
150 mFlexWrapButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit.png" );
151 mFlexWrapButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-edit-selected.png" );
152 mFlexWrapButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexWrapButtonClicked);
153 mFlexWrapButton.SetLeaveRequired( true );
154 mToolBar.AddControl( mFlexWrapButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
156 // Create a content direction toggle button. (left of toolbar)
157 mContentDirectionButton = Toolkit::PushButton::New();
158 mContentDirectionButton.SetName("mContentDirectionButton");
159 mContentDirectionButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace.png" );
160 mContentDirectionButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-replace-selected.png" );
161 mContentDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnContentDirectionButtonClicked);
162 mContentDirectionButton.SetLeaveRequired( true );
163 mToolBar.AddControl( mContentDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
165 // Create a justify content toggle button. (right of toolbar)
166 mJustifyContentButton = Toolkit::PushButton::New();
167 mJustifyContentButton.SetName("mJustifyContentButton");
168 mJustifyContentButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset.png" );
169 mJustifyContentButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-reset-selected.png" );
170 mJustifyContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnJustifyContentButtonClicked);
171 mJustifyContentButton.SetLeaveRequired( true );
172 mToolBar.AddControl( mJustifyContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
174 // Create a align items toggle button. (right of toolbar)
175 mAlignItemsButton = Toolkit::PushButton::New();
176 mAlignItemsButton.SetName("mAlignItemsButton");
177 mAlignItemsButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp.png" );
178 mAlignItemsButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-highp-selected.png" );
179 mAlignItemsButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignItemsButtonClicked);
180 mAlignItemsButton.SetLeaveRequired( true );
181 mToolBar.AddControl( mAlignItemsButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
183 // Create a align content toggle button. (right of toolbar)
184 mAlignContentButton = Toolkit::PushButton::New();
185 mAlignContentButton.SetName("mAlignContentButton");
186 mAlignContentButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross.png" );
187 mAlignContentButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, DEMO_IMAGE_DIR "icon-effect-cross-selected.png" );
188 mAlignContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignContentButtonClicked);
189 mAlignContentButton.SetLeaveRequired( true );
190 mToolBar.AddControl( mAlignContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
192 // Create the base flex container
193 mFlexContainer = FlexContainer::New();
194 mFlexContainer.SetParentOrigin(ParentOrigin::TOP_LEFT);
195 mFlexContainer.SetAnchorPoint(AnchorPoint::TOP_LEFT);
196 mFlexContainer.SetSize( stageSize.width, stageSize.height - VIEW_STYLE.mToolBarHeight );
197 mFlexContainer.SetY(VIEW_STYLE.mToolBarHeight);
198 mFlexContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN); // column as main axis
199 contents.Add(mFlexContainer);
201 // Add a text label to the container for showing the recently updated flexbox property value
202 mFlexPropertyLabel = TextLabel::New( FLEX_DIRECTION[mCurrentFlexDirection] );
203 mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX_MARGIN, Vector4(10.0f, 10.0f, 10.0f, 10.0f));
204 mFlexPropertyLabel.SetProperty(FlexContainer::ChildProperty::FLEX, 0.05f); // 5 pecent of the container size in the main axis
205 mFlexPropertyLabel.SetProperty(TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER");
206 mFlexPropertyLabel.SetProperty(TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER");
207 mFlexContainer.Add( mFlexPropertyLabel );
209 // Create the flex container for the flex items and add it to the base flex container
210 mFlexItemContainer = FlexContainer::New();
211 mFlexItemContainer.SetParentOrigin(ParentOrigin::TOP_LEFT);
212 mFlexItemContainer.SetAnchorPoint(AnchorPoint::TOP_LEFT);
213 mFlexItemContainer.SetBackgroundColor( Color::YELLOW );
214 mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection);
215 mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap);
216 mFlexItemContainer.SetProperty(FlexContainer::ChildProperty::FLEX, 0.95f); // 95 pecent of the container size in the main axis
217 mFlexContainer.Add(mFlexItemContainer);
219 // Create flex items and add them to the container
220 for (int i = 0; i < NUM_FLEX_ITEMS; i++)
222 PushButton flexItem = PushButton::New();
223 flexItem.SetAnchorPoint( AnchorPoint::TOP_LEFT );
224 flexItem.SetParentOrigin( ParentOrigin::TOP_LEFT );
226 // Set different background colour to help to identify different items
227 flexItem.SetBackgroundColor(Vector4(static_cast<float>(i) / NUM_FLEX_ITEMS, static_cast<float>(NUM_FLEX_ITEMS - i) / NUM_FLEX_ITEMS, 1.0f, 1.0f));
228 flexItem.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, "" );
229 flexItem.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, "" );
231 // Add a label to the button so that we can identify each item more easily
232 std::ostringstream index;
234 flexItem.SetProperty( Toolkit::Button::Property::LABEL, index.str() );
235 flexItem.SetName("FlexItem " + index.str());
237 // Set a fixed size to the items so that we can wrap the line and test these
238 // flex properties that only work when there are multiple lines in the layout
239 flexItem.SetResizePolicy(ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS);
240 // Make sure there are still extra space in the line after wrapping
241 flexItem.SetSize(stageSize.width / NUM_FLEX_ITEMS * 1.25f, (stageSize.height - VIEW_STYLE.mToolBarHeight) * 0.95f / NUM_FLEX_ITEMS * 1.25f);
243 mFlexItemContainer.Add( flexItem );
247 SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] );
250 bool OnFlexDirectionButtonClicked( Toolkit::Button button )
252 mCurrentFlexDirection = static_cast<FlexContainer::FlexDirection>( ( mCurrentFlexDirection + 1 ) % NUM_FLEX_DIRECTION );
253 mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, mCurrentFlexDirection);
254 SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] );
259 bool OnFlexWrapButtonClicked( Toolkit::Button button )
261 mCurrentFlexWrap = static_cast<FlexContainer::WrapType>( ( mCurrentFlexWrap + 1 ) % NUM_FLEX_WRAP );
262 mFlexItemContainer.SetProperty(FlexContainer::Property::FLEX_WRAP, mCurrentFlexWrap);
263 SetTitle( "Flex wrap", FLEX_WRAP[mCurrentFlexWrap] );
268 bool OnContentDirectionButtonClicked( Toolkit::Button button )
270 mCurrentContentDirection = static_cast<FlexContainer::ContentDirection>( ( mCurrentContentDirection + 1 ) % NUM_CONTENT_DIRECTION );
271 mFlexItemContainer.SetProperty(FlexContainer::Property::CONTENT_DIRECTION, mCurrentContentDirection);
272 SetTitle( "Content direction", CONTENT_DIRECTION[mCurrentContentDirection] );
277 bool OnJustifyContentButtonClicked( Toolkit::Button button )
279 mCurrentJustifyContent = static_cast<FlexContainer::Justification>( ( mCurrentJustifyContent + 1 ) % NUM_JUSTIFY_CONTENT );
280 mFlexItemContainer.SetProperty(FlexContainer::Property::JUSTIFY_CONTENT, mCurrentJustifyContent);
281 SetTitle( "Justify content", JUSTIFY_CONTENT[mCurrentJustifyContent] );
286 bool OnAlignItemsButtonClicked( Toolkit::Button button )
288 mCurrentAlignItems = static_cast<FlexContainer::Alignment>( ( mCurrentAlignItems + 1 ) % ( NUM_ALIGN_ITEMS + 1 ) );
289 mCurrentAlignItems = mCurrentAlignItems < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignItems; // skip auto as it is invalid for alignItems property
290 mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_ITEMS, mCurrentAlignItems );
291 SetTitle( "Align Items", ALIGN_ITEMS[mCurrentAlignItems - 1] );
296 bool OnAlignContentButtonClicked( Toolkit::Button button )
298 mCurrentAlignContent = static_cast<FlexContainer::Alignment>( ( mCurrentAlignContent + 1 ) % (NUM_ALIGN_CONTENT + 1 ) );
299 mCurrentAlignContent = mCurrentAlignContent < FlexContainer::ALIGN_FLEX_START ? FlexContainer::ALIGN_FLEX_START : mCurrentAlignContent; // skip auto as it is invalid for alignContent property
300 mFlexItemContainer.SetProperty(FlexContainer::Property::ALIGN_CONTENT, mCurrentAlignContent);
301 SetTitle( "Align content", ALIGN_CONTENT[mCurrentAlignContent - 1] );
309 * Sets/Updates the title of the View and the value of the recently updated
312 * @param[in] title The new title for the view.
313 * @param[in] propertyValue The value of the flexbox property.
315 void SetTitle(const std::string& title, const std::string& propertyValue)
319 mTitleActor = DemoHelper::CreateToolBarLabel( "" );
320 // Add title to the tool bar.
321 mToolBar.AddControl( mTitleActor, VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
324 // Update the title and property value
325 mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
326 mFlexPropertyLabel.SetProperty( TextLabel::Property::TEXT, propertyValue );
330 * Main key event handler
332 void OnKeyEvent(const KeyEvent& event)
334 if(event.state == KeyEvent::Down)
336 if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
345 Application& mApplication;
347 Toolkit::Control mView;
348 Toolkit::ToolBar mToolBar;
349 TextLabel mTitleActor; ///< The Toolbar's Title.
351 FlexContainer mFlexContainer;
352 FlexContainer mFlexItemContainer;
353 TextLabel mFlexPropertyLabel;
355 FlexContainer::FlexDirection mCurrentFlexDirection;
356 FlexContainer::WrapType mCurrentFlexWrap;
357 FlexContainer::ContentDirection mCurrentContentDirection;
358 FlexContainer::Justification mCurrentJustifyContent;
359 FlexContainer::Alignment mCurrentAlignItems;
360 FlexContainer::Alignment mCurrentAlignContent;
362 Toolkit::PushButton mFlexDirectionButton;
363 Toolkit::PushButton mFlexWrapButton;
364 Toolkit::PushButton mContentDirectionButton;
365 Toolkit::PushButton mJustifyContentButton;
366 Toolkit::PushButton mAlignItemsButton;
367 Toolkit::PushButton mAlignContentButton;
370 int DALI_EXPORT_API main(int argc, char **argv)
372 Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
373 FlexContainerExample test(app);