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 d70be7749138e69163a61cb7cf414f71a633134f Author: Carlos Rovira <[email protected]> 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 [email protected].
