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