Changed the theme of the some examples to match the new button style
[platform/core/uifw/dali-demo.git] / examples / buttons / buttons-example.cpp
index 8e1c041..b6249ee 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2022 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  *
  */
 
-#include "shared/view.h"
-#include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/table-view/table-view.h>
+#include <dali/dali.h>
+#include "shared/view.h"
 
 using namespace Dali;
 
-namespace
-{
-// Used to produce visually same dimensions on desktop and device builds
-float ScalePointSize( int pointSize )
-{
-  Dali::Vector2 dpi = Dali::Stage::GetCurrent().GetDpi();
-  float meanDpi = (dpi.height + dpi.width) * 0.5f;
-  return pointSize * meanDpi / 220.0f;
-}
-
-} // namespace
-
 // Define this so that it is interchangeable
 // "DP" stands for Device independent Pixels
-#define DP(x) ScalePointSize(x)
-
+#define DP(x) x
 
 namespace
 {
-
-const char* const BACKGROUND_IMAGE = DALI_IMAGE_DIR "background-gradient.jpg";
-const char* const TOOLBAR_IMAGE = DALI_IMAGE_DIR "top-bar.png";
+const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-default.png";
+const char* const TOOLBAR_IMAGE    = DEMO_IMAGE_DIR "top-bar.png";
 
 const char* const TOOLBAR_TITLE = "Buttons";
 
-const char* const SMALL_IMAGE_1 = DALI_IMAGE_DIR "gallery-small-14.jpg";
-const char* const BIG_IMAGE_1 = DALI_IMAGE_DIR "gallery-large-4.jpg";
-
-const char* const SMALL_IMAGE_2 = DALI_IMAGE_DIR "gallery-small-20.jpg";
-const char* const BIG_IMAGE_2 = DALI_IMAGE_DIR "gallery-large-11.jpg";
+const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg";
+const char* const BIG_IMAGE_1   = DEMO_IMAGE_DIR "gallery-large-4.jpg";
 
-const char* const SMALL_IMAGE_3 = DALI_IMAGE_DIR "gallery-small-25.jpg";
-const char* const BIG_IMAGE_3 = DALI_IMAGE_DIR "gallery-large-13.jpg";
+const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-20.jpg";
+const char* const BIG_IMAGE_2   = DEMO_IMAGE_DIR "gallery-large-11.jpg";
 
-const char* const ENABLED_IMAGE = DALI_IMAGE_DIR "item-select-check.png";
+const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-25.jpg";
+const char* const BIG_IMAGE_3   = DEMO_IMAGE_DIR "gallery-large-13.jpg";
 
-const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
-const char* const PUSHBUTTON_DISABLED_IMAGE = DALI_IMAGE_DIR "button-disabled.9.png";
-const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
+const char* const ENABLED_IMAGE = DEMO_IMAGE_DIR "item-select-check.png";
 
-const char* const CHECKBOX_UNSELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-unselected.png";
-const char* const CHECKBOX_SELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-selected.png";
-
-const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
+const Vector4 BACKGROUND_COLOUR(0.25f, 0.25f, 0.25f, 0.15f);
 
 // Layout sizes
-const int RADIO_LABEL_THUMBNAIL_SIZE = 48;
-const int RADIO_IMAGE_SPACING = 8;
-const int BUTTON_HEIGHT = 48;
+const int RADIO_LABEL_THUMBNAIL_SIZE       = 50;
+const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
+const int RADIO_IMAGE_SPACING              = 8;
+const int BUTTON_HEIGHT                    = 48;
 
-const int MARGIN_SIZE = 10;
-const int TOP_MARGIN = 85;
-const int GROUP2_HEIGHT = 238;
-const int GROUP1_HEIGHT = 120;
-const int GROUP3_HEIGHT = 190;
-const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
+const int MARGIN_SIZE   = 10;
+const int TOP_MARGIN    = 85;
 
-}  // namespace
+} // namespace
 
 /** This example shows how to create and use different buttons.
  *
@@ -88,15 +65,14 @@ const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
  *    Selecting one of these will enable/disable the image loading push button
  * 4. A group of check boxes
  */
