2 * Copyright (c) 2016 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>
25 using namespace Dali::Toolkit;
30 const int NUM_FLEX_ITEMS = 8;
32 const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" );
33 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
35 const DemoHelper::ViewStyle VIEW_STYLE( 0.08f, 0.45f, 80.f, 4.f );
37 const std::string FLEX_DIRECTION[] = {
44 const unsigned int NUM_FLEX_DIRECTION = sizeof(FLEX_DIRECTION) / sizeof(std::string);
46 const std::string FLEX_WRAP[] = {
51 const unsigned int NUM_FLEX_WRAP = sizeof(FLEX_WRAP) / sizeof(std::string);
53 const std::string CONTENT_DIRECTION[] = {
59 const unsigned int NUM_CONTENT_DIRECTION = sizeof(CONTENT_DIRECTION) / sizeof(std::string);
61 const std::string JUSTIFY_CONTENT[] = {
69 const unsigned int NUM_JUSTIFY_CONTENT = sizeof(JUSTIFY_CONTENT) / sizeof(std::string);
71 const std::string ALIGN_ITEMS[] = {
78 const unsigned int NUM_ALIGN_ITEMS = sizeof(ALIGN_ITEMS) / sizeof(std::string);
80 const std::string ALIGN_CONTENT[] = {
87 const unsigned int NUM_ALIGN_CONTENT = sizeof(ALIGN_CONTENT) / sizeof(std::string);
89 } // unnamed namespace
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
96 class FlexContainerExample : public ConnectionTracker
102 * @param application class, stored as reference
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 )
113 // Connect to the Application's Init signal
114 mApplication.InitSignal().Connect(this, &FlexContainerExample::OnInit);
118 * This method gets called once the main loop of application is up and running
120 void OnInit(Application& app)
122 Stage stage = Dali::Stage::GetCurrent();
123 stage.KeyEventSignal().Connect(this, &FlexContainerExample::OnKeyEvent);
124 stage.GetRootLayer().SetBehavior(Layer::LAYER_3D);
126 Vector2 stageSize = Stage::GetCurrent().GetSize();
128 // Creates a default view with a default tool bar.
129 // The view is added to the stage.
130 Layer contents = DemoHelper::CreateView( mApplication,
137 // Create a flex direction toggle button. (left of toolbar)
138 mFlexDirectionButton = Toolkit::PushButton::New();
139 mFlexDirectionButton.SetName("mFlexDirectionButton");
140 mFlexDirectionButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-change.png" );
141 mFlexDirectionButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-change-selected.png" );
142 mFlexDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexDirectionButtonClicked);
143 mFlexDirectionButton.SetLeaveRequired( true );
144 mToolBar.AddControl( mFlexDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
146 // Create a flex wrap toggle button. (left of toolbar)
147 mFlexWrapButton = Toolkit::PushButton::New();
148 mFlexWrapButton.SetName("mFlexWrapButton");
149 mFlexWrapButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-edit.png" );
150 mFlexWrapButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-edit-selected.png" );
151 mFlexWrapButton.ClickedSignal().Connect( this, &FlexContainerExample::OnFlexWrapButtonClicked);
152 mFlexWrapButton.SetLeaveRequired( true );
153 mToolBar.AddControl( mFlexWrapButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
155 // Create a content direction toggle button. (left of toolbar)
156 mContentDirectionButton = Toolkit::PushButton::New();
157 mContentDirectionButton.SetName("mContentDirectionButton");
158 mContentDirectionButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-replace.png" );
159 mContentDirectionButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-replace-selected.png" );
160 mContentDirectionButton.ClickedSignal().Connect( this, &FlexContainerExample::OnContentDirectionButtonClicked);
161 mContentDirectionButton.SetLeaveRequired( true );
162 mToolBar.AddControl( mContentDirectionButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
164 // Create a justify content toggle button. (right of toolbar)
165 mJustifyContentButton = Toolkit::PushButton::New();
166 mJustifyContentButton.SetName("mJustifyContentButton");
167 mJustifyContentButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-reset.png" );
168 mJustifyContentButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-reset-selected.png" );
169 mJustifyContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnJustifyContentButtonClicked);
170 mJustifyContentButton.SetLeaveRequired( true );
171 mToolBar.AddControl( mJustifyContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
173 // Create a align items toggle button. (right of toolbar)
174 mAlignItemsButton = Toolkit::PushButton::New();
175 mAlignItemsButton.SetName("mAlignItemsButton");
176 mAlignItemsButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-highp.png" );
177 mAlignItemsButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-highp-selected.png" );
178 mAlignItemsButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignItemsButtonClicked);
179 mAlignItemsButton.SetLeaveRequired( true );
180 mToolBar.AddControl( mAlignItemsButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
182 // Create a align content toggle button. (right of toolbar)
183 mAlignContentButton = Toolkit::PushButton::New();
184 mAlignContentButton.SetName("mAlignContentButton");
185 mAlignContentButton.SetUnselectedImage( DEMO_IMAGE_DIR "icon-effect-cross.png" );
186 mAlignContentButton.SetSelectedImage( DEMO_IMAGE_DIR "icon-effect-cross-selected.png" );
187 mAlignContentButton.ClickedSignal().Connect( this, &FlexContainerExample::OnAlignContentButtonClicked);
188 mAlignContentButton.SetLeaveRequired( true );
189 mToolBar.AddControl( mAlignContentButton, VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
191 // Create the base flex container
192 mFlexContainer = FlexContainer::New();
193 mFlexContainer.SetParentOrigin(ParentOrigin::TOP_LEFT);
194 mFlexContainer.SetAnchorPoint(AnchorPoint::TOP_LEFT);
195 mFlexContainer.SetSize( stageSize.width, stageSize.height - VIEW_STYLE.mToolBarHeight );
196 mFlexContainer.SetY(VIEW_STYLE.mToolBarHeight);
197 mFlexContainer.SetProperty(FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN); // column as main axis
198 contents.Add(mFlexContainer);
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 );
208 // Create the flex container for the flex items and add it to the base flex container
209 mFlexItemContainer = FlexContainer::New();
210 mFlexItemContainer.SetParentOrigin(ParentOrigin::TOP_LEFT);
211 mFlexItemContainer.SetAnchorPoint(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);
218 // Create flex items and add them to the container
219 for (int i = 0; i < NUM_FLEX_ITEMS; i++)
221 PushButton flexItem = PushButton::New();
222 flexItem.SetAnchorPoint( AnchorPoint::TOP_LEFT );
223 flexItem.SetParentOrigin( ParentOrigin::TOP_LEFT );
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.SetUnselectedImage("");
228 flexItem.SetSelectedImage("");
230 // Add a label to the button so that we can identify each item more easily
231 std::ostringstream index;
233 flexItem.SetLabelText(index.str());
234 flexItem.SetName("FlexItem " + index.str());
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.SetSize(stageSize.width / NUM_FLEX_ITEMS * 1.25f, (stageSize.height - VIEW_STYLE.mToolBarHeight) * 0.95f / NUM_FLEX_ITEMS * 1.25f);
242 mFlexItemContainer.Add( flexItem );
246 SetTitle( "Flex direction", FLEX_DIRECTION[mCurrentFlexDirection] );
249 bool OnFlexDirectionButtonClicked( Toolkit::Button button )
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] );
258 bool OnFlexWrapButtonClicked( Toolkit::Button button )
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] );
267 bool OnContentDirectionButtonClicked( Toolkit::Button button )
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] );
276 bool OnJustifyContentButtonClicked( Toolkit::Button button )
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] );
285 bool OnAlignItemsButtonClicked( Toolkit::Button button )
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] );
295 bool OnAlignContentButtonClicked( Toolkit::Button button )
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] );
308 * Sets/Updates the title of the View and the value of the recently updated
311 * @param[in] title The new title for the view.
312 * @param[in] propertyValue The value of the flexbox property.
314 void SetTitle(const std::string& title, const std::string& propertyValue)
318 mTitleActor = DemoHelper::CreateToolBarLabel( "" );
319 // Add title to the tool bar.
320 mToolBar.AddControl( mTitleActor, VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
323 // Update the title and property value
324 mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
325 mFlexPropertyLabel.SetProperty( TextLabel::Property::TEXT, propertyValue );
329 * Main key event handler
331 void OnKeyEvent(const KeyEvent& event)
333 if(event.state == KeyEvent::Down)
335 if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
344 Application& mApplication;
346 Toolkit::Control mView;
347 Toolkit::ToolBar mToolBar;
348 TextLabel mTitleActor; ///< The Toolbar's Title.
350 FlexContainer mFlexContainer;
351 FlexContainer mFlexItemContainer;
352 TextLabel mFlexPropertyLabel;
354 FlexContainer::FlexDirection mCurrentFlexDirection;
355 FlexContainer::WrapType mCurrentFlexWrap;
356 FlexContainer::ContentDirection mCurrentContentDirection;
357 FlexContainer::Justification mCurrentJustifyContent;
358 FlexContainer::Alignment mCurrentAlignItems;
359 FlexContainer::Alignment mCurrentAlignContent;
361 Toolkit::PushButton mFlexDirectionButton;
362 Toolkit::PushButton mFlexWrapButton;
363 Toolkit::PushButton mContentDirectionButton;
364 Toolkit::PushButton mJustifyContentButton;
365 Toolkit::PushButton mAlignItemsButton;
366 Toolkit::PushButton mAlignContentButton;
369 void RunTest(Application& app)
371 FlexContainerExample test(app);
376 int DALI_EXPORT_API main(int argc, char **argv)
378 Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);