14d532c01421a66fb0930bc9e1729c3e4d896039
[platform/core/uifw/dali-demo.git] / examples / buttons / buttons-example.cpp
1 /*
2  * Copyright (c) 2014 Samsung Electronics Co., Ltd.
3  *
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
7  *
8  * http://www.apache.org/licenses/LICENSE-2.0
9  *
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.
15  *
16  */
17
18 #include "shared/view.h"
19 #include <dali/dali.h>
20 #include <dali-toolkit/dali-toolkit.h>
21
22 using namespace Dali;
23
24 // Define this so that it is interchangeable
25 // "DP" stands for Device independent Pixels
26 #define DP(x) x
27
28
29 namespace
30 {
31
32 const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-gradient.jpg";
33 const char* const TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";
34
35 const char* const TOOLBAR_TITLE = "Buttons";
36
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";
39
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";
42
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";
45
46 const char* const ENABLED_IMAGE = DEMO_IMAGE_DIR "item-select-check.png";
47
48 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
49
50 // Layout sizes
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;
55
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;
62
63 }  // namespace
64
65 /** This example shows how to create and use different buttons.
66  *
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
72  */
73 class ButtonsController: public ConnectionTracker
74 {
75  public:
76
77   ButtonsController( Application& application )
78     : mApplication( application )
79   {
80     // Connect to the Application's Init signal
81     mApplication.InitSignal().Connect( this, &ButtonsController::Create );
82   }
83
84   ~ButtonsController()
85   {
86     // Nothing to do here
87   }
88
89   void Create( Application& application )
90   {
91     // The Init signal is received once (only) during the Application lifetime
92
93     // Respond to key events
94     Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
95
96     // Creates a default view with a default tool bar.
97     // The view is added to the stage.
98     mContentLayer = DemoHelper::CreateView( application,
99                                             mView,
100                                             mToolBar,
101                                             BACKGROUND_IMAGE,
102                                             TOOLBAR_IMAGE,
103                                             TOOLBAR_TITLE );
104
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
112     for( unsigned int i = 0; i < contentTable.GetRows(); ++i )
113     {
114       contentTable.SetFitHeight( i );
115     }
116
117     contentTable.SetPosition( 0.0f, TOP_MARGIN );
118
119     mContentLayer.Add( contentTable );
120
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 );
130
131     contentTable.Add( radioGroup2Background );
132
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 )
137     {
138       radioButtonsGroup2.SetFitHeight( i );
139     }
140     radioButtonsGroup2.SetFitWidth( 0 );
141
142     radioGroup2Background.AddChild( radioButtonsGroup2, Toolkit::TableView::CellPosition( 0, 0 ) );
143
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 ) );
153
154     radioButtonsGroup2.Add( imageSelectTableView );
155
156     int radioY = 0;
157
158     // Radio 1
159     {
160       Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_1 ) );
161       image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
162
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 );
168
169       imageSelectTableView.AddChild( mRadioButtonImage1, Toolkit::TableView::CellPosition( 0, 0 ) );
170       imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
171     }
172
173     // Radio 2
174     {
175       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
176
177       Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_2 ) );
178       image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
179
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) );
184
185       imageSelectTableView.AddChild( mRadioButtonImage2, Toolkit::TableView::CellPosition( 1, 0 ) );
186       imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 1, 1 ) );
187     }
188
189     // Radio 3
190     {
191       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
192
193       Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( SMALL_IMAGE_3 ) );
194       image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
195
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) );
200
201       imageSelectTableView.AddChild( mRadioButtonImage3, Toolkit::TableView::CellPosition( 2, 0 ) );
202       imageSelectTableView.AddChild( image, Toolkit::TableView::CellPosition( 2, 1 ) );
203     }
204
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 );
210
211     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
212
213     radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
214
215     // ImageView to display selected image
216     mBigImage1 = ResourceImage::New( BIG_IMAGE_1 );
217     mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
218     mBigImage3 = ResourceImage::New( BIG_IMAGE_3 );
219
220     mImage = Toolkit::ImageView::New( mBigImage1 );
221     mImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
222     mImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
223     radioGroup2Background.AddChild( mImage, Toolkit::TableView::CellPosition( 0, 1, 2, 1 ) );
224
225     // The enable/disable radio group
226     Toolkit::TableView radioGroup1Background = Toolkit::TableView::New( 1, 1 );
227     radioGroup1Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
228     radioGroup1Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
229     radioGroup1Background.SetBackgroundColor( BACKGROUND_COLOUR );
230     radioGroup1Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
231     radioGroup1Background.SetFitHeight( 0 );
232
233     contentTable.Add( radioGroup1Background );
234
235     // Radio group
236     Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New( 2, 1 );
237     radioButtonsGroup1.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
238     radioButtonsGroup1.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
239     for( unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i )
240     {
241       radioButtonsGroup1.SetFitHeight( i );
242     }
243     radioButtonsGroup1.SetFitWidth( 0 );
244
245     radioGroup1Background.Add( radioButtonsGroup1 );
246
247     // TableView to lay out 2x Radio buttons on the left, and 1x Tick image on the right.
248     Toolkit::TableView tableView = Toolkit::TableView::New( 2, 2 );
249     tableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
250     tableView.SetFitHeight( 0 );
251     tableView.SetFitHeight( 1 );
252     tableView.SetFitWidth( 0 );
253     tableView.SetFitWidth( 1 );
254
255     Toolkit::TextLabel textLabel = Toolkit::TextLabel::New( "Select enabled" );
256     textLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
257     textLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
258     textLabel.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
259
260     Toolkit::ImageView image = Toolkit::ImageView::New( ResourceImage::New( ENABLED_IMAGE ) );
261     image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
262     image.SetPadding( Padding( DP(20.0f), 0.0f, 0.0f, 0.0f ) );
263     tableView.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
264
265     radioButtonsGroup1.Add( tableView );
266
267     // First radio button
268     {
269       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select enabled" );
270       radioButton.SetName( "radioSelectEnable" );
271       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
272       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
273       radioButton.SetPosition( 0, 0 );
274       radioButton.SetSelected( true );
275
276       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
277
278       tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 0, 0 ) );
279     }
280
281     // Second radio button
282     {
283       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
284       radioButton.SetName( "radioSelectDisable" );
285       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
286       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
287       radioButton.SetPosition( 0, DP(50) );
288
289       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
290
291       tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 1, 0 ) );
292     }
293
294     // CheckBoxes
295     Toolkit::TableView checkBoxBackground = Toolkit::TableView::New( 3, 1 );
296     checkBoxBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
297     checkBoxBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
298     checkBoxBackground.SetBackgroundColor( BACKGROUND_COLOUR );
299     checkBoxBackground.SetCellPadding( Size( MARGIN_SIZE / 2.0f, MARGIN_SIZE / 2.0f ) );
300
301     for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
302     {
303       checkBoxBackground.SetFitHeight( i );
304     }
305
306     contentTable.Add( checkBoxBackground );
307
308     {
309       mCheckboxButton1 = Toolkit::CheckBoxButton::New();
310       mCheckboxButton1.SetName( "checkbox1" );
311       mCheckboxButton1.SetLabelText( "CheckBox1 is unselected" );
312       mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
313
314       checkBoxBackground.Add( mCheckboxButton1 );
315     }
316
317     {
318       mCheckboxButton2 = Toolkit::CheckBoxButton::New();
319       mCheckboxButton2.SetName( "checkbox2" );
320       mCheckboxButton2.SetLabelText( "CheckBox2 is selected" );
321       mCheckboxButton2.SetSelected( true );
322       mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
323
324       checkBoxBackground.Add( mCheckboxButton2 );
325     }
326
327     {
328       mCheckboxButton3 = Toolkit::CheckBoxButton::New();
329       mCheckboxButton3.SetName( "checkbox3" );
330       mCheckboxButton3.SetLabelText( "CheckBox3 is unselected" );
331       mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
332
333       checkBoxBackground.Add( mCheckboxButton3 );
334     }
335
336     // Create togglabe button
337     Toolkit::TableView toggleBackground = Toolkit::TableView::New( 3, 1 );
338     toggleBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
339     toggleBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
340     toggleBackground.SetBackgroundColor( BACKGROUND_COLOUR );
341     toggleBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
342
343     for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
344     {
345       toggleBackground.SetFitHeight( i );
346     }
347
348     contentTable.Add( toggleBackground );
349
350     mToggleButton = Toolkit::PushButton::New();
351     mToggleButton.SetTogglableButton( true );
352     mToggleButton.SetLabelText( "Unselected" );
353     mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
354     mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
355     mToggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
356
357     toggleBackground.Add( mToggleButton );
358   }
359
360   void OnKeyEvent( const KeyEvent& event )
361   {
362     if( event.state == KeyEvent::Down )
363     {
364       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
365       {
366         // Exit application when click back or escape.
367         mApplication.Quit();
368       }
369     }
370   }
371
372   bool OnButtonSelected( Toolkit::Button button )
373   {
374     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
375     if( pushButton )
376     {
377       if( button.IsSelected() )
378       {
379         pushButton.SetLabelText( "Selected" );
380       }
381       else
382       {
383         pushButton.SetLabelText( "Unselected" );
384       }
385     }
386
387     return true;
388   }
389
390   bool EnableSelectButton( Toolkit::Button button )
391   {
392     if( button.GetName() == "radioSelectEnable" && button.IsSelected() == true )
393     {
394       mUpdateButton.SetDisabled( false );
395
396       mRadioButtonImage1.SetDisabled( false );
397       mRadioButtonImage2.SetDisabled( false );
398       mRadioButtonImage3.SetDisabled( false );
399
400       mCheckboxButton1.SetDisabled( false );
401       mCheckboxButton2.SetDisabled( false );
402       mCheckboxButton3.SetDisabled( false );
403
404       mToggleButton.SetDisabled( false );
405     }
406     else if( button.GetName() == "radioSelectDisable" && button.IsSelected() == true )
407     {
408       mUpdateButton.SetDisabled( true );
409
410       mRadioButtonImage1.SetDisabled( true );
411       mRadioButtonImage2.SetDisabled( true );
412       mRadioButtonImage3.SetDisabled( true );
413
414       mCheckboxButton1.SetDisabled( true );
415       mCheckboxButton2.SetDisabled( true );
416       mCheckboxButton3.SetDisabled( true );
417
418       mToggleButton.SetDisabled( true );
419     }
420
421     return true;
422   }
423
424   bool OnButtonClicked(Toolkit::Button button)
425   {
426     if( mRadioButtonImage1.IsSelected() )
427     {
428       mImage.SetImage( mBigImage1 );
429     }
430     else if( mRadioButtonImage2.IsSelected() )
431     {
432       mImage.SetImage( mBigImage2 );
433     }
434     else if( mRadioButtonImage3.IsSelected() )
435     {
436       mImage.SetImage( mBigImage3 );
437     }
438     return true;
439   }
440
441   bool OnCheckBoxesSelected( Toolkit::Button button )
442   {
443     if( button.GetName() == "checkbox1" )
444     {
445       if( button.IsSelected() )
446       {
447         button.SetLabelText("CheckBox1 is selected");
448       }
449       else
450       {
451         button.SetLabelText("CheckBox1 is unselected");
452       }
453     }
454
455     if( button.GetName() == "checkbox2" )
456     {
457       if( button.IsSelected() )
458       {
459         button.SetLabelText("CheckBox2 is selected");
460       }
461       else
462       {
463         button.SetLabelText("CheckBox2 is unselected");
464       }
465     }
466
467     if( button.GetName() == "checkbox3" )
468     {
469       if( button.IsSelected() )
470       {
471         button.SetLabelText("CheckBox3 is selected");
472       }
473       else
474       {
475         button.SetLabelText("CheckBox3 is unselected");
476       }
477     }
478
479     return true;
480   }
481
482 private:
483
484   Application&      mApplication;
485   Toolkit::Control  mView;                              ///< The View instance.
486   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
487   Layer             mContentLayer;                      ///< Content layer
488
489   Toolkit::RadioButton mRadioButtonImage1;
490   Toolkit::RadioButton mRadioButtonImage2;
491   Toolkit::RadioButton mRadioButtonImage3;
492
493   Toolkit::PushButton mUpdateButton;
494   Toolkit::PushButton mToggleButton;
495
496   Toolkit::CheckBoxButton mCheckboxButton1;
497   Toolkit::CheckBoxButton mCheckboxButton2;
498   Toolkit::CheckBoxButton mCheckboxButton3;
499
500   Animation      mAnimation;
501   float          mLastPoint;
502
503   Image mBigImage1;
504   Image mBigImage2;
505   Image mBigImage3;
506   Toolkit::ImageView mImage;
507 };
508
509 void RunTest( Application& application )
510 {
511   ButtonsController test( application );
512
513   application.MainLoop();
514 }
515
516 // Entry point for Linux & Tizen applications
517 //
518 int DALI_EXPORT_API main( int argc, char **argv )
519 {
520   Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
521
522   RunTest( application );
523
524   return 0;
525 }