-class ButtonsController: public ConnectionTracker
+class ButtonsController : public ConnectionTracker
 {
- public:
-
-  ButtonsController( Application& application )
-    : mApplication( application )
+public:
+  ButtonsController(Application& application)
+  : mApplication(application)
   {
     // Connect to the Application's Init signal
-    mApplication.InitSignal().Connect( this, &ButtonsController::Create );
+    mApplication.InitSignal().Connect(this, &ButtonsController::Create);
   }
 
   ~ButtonsController()
@@ -104,258 +80,281 @@ class ButtonsController: public ConnectionTracker
     // Nothing to do here
   }
 
-  void Create( Application& application )
+  void Create(Application& application)
   {
     // The Init signal is received once (only) during the Application lifetime
 
     // Respond to key events
-    Stage::GetCurrent().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
+    application.GetWindow().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
 
     // Creates a default view with a default tool bar.
-    // The view is added to the stage.
-    mContentLayer = DemoHelper::CreateView( application,
-                                            mView,
-                                            mToolBar,
-                                            BACKGROUND_IMAGE,
-                                            TOOLBAR_IMAGE,
-                                            TOOLBAR_TITLE );
+    // The view is added to the window.
+    mContentLayer = DemoHelper::CreateView(application,
+                                           mView,
+                                           mToolBar,
+                                           BACKGROUND_IMAGE,
+                                           TOOLBAR_IMAGE,
+                                           TOOLBAR_TITLE);
+
+    Toolkit::TableView contentTable = Toolkit::TableView::New(4, 1);
+    contentTable.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    contentTable.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    contentTable.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+    contentTable.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+    contentTable.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE * 0.5f));
+
+    for(unsigned int i = 0; i < contentTable.GetRows(); ++i)
+    {
+      contentTable.SetFitHeight(i);
+    }
+
+    contentTable.SetProperty(Actor::Property::POSITION, Vector2(0.0f, TOP_MARGIN));
 
-    int yPos = TOP_MARGIN + MARGIN_SIZE;
+    mContentLayer.Add(contentTable);
 
     // Image selector radio group
-    Actor radioGroup2Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
-    radioGroup2Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    radioGroup2Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    radioGroup2Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
-    radioGroup2Background.SetSize( DP(348), DP(GROUP2_HEIGHT) );
-    mContentLayer.Add( radioGroup2Background );
+    Toolkit::TableView radioGroup2Background = Toolkit::TableView::New(2, 2);
+    radioGroup2Background.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    radioGroup2Background.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    radioGroup2Background.SetBackgroundColor(BACKGROUND_COLOUR);
+    radioGroup2Background.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
+    radioGroup2Background.SetFitHeight(0);
+    radioGroup2Background.SetFitHeight(1);
+    radioGroup2Background.SetFitWidth(0);
+
+    contentTable.Add(radioGroup2Background);
+
+    Toolkit::TableView radioButtonsGroup2 = Toolkit::TableView::New(3, 1);
+    radioButtonsGroup2.SetCellPadding(Size(0.0f, MARGIN_SIZE * 0.5f));
+    radioButtonsGroup2.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+    for(unsigned int i = 0; i < radioButtonsGroup2.GetRows(); ++i)
+    {
+      radioButtonsGroup2.SetFitHeight(i);
+    }
+    radioButtonsGroup2.SetFitWidth(0);
 
-    Actor radioButtonsGroup2 = Actor::New();
-    radioButtonsGroup2.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    radioButtonsGroup2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    radioButtonsGroup2.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
-    radioButtonsGroup2.SetSize( DP(100), DP(160) );
+    radioGroup2Background.AddChild(radioButtonsGroup2, Toolkit::TableView::CellPosition(0, 0));
 
