2 * Copyright (c) 2018 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.
18 #include "flex-example.h"
19 #include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
20 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
21 #include <dali-toolkit/devel-api/controls/control-devel.h>
22 #include <dali-toolkit/devel-api/layouting/flex-layout.h>
25 using namespace Dali::Toolkit;
29 const char* const TITLE = "Flex Example";
32 const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
33 const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
35 const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
36 const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
38 const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
39 const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
41 const char* WRAP_IMAGE( DEMO_IMAGE_DIR "icon-replace.png" );
42 const char* WRAP_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-replace-selected.png" );
44 const char* JUSTIFY_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
45 const char* JUSTIFY_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
47 // Child image filenames
48 const char* IMAGE_PATH[] = {
49 DEMO_IMAGE_DIR "application-icon-101.png",
50 DEMO_IMAGE_DIR "application-icon-102.png",
51 DEMO_IMAGE_DIR "application-icon-103.png",
52 DEMO_IMAGE_DIR "application-icon-104.png",
53 DEMO_IMAGE_DIR "application-icon-105.png",
54 DEMO_IMAGE_DIR "application-icon-106.png",
55 DEMO_IMAGE_DIR "application-icon-107.png",
56 DEMO_IMAGE_DIR "application-icon-108.png",
57 DEMO_IMAGE_DIR "application-icon-109.png",
58 DEMO_IMAGE_DIR "application-icon-110.png"
62 const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
64 // Helper function to create ImageViews with given filename and size.
65 void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
67 imageView = ImageView::New();
68 Property::Map imagePropertyMap;
69 imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
70 imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
71 imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
72 imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
73 imageView.SetProperty( Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
74 imageView.SetName("ImageView");
75 imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
76 imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
84 FlexExample::FlexExample()
91 void FlexExample::Create()
93 // The Init signal is received once (only) during the Application lifetime
94 auto stage = Stage::GetCurrent();
96 mDirectionButton = PushButton::New();
97 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
98 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
99 mDirectionButton.ClickedSignal().Connect( this, &FlexExample::OnDirectionClicked );
100 mDirectionButton.SetParentOrigin( Vector3(0.2f, 1.0f, 0.5f ) );
101 mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
102 mDirectionButton.SetSize(75, 75);
103 stage.Add( mDirectionButton );
105 mWrapButton = Toolkit::PushButton::New();
106 mWrapButton.SetProperty( PushButton::Property::UNSELECTED_ICON, WRAP_IMAGE );
107 mWrapButton.SetProperty( PushButton::Property::SELECTED_ICON, WRAP_SELECTED_IMAGE );
108 mWrapButton.ClickedSignal().Connect( this, &FlexExample::OnWrapClicked );
109 mWrapButton.SetParentOrigin( Vector3(0.4f, 1.0f, 0.5f ));
110 mWrapButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
111 mWrapButton.SetSize(75, 75);
112 stage.Add( mWrapButton );
114 mJustifyButton = Toolkit::PushButton::New();
115 mJustifyButton.SetProperty( PushButton::Property::UNSELECTED_ICON, JUSTIFY_IMAGE );
116 mJustifyButton.SetProperty( PushButton::Property::SELECTED_ICON, JUSTIFY_SELECTED_IMAGE );
117 mJustifyButton.ClickedSignal().Connect( this, &FlexExample::OnJustifyClicked );
118 mJustifyButton.SetParentOrigin( Vector3(0.6f, 1.0f, 0.5f ));
119 mJustifyButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
120 mJustifyButton.SetSize(75, 75);
121 stage.Add( mJustifyButton );
123 mRotateButton = PushButton::New();
124 mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
125 mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
126 mRotateButton.ClickedSignal().Connect( this, &FlexExample::OnRotateClicked );
127 mRotateButton.SetParentOrigin( Vector3(0.8f, 1.0f, 0.5f ));
128 mRotateButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
129 mRotateButton.SetSize(75, 75);
130 stage.Add( mRotateButton );
132 // Create a flex container
133 mFlexContainer = Control::New();
135 auto layout = FlexLayout::New();
136 layout.SetAnimateLayout( true );
137 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
138 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
139 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
140 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
142 DevelControl::SetLayout( mFlexContainer, layout );
144 mFlexContainer.SetParentOrigin( ParentOrigin::CENTER );
145 mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
146 mFlexContainer.SetName( "FlexExample" );
147 mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
148 mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
149 mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
150 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
152 for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
154 Toolkit::ImageView imageView;
155 CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
156 imageView.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.f, 0.f, 0.f, 0.f) );
157 imageView.SetProperty( Toolkit::Control::Property::MARGIN, Extents(2.0f, 2.0f, 2.0f, 2.0f) );
158 imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::ALIGN_SELF, Toolkit::FlexLayout::Alignment::CENTER );
159 imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::FLEX, 0.f );
160 mFlexContainer.Add( imageView );
162 stage.Add( mFlexContainer );
165 // Remove controls added by this example from stage
166 void FlexExample::Remove()
168 if ( mFlexContainer )
170 UnparentAndReset( mDirectionButton );
171 UnparentAndReset( mWrapButton );
172 UnparentAndReset( mJustifyButton );
173 UnparentAndReset( mRotateButton );
174 UnparentAndReset( mFlexContainer);
178 // Mirror items in layout
179 bool FlexExample::OnDirectionClicked( Button button )
181 mLTRDirection = !mLTRDirection;
184 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
185 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
186 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
190 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
191 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
192 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
197 // Rotate layout by changing layout
198 bool FlexExample::OnRotateClicked( Button button )
200 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
201 if( layout.GetFlexDirection() == Toolkit::FlexLayout::FlexDirection::COLUMN )
203 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
207 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::COLUMN );
212 // Alternates the layout wrapping from wrapping to none
213 bool FlexExample::OnWrapClicked( Button button )
215 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
216 if ( layout.GetFlexWrap() == Toolkit::FlexLayout::WrapType::NO_WRAP )
218 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::WRAP );
219 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::CENTER );
220 mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 45.0f, 75.0f) );
224 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
225 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
226 mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 0.0f, 0.0f) );
231 // Alternates the layout to justify space between items or not
232 bool FlexExample::OnJustifyClicked( Button button )
234 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
235 if ( layout.GetFlexJustification() == Toolkit::FlexLayout::Justification::FLEX_START )
237 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::SPACE_BETWEEN);
241 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );