Merge "DALi Version 1.0.47" into devel/master
[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 = DALI_IMAGE_DIR "background-gradient.jpg";
33 const char* const TOOLBAR_IMAGE = DALI_IMAGE_DIR "top-bar.png";
34
35 const char* const TOOLBAR_TITLE = "Buttons";
36
37 const char* const SMALL_IMAGE_1 = DALI_IMAGE_DIR "gallery-small-14.jpg";
38 const char* const BIG_IMAGE_1 = DALI_IMAGE_DIR "gallery-large-4.jpg";
39
40 const char* const SMALL_IMAGE_2 = DALI_IMAGE_DIR "gallery-small-20.jpg";
41 const char* const BIG_IMAGE_2 = DALI_IMAGE_DIR "gallery-large-11.jpg";
42
43 const char* const SMALL_IMAGE_3 = DALI_IMAGE_DIR "gallery-small-25.jpg";
44 const char* const BIG_IMAGE_3 = DALI_IMAGE_DIR "gallery-large-13.jpg";
45
46 const char* const ENABLED_IMAGE = DALI_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_IMAGE_SPACING = 8;
53 const int BUTTON_HEIGHT = 48;
54
55 const int MARGIN_SIZE = 10;
56 const int TOP_MARGIN = 85;
57 const int GROUP2_HEIGHT = 238;
58 const int GROUP1_HEIGHT = 120;
59 const int GROUP3_HEIGHT = 190;
60 const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
61
62 }  // namespace
63
64 /** This example shows how to create and use different buttons.
65  *
66  * 1. First group of radio buttons with image actor labels selects an image to load
67  * 2. A push button loads the selected thumbnail image into the larger image pane
68  * 3. Second group of radio buttons with a table view label containing a text view and image view, and a normal text view.
69  *    Selecting one of these will enable/disable the image loading push button
70  * 4. A group of check boxes
71  */
72 class ButtonsController: public ConnectionTracker
73 {
74  public:
75
76   ButtonsController( Application& application )
77     : mApplication( application )
78   {
79     // Connect to the Application's Init signal
80     mApplication.InitSignal().Connect( this, &ButtonsController::Create );
81   }
82
83   ~ButtonsController()
84   {
85     // Nothing to do here
86   }
87
88   void Create( Application& application )
89   {
90     // The Init signal is received once (only) during the Application lifetime
91
92     // Respond to key events
93     Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
94
95     // Creates a default view with a default tool bar.
96     // The view is added to the stage.
97     mContentLayer = DemoHelper::CreateView( application,
98                                             mView,
99                                             mToolBar,
100                                             BACKGROUND_IMAGE,
101                                             TOOLBAR_IMAGE,
102                                             TOOLBAR_TITLE );
103
104     Toolkit::TableView contentTable = Toolkit::TableView::New( 4, 1 );
105     contentTable.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
106     contentTable.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
107     contentTable.SetAnchorPoint( AnchorPoint::TOP_LEFT );
108     contentTable.SetParentOrigin( ParentOrigin::TOP_LEFT );
109     contentTable.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE * 0.5f ) );
110 //    contentTable.TouchedSignal().Connect( this, &ButtonsController::OnTouchEvent );
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     int radioY = 0;
145
146     // Radio 1
147     {
148       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_1 ) );
149       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
150       mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( imageActor );
151       mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
152       mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
153       mRadioButtonImage1.SetPosition( 0, DP(radioY) );
154       mRadioButtonImage1.SetSelected( true );
155
156       radioButtonsGroup2.Add( mRadioButtonImage1 );
157     }
158
159     // Radio 2
160     {
161       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
162
163       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_2 ) );
164       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
165
166       mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( imageActor );
167       mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
168       mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
169       mRadioButtonImage2.SetPosition( 0, DP(radioY) );
170
171       radioButtonsGroup2.Add( mRadioButtonImage2 );
172     }
173
174     // Radio 3
175     {
176       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
177
178       ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_3 ) );
179       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
180
181       mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( imageActor );
182       mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
183       mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
184       mRadioButtonImage3.SetPosition( 0, DP(radioY) );
185
186       radioButtonsGroup2.Add( mRadioButtonImage3 );
187     }
188
189     // Create select button
190     mUpdateButton = Toolkit::PushButton::New();
191     mUpdateButton.SetLabel( "Select" );
192     mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
193
194     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
195
196     radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
197
198     // ImageActor to display selected image
199     mBigImage1 = ResourceImage::New( BIG_IMAGE_1 );
200     mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
201     mBigImage3 = ResourceImage::New( BIG_IMAGE_3 );
202
203     mImage = ImageActor::New( mBigImage1 );
204     mImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
205     mImage.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
206     radioGroup2Background.AddChild( mImage, Toolkit::TableView::CellPosition( 0, 1, 2, 1 ) );
207
208     // The enable/disable radio group
209     Toolkit::TableView radioGroup1Background = Toolkit::TableView::New( 1, 1 );
210     radioGroup1Background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
211     radioGroup1Background.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
212     radioGroup1Background.SetBackgroundColor( BACKGROUND_COLOUR );
213     radioGroup1Background.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
214     radioGroup1Background.SetFitHeight( 0 );
215
216     contentTable.Add( radioGroup1Background );
217
218     // Radio group
219     Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New( 2, 1 );
220     radioButtonsGroup1.SetCellPadding( Size( 0.0f, MARGIN_SIZE * 0.5f ) );
221     radioButtonsGroup1.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
222     for( unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i )
223     {
224       radioButtonsGroup1.SetFitHeight( i );
225     }
226     radioButtonsGroup1.SetFitWidth( 0 );
227
228     radioGroup1Background.Add( radioButtonsGroup1 );
229
230     // First radio button
231     {
232       Toolkit::TableView tableView = Toolkit::TableView::New( 1, 2 );
233       tableView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
234       tableView.SetFitHeight( 0 );
235       tableView.SetFitWidth( 0 );
236       tableView.SetFitWidth( 1 );
237
238       Toolkit::TextLabel textLabel = Toolkit::TextLabel::New( "Select enabled" );
239       textLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
240       textLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
241       textLabel.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
242       tableView.AddChild( textLabel, Toolkit::TableView::CellPosition( 0, 0 ) );
243
244       ImageActor imageActor = ImageActor::New( ResourceImage::New( ENABLED_IMAGE ) );
245       imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
246       imageActor.SetPadding( Padding( DP(20.0f), 0.0f, 0.0f, 0.0f ) );
247       tableView.AddChild( imageActor, Toolkit::TableView::CellPosition( 0, 1 ) );
248
249       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( tableView );
250       radioButton.SetName( "radio-select-enable" );
251       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
252       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
253       radioButton.SetPosition( 0, 0 );
254       radioButton.SetSelected( true );
255
256       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
257
258       radioButtonsGroup1.Add( radioButton );
259     }
260
261     // Second radio button
262     {
263       Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
264       radioButton.SetName( "radio-select-disable" );
265       radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
266       radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
267       radioButton.SetPosition( 0, DP(50) );
268
269       radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
270
271       radioButtonsGroup1.Add( radioButton );
272     }
273
274     // CheckBoxes
275     Toolkit::TableView checkBoxBackground = Toolkit::TableView::New( 3, 1 );
276     checkBoxBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
277     checkBoxBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
278     checkBoxBackground.SetBackgroundColor( BACKGROUND_COLOUR );
279     checkBoxBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
280
281     for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
282     {
283       checkBoxBackground.SetFitHeight( i );
284     }
285
286     contentTable.Add( checkBoxBackground );
287
288     {
289       mCheckboxButton1 = Toolkit::CheckBoxButton::New();
290       mCheckboxButton1.SetName( "checkbox1" );
291       mCheckboxButton1.SetLabel( "CheckBox1 is unselected" );
292       mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
293
294       checkBoxBackground.Add( mCheckboxButton1 );
295     }
296
297     {
298       mCheckboxButton2 = Toolkit::CheckBoxButton::New();
299       mCheckboxButton2.SetName( "checkbox2" );
300       mCheckboxButton2.SetLabel( "CheckBox2 is selected" );
301       mCheckboxButton2.SetSelected( true );
302       mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
303
304       checkBoxBackground.Add( mCheckboxButton2 );
305     }
306
307     {
308       mCheckboxButton3 = Toolkit::CheckBoxButton::New();
309       mCheckboxButton3.SetName( "checkbox3" );
310       mCheckboxButton3.SetLabel( "CheckBox3 is unselected" );
311       mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
312
313       checkBoxBackground.Add( mCheckboxButton3 );
314     }
315
316     // Create togglabe button
317     Toolkit::TableView toggleBackground = Toolkit::TableView::New( 3, 1 );
318     toggleBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
319     toggleBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
320     toggleBackground.SetBackgroundColor( BACKGROUND_COLOUR );
321     toggleBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
322
323     for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
324     {
325       toggleBackground.SetFitHeight( i );
326     }
327
328     contentTable.Add( toggleBackground );
329
330     mToggleButton = Toolkit::PushButton::New();
331     mToggleButton.SetTogglableButton( true );
332     mToggleButton.SetLabel( "Unselected" );
333     mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
334     mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
335     mToggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
336
337     toggleBackground.Add( mToggleButton );
338   }
339
340   void OnKeyEvent( const KeyEvent& event )
341   {
342     if( event.state == KeyEvent::Down )
343     {
344       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
345       {
346         // Exit application when click back or escape.
347         mApplication.Quit();
348       }
349     }
350   }
351
352   bool OnButtonSelected( Toolkit::Button button )
353   {
354     Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
355     if( pushButton )
356     {
357       if( button.IsSelected() )
358       {
359         pushButton.SetLabel( "Selected" );
360       }
361       else
362       {
363         pushButton.SetLabel( "Unselected" );
364       }
365     }
366
367     return true;
368   }
369
370   bool EnableSelectButton( Toolkit::Button button )
371   {
372     if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
373     {
374       mUpdateButton.SetDisabled( false );
375
376       mRadioButtonImage1.SetDisabled( false );
377       mRadioButtonImage2.SetDisabled( false );
378       mRadioButtonImage3.SetDisabled( false );
379
380       mCheckboxButton1.SetDisabled( false );
381       mCheckboxButton2.SetDisabled( false );
382       mCheckboxButton3.SetDisabled( false );
383
384       mToggleButton.SetDisabled( false );
385     }
386     else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
387     {
388       mUpdateButton.SetDisabled( true );
389
390       mRadioButtonImage1.SetDisabled( true );
391       mRadioButtonImage2.SetDisabled( true );
392       mRadioButtonImage3.SetDisabled( true );
393
394       mCheckboxButton1.SetDisabled( true );
395       mCheckboxButton2.SetDisabled( true );
396       mCheckboxButton3.SetDisabled( true );
397
398       mToggleButton.SetDisabled( true );
399     }
400
401     return true;
402   }
403
404   bool OnButtonClicked(Toolkit::Button button)
405   {
406     if( mRadioButtonImage1.IsSelected() )
407     {
408       mImage.SetImage( mBigImage1 );
409     }
410     else if( mRadioButtonImage2.IsSelected() )
411     {
412       mImage.SetImage( mBigImage2 );
413     }
414     else if( mRadioButtonImage3.IsSelected() )
415     {
416       mImage.SetImage( mBigImage3 );
417     }
418     return true;
419   }
420
421   bool OnCheckBoxesSelected( Toolkit::Button button )
422   {
423     if( button.GetName() == "checkbox1" )
424     {
425       if( button.IsSelected() )
426       {
427         button.SetLabel("CheckBox1 is selected");
428       }
429       else
430       {
431         button.SetLabel("CheckBox1 is unselected");
432       }
433     }
434
435     if( button.GetName() == "checkbox2" )
436     {
437       if( button.IsSelected() )
438       {
439         button.SetLabel("CheckBox2 is selected");
440       }
441       else
442       {
443         button.SetLabel("CheckBox2 is unselected");
444       }
445     }
446
447     if( button.GetName() == "checkbox3" )
448     {
449       if( button.IsSelected() )
450       {
451         button.SetLabel("CheckBox3 is selected");
452       }
453       else
454       {
455         button.SetLabel("CheckBox3 is unselected");
456       }
457     }
458
459     return true;
460   }
461
462   bool OnTouchEvent( Actor actor, const TouchEvent& event )
463   {
464     if( 1u == event.GetPointCount() )
465     {
466       const TouchPoint::State state = event.GetPoint(0u).state;
467
468       // Clamp to integer values; this is to reduce flicking due to pixel misalignment
469       const float localPoint = static_cast<float>( static_cast<int>( event.GetPoint( 0 ).local.y ) );
470
471       if( TouchPoint::Down == state )
472       {
473         mLastPoint = localPoint;
474         mAnimation = Animation::New( 0.25f );
475       }
476       else if( TouchPoint::Motion == state )
477       {
478         if( mAnimation )
479         {
480           mAnimation.AnimateBy( Property(actor, Actor::Property::POSITION), Vector3( 0.f, localPoint - mLastPoint, 0.f ), AlphaFunction::LINEAR );
481           mAnimation.Play();
482           mLastPoint = localPoint;
483         }
484       }
485     }
486
487     return true;
488   }
489
490  private:
491
492   Application&      mApplication;
493   Toolkit::Control  mView;                              ///< The View instance.
494   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
495   Layer             mContentLayer;                      ///< Content layer
496
497   Toolkit::RadioButton mRadioButtonImage1;
498   Toolkit::RadioButton mRadioButtonImage2;
499   Toolkit::RadioButton mRadioButtonImage3;
500
501   Toolkit::PushButton mUpdateButton;
502   Toolkit::PushButton mToggleButton;
503
504   Toolkit::CheckBoxButton mCheckboxButton1;
505   Toolkit::CheckBoxButton mCheckboxButton2;
506   Toolkit::CheckBoxButton mCheckboxButton3;
507
508   Animation      mAnimation;
509   float          mLastPoint;
510
511   Image mBigImage1;
512   Image mBigImage2;
513   Image mBigImage3;
514   ImageActor mImage;
515 };
516
517 void RunTest( Application& application )
518 {
519   ButtonsController test( application );
520
521   application.MainLoop();
522 }
523
524 // Entry point for Linux & Tizen applications
525 //
526 int main( int argc, char **argv )
527 {
528   Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
529
530   RunTest( application );
531
532   return 0;
533 }