-    radioGroup2Background.Add( radioButtonsGroup2 );
+    // TableView to lay out 3x Radio buttons on the left, and 3x Image thumbnails on the right.
+    Toolkit::TableView imageSelectTableView = Toolkit::TableView::New(3, 2);
+    imageSelectTableView.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+    imageSelectTableView.SetFitHeight(0);
+    imageSelectTableView.SetFitHeight(1);
+    imageSelectTableView.SetFitHeight(2);
+    imageSelectTableView.SetFitWidth(0);
+    imageSelectTableView.SetFitWidth(1);
+    imageSelectTableView.SetCellPadding(Vector2(6.0f, 0.0f));
+
+    radioButtonsGroup2.Add(imageSelectTableView);
 
     int radioY = 0;
 
     // Radio 1
     {
-      ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_1 ) );
-      imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
-      mRadioButtonImage1 = Dali::Toolkit::RadioButton::New( imageActor );
-      mRadioButtonImage1.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      mRadioButtonImage1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      mRadioButtonImage1.SetPosition( 0, DP(radioY) );
-      mRadioButtonImage1.SetSelected( true );
-
-      radioButtonsGroup2.Add( mRadioButtonImage1 );
+      Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_1);
+      image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
+
+      mRadioButtonImage1 = Dali::Toolkit::RadioButton::New("1");
+      mRadioButtonImage1.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+      mRadioButtonImage1.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+      mRadioButtonImage1.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
+      mRadioButtonImage1.SetProperty(Toolkit::Button::Property::SELECTED, true);
+
+      imageSelectTableView.AddChild(mRadioButtonImage1, Toolkit::TableView::CellPosition(0, 0));
+      imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(0, 1));
     }
 
     // Radio 2
     {
       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 
-      ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_2 ) );
-      imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+      Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_2);
+      image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
 
-      mRadioButtonImage2 = Dali::Toolkit::RadioButton::New( imageActor );
-      mRadioButtonImage2.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      mRadioButtonImage2.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      mRadioButtonImage2.SetPosition( 0, DP(radioY) );
+      mRadioButtonImage2 = Dali::Toolkit::RadioButton::New("2");
+      mRadioButtonImage2.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+      mRadioButtonImage2.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+      mRadioButtonImage2.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
 
-      radioButtonsGroup2.Add( mRadioButtonImage2 );
+      imageSelectTableView.AddChild(mRadioButtonImage2, Toolkit::TableView::CellPosition(1, 0));
+      imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(1, 1));
     }
 
     // Radio 3
     {
       radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
 
-      ImageActor imageActor = ImageActor::New( ResourceImage::New( SMALL_IMAGE_3 ) );
-      imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+      Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_3);
+      image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
 
-      mRadioButtonImage3 = Dali::Toolkit::RadioButton::New( imageActor );
-      mRadioButtonImage3.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      mRadioButtonImage3.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      mRadioButtonImage3.SetPosition( 0, DP(radioY) );
+      mRadioButtonImage3 = Dali::Toolkit::RadioButton::New("3");
+      mRadioButtonImage3.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+      mRadioButtonImage3.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+      mRadioButtonImage3.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
 
-      radioButtonsGroup2.Add( mRadioButtonImage3 );
+      imageSelectTableView.AddChild(mRadioButtonImage3, Toolkit::TableView::CellPosition(2, 0));
+      imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(2, 1));
     }
 
     // Create select button
     mUpdateButton = Toolkit::PushButton::New();
-    mUpdateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
-    mUpdateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-    mUpdateButton.SetPosition( 0, DP(MARGIN_SIZE) );
-    mUpdateButton.SetLabel("Select");
-    mUpdateButton.SetSize( DP(100), DP(BUTTON_HEIGHT) );
+    mUpdateButton.SetProperty(Toolkit::Button::Property::LABEL, "Select");
+    mUpdateButton.SetProperty(Dali::Actor::Property::NAME, "selectButton");
+    mUpdateButton.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
 
-    mUpdateButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    mUpdateButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-    mUpdateButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
+    mUpdateButton.ClickedSignal().Connect(this, &ButtonsController::OnButtonClicked);
 
-    mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
+    radioGroup2Background.AddChild(mUpdateButton, Toolkit::TableView::CellPosition(1, 0));
 
