This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 0de8bc9 jewel-button: New BasicButton to hold all basic functionality
and left Button just with text/html property. Also clean and update code and
docs to improve royale-docs.
0de8bc9 is described below
commit 0de8bc940af65cd6cab3c0d439c4c3269dbdfd33
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Aug 20 17:54:23 2019 +0200
jewel-button: New BasicButton to hold all basic functionality and left
Button just with text/html property. Also clean and update code and docs to
improve royale-docs.
---
.../src/main/royale/ButtonPlayGround.mxml | 2 +
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../main/royale/org/apache/royale/jewel/Button.as | 417 +++------------------
.../button/BasicButton.as} | 140 ++-----
4 files changed, 75 insertions(+), 485 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index 45c58ce..4a79c80 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -66,6 +66,8 @@ limitations under the License.
<j:Disabled/>
</j:beads>
</j:Button>
+
+ <j:BasicButton emphasis="{Button.EMPHASIZED}"/>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index ead8b31..7480994 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -43,6 +43,7 @@
<component id="TableHeaderCell"
class="org.apache.royale.jewel.supportClasses.table.TableHeaderCell"/>
<component id="TableColumn"
class="org.apache.royale.jewel.supportClasses.table.TableColumn"/>
+ <component id="BasicButton"
class="org.apache.royale.jewel.supportClasses.button.BasicButton"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
<component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 9627fd0..f115b5e 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -20,345 +20,32 @@ package org.apache.royale.jewel
{
COMPILE::SWF
{
- import org.apache.royale.core.UIButtonBase;
- }
-
- COMPILE::JS
- {
- import org.apache.royale.core.StyledUIBase;
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
- }
-
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.ITextModel;
- import org.apache.royale.core.IUIBase;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.utils.ClassSelectorList;
- import org.apache.royale.utils.IClassSelectorListSupport;
-
- //--------------------------------------
- // Events
- //--------------------------------------
-
- /**
- * Dispatched when the user clicks on a button.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="click", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for rollOver events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="rollOver", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for rollOut events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="rollOut", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for mouseDown events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseDown", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for mouseUp events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseUp", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for mouseMove events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseMove", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for mouseOut events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseOut", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for mouseOver events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseOver", type="org.apache.royale.events.MouseEvent")]
- /**
- * Set a different class for mouseWheel events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="mouseWheel", type="org.apache.royale.events.MouseEvent")]
-
- /**
- * Set a different class for doubleClick events so that
- * there aren't dependencies on the flash classes
- * on the JS side.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- [Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
+ }
+ import org.apache.royale.jewel.supportClasses.button.BasicButton;
[DefaultProperty("text")]
/**
- * The ButtonBase class is the base class for Button.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- COMPILE::SWF
- public class Button extends UIButtonBase implements IStrand, IUIBase,
IEventDispatcher, IClassSelectorListSupport
- {
- public static const PRIMARY:String = "primary";
- public static const SECONDARY:String = "secondary";
- public static const EMPHASIZED:String = "emphasized";
-
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function Button()
- {
- super();
-
- classSelectorList = new ClassSelectorList(this);
- typeNames = "jewel button";
- }
-
- protected var classSelectorList:ClassSelectorList;
-
- /**
- * @copy org.apache.royale.html.Label#text
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- return ITextModel(model).text;
- }
-
- /**
- * @private
- */
- public function set text(value:String):void
- {
- ITextModel(model).text = value;
- }
-
- /**
- * @copy org.apache.royale.html.Label#html
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get html():String
- {
- return ITextModel(model).html;
- }
-
- /**
- * @private
- */
- public function set html(value:String):void
- {
- ITextModel(model).html = value;
- }
-
- private var _emphasis:String;
-
- /**
- * Activate "emphasis" effect selector. Applies emphasis color
display effect.
- * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
- * Colors are defined in royale-jewel.css
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get emphasis():String
- {
- return _emphasis;
- }
-
- [Inspectable(category="General",
enumeration="primary,secondary,emphasized")]
- public function set emphasis(value:String):void
- {
- if (_emphasis != value)
- {
- if(_emphasis)
- {
- classSelectorList.toggle(_emphasis, false);
- }
- _emphasis = value;
-
- classSelectorList.toggle(_emphasis, value);
- }
- }
-
- /**
- * Add a class selector to the list.
- *
- * @param name Name of selector to add.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function addClass(name:String):void
- {
- // To implement.need to implement this interface or extensions
will not compile
- }
-
- /**
- * Removes a class selector from the list.
- *
- * @param name Name of selector to remove.
- *
- * @royaleignorecoercion HTMLElement
- * @royaleignorecoercion DOMTokenList
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function removeClass(name:String):void
- {
- // To implement.need to implement this interface or extensions
will not compile
- }
-
- /**
- * Add or remove a class selector to/from the list.
- *
- * @param name Name of selector to add or remove.
- * @param value True to add, False to remove.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function toggleClass(name:String, value:Boolean):void
- {
- // To implement.need to implement this interface or extensions
will not compile
- }
-
- /**
- * Search for the name in the element class list
- *
- * @param name Name of selector to find.
- * @return return true if the name is found or false otherwise.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function containsClass(name:String):Boolean
- {
- return false;
- }
- }
-
- /**
- * The Button class that should show text. This is the lightest weight
- * button used for non-text buttons like the arrow buttons
- * in a Scrollbar or NumericStepper.
- *
- * The most common view for this button is CSSButtonView that
- * allows you to specify a backgroundImage in CSS that defines
- * the look of the button.
+ * The Jewel Button class adds text capabilities to Jewel BasicButton.
*
- * However, when used in ScrollBar and when composed in many
- * other components, it is more common to assign a custom view
- * to the button.
+ * 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. It typically
+ * use event listeners to perform an action when the user interact with
the control. When a user
+ * clicks the mouse or tap with the finger this control it dispatches a
click event.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- COMPILE::JS
- public class Button extends StyledUIBase implements IStrand, IUIBase,
IEventDispatcher, IClassSelectorListSupport
+ public class Button extends BasicButton
{
public static const PRIMARY:String = "primary";
public static const SECONDARY:String = "secondary";
public static const EMPHASIZED:String = "emphasized";
-
+
/**
* Constructor.
*
@@ -370,12 +57,13 @@ package org.apache.royale.jewel
public function Button()
{
super();
- typeNames = "jewel button";
}
[Bindable("textChange")]
/**
- * @copy org.apache.royale.html.Label#text
+ * the text to appear on the control.
+ *
+ * @copy org.apache.royale.jewel.Label#text
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -384,21 +72,36 @@ package org.apache.royale.jewel
*/
public function get text():String
{
+ COMPILE::SWF
+ {
+ return ITextModel(model).text;
+ }
+ COMPILE::JS
+ {
return (element as HTMLButtonElement).innerHTML;
+ }
}
-
/**
* @private
*/
public function set text(value:String):void
{
+ COMPILE::SWF
+ {
+ ITextModel(model).text = value;
+ }
+ COMPILE::JS
+ {
(element as HTMLButtonElement).innerHTML = value;
- this.dispatchEvent(new Event('textChange'));
+ dispatchEvent(new Event('textChange'));
+ }
}
+
[Bindable("htmlChange")]
/**
- * @copy org.apache.royale.html.Label#html
+ * the html text to appear on the control.
+ * @copy org.apache.royale.jewel.Label#html
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -407,59 +110,29 @@ package org.apache.royale.jewel
*/
public function get html():String
{
+ COMPILE::SWF
+ {
+ return ITextModel(model).html;
+ }
+ COMPILE::JS
+ {
return (element as HTMLButtonElement).innerHTML;
+ }
}
-
/**
* @private
*/
public function set html(value:String):void
{
- (element as HTMLButtonElement).innerHTML = value;
- this.dispatchEvent(new Event('textChange'));
- }
-
- private var _emphasis:String;
-
- /**
- * Activate "emphasis" effect selector. Applies emphasis color
display effect.
- * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
- * Colors are defined in royale-jewel.css
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get emphasis():String
- {
- return _emphasis;
- }
-
- public function set emphasis(value:String):void
- {
- if (_emphasis != value)
+ COMPILE::SWF
{
- if(_emphasis)
- {
- removeClass(_emphasis);
- }
- _emphasis = value;
-
- addClass(_emphasis);
+ ITextModel(model).html = value;
}
- }
-
- /**
- * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
- * @royaleignorecoercion
org.apache.royale.html.util.addElementToWrapper
- */
- override protected function createElement():WrappedHTMLElement
- {
- addElementToWrapper(this, 'button');
- element.setAttribute('type', 'button');
-
- return element;
- }
+ COMPILE::JS
+ {
+ (element as HTMLButtonElement).innerHTML = value;
+ dispatchEvent(new Event('textChange'));
+ }
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/BasicButton.as
similarity index 77%
copy from
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
copy to
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/BasicButton.as
index 9627fd0..7a343bd 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/button/BasicButton.as
@@ -16,7 +16,7 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.button
{
COMPILE::SWF
{
@@ -158,11 +158,17 @@ package org.apache.royale.jewel
*/
[Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
-
- [DefaultProperty("text")]
-
/**
- * The ButtonBase class is the base class for Button.
+ * The Jewel BasicButton class is a simple button. Use Jewel Button for
+ * buttons that should show text.
+ *
+ * BasicButton is a commonly used rectangular button. It looks like it
can be pressed
+ * and allow users to take actions, and make choices, with a single click
or tap. It typically
+ * use event listeners to perform an action when the user interact with
the control. When a user
+ * clicks the mouse or tap with the finger this control it dispatches a
click event.
+ *
+ * This is the lightest weight button used for non-text buttons like the
arrow buttons
+ * in a Scrollbar or NumericStepper.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -170,7 +176,7 @@ package org.apache.royale.jewel
* @productversion Royale 0.9.4
*/
COMPILE::SWF
- public class Button extends UIButtonBase implements IStrand, IUIBase,
IEventDispatcher, IClassSelectorListSupport
+ public class BasicButton extends UIButtonBase implements IStrand,
IUIBase, IEventDispatcher, IClassSelectorListSupport
{
public static const PRIMARY:String = "primary";
public static const SECONDARY:String = "secondary";
@@ -184,7 +190,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function Button()
+ public function BasicButton()
{
super();
@@ -194,50 +200,7 @@ package org.apache.royale.jewel
protected var classSelectorList:ClassSelectorList;
- /**
- * @copy org.apache.royale.html.Label#text
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- return ITextModel(model).text;
- }
-
- /**
- * @private
- */
- public function set text(value:String):void
- {
- ITextModel(model).text = value;
- }
-
- /**
- * @copy org.apache.royale.html.Label#html
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get html():String
- {
- return ITextModel(model).html;
- }
-
- /**
- * @private
- */
- public function set html(value:String):void
- {
- ITextModel(model).html = value;
- }
-
private var _emphasis:String;
-
/**
* Activate "emphasis" effect selector. Applies emphasis color
display effect.
* Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
@@ -252,7 +215,6 @@ package org.apache.royale.jewel
{
return _emphasis;
}
-
[Inspectable(category="General",
enumeration="primary,secondary,emphasized")]
public function set emphasis(value:String):void
{
@@ -335,17 +297,16 @@ package org.apache.royale.jewel
}
/**
- * The Button class that should show text. This is the lightest weight
- * button used for non-text buttons like the arrow buttons
- * in a Scrollbar or NumericStepper.
+ * The Jewel BasicButton class is a simple button. Use Jewel Button for
+ * buttons that should show text.
*
- * The most common view for this button is CSSButtonView that
- * allows you to specify a backgroundImage in CSS that defines
- * the look of the button.
- *
- * However, when used in ScrollBar and when composed in many
- * other components, it is more common to assign a custom view
- * to the button.
+ * BasicButton is a commonly used rectangular button. It looks like it
can be pressed
+ * and allow users to take actions, and make choices, with a single click
or tap. It typically
+ * use event listeners to perform an action when the user interact with
the control. When a user
+ * clicks the mouse or tap with the finger this control it dispatches a
click event.
+ *
+ * This is the lightest weight button used for non-text buttons like the
arrow buttons
+ * in a Scrollbar or NumericStepper.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -353,7 +314,7 @@ package org.apache.royale.jewel
* @productversion Royale 0.9.4
*/
COMPILE::JS
- public class Button extends StyledUIBase implements IStrand, IUIBase,
IEventDispatcher, IClassSelectorListSupport
+ public class BasicButton extends StyledUIBase implements IStrand, IUIBase,
IEventDispatcher, IClassSelectorListSupport
{
public static const PRIMARY:String = "primary";
public static const SECONDARY:String = "secondary";
@@ -367,64 +328,18 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function Button()
+ public function BasicButton()
{
super();
typeNames = "jewel button";
}
- [Bindable("textChange")]
- /**
- * @copy org.apache.royale.html.Label#text
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- return (element as HTMLButtonElement).innerHTML;
- }
-
- /**
- * @private
- */
- public function set text(value:String):void
- {
- (element as HTMLButtonElement).innerHTML = value;
- this.dispatchEvent(new Event('textChange'));
- }
-
- [Bindable("htmlChange")]
- /**
- * @copy org.apache.royale.html.Label#html
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get html():String
- {
- return (element as HTMLButtonElement).innerHTML;
- }
-
- /**
- * @private
- */
- public function set html(value:String):void
- {
- (element as HTMLButtonElement).innerHTML = value;
- this.dispatchEvent(new Event('textChange'));
- }
-
private var _emphasis:String;
-
/**
* Activate "emphasis" effect selector. Applies emphasis color
display effect.
- * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
- * Colors are defined in royale-jewel.css
+ * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED).
+ * Left without value to get the default look (light or dark.)
+ * Colors are defined in jewel theme CSS
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -435,7 +350,6 @@ package org.apache.royale.jewel
{
return _emphasis;
}
-
public function set emphasis(value:String):void
{
if (_emphasis != value)
