Further Setter/Getter public API removal from Dali::Actor
[platform/core/uifw/dali-demo.git] / examples / buttons / buttons-example.cpp
index 45ef040..a0fae8d 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 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 "shared/view.h"
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.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-gradient.jpg";
+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 CHECKBOX_UNSELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-unselected.png";
-const char* const CHECKBOX_SELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-selected.png";
+const char* const ENABLED_IMAGE = DEMO_IMAGE_DIR "item-select-check.png";
 
 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
 
 // Layout sizes
-const int RADIO_LABEL_THUMBNAIL_SIZE = 48;
+const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
+const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
 const int RADIO_IMAGE_SPACING = 8;
 const int BUTTON_HEIGHT = 48;
 
@@ -120,261 +102,258 @@ class ButtonsController: public ConnectionTracker
                                             TOOLBAR_IMAGE,
                                             TOOLBAR_TITLE );
 
-    int yPos = TOP_MARGIN + MARGIN_SIZE;
+    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 ));
+
+    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 );
+
+    radioGroup2Background.AddChild( radioButtonsGroup2, Toolkit::TableView::CellPosition( 0, 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) );
+    // 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 ) );
 
-    radioGroup2Background.Add( radioButtonsGroup2 );
+    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.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    mUpdateButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-    mUpdateButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
+    mUpdateButton.SetProperty( Toolkit::Button::Property::LABEL, "Select" );
+    mUpdateButton.SetProperty( Dali::Actor::Property::NAME, "selectButton" );
+    mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 
     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
 
-    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 );
+    radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
 
-    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 );
 
+    // 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 ) );
+
+    radioButtonsGroup1.Add( tableView );
+
     // First radio button
     {
-      Toolkit::TableView tableView = Toolkit::TableView::New( 1, 2 );
-      tableView.SetSize( DP(260), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
-
-      Toolkit::TextView textView = Toolkit::TextView::New( "Select enabled" );
-      Toolkit::Alignment alignment = Toolkit::Alignment::New( Toolkit::Alignment::HorizontalLeft );
-      alignment.Add( textView );
-      tableView.AddChild( alignment, Toolkit::TableView::CellPosition( 0, 0 ) );
-
-      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) );
-
-      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 );
+      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 );
 
-      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) );
+      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 );
 
-      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 );
-
-    Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
-    Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
-
-    int checkYPos = MARGIN_SIZE;
+    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 ) );
 
+    for( unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i )
     {
-      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.SetSize( DP(48), DP(48) );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      checkBoxBackground.SetFitHeight( i );
     }
 
-    mCheckBox1State = Toolkit::TextView::New( "CheckBox1 is unselected" );
+    contentTable.Add( checkBoxBackground );
 
-    mCheckBox1State.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    mCheckBox1State.SetPosition( DP(80), DP(checkYPos) );
-
-    checkBoxBackground.Add( mCheckBox1State );
+    {
+      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 );
 
-    checkYPos += 60;
+      checkBoxBackground.Add( mCheckboxButton1 );
+    }
 
     {
-      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.SetSize( DP(48), DP(48) );
-      checkBox.SetSelected( true );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      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 );
     }
 
-    mCheckBox2State = Toolkit::TextView::New( "CheckBox2 is selected" );
-    mCheckBox2State.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    mCheckBox2State.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    mCheckBox2State.SetPosition( DP(80), DP(checkYPos) );
+    {
+      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( mCheckBox2State );
+      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.SetSize( DP(48), DP(48) );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      toggleBackground.SetFitHeight( i );
     }
 
-    mCheckBox3State = Toolkit::TextView::New( "CheckBox3 is unselected" );
-
-    mCheckBox3State.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    mCheckBox3State.SetPosition( DP(80), DP(checkYPos) );
+    contentTable.Add( toggleBackground );
 
-    checkBoxBackground.Add( mCheckBox3State );
+    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 );
 
-    // 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 );
+    toggleBackground.Add( mToggleButton );
   }
 
   void OnKeyEvent( const KeyEvent& event )
@@ -394,13 +373,14 @@ class ButtonsController: public ConnectionTracker
     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" );
       }
     }
 
@@ -409,13 +389,39 @@ class ButtonsController: public ConnectionTracker
 
   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 )
+    {
+      return true;
+    }
+
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == "radioSelectEnable" )
     {
-      mUpdateButton.SetDisabled( false );
+      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.GetName() == "radio-select-disable" && button.IsSelected() == true )
+    else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == "radioSelectDisable" )
     {
-      mUpdateButton.SetDisabled( true );
+      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;
@@ -423,66 +429,67 @@ 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 )
   {
-    if( button.GetName() == "checkbox1" )
+    bool isSelected = button.GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>();
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == "checkbox1" )
     {
-      if( button.IsSelected() )
+      if( isSelected )
       {
-        mCheckBox1State.SetText("CheckBox1 is selected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox1 is selected");
       }
       else
       {
-        mCheckBox1State.SetText("CheckBox1 is unselected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox1 is unselected");
       }
     }
 
-    if( button.GetName() == "checkbox2" )
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == "checkbox2" )
     {
-      if( button.IsSelected() )
+      if( isSelected )
       {
-        mCheckBox2State.SetText("CheckBox2 is selected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox2 is selected");
       }
       else
       {
-        mCheckBox2State.SetText("CheckBox2 is unselected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox2 is unselected");
       }
     }
 
-    if( button.GetName() == "checkbox3" )
+    if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == "checkbox3" )
     {
-      if( button.IsSelected() )
+      if( isSelected )
       {
-        mCheckBox3State.SetText("CheckBox3 is selected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox3 is selected");
       }
       else
       {
-        mCheckBox3State.SetText("CheckBox3 is unselected");
+        button.SetProperty( Toolkit::Button::Property::LABEL, "CheckBox3 is unselected");
       }
     }
 
     return true;
   }
 
- private:
+private:
 
   Application&      mApplication;
-  Toolkit::View     mView;                              ///< The View instance.
+  Toolkit::Control  mView;                              ///< The View instance.
   Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
   Layer             mContentLayer;                      ///< Content layer
 
@@ -491,31 +498,21 @@ class ButtonsController: public ConnectionTracker
   Toolkit::RadioButton mRadioButtonImage3;
 
   Toolkit::PushButton mUpdateButton;
+  Toolkit::PushButton mToggleButton;
+
+  Toolkit::CheckBoxButton mCheckboxButton1;
+  Toolkit::CheckBoxButton mCheckboxButton2;
+  Toolkit::CheckBoxButton mCheckboxButton3;
 
-  Image mBigImage1;
-  Image mBigImage2;
-  Image mBigImage3;
-  ImageActor mImage;
+  Animation      mAnimation;
 
-  Toolkit::TextView mCheckBox1State;
-  Toolkit::TextView mCheckBox2State;
-  Toolkit::TextView mCheckBox3State;
+  Toolkit::ImageView mImage;
 };
 
-void RunTest( Application& application )
+int DALI_EXPORT_API main( int argc, char **argv )
 {
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
   ButtonsController test( application );
-
   application.MainLoop();
-}
-
-// Entry point for Linux & SLP applications
-//
-int main( int argc, char **argv )
-{
-  Application application = Application::New( &argc, &argv );
-
-  RunTest( application );
-
   return 0;
 }