-    radioButtonsGroup2.Add(mUpdateButton);
-
-    // ImageActor to display selected image
-    mBigImage1 = ResourceImage::New( BIG_IMAGE_1 );
-    mBigImage2 = ResourceImage::New( BIG_IMAGE_2 );
-    mBigImage3 = ResourceImage::New( BIG_IMAGE_3 );
-
-    mImage = ImageActor::New( mBigImage1 );
-    mImage.SetParentOrigin( ParentOrigin::TOP_RIGHT );
-    mImage.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    mImage.SetPosition( DP(MARGIN_SIZE), 0 );
-    mImage.SetSize( DP(218), DP(218) );
-    radioButtonsGroup2.Add( mImage );
+    // ImageView to display selected image
+    mImage = Toolkit::ImageView::New(BIG_IMAGE_1);
+    mImage.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS);
+    mImage.SetProperty(Actor::Property::SIZE_SCALE_POLICY, SizeScalePolicy::FIT_WITH_ASPECT_RATIO);
+    radioGroup2Background.AddChild(mImage, Toolkit::TableView::CellPosition(0, 1, 2, 1));
 
     // The enable/disable radio group
-    yPos += GROUP2_HEIGHT + MARGIN_SIZE;
+    Toolkit::TableView radioGroup1Background = Toolkit::TableView::New(1, 1);
+    radioGroup1Background.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    radioGroup1Background.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    radioGroup1Background.SetBackgroundColor(BACKGROUND_COLOUR);
+    radioGroup1Background.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
+    radioGroup1Background.SetFitHeight(0);
 
-    Actor radioGroup1Background = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
-    radioGroup1Background.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    radioGroup1Background.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    radioGroup1Background.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
-    radioGroup1Background.SetSize( DP(348), DP(GROUP1_HEIGHT) );
-    mContentLayer.Add( radioGroup1Background );
+    contentTable.Add(radioGroup1Background);
 
     // Radio group
-    Actor radioButtonsGroup1 = Actor::New();
-    radioButtonsGroup1.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    radioButtonsGroup1.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    radioButtonsGroup1.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
+    Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New(2, 1);
+    radioButtonsGroup1.SetCellPadding(Size(0.0f, MARGIN_SIZE * 0.5f));
+    radioButtonsGroup1.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+    for(unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i)
+    {
+      radioButtonsGroup1.SetFitHeight(i);
+    }
+    radioButtonsGroup1.SetFitWidth(0);
 
-    radioGroup1Background.Add( radioButtonsGroup1 );
+    radioGroup1Background.Add(radioButtonsGroup1);
 
