This is an automated email from the ASF dual-hosted git repository.
andreww 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 8927c15 Update jewel-button.md
8927c15 is described below
commit 8927c15c8c682f0d23c19f794e9e30156da0b248
Author: Andrew Wetmore <[email protected]>
AuthorDate: Wed Aug 21 09:18:56 2019 -0300
Update jewel-button.md
Text edits and additions.
---
component-sets/jewel/jewel-button.md | 50 ++++++++++++++++++------------------
1 file changed, 25 insertions(+), 25 deletions(-)
diff --git a/component-sets/jewel/jewel-button.md
b/component-sets/jewel/jewel-button.md
index b59a5f1..6e9bcce 100644
--- a/component-sets/jewel/jewel-button.md
+++ b/component-sets/jewel/jewel-button.md
@@ -16,7 +16,7 @@
layout: docpage
title: Jewel Button
-description: The Jewel Button is a commonly used rectangular button with text
inside. It looks like it can be pressed and allow users to take actions, and
make choices, with a single click or tap.
+description: The Jewel Button is a commonly-used rectangular button with a
text label. Users can click or tap it to take an action or make a choice.
---
@@ -25,27 +25,27 @@ description: The Jewel Button is a commonly used
rectangular button with text in
## Reference
-Available since version __0.9.4__
+Available since version __0.9.4__.
| Class | Extends |
|------------------------------ |----------------------------------
|
|
[org.apache.royale.jewel.Button](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Button){:target='_blank'}
|
[org.apache.royale.jewel.supportClasses.button.BasicButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.button/BasicButton){:target='_blank'}
|
-<sup>_Note: This component is currently only available in JS_</sup>
+<sup>_Note: This component is currently only available for JavaScript._</sup>
## Overview
-The Jewel `Button` component is a commonly used rectangular button with `text`
or `html` inside. It looks like it can be pressed and allow users to take
actions, and make choices, with a single click or tap.
+The Jewel Button is a commonly-used rectangular button with a text label.
Users can click or tap it to take an action or make a choice.
-Jewel Button can show different looks and feels. By default it appears with
light or dark finishes depending on the [jewel theme
configuration](component-sets/jewel/jewel-theme-creation.html#theme-sass-file).
Also using the `emphasis` property can be tinted with __PRIMARY__,
__SECONDARY__ or __EMPHASIZED__ colors (defined as well in the jewel theme).
+The Jewel Button can show different looks and feels. By default it appears
with light or dark highlights depending on the [jewel theme
configuration](component-sets/jewel/jewel-theme-creation.html#theme-sass-file).
You can use the `emphasis` property to tint the button with __PRIMARY__,
__SECONDARY__ or __EMPHASIZED__ colors (defined as well in the Jewel theme).
-It typically use event listeners to perform an action when the user interact
with the control (click, mouse over, double click,...). When a user clicks the
mouse or tap with the finger this control, it dispatches a click event.
+When a user interacts with the button (mouse over, long-press,
double-click...) the button calls an event listener to perform an action. When
a user clicks the mouse on the button or taps the button on a touch screen, the
button dispatches a click event.
-> If you doesn't need a text or label in your Button check jewel
[BasicButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.button/BasicButton){:target='_blank'},
located in the jewel `supportClasses` package since is more lightweight and
fits that use case saving some bytes.
+> If you don't need a custom label on your button consider using Jewel's
[BasicButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.button/BasicButton){:target='_blank'},
located in the jewel `supportClasses` package, since is more lightweight and
will save you some bytes if it fits your use case.
## Example of use
-In __MXML__ we can declare a `Button` with a default look like this:
+In __MXML__ declare a `Button` with a default look like this:
```mxml
<j:Button text="Button"/>
@@ -58,7 +58,7 @@ var b:Button = new Button();
b.text = "Button";
```
-An example of `Button` can be seen here:
+Here is an example of the default button:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
width="100%" height="300"
@@ -75,9 +75,9 @@ src="assets/jewel/jewel_button/index.html"></iframe>
| PROPERTY | Type | Description
|
|-------------- |---------- |
----------------------------------------------------------------------------- |
-| __text__ | _String_ | The text to appear on the control.
|
-| __html__ | _String_ | The html text to appear on the control.
|
-| __emphasis__ | _String_ | Applies emphasis color display. Possible
constant values are: PRIMARY, SECONDARY, EMPHASIZED. Colors are defined in
royale jewel theme CSS. Left without value to get the default look (light or
dark). |
+| __text__ | _String_ | The text that appears on the button.
|
+| __html__ | _String_ | The html text that appears on the button.
|
+| __emphasis__ | _String_ | Applies an emphasis color. Possible constant
values are: PRIMARY, SECONDARY, EMPHASIZED. Colors are defined in the Royale
Jewel theme CSS. If you don't select a value for this field, you get the
default look (light or dark). |
### Methods
@@ -85,7 +85,7 @@ None.
## Relevant Events
-`Button` component has many events like `rollOver`, `rollOut`, `mouseDown`,
`mouseUp`, `mouseMove`, `mouseOut`, `mouseOver`, `mouseWheel` and `mouseWheel`,
all of wich are of
[org.apache.royale.events.MouseEvent](https://royale.apache.org/asdoc/index.html#!org.apache.royale.events/MouseEvent){:target='_blank'}
type, but the most important is the `click` event to trigger some action coded
in a callback function.
+The `Button` component has many events like `rollOver`, `rollOut`,
`mouseDown`, `mouseUp`, `mouseMove`, `mouseOut`, `mouseOver`, and `mouseWheel`,
all of which are of the type
[org.apache.royale.events.MouseEvent](https://royale.apache.org/asdoc/index.html#!org.apache.royale.events/MouseEvent){:target='_blank'}.
The most important event is `click`, which usually triggers some action coded
in a callback function.
You can attach callback listeners to the _click_ event in __MXML__ as follows:
@@ -93,7 +93,7 @@ You can attach callback listeners to the _click_ event in
__MXML__ as follows:
<j:Button text="Button" click="clickHandler(event)"/>
```
-the _click_ event will use the `clickHandler` callback function written in
__ActionScript__:
+the _click_ event will use the `clickHandler` callback function you provide in
__ActionScript__:
```mxml
<fx:Script>
@@ -105,9 +105,9 @@ the _click_ event will use the `clickHandler` callback
function written in __Act
</fx:Script>
```
-When the user clicks the button the message _"Hello from a Button!"_ will be
printed in the console log.
+When the user clicks the button, the message _"Hello from a Button!"_ appears
in the console log.
-In __ActionScript__ we can create a similar button in the following way:
+In __ActionScript__ we can add an event handler this way:
```as3
var b:Button = new Button();
@@ -117,23 +117,23 @@ b.addEventListener('click', clickHandler);
## Relevant Beads
-Unlike other components in Royale, the jewel `Button` does not has beads for
_View_, _Controller_ or _Model_ in the Javascript platform.
+Unlike other components in Royale, the Jewel `Button` does not have beads for
_View_, _Controller_ or _Model_ in the Javascript platform.
-In the other hand it can be used with other common jewel control beads that
provides more functionality. This beads are shared with many other jewel
controls.
+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 used to disable a jewel control. |
-|
[MultiLine](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/MultiLine){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| The bead used with any
[IClassSelectorListSupport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.utils/IClassSelectorListSupport){:target='_blank'}
control to allow more than one line. |
-|
[SizeControl](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/SizeControl){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| The bead used to to size a jewel control. |
-|
[ToolTip](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/ToolTip){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| The bead used to float a string over a control when the user hovers over it
with a mouse |
-|
[Badge](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/Badge){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| The bead used to provides a small status descriptors for a control |
+|
[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. |
+|
[MultiLine](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/MultiLine){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| The bead can be used with any
[IClassSelectorListSupport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.utils/IClassSelectorListSupport){:target='_blank'}
control to allow more than one line of text. |
+|
[SizeControl](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/SizeControl){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| Add this bead to give the Jewel control a custom size. |
+|
[ToolTip](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/ToolTip){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| Add this bead to enable floating a text string over the control when the
user hovers the mouse cursor over it. |
+|
[Badge](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.controls/Badge){:target='_blank'}
|
[org.apache.royale.core.IBead](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBead){:target='_blank'}
| Add this bead to provide small status descriptors for the control |
## Related controls
-Other jewel button components you can be interested are the following:
+Other useful Jewel button components are:
*
[IconButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/IconButton){:target='_blank'}
-*
[ToggleButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/ToggleButton){:target='_blank'}
\ No newline at end of file
+*
[ToggleButton](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/ToggleButton){:target='_blank'}
