[DALi][DOC-213] Update Buttons
authorYoonsang Lee <ysang114.lee@samsung.com>
Mon, 20 Jul 2015 07:32:24 +0000 (16:32 +0900)
committerYoonsang Lee <ysang114.lee@samsung.com>
Mon, 20 Jul 2015 07:32:43 +0000 (16:32 +0900)
Signed-off-by: Yoonsang Lee <ysang114.lee@samsung.com>
Change-Id: Ic3bfb4a0c7a51467bc5b1cd02bc7196423dff911

org.tizen.ui.guides/html/images/checkbox_button.png
org.tizen.ui.guides/html/images/radio_button.png
org.tizen.ui.guides/html/native/dali/buttons_n.htm

index c716296..496adf3 100755 (executable)
Binary files a/org.tizen.ui.guides/html/images/checkbox_button.png and b/org.tizen.ui.guides/html/images/checkbox_button.png differ
index 496adf3..c716296 100755 (executable)
Binary files a/org.tizen.ui.guides/html/images/radio_button.png and b/org.tizen.ui.guides/html/images/radio_button.png differ
index 6aed365..bf725f4 100755 (executable)
 <p class="figure">Figure: Push button</p>  \r
        <p align="center"><img alt="Push button" src="../../images/push_button.png"/></p> \r
 \r
-<p>By default, a push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> 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:</p>\r
+<p>A push button emits a <span style="font-family: Courier New,Courier,monospace;">Button::PressedSignal()</span> signal when the button is pressed, a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when clicked, and a <span style="font-family: Courier New,Courier,monospace;">Button::ReleasedSignal()</span> signal when released, or of the touch point leaves the boundary of the button. A basic push button example is as follows:</p>\r
 \r
-<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
+<pre class="prettyprint">\r
+class ButtonController : public ConnectionTracker\r
 {\r
-&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PushButton button = PushButton::New();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;Select&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension:;ALL_DIMENSIONS);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetSelectedImage(Dali::ResourceImage::New(&quot;pressedImage.png&quot;));\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetDisabledImage(Dali::ResourceImage::New(&quot;disabledImage.png&quot;));\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetButtonImage(Dali::ResourceImage::New(&quot;buttonImage.png&quot;));\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.ClickedSignal().Connect(this, &amp;ButtonsController::OnButtonClicked);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(button);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;bool OnButtonClicked(Toolkit::Button button)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Application developer code\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
-}</pre>\r
+public:\r
+  ButtonController( Application& application ): mApplication( application )\r
+  {\r
+    mApplication.InitSignal().Connect( this, &ButtonController::Create );\r
+  }\r
+  void Create( Application& application )\r
+  {\r
+    PushButton button = PushButton::New();\r
+    button.SetLabel( "Select" );\r
+    button.SetParentOrigin( ParentOrigin::CENTER );\r
+    button.ClickedSignal().Connect( this, &ButtonController::OnButtonClicked );\r
+    Stage::GetCurrent().Add( button );\r
+  }\r
+  bool OnButtonClicked( Toolkit::Button button )\r
+  {\r
+    cout << "OnButtonClicked" << endl;\r
+    return true;\r
+  }\r
+private:\r
+  Application&  mApplication;\r
+};\r
+\r
+int main( int argc, char **argv )\r
+{\r
+  Application application = Application::New( &argc, &argv );\r
+  ButtonController test( application );\r
+  application.MainLoop();\r
+  return 0;\r
+}\r
+</pre>\r
 \r
 <h2 id="CheckBoxButton" name="CheckBoxButton">CheckBox Button</h2>\r
  \r
 <p class="figure">Figure: Checkbox button</p>  \r
        <p align="center"><img alt="Checkbox button" src="../../images/checkbox_button.png"/></p> \r
 \r