-    // First radio button
-    {
-      Toolkit::TableView tableView = Toolkit::TableView::New( 1, 2 );
-      tableView.SetSize( DP(260), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+    // TableView to lay out 2x Radio buttons on the left, and 1x Tick image on the right.
+    Toolkit::TableView tableView = Toolkit::TableView::New(2, 2);
+    tableView.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
+    tableView.SetFitHeight(0);
+    tableView.SetFitHeight(1);
+    tableView.SetFitWidth(0);
+    tableView.SetFitWidth(1);
+
+    Toolkit::TextLabel textLabel = Toolkit::TextLabel::New("Select enabled");
+    textLabel.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH);
+    textLabel.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT);
+    textLabel.SetProperty(Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER");
+
+    Toolkit::ImageView image = Toolkit::ImageView::New(ENABLED_IMAGE);
+    image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
+    image.SetProperty(Actor::Property::PADDING, Padding(DP(20.0f), 0.0f, 0.0f, 0.0f));
+    tableView.AddChild(image, Toolkit::TableView::CellPosition(0, 1));
 
-      ImageActor imageActor = ImageActor::New( ResourceImage::New( ENABLED_IMAGE ) );
-      imageActor.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
-      tableView.AddChild( imageActor, Toolkit::TableView::CellPosition( 0, 1 ) );
-      tableView.SetFixedWidth( 1, DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+    radioButtonsGroup1.Add(tableView);
 
-      Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( tableView );
-      radioButton.SetName( "radio-select-enable" );
-      radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      radioButton.SetPosition( 0, 0 );
-      radioButton.SetSelected( true );
+    // First radio button
+    {
+      Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New("Select enabled");
+      radioButton.SetProperty(Dali::Actor::Property::NAME, "radioSelectEnable");
+      radioButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+      radioButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+      radioButton.SetProperty(Actor::Property::POSITION, Vector2(0, 0));
+      radioButton.SetProperty(Toolkit::Button::Property::SELECTED, true);
 
-      radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
+      radioButton.StateChangedSignal().Connect(this, &ButtonsController::EnableSelectButton);
 
-      radioButtonsGroup1.Add( radioButton );
+      tableView.AddChild(radioButton, Toolkit::TableView::CellPosition(0, 0));
     }
 
     // Second radio button
     {
-      Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New( "Select disabled" );
-      radioButton.SetName( "radio-select-disable" );
-      radioButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      radioButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      radioButton.SetPosition( 0, DP(50) );
+      Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New("Select disabled");
+      radioButton.SetProperty(Dali::Actor::Property::NAME, "radioSelectDisable");
+      radioButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
+      radioButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
+      radioButton.SetProperty(Actor::Property::POSITION, Vector2(0, DP(50)));
 
-      radioButton.StateChangedSignal().Connect( this, &ButtonsController::EnableSelectButton );
+      radioButton.StateChangedSignal().Connect(this, &ButtonsController::EnableSelectButton);
 
-      radioButtonsGroup1.Add( radioButton );
+      tableView.AddChild(radioButton, Toolkit::TableView::CellPosition(1, 0));
     }
 
     // CheckBoxes
-    yPos += GROUP1_HEIGHT + MARGIN_SIZE;
-
-    Actor checkBoxBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
-    checkBoxBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    checkBoxBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    checkBoxBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
-    checkBoxBackground.SetSize( DP(430), DP(GROUP3_HEIGHT) );
-    mContentLayer.Add( checkBoxBackground );
+    Toolkit::TableView checkBoxBackground = Toolkit::TableView::New(3, 1);
+    checkBoxBackground.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    checkBoxBackground.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    checkBoxBackground.SetBackgroundColor(BACKGROUND_COLOUR);
+    checkBoxBackground.SetCellPadding(Size(MARGIN_SIZE / 2.0f, MARGIN_SIZE / 2.0f));
 
-    Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
-    Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
+    for(unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i)
+    {
+      checkBoxBackground.SetFitHeight(i);
+    }
 
-    int checkYPos = MARGIN_SIZE;
+    contentTable.Add(checkBoxBackground);
 
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox1" );
-      checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
-      checkBox.SetParentOrigin( ParentOrigin::TOP_LEFT );
-      checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox1 is unselected" );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      mCheckboxButton1 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton1.SetProperty(Dali::Actor::Property::NAME, "checkbox1");
+      mCheckboxButton1.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is unselected");
+      mCheckboxButton1.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
+      mCheckboxButton1.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+
+      checkBoxBackground.Add(mCheckboxButton1);
     }
 
-    checkYPos += 60;
+    {
+      mCheckboxButton2 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton2.SetProperty(Dali::Actor::Property::NAME, "checkbox2");
+      mCheckboxButton2.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is selected");
+      mCheckboxButton2.SetProperty(Toolkit::Button::Property::SELECTED, true);
+      mCheckboxButton2.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
+      mCheckboxButton2.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+
+      checkBoxBackground.Add(mCheckboxButton2);
+    }
 
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox2" );
-      checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
-      checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox2 is selected" );
-      checkBox.SetSelected( true );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      mCheckboxButton3 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton3.SetProperty(Dali::Actor::Property::NAME, "checkbox3");
+      mCheckboxButton3.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is unselected");
+      mCheckboxButton3.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
+      mCheckboxButton3.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+
+      checkBoxBackground.Add(mCheckboxButton3);
     }
 
-    checkYPos += 60;
+    // Create togglabe button
+    Toolkit::TableView toggleBackground = Toolkit::TableView::New(3, 1);
+    toggleBackground.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    toggleBackground.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    toggleBackground.SetBackgroundColor(BACKGROUND_COLOUR);
+    toggleBackground.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
 
