Merge branch 'devel/master' into tizen
[platform/core/uifw/dali-demo.git] / examples / buttons / buttons-example.cpp
1 /*
2  * Copyright (c) 2016 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( 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( 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( 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     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 ) );
220
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 );
228
229     contentTable.Add( radioGroup1Background );
230
231     // Radio group
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 )
236     {
237       radioButtonsGroup1.SetFitHeight( i );
238     }
239     radioButtonsGroup1.SetFitWidth( 0 );
240
241     radioGroup1Background.Add( radioButtonsGroup1 );
242
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 );
250
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" );
255
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 ) );
260
261     radioButtonsGroup1.Add( tableView );
262
263     // First radio button
264     {
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 );
271
272       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
273
274       tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 0, 0 ) );
275     }
276
277     // Second radio button
278     {
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) );
284
285       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
286
287       tableView.AddChild( radioButton, Toolkit::TableView::CellPosition( 1, 0 ) );
288     }
289
290     // CheckBoxes
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 ) );
296
297     for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
298     {
299       checkBoxBackground.SetFitHeight( i );
300     }
301
302     contentTable.Add( checkBoxBackground );
303
304     {
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 );
310
311       checkBoxBackground.Add( mCheckboxButton1 );
312     }
313
314     {
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 );
321
322       checkBoxBackground.Add( mCheckboxButton2 );
323     }
324
325     {
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 );
331
332       checkBoxBackground.Add( mCheckboxButton3 );
333     }
334
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 ) );
341
342     for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
343     {
344       toggleBackground.SetFitHeight( i );
345     }
346
347     contentTable.Add( toggleBackground );
348
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 );
355
356     toggleBackground.Add( mToggleButton );
357   }
358
359   void OnKeyEvent( const KeyEvent& event )
360   {
361     if( event.state == KeyEvent::Down )
362     {
363       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
364       {
365         // Exit application when click back or escape.
366         mApplication.Quit();
367       }
368     }
369   }
370
371   bool OnButtonSelected( Toolkit::Button button )
372   {
373     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
374     if( pushButton )
375     {
376       if( button.IsSelected() )
377       {
378         pushButton.SetLabelText( "Selected" );
379       }
380       else
381       {
382         pushButton.SetLabelText( "Unselected" );
383       }
384     }
385
386     return true;
387   }
388
389   bool EnableSelectButton( Toolkit::Button button )
390   {
391     if( button.GetName() == "radioSelectEnable" && button.IsSelected() == true )
392     {
393       mUpdateButton.SetDisabled( false );
394
395       mRadioButtonImage1.SetDisabled( false );
396       mRadioButtonImage2.SetDisabled( false );
397       mRadioButtonImage3.SetDisabled( false );
398
399       mCheckboxButton1.SetDisabled( false );
400       mCheckboxButton2.SetDisabled( false );
401       mCheckboxButton3.SetDisabled( false );
402
403       mToggleButton.SetDisabled( false );
404     }
405     else if( button.GetName() == "radioSelectDisable" && button.IsSelected() == true )
406     {
407       mUpdateButton.SetDisabled( true );
408
409       mRadioButtonImage1.SetDisabled( true );
410       mRadioButtonImage2.SetDisabled( true );
411       mRadioButtonImage3.SetDisabled( true );
412
413       mCheckboxButton1.SetDisabled( true );
414       mCheckboxButton2.SetDisabled( true );
415       mCheckboxButton3.SetDisabled( true );
416
417       mToggleButton.SetDisabled( true );
418     }
419
420     return true;
421   }
422
423   bool OnButtonClicked(Toolkit::Button button)
424   {
425     if( mRadioButtonImage1.IsSelected() )
426     {
427       mImage.SetImage( BIG_IMAGE_1 );
428     }
429     else if( mRadioButtonImage2.IsSelected() )
430     {
431       mImage.SetImage( BIG_IMAGE_2 );
432     }
433     else if( mRadioButtonImage3.IsSelected() )
434     {
435       mImage.SetImage( BIG_IMAGE_3 );
436     }
437     return true;
438   }
439
440   bool OnCheckBoxesSelected( Toolkit::Button button )
441   {
442     if( button.GetName() == "checkbox1" )
443     {
444       if( button.IsSelected() )
445       {
446         button.SetLabelText("CheckBox1 is selected");
447       }
448       else
449       {
450         button.SetLabelText("CheckBox1 is unselected");
451       }
452     }
453
454     if( button.GetName() == "checkbox2" )
455     {
456       if( button.IsSelected() )
457       {
458         button.SetLabelText("CheckBox2 is selected");
459       }
460       else
461       {
462         button.SetLabelText("CheckBox2 is unselected");
463       }
464     }
465
466     if( button.GetName() == "checkbox3" )
467     {
468       if( button.IsSelected() )
469       {
470         button.SetLabelText("CheckBox3 is selected");
471       }
472       else
473       {
474         button.SetLabelText("CheckBox3 is unselected");
475       }
476     }
477
478     return true;
479   }
480
481 private:
482
483   Application&      mApplication;
484   Toolkit::Control  mView;                              ///< The View instance.
485   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
486   Layer             mContentLayer;                      ///< Content layer
487
488   Toolkit::RadioButton mRadioButtonImage1;
489   Toolkit::RadioButton mRadioButtonImage2;
490   Toolkit::RadioButton mRadioButtonImage3;
491
492   Toolkit::PushButton mUpdateButton;
493   Toolkit::PushButton mToggleButton;
494
495   Toolkit::CheckBoxButton mCheckboxButton1;
496   Toolkit::CheckBoxButton mCheckboxButton2;
497   Toolkit::CheckBoxButton mCheckboxButton3;
498
499   Animation      mAnimation;
500   float          mLastPoint;
501
502   Toolkit::ImageView mImage;
503 };
504
505 void RunTest( Application& application )
506 {
507   ButtonsController test( application );
508
509   application.MainLoop();
510 }
511
512 // Entry point for Linux & Tizen applications
513 //
514 int DALI_EXPORT_API main( int argc, char **argv )
515 {
516   Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
517
518   RunTest( application );
519
520   return 0;
521 }