-<p>By default, a checkbox button emits a <span style="font-family: Courier New,Courier,monospace;">Button::ClickedSignal()</span> signal when the button changes its state to selected or unselected. The following is a basic example of implementing a checkbox button:</p>\r
-\r
-<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
-{\r
-&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actor checkBoxBackground = Actor::New();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(checkBoxBackground);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetPosition(0.0f, 0.0f);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.SetSize(400.0f, 400.0);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::Image unselected = Dali::ResourceImage::New(&quot;UnSelectedImage.png&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dali::Image selected = Dali::ResourceImage::New(&quot;SelectedImage.png&quot;);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; checkBox.SetName(&quot;checkbox1&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetBackgroundImage(unselected);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetSelectedImage(selected);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.SetLabel(&quot;CheckBox1 is unselected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBox.StateChangedSignal().Connect(this, &amp;ButtonsController::OnCheckBoxesSelected);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  checkBoxBackground.Add(checkBox);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetName(&quot;checkbox2&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetBackgroundImage(unselected);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetSelectedImage(selected);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetLabel(&quot;CheckBox2 is selected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.SetSelected(true);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBox.StateChangedSignal().Connect(this, &amp;ButtonsController::OnCheckBoxesSelected);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkBoxBackground.Add(checkBox);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;bool OnCheckBoxesSelected(Toolkit::Button button)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.GetName() == &quot;checkbox1&quot;)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.IsSelected())\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox1 is selected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox1 is unselected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.GetName() == &quot;checkbox2&quot;)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(button.IsSelected())\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox2 is selected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.SetLabel(&quot;CheckBox2 is unselected&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
-}</pre>\r
+<p>A checkbox button emits all of four button input sinals, but usually you can just use <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check the button changes its state to selected or unselected. A basic checkbox button example is as follows:</p>\r
+\r
+<pre class="prettyprint">\r
+// ... same to the push button example\r
+  void Create( Application& application )\r
+  {\r
+    CheckBoxButton button = CheckBoxButton::New();\r
+    button.SetLabel( "Select" );\r
+    button.SetSize( 100,40 );\r
+    button.SetBackgroundColor( Vector4( 1,0,0,1 ) );\r
+    button.SetParentOrigin( ParentOrigin::CENTER );\r
+    button.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );\r
+    Stage::GetCurrent().Add( button );\r
+  }\r
+  bool OnButtonStateChanged( Toolkit::Button button )\r
+  {\r
+    cout << "OnButtonStateChanged " << button.IsSelected() << endl;\r
+    return true;\r
+  }\r
+// ... same to the push button example\r
+</pre>\r
 \r
 <h2 id="RadioButton" name="RadioButton">Radio Button</h2>\r
  \r
 <p class="figure">Figure: Radio button</p>  \r
        <p align="center"><img alt="Radio button" src="../../images/radio_button.png"/></p> \r
 \r
-<p>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:</p>\r
-\r
-<pre class="prettyprint">class ButtonsController: public ConnectionTracker\r
-{\r
-&nbsp;&nbsp;&nbsp;ButtonsController(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: mApplication(application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mApplication.InitSignal().Connect(this, &amp;ButtonsController::Create);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;void Create(Application&amp; application)\r
-&nbsp;&nbsp;&nbsp;{\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stage stage = Stage::GetCurrent();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Actor radioGroup = Actor::New();\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stage.Add(redioGroup);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetPosition(0.0f, 0.0f);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.SetSize(400.0f, 400.0);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RadioButton radioButton1 = RadioButton::New(&quot;label&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.SetPosition(0.0f, 0.0f);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;RadioButton radioButton2 = RadioButton::New(&quot;label&quot;);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetParentOrigin(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetAnchorPoint(ParentOrigin::TOP_LEFT);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton2.SetPosition(0.0f, 40.0f);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioButton1.StateChangedSignal().Connect(this, &amp;ButtonsController::EnableSelectButton);\r
-\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.Add(radioButton1);\r
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;radioGroup.Add(radioButton2);\r
-&nbsp;&nbsp;&nbsp;}\r
-\r
-&nbsp;&nbsp;&nbsp;Application&amp; mApplication;\r
-}</pre>\r
+<p>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 <span style="font-family: Courier New,Courier,monospace;">Button::StateChangedSignal()</span> signal to check which radio button is selected. A basic checkbox button example is as follows:</p>\r
+\r
+<pre class="prettyprint">\r
+// ... same to the push button example\r
+  void Create( Application& application )\r
+  {\r
+    Actor radioGroup = Actor::New();\r
+    radioGroup.SetParentOrigin( ParentOrigin::CENTER );\r
+    Stage::GetCurrent().Add(radioGroup);\r
+\r
+    RadioButton button1 = RadioButton::New();\r
+    button1.SetLabel( "button1" );\r
+    button1.SetBackgroundColor( Vector4(1,0,0,1) );\r
+    button1.SetPosition( 0, -40 );\r
+    radioGroup.Add( button1 );\r
+\r
+    RadioButton button2 = RadioButton::New();\r
+    button2.SetLabel( "button2" );\r
+    button2.SetBackgroundColor( Vector4(0,0,1,1) );\r
+    button2.SetPosition( 0, 40 );\r
+    radioGroup.Add( button2 );\r
+\r
+    button1.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );\r
+    button2.StateChangedSignal().Connect( this, &ButtonController::OnButtonStateChanged );\r
+  }\r
+  bool OnButtonStateChanged( Toolkit::Button button )\r
+  {\r
+    cout << "OnButtonStateChanged " << button.GetLabel() << " " << button.IsSelected() << endl;\r
+    return true;\r
+  }\r
+// ... same to the push button example\r
+</pre>\r
 \r
 \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r