+    for(unsigned int i = 0; i < toggleBackground.GetRows(); ++i)
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox3" );
-      checkBox.SetPosition( DP(MARGIN_SIZE), DP(checkYPos) );
-      checkBox.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox3 is unselected" );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      toggleBackground.SetFitHeight(i);
     }
 
-    // Create togglabe button
-    yPos += GROUP3_HEIGHT + MARGIN_SIZE;
-
-    Actor toggleBackground = Toolkit::CreateSolidColorActor( BACKGROUND_COLOUR );
-    toggleBackground.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    toggleBackground.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    toggleBackground.SetPosition( DP(MARGIN_SIZE), DP(yPos) );
-    toggleBackground.SetSize( DP(150 + MARGIN_SIZE * 2), DP(GROUP4_HEIGHT) );
-    mContentLayer.Add( toggleBackground );
-
-    Toolkit::PushButton toggleButton = Toolkit::PushButton::New();
-    toggleButton.SetTogglableButton( true );
-    toggleButton.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    toggleButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    toggleButton.SetPosition( DP(MARGIN_SIZE), DP(MARGIN_SIZE) );
-    toggleButton.SetLabel( "Unselected" );
-    toggleButton.SetSize( DP(150), DP(BUTTON_HEIGHT) );
-
-    toggleButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    toggleButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-    toggleButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-
-    toggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
-
-    toggleBackground.Add( toggleButton );
+    contentTable.Add(toggleBackground);
+
+    mToggleButton = Toolkit::PushButton::New();
+    mToggleButton.SetProperty(Toolkit::Button::Property::TOGGLABLE, true);
+    mToggleButton.SetProperty(Toolkit::Button::Property::LABEL, "Unselected");
+    mToggleButton.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    mToggleButton.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    mToggleButton.StateChangedSignal().Connect(this, &ButtonsController::OnButtonSelected);
+
+    toggleBackground.Add(mToggleButton);
   }
 
-  void OnKeyEvent( const KeyEvent& event )
+  void OnKeyEvent(const KeyEvent& event)
   {
-    if( event.state == KeyEvent::Down )
+    if(event.GetState() == KeyEvent::DOWN)
     {
-      if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
+      if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK))
       {
         // Exit application when click back or escape.
         mApplication.Quit();
@@ -363,33 +362,60 @@ class ButtonsController: public ConnectionTracker
     }
   }
 
-  bool OnButtonSelected( Toolkit::Button button )
+  bool OnButtonSelected(Toolkit::Button button)
   {
-    Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast( button );
-    if( pushButton )
+    Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast(button);
+    if(pushButton)
     {
-      if( button.IsSelected() )
+      bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
+      if(isSelected)
       {
-        pushButton.SetLabel( "Selected" );
+        pushButton.SetProperty(Toolkit::Button::Property::LABEL, "Selected");
       }
       else
       {
-        pushButton.SetLabel( "Unselected" );
+        pushButton.SetProperty(Toolkit::Button::Property::LABEL, "Unselected");
       }
     }
 
     return true;
   }
 
-  bool EnableSelectButton( Toolkit::Button button )
+  bool EnableSelectButton(Toolkit::Button button)
   {
-    if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
+    bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
+    if(!isSelected)
     {
-      mUpdateButton.SetDisabled( false );
+      return true;
     }
-    else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
+
+    if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "radioSelectEnable")
     {
-      mUpdateButton.SetDisabled( true );
+      mUpdateButton.SetProperty(Toolkit::Button::Property::DISABLED, false);
+
+      mRadioButtonImage1.SetProperty(Toolkit::Button::Property::DISABLED, false);
+      mRadioButtonImage2.SetProperty(Toolkit::Button::Property::DISABLED, false);
+      mRadioButtonImage3.SetProperty(Toolkit::Button::Property::DISABLED, false);
+
+      mCheckboxButton1.SetProperty(Toolkit::Button::Property::DISABLED, false);
+      mCheckboxButton2.SetProperty(Toolkit::Button::Property::DISABLED, false);
+      mCheckboxButton3.SetProperty(Toolkit::Button::Property::DISABLED, false);
+
+      mToggleButton.SetProperty(Toolkit::Button::Property::DISABLED, false);
+    }
+    else if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "radioSelectDisable")
+    {
+      mUpdateButton.SetProperty(Toolkit::Button::Property::DISABLED, true);
+
+      mRadioButtonImage1.SetProperty(Toolkit::Button::Property::DISABLED, true);
+      mRadioButtonImage2.SetProperty(Toolkit::Button::Property::DISABLED, true);
+      mRadioButtonImage3.SetProperty(Toolkit::Button::Property::DISABLED, true);
+
+      mCheckboxButton1.SetProperty(Toolkit::Button::Property::DISABLED, true);
+      mCheckboxButton2.SetProperty(Toolkit::Button::Property::DISABLED, true);
+      mCheckboxButton3.SetProperty(Toolkit::Button::Property::DISABLED, true);
+
+      mToggleButton.SetProperty(Toolkit::Button::Property::DISABLED, true);
     }
 
     return true;
