2 * Copyright (c) 2014 Samsung Electronics Co., Ltd.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
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>
25 // Define this so that it is interchangeable
26 // "DP" stands for Device independent Pixels
33 const char* const BACKGROUND_IMAGE = DALI_IMAGE_DIR "background-gradient.jpg";
34 const char* const TOOLBAR_IMAGE = DALI_IMAGE_DIR "top-bar.png";
36 const char* const TOOLBAR_TITLE = "Buttons";
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";
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";
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";
47 const char* const ENABLED_IMAGE = DALI_IMAGE_DIR "item-select-check.png";
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";
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";
56 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
59 const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
60 const int RADIO_IMAGE_SPACING = 8;
61 const int BUTTON_HEIGHT = 48;
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;
72 /** This example shows how to create and use different buttons.
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
80 class ButtonsController: public ConnectionTracker
84 ButtonsController( Application& application )
85 : mApplication( application )
87 // Connect to the Application's Init signal
88 mApplication.InitSignal().Connect( this, &ButtonsController::Create );
96 void Create( Application& application )
98 // The Init signal is received once (only) during the Application lifetime
100 // Respond to key events
101 Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
103 // Creates a default view with a default tool bar.
104 // The view is added to the stage.
105 mContentLayer = DemoHelper::CreateView( application,
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 );
120 for( unsigned int i = 0; i < contentTable.GetRows(); ++i )
122 contentTable.SetFitHeight( i );
125 contentTable.SetPosition( 0.0f, TOP_MARGIN );
127 mContentLayer.Add( contentTable );
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 );
139 contentTable.Add( radioGroup2Background );
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 )
146 radioButtonsGroup2.SetFitHeight( i );
148 radioButtonsGroup2.SetFitWidth( 0 );
150 radioGroup2Background.AddChild( radioButtonsGroup2, Toolkit::TableView::CellPosition( 0, 0 ) );
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 );
164 radioButtonsGroup2.Add( mRadioButtonImage1 );
169 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
171 ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_2 ) );
172 imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
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) );
179 radioButtonsGroup2.Add( mRadioButtonImage2 );
184 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
186 ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_3 ) );
187 imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
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) );
194 radioButtonsGroup2.Add( mRadioButtonImage3 );
197 // Create select button
198 mUpdateButton = Toolkit::PushButton::New();
199 mUpdateButton.SetLabel( "Select" );
200 mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
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 ) );
206 mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
208 radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
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 );
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 ) );
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 );
228 contentTable.Add( radioGroup1Background );
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 )
236 radioButtonsGroup1.SetFitHeight( i );
238 radioButtonsGroup1.SetFitWidth( 0 );
240 radioGroup1Background.Add( radioButtonsGroup1 );
242 // First radio button
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 );
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 ) );
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 ) );
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 );
268 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
270 radioButtonsGroup1.Add( radioButton );
273 // Second radio button
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) );
281 radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
283 radioButtonsGroup1.Add( radioButton );
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 ) );
293 for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
295 checkBoxBackground.SetFitHeight( i );
298 contentTable.Add( checkBoxBackground );
300 Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
301 Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
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 );
311 checkBoxBackground.Add( checkBox );
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 );
323 checkBoxBackground.Add( checkBox );
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 );
334 checkBoxBackground.Add( checkBox );
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 ) );
344 for( unsigned int i = 0; i < toggleBackground.GetRows(); ++i )
346 toggleBackground.SetFitHeight( i );
349 contentTable.Add( toggleBackground );
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 );
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 ) );
361 toggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
363 toggleBackground.Add( toggleButton );
366 void OnKeyEvent( const KeyEvent& event )
368 if( event.state == KeyEvent::Down )
370 if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
372 // Exit application when click back or escape.
378 bool OnButtonSelected( Toolkit::Button button )
380 Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
383 if( button.IsSelected() )
385 pushButton.SetLabel( "Selected" );
389 pushButton.SetLabel( "Unselected" );
396 bool EnableSelectButton( Toolkit::Button button )
398 if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
400 mUpdateButton.SetDisabled( false );
402 else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
404 mUpdateButton.SetDisabled( true );
410 bool OnButtonClicked(Toolkit::Button button)
412 if( mRadioButtonImage1.IsSelected() )
414 mImage.SetImage( mBigImage1 );
416 else if( mRadioButtonImage2.IsSelected() )
418 mImage.SetImage( mBigImage2 );
420 else if( mRadioButtonImage3.IsSelected() )
422 mImage.SetImage( mBigImage3 );
427 bool OnCheckBoxesSelected( Toolkit::Button button )
429 if( button.GetName() == "checkbox1" )
431 if( button.IsSelected() )
433 button.SetLabel("CheckBox1 is selected");
437 button.SetLabel("CheckBox1 is unselected");
441 if( button.GetName() == "checkbox2" )
443 if( button.IsSelected() )
445 button.SetLabel("CheckBox2 is selected");
449 button.SetLabel("CheckBox2 is unselected");
453 if( button.GetName() == "checkbox3" )
455 if( button.IsSelected() )
457 button.SetLabel("CheckBox3 is selected");
461 button.SetLabel("CheckBox3 is unselected");
468 bool OnTouchEvent( Actor actor, const TouchEvent& event )
470 if( 1u == event.GetPointCount() )
472 const TouchPoint::State state = event.GetPoint(0u).state;
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 ) );
477 if( TouchPoint::Down == state )
479 mLastPoint = localPoint;
480 mAnimation = Animation::New( 0.25f );
482 else if( TouchPoint::Motion == state )
486 mAnimation.AnimateBy( Property(actor, Actor::Property::POSITION), Vector3( 0.f, localPoint - mLastPoint, 0.f ), AlphaFunction::LINEAR );
488 mLastPoint = localPoint;
498 Application& mApplication;
499 Toolkit::Control mView; ///< The View instance.
500 Toolkit::ToolBar mToolBar; ///< The View's Toolbar.
501 Layer mContentLayer; ///< Content layer
503 Toolkit::RadioButton mRadioButtonImage1;
504 Toolkit::RadioButton mRadioButtonImage2;
505 Toolkit::RadioButton mRadioButtonImage3;
507 Toolkit::PushButton mUpdateButton;
509 Animation mAnimation;
518 void RunTest( Application& application )
520 ButtonsController test( application );
522 application.MainLoop();
525 // Entry point for Linux & Tizen applications
527 int main( int argc, char **argv )
529 Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
531 RunTest( application );