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