You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/08/29 10:23:42 UTC
[royale-docs] branch master updated: jewel-checkbox: doc page
completed
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new cc9e613 jewel-checkbox: doc page completed
cc9e613 is described below
commit cc9e613983be455dbe602c8d43d66745cb4c4bbc
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Aug 29 12:23:35 2019 +0200
jewel-checkbox: doc page completed
---
component-sets/jewel.md | 2 +-
component-sets/jewel/jewel-checkbox.md | 111 ++++++++++++++++++++++++++++++++-
2 files changed, 110 insertions(+), 3 deletions(-)
diff --git a/component-sets/jewel.md b/component-sets/jewel.md
index f32444d..79c322c 100644
--- a/component-sets/jewel.md
+++ b/component-sets/jewel.md
@@ -62,7 +62,7 @@ For the browsers, Apache Royale generates [ECMAScript version 5 (ES5)](https://e
| | [Wizard](component-sets/jewel/jewel-wizard.html) | 11.0+ | | |
| __Components__ | [Alert](component-sets/jewel/jewel-alert.html) | Displays a message and one or more buttons in a view that pops up over all other controls and views. | 0.9.4 | Complete |
| | [Button](component-sets/jewel/jewel-button.html) | A commonly-used rectangular button with a text label. Users can click or tap it to take an action. | 0.9.4 | Complete |
-| | [CheckBox](component-sets/jewel/jewel-checkbox.html) | | | |
+| | [CheckBox](component-sets/jewel/jewel-checkbox.html) | Consists of a box that can contain a check mark and an optional label. | 0.9.4 | Complete |
| | [ComboBox](component-sets/jewel/jewel-combobox.html) | | | |
| | [DateChooser](component-sets/jewel/jewel-datechooser.html) | | | |
| | [DateField](component-sets/jewel/jewel-datefield.html) | | | |
diff --git a/component-sets/jewel/jewel-checkbox.md b/component-sets/jewel/jewel-checkbox.md
index d4daa71..06cb36f 100644
--- a/component-sets/jewel/jewel-checkbox.md
+++ b/component-sets/jewel/jewel-checkbox.md
@@ -16,10 +16,117 @@
layout: docpage
title: Jewel CheckBox
+description: The Jewel CheckBox consists of a box, that can contain a check mark or not, and an optional label.
+
---
# Jewel CheckBox
-subtitle
+## Reference
+
+Available since version __0.9.4__.
+
+| Class | Extends |
+|------------------------------ |---------------------------------- |
+| [org.apache.royale.jewel.CheckBox](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/CheckBox){:target='_blank'} | [org.apache.royale.jewel.supportClasses.button.SelectableButtonBase](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.button/SelectableButtonBase){:target='_blank'} |
+
+<sup>_Note: This component is currently only available for JavaScript._</sup>
+
+## Overview
+
+The Jewel CheckBox consists of a box, that can contain a check mark or not, and an optional label. When a user clicks or touches this control or its associated text, the CheckBox changes its state from checked to unchecked or from unchecked to checked, communicating clearly a binary condition. Checkboxes can appear in groups (but not necesarily), and can be selected and deselected individually.
+
+## Example of use
+
+In __MXML__ declare a `CheckBox` like this:
+
+```mxml
+<j:CheckBox/>
+```
+
+In __ActionScript__ we can do the same in the following way:
+
+```as3
+var checkBox:CheckBox = new CheckBox();
+parent.addElement(checkBox);
+```
+
+where `parent` is the container where the control will be added.
+
+Here is an example of the default check box:
+
+<iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
+width="100%" height="300"
+src="assets/jewel/jewel_checkbox/index.html"></iframe>
+
+[code here](https://github.com/apache/royale-docs/blob/master/assets/jewel/jewel_checkbox/jewel_checkbox.mxml){:target='_blank'}
+
+## Relevant Properties and Methods
+
+> Check the Reference of [org.apache.royale.jewel.CheckBox](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/CheckBox){:target='_blank'} for a more detailed list of properties and methods.
+
+### Properties
+
+| PROPERTY | Type | Description |
+|-------------- |---------- | ----------------------------------------------------------------------------- |
+| __selected__ | _Boolean_ | `true` if the check mark is displayed, `false` otherwise. |
+| __text__ | _String_ | The string used as a label. |
+| __value__ | _String_ | The associated value. |
+
+### Methods
+
+None.
+
+## Relevant Events
+
+The `CheckBox` has _change_ event of type [org.apache.royale.events.Event](https://royale.apache.org/asdoc/index.html#!org.apache.royale.events/Event){:target='_blank'}. This event is dispatched when the control is selected or deselected by the user. Notice that programatic changes will not trigger this event.
+
+Since this component is in essence a button, it has _click_ event as well, so when the control is clicked by the user it dispatches a normal _click_ event as usual.
+
+You can attach callback listeners to the _change_ event in __MXML__ as follows:
+
+```mxml
+<j:CheckBox text="A Checkbox" value="50" change="changeHandler(event)"/>
+```
+
+the _change_ event will use the `changeHandler` callback function you provide in __ActionScript__:
+
+```mxml
+<fx:Script>
+ <![CDATA[
+ private function changeHandler(event:Event):void {
+ trace('CheckBox value is: ' + event.target.value, ' and selected state is: ' + event.target.selected);
+ }
+ ]]>
+</fx:Script>
+```
+
+When the user click or touch over the CheckBox a message will be logged in console showing the `value` and `selected` property values.
+
+In __ActionScript__ we can add an event handler this way:
+
+```as3
+var checkBox:CheckBox = new CheckBox();
+checkBox.text = "A Checkbox";
+checkBox.value = 50;
+checkBox.addEventListener('change', changeHandler);
+parent.addElement(checkBox);
+```
+
+## Relevant Beads
+
+Unlike other components in Royale, the Jewel `CheckBox` does not have beads for _View_, _Controller_ or _Model_ in the Javascript platform.
+
+On the other hand, you can add to it other common Jewel control beads to provide more functionality. Many Jewel controls share these beads.
+
+### Common Beads
+
+| Bead Type | Implementation | Description |
+|----------------- |------------------------------------------------ |------------------------------------------------ |
+| [Disabled](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/Disabled){:target='_blank'} | [org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'} | This bead lets you disable and enable a Jewel control. |
+
+## Related controls
+
+Other related Jewel components are:
-text
\ No newline at end of file
+* [RadioButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/RadioButton){:target='_blank'}