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.
18 #include "shared/view.h"
19 #include <dali/dali.h>
20 #include <dali-toolkit/dali-toolkit.h>
24 // Define this so that it is interchangeable
25 // "DP" stands for Device independent Pixels
32 const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-gradient.jpg";
33 const char* const TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";
35 const char* const TOOLBAR_TITLE = "Buttons";
37 const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg";
38 const char* const BIG_IMAGE_1 = DEMO_IMAGE_DIR "gallery-large-4.jpg";
40 const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-20.jpg";
41 const char* const BIG_IMAGE_2 = DEMO_IMAGE_DIR "gallery-large-11.jpg";
43 const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-25.jpg";
44 const char* const BIG_IMAGE_3 = DEMO_IMAGE_DIR "gallery-large-13.jpg";
46 const char* const ENABLED_IMAGE = DEMO_IMAGE_DIR "item-select-check.png";
48 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
51 const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
52 const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
53 const int RADIO_IMAGE_SPACING = 8;
54 const int BUTTON_HEIGHT = 48;
56 const int MARGIN_SIZE = 10;
57 const int TOP_MARGIN = 85;
58 const int GROUP2_HEIGHT = 238;
59 const int GROUP1_HEIGHT = 120;
60 const int GROUP3_HEIGHT = 190;
61 const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
65 /** This example shows how to create and use different buttons.
67 * 1. First group of radio buttons with image actor labels selects an image to load
68 * 2. A push button loads the selected thumbnail image into the larger image pane
69 * 3. Second group of radio buttons with a table view label containing a text view and image view, and a normal text view.
70 * Selecting one of these will enable/disable the image loading push button
71 * 4. A group of check boxes
73 class ButtonsController: public ConnectionTracker
77 ButtonsController( Application& application )
78 : mApplication( application )
80 // Connect to the Application's Init signal
81 mApplication.InitSignal().Connect( this, &ButtonsController::Create );
89 void Create( Application& application )
91 // The Init signal is received once (only) during the Application lifetime
93 // Respond to key events
94 Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
96 // Creates a default view with a default tool bar.
97 // The view is added to the stage.
98 mContentLayer = DemoHelper::CreateView( application,
105 Toolkit::TableView contentTable = Toolkit::TableView::New( 4, 1 );
106 contentTable.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
107 contentTable.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
108 contentTable.SetAnchorPoint( AnchorPoint::TOP_LEFT );
109 contentTable.SetParentOrigin( ParentOrigin::TOP_LEFT );
110 contentTable.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE * 0.5f ) );
112 for( unsigned int i = 0; i < contentTable.GetRows(); ++i )
114 contentTable.SetFitHeight( i );
117 contentTable.SetPosition( 0.0f, TOP_MARGIN );
119 mContentLayer.Add( contentTable );
121 // Image selector radio group
122 Toolkit::TableView radioGroup2Background = Toolkit::TableView::New( 2, 2 );
123 radioGroup2Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
124 radioGroup2Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
125 radioGroup2Background.SetBackgroundColor( BACKGROUND_COLOUR );
126 radioGroup2Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
127 radioGroup2Background.SetFitHeight( 0 );
128 radioGroup2Background.SetFitHeight( 1 );
129 radioGroup2Background.SetFitWidth( 0 );
131 contentTable.Add( radioGroup2Background );
133 Toolkit::TableView radioButtonsGroup2 = Toolkit::TableView::New( 3, 1 );
134 radioButtonsGroup2.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
135 radioButtonsGroup2.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
136 for( unsigned int i = 0; i < radioButtonsGroup2.GetRows(); ++i )
138 radioButtonsGroup2.SetFitHeight( i );
140 radioButtonsGroup2.SetFitWidth( 0 );
142 radioGroup2Background.AddChild( radioButtonsGroup2, Toolkit::TableView::CellPosition( 0, 0 ) );
144 // TableView to lay out 3x Radio buttons on the left, and 3x Image thumbnails on the right.
145 Toolkit::TableView imageSelectTableView = Toolkit::TableView::New( 3, 2 );
146 imageSelectTableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
147 imageSelectTableView.SetFitHeight( 0 );
148 imageSelectTableView.SetFitHeight( 1 );
149 imageSelectTableView.SetFitHeight( 2 );
150 imageSelectTableView.SetFitWidth( 0 );
151 imageSelectTableView.SetFitWidth( 1 );
152 imageSelectTableView.SetCellPadding( Vector2( 6.0f, 0.0f ) );
154 radioButtonsGroup2.Add( imageSelectTableView );
160 Toolkit::ImageView image = Toolkit::ImageView::New( SMALL_IMAGE_1 );
161 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
163 mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( "1" );
164 mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
165 mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
166 mRadioButtonImage1.SetPosition( 0, DP(radioY) );
167 mRadioButtonImage1.SetSelected( true );
169 imageSelectTableView.AddChild( mRadioButtonImage1, Toolkit::TableView::CellPosition( 0, 0 ) );
170 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
175 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
177 Toolkit::ImageView image = Toolkit::ImageView::New( SMALL_IMAGE_2 );
178 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
180 mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( "2" );
181 mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
182 mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
183 mRadioButtonImage2.SetPosition( 0, DP(radioY) );
185 imageSelectTableView.AddChild( mRadioButtonImage2, Toolkit::TableView::CellPosition( 1, 0 ) );
186 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 1, 1 ) );
191 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
193 Toolkit::ImageView image = Toolkit::ImageView::New( SMALL_IMAGE_3 );
194 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
196 mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( "3" );
197 mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
198 mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
199 mRadioButtonImage3.SetPosition( 0, DP(radioY) );
201 imageSelectTableView.AddChild( mRadioButtonImage3, Toolkit::TableView::CellPosition( 2, 0 ) );
202 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 2, 1 ) );
205 // Create select button
206 mUpdateButton = Toolkit::PushButton::New();
207 mUpdateButton.SetLabelText( "Select" );
208 mUpdateButton.SetName( "selectButton" );
209 mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
211 mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
213 radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
215 // ImageView to display selected image
216 mImage = Toolkit::ImageView::New( BIG_IMAGE_1 );
217 mImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
218 mImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
219 radioGroup2Background.AddChild( mImage, Toolkit::TableView::CellPosition( 0, 1, 2, 1 ) );
221 // The enable/disable radio group
222 Toolkit::TableView radioGroup1Background = Toolkit::TableView::New( 1, 1 );
223 radioGroup1Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
224 radioGroup1Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
225 radioGroup1Background.SetBackgroundColor( BACKGROUND_COLOUR );
226 radioGroup1Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
227 radioGroup1Background.SetFitHeight( 0 );
229 contentTable.Add( radioGroup1Background );
232 Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New( 2, 1 );
233 radioButtonsGroup1.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
234 radioButtonsGroup1.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
235 for( unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i )
237 radioButtonsGroup1.SetFitHeight( i );
239 radioButtonsGroup1.SetFitWidth( 0 );
241 radioGroup1Background.Add( radioButtonsGroup1 );
243 // TableView to lay out 2x Radio buttons on the left, and 1x Tick image on the right.
244 Toolkit::TableView tableView = Toolkit::TableView::New( 2, 2 );
245 tableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
246 tableView.SetFitHeight( 0 );
247 tableView.SetFitHeight( 1 );
248 tableView.SetFitWidth( 0 );
249 tableView.SetFitWidth( 1 );
251 Toolkit::TextLabel textLabel = Toolkit::TextLabel::New( "Select enabled" );
252 textLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
253 textLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
254 textLabel.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
256 Toolkit::ImageView image = Toolkit::ImageView::New( ENABLED_IMAGE );
257 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
258 image.SetPadding( Padding( DP(20.0f), 0.0f, 0.0f, 0.0f ) );
259 tableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
261 radioButtonsGroup1.Add( tableView );
263 // First radio button
265 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select enabled" );
266 radioButton.SetName( "radioSelectEnable" );
267 radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
268 radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
269 radioButton.SetPosition( 0, 0 );
270 radioButton.SetSelected( true );
272 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
274 tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 0, 0 ) );
277 // Second radio button
279 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
280 radioButton.SetName( "radioSelectDisable" );
281 radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
282 radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
283 radioButton.SetPosition( 0, DP(50) );
285 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
287 tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 1, 0 ) );
291 Toolkit::TableView checkBoxBackground = Toolkit::TableView::New( 3, 1 );
292 checkBoxBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
293 checkBoxBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
294 checkBoxBackground.SetBackgroundColor( BACKGROUND_COLOUR );
295 checkBoxBackground.SetCellPadding( Size( MARGIN_SIZE / 2.0f, MARGIN_SIZE / 2.0f ) );
297 for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
299 checkBoxBackground.SetFitHeight( i );
302 contentTable.Add( checkBoxBackground );
305 mCheckboxButton1 = Toolkit::CheckBoxButton::New();
306 mCheckboxButton1.SetName( "checkbox1" );
307 mCheckboxButton1.SetLabelText( "CheckBox1 is unselected" );
308 mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
309 mCheckboxButton1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
311 checkBoxBackground.Add( mCheckboxButton1 );
315 mCheckboxButton2 = Toolkit::CheckBoxButton::New();
316 mCheckboxButton2.SetName( "checkbox2" );
317 mCheckboxButton2.SetLabelText( "CheckBox2 is selected" );
318 mCheckboxButton2.SetSelected( true );
319 mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
320 mCheckboxButton2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
322 checkBoxBackground.Add( mCheckboxButton2 );
326 mCheckboxButton3 = Toolkit::CheckBoxButton::New();
327 mCheckboxButton3.SetName( "checkbox3" );
328 mCheckboxButton3.SetLabelText( "CheckBox3 is unselected" );
329 mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
330 mCheckboxButton3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
332 checkBoxBackground.Add( mCheckboxButton3 );
335 // Create togglabe button
336 Toolkit::TableView toggleBackground = Toolkit::TableView::New( 3, 1 );
337 toggleBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
338 toggleBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
339 toggleBackground.SetBackgroundColor( BACKGROUND_COLOUR );
340 toggleBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
342 for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
344 toggleBackground.SetFitHeight( i );
347 contentTable.Add( toggleBackground );
349 mToggleButton = Toolkit::PushButton::New();
350 mToggleButton.SetTogglableButton( true );
351 mToggleButton.SetLabelText( "Unselected" );
352 mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
353 mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
354 mToggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
356 toggleBackground.Add( mToggleButton );
359 void OnKeyEvent( const KeyEvent& event )
361 if( event.state == KeyEvent::Down )
363 if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
365 // Exit application when click back or escape.
371 bool OnButtonSelected( Toolkit::Button button )
373 Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
376 if( button.IsSelected() )
378 pushButton.SetLabelText( "Selected" );
382 pushButton.SetLabelText( "Unselected" );
389 bool EnableSelectButton( Toolkit::Button button )
391 if( button.GetName() == "radioSelectEnable" && button.IsSelected() == true )
393 mUpdateButton.SetDisabled( false );
395 mRadioButtonImage1.SetDisabled( false );
396 mRadioButtonImage2.SetDisabled( false );
397 mRadioButtonImage3.SetDisabled( false );
399 mCheckboxButton1.SetDisabled( false );
400 mCheckboxButton2.SetDisabled( false );
401 mCheckboxButton3.SetDisabled( false );
403 mToggleButton.SetDisabled( false );
405 else if( button.GetName() == "radioSelectDisable" && button.IsSelected() == true )
407 mUpdateButton.SetDisabled( true );
409 mRadioButtonImage1.SetDisabled( true );
410 mRadioButtonImage2.SetDisabled( true );
411 mRadioButtonImage3.SetDisabled( true );
413 mCheckboxButton1.SetDisabled( true );
414 mCheckboxButton2.SetDisabled( true );
415 mCheckboxButton3.SetDisabled( true );
417 mToggleButton.SetDisabled( true );
423 bool OnButtonClicked(Toolkit::Button button)
425 if( mRadioButtonImage1.IsSelected() )
427 mImage.SetImage( BIG_IMAGE_1 );
429 else if( mRadioButtonImage2.IsSelected() )
431 mImage.SetImage( BIG_IMAGE_2 );
433 else if( mRadioButtonImage3.IsSelected() )
435 mImage.SetImage( BIG_IMAGE_3 );
440 bool OnCheckBoxesSelected( Toolkit::Button button )
442 if( button.GetName() == "checkbox1" )
444 if( button.IsSelected() )
446 button.SetLabelText("CheckBox1 is selected");
450 button.SetLabelText("CheckBox1 is unselected");
454 if( button.GetName() == "checkbox2" )
456 if( button.IsSelected() )
458 button.SetLabelText("CheckBox2 is selected");
462 button.SetLabelText("CheckBox2 is unselected");
466 if( button.GetName() == "checkbox3" )
468 if( button.IsSelected() )
470 button.SetLabelText("CheckBox3 is selected");
474 button.SetLabelText("CheckBox3 is unselected");
483 Application& mApplication;
484 Toolkit::Control mView; ///< The View instance.
485 Toolkit::ToolBar mToolBar; ///< The View's Toolbar.
486 Layer mContentLayer; ///< Content layer
488 Toolkit::RadioButton mRadioButtonImage1;
489 Toolkit::RadioButton mRadioButtonImage2;
490 Toolkit::RadioButton mRadioButtonImage3;
492 Toolkit::PushButton mUpdateButton;
493 Toolkit::PushButton mToggleButton;
495 Toolkit::CheckBoxButton mCheckboxButton1;
496 Toolkit::CheckBoxButton mCheckboxButton2;
497 Toolkit::CheckBoxButton mCheckboxButton3;
499 Animation mAnimation;
502 Toolkit::ImageView mImage;
505 void RunTest( Application& application )
507 ButtonsController test( application );
509 application.MainLoop();
512 // Entry point for Linux & Tizen applications
514 int DALI_EXPORT_API main( int argc, char **argv )
516 Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
518 RunTest( application );