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;
31 const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
32 const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
34 const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
35 const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
37 const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
38 const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
40 const char* WRAP_IMAGE( DEMO_IMAGE_DIR "icon-replace.png" );
41 const char* WRAP_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-replace-selected.png" );
43 const char* JUSTIFY_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
44 const char* JUSTIFY_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
46 // Child image filenames
47 const char* IMAGE_PATH[] = {
48 DEMO_IMAGE_DIR "application-icon-101.png",
49 DEMO_IMAGE_DIR "application-icon-102.png",
50 DEMO_IMAGE_DIR "application-icon-103.png",
51 DEMO_IMAGE_DIR "application-icon-104.png",
52 DEMO_IMAGE_DIR "application-icon-105.png",
53 DEMO_IMAGE_DIR "application-icon-106.png",
54 DEMO_IMAGE_DIR "application-icon-107.png",
55 DEMO_IMAGE_DIR "application-icon-108.png",
56 DEMO_IMAGE_DIR "application-icon-109.png",
57 DEMO_IMAGE_DIR "application-icon-110.png"
61 const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
63 // Helper function to create ImageViews with given filename and size.
64 void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
66 imageView = ImageView::New();
67 Property::Map imagePropertyMap;
68 imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
69 imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
70 imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
71 imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
72 imageView.SetProperty( Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
73 imageView.SetName("ImageView");
74 imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
75 imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
83 FlexExample::FlexExample()
89 void FlexExample::Create()
91 // The Init signal is received once (only) during the Application lifetime
92 auto stage = Stage::GetCurrent();
94 mDirectionButton = PushButton::New();
95 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
96 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
97 mDirectionButton.ClickedSignal().Connect( this, &FlexExample::OnDirectionClicked );
98 mDirectionButton.SetParentOrigin( Vector3(0.2f, 1.0f, 0.5f ) );
99 mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
100 mDirectionButton.SetSize(75, 75);
101 stage.Add( mDirectionButton );
103 mWrapButton = Toolkit::PushButton::New();
104 mWrapButton.SetProperty( PushButton::Property::UNSELECTED_ICON, WRAP_IMAGE );
105 mWrapButton.SetProperty( PushButton::Property::SELECTED_ICON, WRAP_SELECTED_IMAGE );
106 mWrapButton.ClickedSignal().Connect( this, &FlexExample::OnWrapClicked );
107 mWrapButton.SetParentOrigin( Vector3(0.4f, 1.0f, 0.5f ));
108 mWrapButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
109 mWrapButton.SetSize(75, 75);
110 stage.Add( mWrapButton );
112 mJustifyButton = Toolkit::PushButton::New();
113 mJustifyButton.SetProperty( PushButton::Property::UNSELECTED_ICON, JUSTIFY_IMAGE );
114 mJustifyButton.SetProperty( PushButton::Property::SELECTED_ICON, JUSTIFY_SELECTED_IMAGE );
115 mJustifyButton.ClickedSignal().Connect( this, &FlexExample::OnJustifyClicked );
116 mJustifyButton.SetParentOrigin( Vector3(0.6f, 1.0f, 0.5f ));
117 mJustifyButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
118 mJustifyButton.SetSize(75, 75);
119 stage.Add( mJustifyButton );
121 mRotateButton = PushButton::New();
122 mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
123 mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
124 mRotateButton.ClickedSignal().Connect( this, &FlexExample::OnRotateClicked );
125 mRotateButton.SetParentOrigin( Vector3(0.8f, 1.0f, 0.5f ));
126 mRotateButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
127 mRotateButton.SetSize(75, 75);
128 stage.Add( mRotateButton );
130 // Create a flex container
131 mFlexContainer = Control::New();
133 auto layout = FlexLayout::New();
134 layout.SetAnimateLayout( true );
135 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
136 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
137 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
138 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
140 DevelControl::SetLayout( mFlexContainer, layout );
142 mFlexContainer.SetParentOrigin( ParentOrigin::CENTER );
143 mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
144 mFlexContainer.SetName( "FlexExample" );
145 mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
146 mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
147 mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
148 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
150 for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
152 Toolkit::ImageView imageView;
153 CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
154 imageView.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.f, 0.f, 0.f, 0.f) );
155 imageView.SetProperty( Toolkit::Control::Property::MARGIN, Extents(2.0f, 2.0f, 2.0f, 2.0f) );
156 imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::ALIGN_SELF, Toolkit::FlexLayout::Alignment::CENTER );
157 imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::FLEX, 0.f );
158 mFlexContainer.Add( imageView );
160 stage.Add( mFlexContainer );
163 // Remove controls added by this example from stage
164 void FlexExample::Remove()
166 if ( mFlexContainer )
168 UnparentAndReset( mDirectionButton );
169 UnparentAndReset( mWrapButton );
170 UnparentAndReset( mJustifyButton );
171 UnparentAndReset( mRotateButton );
172 UnparentAndReset( mFlexContainer);
176 // Mirror items in layout
177 bool FlexExample::OnDirectionClicked( Button button )
179 mLTRDirection = !mLTRDirection;
182 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
183 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
184 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
188 mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
189 mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
190 mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
195 // Rotate layout by changing layout
196 bool FlexExample::OnRotateClicked( Button button )
198 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
199 if( layout.GetFlexDirection() == Toolkit::FlexLayout::FlexDirection::COLUMN )
201 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
205 layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::COLUMN );
210 // Alternates the layout wrapping from wrapping to none
211 bool FlexExample::OnWrapClicked( Button button )
213 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
214 if ( layout.GetFlexWrap() == Toolkit::FlexLayout::WrapType::NO_WRAP )
216 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::WRAP );
217 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::CENTER );
218 mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 45.0f, 75.0f) );
222 layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
223 layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
224 mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 0.0f, 0.0f) );
229 // Alternates the layout to justify space between items or not
230 bool FlexExample::OnJustifyClicked( Button button )
232 auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
233 if ( layout.GetFlexJustification() == Toolkit::FlexLayout::Justification::FLEX_START )
235 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::SPACE_BETWEEN);
239 layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );