2 * Copyright (c) 2014 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 ) );
111 // contentTable.TouchedSignal().Connect( this, &ButtonsController::OnTouchEvent );
113 for( unsigned int i = 0; i < contentTable.GetRows(); ++i )
115 contentTable.SetFitHeight( i );
118 contentTable.SetPosition( 0.0f, TOP_MARGIN );
120 mContentLayer.Add( contentTable );
122 // Image selector radio group
123 Toolkit::TableView radioGroup2Background = Toolkit::TableView::New( 2, 2 );
124 radioGroup2Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
125 radioGroup2Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
126 radioGroup2Background.SetBackgroundColor( BACKGROUND_COLOUR );
127 radioGroup2Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
128 radioGroup2Background.SetFitHeight( 0 );
129 radioGroup2Background.SetFitHeight( 1 );
130 radioGroup2Background.SetFitWidth( 0 );
132 contentTable.Add( radioGroup2Background );
134 Toolkit::TableView radioButtonsGroup2 = Toolkit::TableView::New( 3, 1 );
135 radioButtonsGroup2.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
136 radioButtonsGroup2.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
137 for( unsigned int i = 0; i < radioButtonsGroup2.GetRows(); ++i )
139 radioButtonsGroup2.SetFitHeight( i );
141 radioButtonsGroup2.SetFitWidth( 0 );
143 radioGroup2Background.AddChild( radioButtonsGroup2, Toolkit::TableView::CellPosition( 0, 0 ) );
145 // TableView to lay out 3x Radio buttons on the left, and 3x Image thumbnails on the right.
146 Toolkit::TableView imageSelectTableView = Toolkit::TableView::New( 3, 2 );
147 imageSelectTableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
148 imageSelectTableView.SetFitHeight( 0 );
149 imageSelectTableView.SetFitHeight( 1 );
150 imageSelectTableView.SetFitHeight( 2 );
151 imageSelectTableView.SetFitWidth( 0 );
152 imageSelectTableView.SetFitWidth( 1 );
153 imageSelectTableView.SetCellPadding( Vector2( 6.0f, 0.0f ) );
155 radioButtonsGroup2.Add( imageSelectTableView );
161 Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_1 ) );
162 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
164 mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( "1" );
165 mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
166 mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
167 mRadioButtonImage1.SetPosition( 0, DP(radioY) );
168 mRadioButtonImage1.SetSelected( true );
170 imageSelectTableView.AddChild( mRadioButtonImage1, Toolkit::TableView::CellPosition( 0, 0 ) );
171 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
176 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
178 Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_2 ) );
179 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
181 mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( "2" );
182 mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
183 mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
184 mRadioButtonImage2.SetPosition( 0, DP(radioY) );
186 imageSelectTableView.AddChild( mRadioButtonImage2, Toolkit::TableView::CellPosition( 1, 0 ) );
187 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 1, 1 ) );
192 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
194 Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_3 ) );
195 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
197 mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( "3" );
198 mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
199 mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
200 mRadioButtonImage3.SetPosition( 0, DP(radioY) );
202 imageSelectTableView.AddChild( mRadioButtonImage3, Toolkit::TableView::CellPosition( 2, 0 ) );
203 imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 2, 1 ) );
206 // Create select button
207 mUpdateButton = Toolkit::PushButton::New();
208 mUpdateButton.SetLabelText( "Select" );
209 mUpdateButton.SetName( "selectButton" );
210 mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
212 mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
214 radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
216 // ImageView to display selected image
217 mBigImage1 = ResourceImage::New( BIG_IMAGE_1 );
218 mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
219 mBigImage3 = ResourceImage::New( BIG_IMAGE_3 );
221 mImage = Toolkit::ImageView::New( mBigImage1 );
222 mImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
223 mImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
224 radioGroup2Background.AddChild( mImage, Toolkit::TableView::CellPosition( 0, 1, 2, 1 ) );
226 // The enable/disable radio group
227 Toolkit::TableView radioGroup1Background = Toolkit::TableView::New( 1, 1 );
228 radioGroup1Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
229 radioGroup1Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
230 radioGroup1Background.SetBackgroundColor( BACKGROUND_COLOUR );
231 radioGroup1Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
232 radioGroup1Background.SetFitHeight( 0 );
234 contentTable.Add( radioGroup1Background );
237 Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New( 2, 1 );
238 radioButtonsGroup1.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
239 radioButtonsGroup1.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
240 for( unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i )
242 radioButtonsGroup1.SetFitHeight( i );
244 radioButtonsGroup1.SetFitWidth( 0 );
246 radioGroup1Background.Add( radioButtonsGroup1 );
248 // TableView to lay out 2x Radio buttons on the left, and 1x Tick image on the right.
249 Toolkit::TableView tableView = Toolkit::TableView::New( 2, 2 );
250 tableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
251 tableView.SetFitHeight( 0 );
252 tableView.SetFitHeight( 1 );
253 tableView.SetFitWidth( 0 );
254 tableView.SetFitWidth( 1 );
256 Toolkit::TextLabel textLabel = Toolkit::TextLabel::New( "Select enabled" );
257 textLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
258 textLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
259 textLabel.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
261 Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( ENABLED_IMAGE ) );
262 image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
263 image.SetPadding( Padding( DP(20.0f), 0.0f, 0.0f, 0.0f ) );
264 tableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
266 radioButtonsGroup1.Add( tableView );
268 // First radio button
270 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select enabled" );
271 radioButton.SetName( "radioSelectEnable" );
272 radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
273 radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
274 radioButton.SetPosition( 0, 0 );
275 radioButton.SetSelected( true );
277 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
279 tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 0, 0 ) );
282 // Second radio button
284 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
285 radioButton.SetName( "radioSelectDisable" );
286 radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
287 radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
288 radioButton.SetPosition( 0, DP(50) );
290 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
292 tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 1, 0 ) );
296 Toolkit::TableView checkBoxBackground = Toolkit::TableView::New( 3, 1 );
297 checkBoxBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
298 checkBoxBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
299 checkBoxBackground.SetBackgroundColor( BACKGROUND_COLOUR );
300 checkBoxBackground.SetCellPadding( Size( MARGIN_SIZE / 2.0f, MARGIN_SIZE / 2.0f ) );
302 for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
304 checkBoxBackground.SetFitHeight( i );
307 contentTable.Add( checkBoxBackground );
310 mCheckboxButton1 = Toolkit::CheckBoxButton::New();
311 mCheckboxButton1.SetName( "checkbox1" );
312 mCheckboxButton1.SetLabelText( "CheckBox1 is unselected" );
313 mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
315 checkBoxBackground.Add( mCheckboxButton1 );
319 mCheckboxButton2 = Toolkit::CheckBoxButton::New();
320 mCheckboxButton2.SetName( "checkbox2" );
321 mCheckboxButton2.SetLabelText( "CheckBox2 is selected" );
322 mCheckboxButton2.SetSelected( true );
323 mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
325 checkBoxBackground.Add( mCheckboxButton2 );
329 mCheckboxButton3 = Toolkit::CheckBoxButton::New();
330 mCheckboxButton3.SetName( "checkbox3" );
331 mCheckboxButton3.SetLabelText( "CheckBox3 is unselected" );
332 mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
334 checkBoxBackground.Add( mCheckboxButton3 );
337 // Create togglabe button
338 Toolkit::TableView toggleBackground = Toolkit::TableView::New( 3, 1 );
339 toggleBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
340 toggleBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
341 toggleBackground.SetBackgroundColor( BACKGROUND_COLOUR );
342 toggleBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
344 for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
346 toggleBackground.SetFitHeight( i );
349 contentTable.Add( toggleBackground );
351 mToggleButton = Toolkit::PushButton::New();
352 mToggleButton.SetTogglableButton( true );
353 mToggleButton.SetLabelText( "Unselected" );
354 mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
355 mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
356 mToggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
358 toggleBackground.Add( mToggleButton );
361 void OnKeyEvent( const KeyEvent& event )
363 if( event.state == KeyEvent::Down )
365 if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
367 // Exit application when click back or escape.
373 bool OnButtonSelected( Toolkit::Button button )
375 Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
378 if( button.IsSelected() )
380 pushButton.SetLabelText( "Selected" );
384 pushButton.SetLabelText( "Unselected" );
391 bool EnableSelectButton( Toolkit::Button button )
393 if( button.GetName() == "radioSelectEnable" && button.IsSelected() == true )
395 mUpdateButton.SetDisabled( false );
397 mRadioButtonImage1.SetDisabled( false );
398 mRadioButtonImage2.SetDisabled( false );
399 mRadioButtonImage3.SetDisabled( false );
401 mCheckboxButton1.SetDisabled( false );
402 mCheckboxButton2.SetDisabled( false );
403 mCheckboxButton3.SetDisabled( false );
405 mToggleButton.SetDisabled( false );
407 else if( button.GetName() == "radioSelectDisable" && button.IsSelected() == true )
409 mUpdateButton.SetDisabled( true );
411 mRadioButtonImage1.SetDisabled( true );
412 mRadioButtonImage2.SetDisabled( true );
413 mRadioButtonImage3.SetDisabled( true );
415 mCheckboxButton1.SetDisabled( true );
416 mCheckboxButton2.SetDisabled( true );
417 mCheckboxButton3.SetDisabled( true );
419 mToggleButton.SetDisabled( true );
425 bool OnButtonClicked(Toolkit::Button button)
427 if( mRadioButtonImage1.IsSelected() )
429 mImage.SetImage( mBigImage1 );
431 else if( mRadioButtonImage2.IsSelected() )
433 mImage.SetImage( mBigImage2 );
435 else if( mRadioButtonImage3.IsSelected() )
437 mImage.SetImage( mBigImage3 );
442 bool OnCheckBoxesSelected( Toolkit::Button button )
444 if( button.GetName() == "checkbox1" )
446 if( button.IsSelected() )
448 button.SetLabelText("CheckBox1 is selected");
452 button.SetLabelText("CheckBox1 is unselected");
456 if( button.GetName() == "checkbox2" )
458 if( button.IsSelected() )
460 button.SetLabelText("CheckBox2 is selected");
464 button.SetLabelText("CheckBox2 is unselected");
468 if( button.GetName() == "checkbox3" )
470 if( button.IsSelected() )
472 button.SetLabelText("CheckBox3 is selected");
476 button.SetLabelText("CheckBox3 is unselected");
483 bool OnTouchEvent( Actor actor, const TouchEvent& event )
485 if( 1u == event.GetPointCount() )
487 const TouchPoint::State state = event.GetPoint(0u).state;
489 // Clamp to integer values; this is to reduce flicking due to pixel misalignment
490 const float localPoint = static_cast<float>( static_cast<int>( event.GetPoint( 0 ).local.y ) );
492 if( TouchPoint::Down == state )
494 mLastPoint = localPoint;
495 mAnimation = Animation::New( 0.25f );
497 else if( TouchPoint::Motion == state )
501 mAnimation.AnimateBy( Property(actor, Actor::Property::POSITION), Vector3( 0.f, localPoint - mLastPoint, 0.f ), AlphaFunction::LINEAR );
503 mLastPoint = localPoint;
513 Application& mApplication;
514 Toolkit::Control mView; ///< The View instance.
515 Toolkit::ToolBar mToolBar; ///< The View's Toolbar.
516 Layer mContentLayer; ///< Content layer
518 Toolkit::RadioButton mRadioButtonImage1;
519 Toolkit::RadioButton mRadioButtonImage2;
520 Toolkit::RadioButton mRadioButtonImage3;
522 Toolkit::PushButton mUpdateButton;
523 Toolkit::PushButton mToggleButton;
525 Toolkit::CheckBoxButton mCheckboxButton1;
526 Toolkit::CheckBoxButton mCheckboxButton2;
527 Toolkit::CheckBoxButton mCheckboxButton3;
529 Animation mAnimation;
535 Toolkit::ImageView mImage;
538 void RunTest( Application& application )
540 ButtonsController test( application );
542 application.MainLoop();
545 // Entry point for Linux & Tizen applications
547 int DALI_EXPORT_API main( int argc, char **argv )
549 Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
551 RunTest( application );