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 2018/03/23 07:57:35 UTC
[royale-asjs] 35/36: organizing and presenting example in a better
way and making room for more components and examples that test look'n feel
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit fe6dc14721bc7bbc956ea45a4ff7129ff7450591
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 22 13:17:02 2018 +0100
organizing and presenting example in a better way and making room for more components and examples that test look'n feel
---
.../src/main/resources/jewel-example-styles.css | 5 +++
.../royale/JewelExample/src/main/royale/App.mxml | 29 ++++++++++++++--
.../src/main/royale/ButtonPlayGround.mxml | 30 +++++-----------
...nputPlayGround.mxml => CheckBoxPlayGround.mxml} | 40 +++++++---------------
...xtInputPlayGround.mxml => HeadingsAndText.mxml} | 27 ++++-----------
...tPlayGround.mxml => RadioButtonPlayGround.mxml} | 38 ++++++--------------
...ButtonPlayGround.mxml => SliderPlayGround.mxml} | 18 ++--------
...onPlayGround.mxml => TextButtonPlayGround.mxml} | 17 +++------
.../src/main/royale/TextInputPlayGround.mxml | 31 +++++++++--------
9 files changed, 94 insertions(+), 141 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 48829b3..003d6c8 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -23,3 +23,8 @@
+.container {
+ background: #efefef;
+ border-radius: 10px;
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index f403dc7..2d53f6a 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -31,10 +31,33 @@
<js:initialView>
<js:View>
<js:beads>
- <j:HorizontalLayout />
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <local:ButtonPlayGround/>
- <local:TextInputPlayGround/>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:ButtonPlayGround/>
+ <local:TextButtonPlayGround/>
+ </js:Group>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:TextInputPlayGround/>
+ <local:CheckBoxPlayGround/>
+ <local:RadioButtonPlayGround/>
+ <local:SliderPlayGround/>
+ </js:Group>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:HeadingsAndText/>
+ </js:Group>
</js:View>
</js:initialView>
</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 32596a8..7344748 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -20,14 +20,15 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<fx:Script>
<![CDATA[
private function onValueChange(event:Event):void
{
- button.width = slider.value;
- button.height = slider_v.value;
+ //button.width = slider.value;
+ //button.height = slider_v.value;
}
]]>
</fx:Script>
@@ -36,25 +37,10 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
+ <html:H3 text="Jewel Button"/>
+
+ <j:Button />
<j:Button primary="true"/>
+ <j:Button emphasized="true"/>
- <html:H4 text="Jewel TextButton"/>
- <j:TextButton text="Default"/>
- <j:TextButton text="Button With More Text"/>
- <j:TextButton text="Primary" primary="true"/>
- <j:TextButton text="Secondary" secondary="true"/>
- <j:TextButton text="Emphasized" emphasized="true"/>
- <j:TextButton text="Disabled" primary="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:TextButton>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
-
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
similarity index 60%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index 332b444..a26ac6e 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -20,37 +20,23 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
-
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:H3 text="Jewel CheckBox"/>
+
+ <j:CheckBox text="Checkbox 1"/>
+
+ <j:CheckBox text="Checkbox 2"/>
+
+ <j:CheckBox text="Checkbox Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
similarity index 66%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
index 332b444..d594508 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
@@ -20,37 +20,22 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container" width="350">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
+ <html:H3 text="Headings and text"/>
+
<html:H1 text="Heading H1"/>
<html:H2 text="Heading H2"/>
<html:H3 text="Heading H3"/>
<html:H4 text="Heading H4"/>
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
+ <html:Span text="Some span text."/>
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:Div text="Normal text used in a div, texts and fields with single line or multiple lines."/>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
similarity index 59%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 332b444..14da2a1 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -20,37 +20,21 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
-
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:H3 text="Jewel RadioButton"/>
+
+ <j:RadioButton text="RadioButton 1"/>
+ <j:RadioButton text="RadioButton 2"/>
+ <j:RadioButton text="RadioButton Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
similarity index 74%
copy from examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
index 32596a8..639e9b6 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
@@ -20,7 +20,8 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<fx:Script>
<![CDATA[
@@ -36,21 +37,8 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
- <j:Button primary="true"/>
+ <html:H3 text="Jewel Slider"/>
- <html:H4 text="Jewel TextButton"/>
- <j:TextButton text="Default"/>
- <j:TextButton text="Button With More Text"/>
- <j:TextButton text="Primary" primary="true"/>
- <j:TextButton text="Secondary" secondary="true"/>
- <j:TextButton text="Emphasized" emphasized="true"/>
- <j:TextButton text="Disabled" primary="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:TextButton>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
<j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
valueChange="onValueChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
similarity index 71%
copy from examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
index 32596a8..e9461e8 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
@@ -20,14 +20,15 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<fx:Script>
<![CDATA[
private function onValueChange(event:Event):void
{
- button.width = slider.value;
- button.height = slider_v.value;
+ //button.width = slider.value;
+ //button.height = slider_v.value;
}
]]>
</fx:Script>
@@ -36,10 +37,8 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
- <j:Button primary="true"/>
+ <html:H3 text="Jewel TextButton"/>
- <html:H4 text="Jewel TextButton"/>
<j:TextButton text="Default"/>
<j:TextButton text="Button With More Text"/>
<j:TextButton text="Primary" primary="true"/>
@@ -50,11 +49,5 @@ limitations under the License.
<j:Disabled/>
</j:beads>
</j:TextButton>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 332b444..e5a1021 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -20,20 +20,22 @@ limitations under the License.
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
+ <html:H3 text="Jewel TextField"/>
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
+ <js:Group>
+ <js:beads>
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <j:TextButton text="Check it!" primary="true"/>
+ <j:TextField text="A TextField"/>
+ </js:Group>
<js:Group>
<js:beads>
@@ -41,16 +43,17 @@ limitations under the License.
</js:beads>
<j:TextField>
<j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
+ <js:TextPromptBead prompt="With Placeholder..."/>
</j:beads>
</j:TextField>
<j:TextButton text="Send" primary="true"/>
</js:Group>
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <j:TextField>
+ <j:beads>
+ <js:TextPromptBead prompt="Disabled Textfield..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextField>
</js:Group>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.