From: Yoonsang Lee Date: Mon, 20 Jul 2015 07:32:24 +0000 (+0900) Subject: [DALi][DOC-213] Update Buttons X-Git-Tag: tizen_3.0/TD_SYNC/20161201~691^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=f6f86b165e81b6b6b4b24f2debd84bd045b52c4a;p=sdk%2Fonline-doc.git [DALi][DOC-213] Update Buttons Signed-off-by: Yoonsang Lee Change-Id: Ic3bfb4a0c7a51467bc5b1cd02bc7196423dff911 --- diff --git a/org.tizen.ui.guides/html/images/checkbox_button.png b/org.tizen.ui.guides/html/images/checkbox_button.png index c716296..496adf3 100755 Binary files a/org.tizen.ui.guides/html/images/checkbox_button.png and b/org.tizen.ui.guides/html/images/checkbox_button.png differ diff --git a/org.tizen.ui.guides/html/images/radio_button.png b/org.tizen.ui.guides/html/images/radio_button.png index 496adf3..c716296 100755 Binary files a/org.tizen.ui.guides/html/images/radio_button.png and b/org.tizen.ui.guides/html/images/radio_button.png differ diff --git a/org.tizen.ui.guides/html/native/dali/buttons_n.htm b/org.tizen.ui.guides/html/native/dali/buttons_n.htm index 6aed365..bf725f4 100755 --- a/org.tizen.ui.guides/html/native/dali/buttons_n.htm +++ b/org.tizen.ui.guides/html/native/dali/buttons_n.htm @@ -85,40 +85,41 @@

Figure: Push button

Push button

-

By default, a push button emits a Button::PressedSignal() signal when the button is pressed, a Button::ClickedSignal() signal when clicked, and a Button::ReleasedSignal() signal when released, or of the touch point leaves the boundary of the button. The following is a basic example of implementing a push button:

+

A push button emits a Button::PressedSignal() signal when the button is pressed, a Button::ClickedSignal() signal when clicked, and a Button::ReleasedSignal() signal when released, or of the touch point leaves the boundary of the button. A basic push button example is as follows:

-
class ButtonsController: public ConnectionTracker
+
+class ButtonController : public ConnectionTracker
 {
-   ButtonsController(Application& application)
-      : mApplication(application)
-   {
-      mApplication.InitSignal().Connect(this, &ButtonsController::Create);
-   }
-
-   void Create(Application& application)
-   {
-      Stage stage = Stage::GetCurrent();
-
-      PushButton button = PushButton::New();
-      button.SetLabel("Select");
-      button.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension:;ALL_DIMENSIONS);
-      button.SetSelectedImage(Dali::ResourceImage::New("pressedImage.png"));
-      button.SetDisabledImage(Dali::ResourceImage::New("disabledImage.png"));
-      button.SetButtonImage(Dali::ResourceImage::New("buttonImage.png"));
-
-      button.ClickedSignal().Connect(this, &ButtonsController::OnButtonClicked);
-
-      stage.Add(button);
-   }
-
-   bool OnButtonClicked(Toolkit::Button button)
-   {
-      // Application developer code
-      return true;
-   }
-
-   Application& mApplication;
-}

+public:
+  ButtonController( Application& application ): mApplication( application )
+  {
+    mApplication.InitSignal().Connect( this, &ButtonController::Create );
+  }
+  void Create( Application& application )
+  {
+    PushButton button = PushButton::New();
+    button.SetLabel( "Select" );
+    button.SetParentOrigin( ParentOrigin::CENTER );
+    button.ClickedSignal().Connect( this, &ButtonController::OnButtonClicked );
+    Stage::GetCurrent().Add( button );
+  }
+  bool OnButtonClicked( Toolkit::Button button )
+  {
+    cout << "OnButtonClicked" << endl;
+    return true;
+  }
+private:
+  Application&  mApplication;
+};
+
+int main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+  ButtonController test( application );
+  application.MainLoop();
+  return 0;
+}
+

CheckBox Button

@@ -127,84 +128,27 @@

Figure: Checkbox button

Checkbox button

-

By default, a checkbox button emits a Button::ClickedSignal() signal when the button changes its state to selected or unselected. The following is a basic example of implementing a checkbox button:

- -
class ButtonsController: public ConnectionTracker
-{
-   ButtonsController(Application& application)
-      : mApplication(application)
-   {
-      mApplication.InitSignal().Connect(this, &ButtonsController::Create);
-   }
-
-   void Create(Application& application)
-   {
-      Stage stage = Stage::GetCurrent();
-
-      Actor checkBoxBackground = Actor::New();
-      stage.Add(checkBoxBackground);
-      checkBoxBackground.SetParentOrigin(ParentOrigin::TOP_LEFT);
-      checkBoxBackground.SetAnchorPoint(ParentOrigin::TOP_LEFT);
-      checkBoxBackground.SetPosition(0.0f, 0.0f);
-      checkBoxBackground.SetSize(400.0f, 400.0);
-
-      Dali::Image unselected = Dali::ResourceImage::New("UnSelectedImage.png");
-      Dali::Image selected = Dali::ResourceImage::New("SelectedImage.png");
-
-      {
-         Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-          checkBox.SetName("checkbox1");
-           checkBox.SetBackgroundImage(unselected);
-           checkBox.SetSelectedImage(selected);
-           checkBox.SetLabel("CheckBox1 is unselected");
-           checkBox.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
-
-           checkBoxBackground.Add(checkBox);
-      }
-
-      {
-           Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-         checkBox.SetName("checkbox2");
-         checkBox.SetBackgroundImage(unselected);
-         checkBox.SetSelectedImage(selected);
-         checkBox.SetLabel("CheckBox2 is selected");
-         checkBox.SetSelected(true);
-         checkBox.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
-
-         checkBoxBackground.Add(checkBox);
-      }
-   }
-
-   bool OnCheckBoxesSelected(Toolkit::Button button)
-   {
-      if(button.GetName() == "checkbox1")
-      {
-         if(button.IsSelected())
-         {
-            button.SetLabel("CheckBox1 is selected");
-         }
-         else
-         {
-            button.SetLabel("CheckBox1 is unselected");
-         }
-      }
-
-      if(button.GetName() == "checkbox2")
-      {
-         if(button.IsSelected())
-         {
-            button.SetLabel("CheckBox2 is selected");
-         }
-         else
-         {
-            button.SetLabel("CheckBox2 is unselected");
-         }
-      }
-      return true;
-   }
-
-   Application& mApplication;
-}
+

A checkbox button emits all of four button input sinals, but usually you can just use Button::StateChangedSignal() signal to check the button changes its state to selected or unselected. A basic checkbox button example is as follows:

+ +
+// ... same to the push button example
+  void Create( Application& application )
+  {
+    CheckBoxButton button = CheckBoxButton::New();
+    button.SetLabel( "Select" );
+    button.SetSize( 100,40 );
+    button.SetBackgroundColor( Vector4( 1,0,0,1 ) );
+    button.SetParentOrigin( ParentOrigin::CENTER );
+    button.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
+    Stage::GetCurrent().Add( button );
+  }
+  bool OnButtonStateChanged( Toolkit::Button button )
+  {
+    cout << "OnButtonStateChanged " << button.IsSelected() << endl;
+    return true;
+  }
+// ... same to the push button example
+

Radio Button

@@ -213,44 +157,38 @@

Figure: Radio button

Radio button

-

Radio buttons can be grouped. 2 or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. The following is a basic example of implementing a radio button:

- -
class ButtonsController: public ConnectionTracker
-{
-   ButtonsController(Application& application)
-      : mApplication(application)
-   {
-      mApplication.InitSignal().Connect(this, &ButtonsController::Create);
-   }
-
-   void Create(Application& application)
-   {
-      Stage stage = Stage::GetCurrent();
-      Actor radioGroup = Actor::New();
-      stage.Add(redioGroup);
-      radioGroup.SetParentOrigin(ParentOrigin::TOP_LEFT);
-      radioGroup.SetAnchorPoint(ParentOrigin::TOP_LEFT);
-      radioGroup.SetPosition(0.0f, 0.0f);
-      radioGroup.SetSize(400.0f, 400.0);
-
-      RadioButton radioButton1 = RadioButton::New("label");
-      radioButton1.SetParentOrigin(ParentOrigin::TOP_LEFT);
-      radioButton1.SetAnchorPoint(ParentOrigin::TOP_LEFT);
-      radioButton1.SetPosition(0.0f, 0.0f);
-
-      RadioButton radioButton2 = RadioButton::New("label");
-      radioButton2.SetParentOrigin(ParentOrigin::TOP_LEFT);
-      radioButton2.SetAnchorPoint(ParentOrigin::TOP_LEFT);
-      radioButton2.SetPosition(0.0f, 40.0f);
-
-      radioButton1.StateChangedSignal().Connect(this, &ButtonsController::EnableSelectButton);
-
-      radioGroup.Add(radioButton1);
-      radioGroup.Add(radioButton2);
-   }
-
-   Application& mApplication;
-}
+

Usually, radio buttons are grouped. Two or more radio buttons are in the same group when they have the same parent. In each group, only 1 radio button can be selected at a given time. You can use Button::StateChangedSignal() signal to check which radio button is selected. A basic checkbox button example is as follows:

+ +
+// ... same to the push button example
+  void Create( Application& application )
+  {
+    Actor radioGroup = Actor::New();
+    radioGroup.SetParentOrigin( ParentOrigin::CENTER );
+    Stage::GetCurrent().Add(radioGroup);
+
+    RadioButton button1 = RadioButton::New();
+    button1.SetLabel( "button1" );
+    button1.SetBackgroundColor( Vector4(1,0,0,1) );
+    button1.SetPosition( 0, -40 );
+    radioGroup.Add( button1 );
+
+    RadioButton button2 = RadioButton::New();
+    button2.SetLabel( "button2" );
+    button2.SetBackgroundColor( Vector4(0,0,1,1) );
+    button2.SetPosition( 0, 40 );
+    radioGroup.Add( button2 );
+
+    button1.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
+    button2.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );
+  }
+  bool OnButtonStateChanged( Toolkit::Button button )
+  {
+    cout << "OnButtonStateChanged " << button.GetLabel() << " " << button.IsSelected() << endl;
+    return true;
+  }
+// ... same to the push button example
+