@@ -397,59 +423,89 @@ class ButtonsController: public ConnectionTracker
 
   bool OnButtonClicked(Toolkit::Button button)
   {
-    if( mRadioButtonImage1.IsSelected() )
+    if(mRadioButtonImage1.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
     {
-      mImage.SetImage( mBigImage1 );
+      mImage.SetImage(BIG_IMAGE_1);
     }
-    else if( mRadioButtonImage2.IsSelected() )
+    else if(mRadioButtonImage2.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
     {
-      mImage.SetImage( mBigImage2 );
+      mImage.SetImage(BIG_IMAGE_2);
     }
-    else if( mRadioButtonImage3.IsSelected() )
+    else if(mRadioButtonImage3.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
     {
-      mImage.SetImage( mBigImage3 );
+      mImage.SetImage(BIG_IMAGE_3);
     }
     return true;
   }
 
-  bool OnCheckBoxesSelected( Toolkit::Button button )
+  bool OnCheckBoxesSelected(Toolkit::Button button)
   {
+    bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
+    if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox1")
+    {
+      if(isSelected)
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is selected");
+      }
+      else
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is unselected");
+      }
+    }
+
+    if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox2")
+    {
+      if(isSelected)
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is selected");
+      }
+      else
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is unselected");
+      }
+    }
+
+    if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox3")
+    {
+      if(isSelected)
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is selected");
+      }
+      else
+      {
+        button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is unselected");
+      }
+    }
+
     return true;
   }
 
- private:
-
-  Application&      mApplication;
-  Toolkit::View     mView;                              ///< The View instance.
-  Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
-  Layer             mContentLayer;                      ///< Content layer
+private:
+  Application&     mApplication;
+  Toolkit::Control mView;         ///< The View instance.
+  Toolkit::ToolBar mToolBar;      ///< The View's Toolbar.
+  Layer            mContentLayer; ///< Content layer
 
   Toolkit::RadioButton mRadioButtonImage1;
   Toolkit::RadioButton mRadioButtonImage2;
   Toolkit::RadioButton mRadioButtonImage3;
 
   Toolkit::PushButton mUpdateButton;
+  Toolkit::PushButton mToggleButton;
 
-  Image mBigImage1;
-  Image mBigImage2;
-  Image mBigImage3;
-  ImageActor mImage;
-};
+  Toolkit::CheckBoxButton mCheckboxButton1;
+  Toolkit::CheckBoxButton mCheckboxButton2;
+  Toolkit::CheckBoxButton mCheckboxButton3;
 
-void RunTest( Application& application )
-{
-  ButtonsController test( application );
+  Animation mAnimation;
 
-  application.MainLoop();
-}
+  Toolkit::ImageView mImage;
+};
 
-// Entry point for Linux & Tizen applications
-//
-int main( int argc, char **argv )
+int DALI_EXPORT_API main(int argc, char** argv)
 {
-  Application application = Application::New( &argc, &argv );
-
-  RunTest( application );
-
+  Application       application = Application::New(&argc, &argv, DEMO_THEME_PATH);
+  ButtonsController test(application);
+  application.MainLoop();
   return 0;
 }