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 2020/04/09 21:55:26 UTC
[royale-asjs] branch develop updated: tour-de-jewel: improve
layouts example
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 b851299 tour-de-jewel: improve layouts example
b851299 is described below
commit b851299cdcb33a935bc771acd17d204706a2fe63
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Apr 9 23:55:22 2020 +0200
tour-de-jewel: improve layouts example
---
.../src/main/royale/LayoutsPlayGround.mxml | 355 ++++++++++++---------
1 file changed, 211 insertions(+), 144 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index 3f07df7..e83fb01 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -37,9 +37,10 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<j:CardHeader>
- <html:H3 text="Jewel BasicLayout"/>
+ <j:CardTitle text="BasicLayout" className="primary-normal"/>
</j:CardHeader>
<j:CardPrimaryContent>
+
<j:Label multiline="true" text="Jewel BasicLayout (width200, height:200px)"/>
<j:Group width="200" height="200" className="wrapper">
<j:Button text="Origin" emphasis="primary"/>
@@ -47,21 +48,24 @@ limitations under the License.
<j:Button text="x:60,y:60" emphasis="emphasized" x="60" y="60"/>
<j:Button text="bottom/right" style="bottom:0;right:0"/>
</j:Group>
+
</j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<j:CardHeader>
- <html:H3 text="Jewel HorizontalLayout"/>
+ <j:CardTitle text="HorizontalLayout" className="primary-normal"/>
</j:CardHeader>
<j:CardPrimaryContent>
+
<j:HGroup localId="hg" gap="3" className="wrapper">
<j:Button text="X" emphasis="primary"/>
<j:Button text="Y" emphasis="secondary"/>
<j:Button text="Z" emphasis="emphasized"/>
<j:Button text="0" />
</j:HGroup>
+
</j:CardPrimaryContent>
<j:CardActions itemsHorizontalAlign = "itemsCenter">
<j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="hg.gap = event.target.value"/>
@@ -70,227 +74,290 @@ limitations under the License.
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H4 text="Jewel VerticalLayout"/>
-
- <j:VGroup localId="vg" gap="3" className="wrapper">
- <j:Button text="X" emphasis="primary"/>
- <j:Button text="Y" emphasis="secondary"/>
- <j:Button text="Z" emphasis="emphasized"/>
- <j:Button text="0"/>
- </j:VGroup>
+ <j:CardHeader>
+ <j:CardTitle text="VerticalLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:VGroup localId="vg" gap="3" className="wrapper">
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0"/>
+ </j:VGroup>
- <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vg.gap = event.target.value"/>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vg.gap = event.target.value"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HorizontalCenteredLayout (width200, height:200px)"/>
-
- <j:Group width="200" height="200" className="wrapper">
- <j:beads>
- <j:HorizontalCenteredLayout localId="hcl" gap="3"/>
- </j:beads>
- <j:Button text="X" emphasis="primary"/>
- <j:Button text="Y" emphasis="secondary"/>
- <j:Button text="Z" emphasis="emphasized"/>
- <j:Button text="0" />
- </j:Group>
-
- <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="hcl.gap = event.target.value"/>
+ <j:CardHeader>
+ <j:CardTitle text="HorizontalCenteredLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Group width="100%" height="200" className="wrapper">
+ <j:beads>
+ <j:HorizontalCenteredLayout localId="hcl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
+ </j:Group>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="hcl.gap = event.target.value"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VerticalCenteredLayout (width200, height:200px)"/>
-
- <j:Group width="200" height="200" className="wrapper">
- <j:beads>
- <j:VerticalCenteredLayout localId="vcl" gap="3"/>
- </j:beads>
- <j:Button text="X" emphasis="primary"/>
- <j:Button text="Y" emphasis="secondary"/>
- <j:Button text="Z" emphasis="emphasized"/>
- <j:Button text="0" />
- </j:Group>
-
- <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vcl.gap = event.target.value"/>
+ <j:CardHeader>
+ <j:CardTitle text="VerticalCenteredLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Group width="100%" height="200" className="wrapper">
+ <j:beads>
+ <j:VerticalCenteredLayout localId="vcl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
+ </j:Group>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vcl.gap = event.target.value"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HorizontalFlowLayout"/>
-
- <j:Group className="wrapper">
- <j:beads>
- <j:HorizontalFlowLayout localId="hfl" gap="3"/>
- </j:beads>
- <j:Button text="X" emphasis="primary" width="60"/>
- <j:Button text="Y" emphasis="secondary" width="60"/>
- <j:Button text="Z" emphasis="emphasized" width="60"/>
- <j:Button text="0" width="60"/>
- </j:Group>
-
- <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="hfl.gap = event.target.value"/>
+ <j:CardHeader>
+ <j:CardTitle text="HorizontalFlowLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Group className="wrapper">
+ <j:beads>
+ <j:HorizontalFlowLayout localId="hfl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary" width="60"/>
+ <j:Button text="Y" emphasis="secondary" width="60"/>
+ <j:Button text="Z" emphasis="emphasized" width="60"/>
+ <j:Button text="0" width="60"/>
+ </j:Group>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="hfl.gap = event.target.value"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VerticalFlowLayout"/>
-
- <j:Group className="wrapper" height="200">
- <j:beads>
- <j:VerticalFlowLayout localId="vfl" gap="3"/>
- </j:beads>
- <j:Button text="X" emphasis="primary" width="60"/>
- <j:Button text="Y" emphasis="secondary" width="60"/>
- <j:Button text="Z" emphasis="emphasized" width="60"/>
- <j:Button text="0" width="60"/>
- </j:Group>
-
- <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vfl.gap = event.target.value"/>
+ <j:CardHeader>
+ <j:CardTitle text="VerticalFlowLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Group className="wrapper" height="200">
+ <j:beads>
+ <j:VerticalFlowLayout localId="vfl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary" width="60"/>
+ <j:Button text="Y" emphasis="secondary" width="60"/>
+ <j:Button text="Z" emphasis="emphasized" width="60"/>
+ <j:Button text="0" width="60"/>
+ </j:Group>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:HSlider width="200" value="3" minimum="0" maximum="10" valueChange="vfl.gap = event.target.value"/>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VerticalCenteredLayout (width200, height:200px)"/>
+ <j:CardHeader>
+ <j:CardTitle text="VerticalCenteredLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:Group width="100%" height="300" className="wrapper">
- <j:beads>
- <j:VerticalCenteredLayout/>
- </j:beads>
- <j:Card width="50%" height="100">
- <j:Label text="Hello!"/>
- </j:Card>
- </j:Group>
+ <j:Group width="100%" height="300" className="wrapper">
+ <j:beads>
+ <j:VerticalCenteredLayout/>
+ </j:beads>
+ <j:Card width="50%" height="100">
+ <j:Label text="Hello!"/>
+ </j:Card>
+ </j:Group>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VContainer itemsHorizontalAlign='itemsCenter'"/>
+ <j:CardHeader>
+ <j:CardTitle text="VContainer itemsHorizontalAlign='itemsCenter'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:VContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter" className="wrapper">
+ <j:Card width="50%" height="100">
+ <j:Label text="horz center"/>
+ </j:Card>
+ <j:Card width="50%" height="100">
+ <j:Label text="horz center"/>
+ </j:Card>
+ </j:VContainer>
- <j:VContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter" className="wrapper">
- <j:Card width="50%" height="100">
- <j:Label text="horz center"/>
- </j:Card>
- <j:Card width="50%" height="100">
- <j:Label text="horz center"/>
- </j:Card>
- </j:VContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VContainer itemsHorizontalAlign='itemsRight'"/>
+ <j:CardHeader>
+ <j:CardTitle text="VContainer itemsHorizontalAlign='itemsRight'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:VContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsRight" className="wrapper">
- <j:Card width="50%" height="100">
- <j:Label text="horz right"/>
- </j:Card>
- <j:Card width="50%" height="100">
- <j:Label text="horz right"/>
- </j:Card>
- </j:VContainer>
+ <j:VContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsRight" className="wrapper">
+ <j:Card width="50%" height="100">
+ <j:Label text="horz right"/>
+ </j:Card>
+ <j:Card width="50%" height="100">
+ <j:Label text="horz right"/>
+ </j:Card>
+ </j:VContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VContainer itemsVerticalAlign='itemsBottom'"/>
+ <j:CardHeader>
+ <j:CardTitle text="VContainer itemsVerticalAlign='itemsBottom'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
- <j:Card width="50%" height="100">
- <j:Label text="vert bottom"/>
- </j:Card>
- <j:Card width="50%" height="100">
- <j:Label text="vert bottom"/>
- </j:Card>
- </j:VContainer>
+ <j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
+ <j:Card width="50%" height="100">
+ <j:Label text="vert bottom"/>
+ </j:Card>
+ <j:Card width="50%" height="100">
+ <j:Label text="vert bottom"/>
+ </j:Card>
+ </j:VContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel VContainer itemsVerticalAlign='itemsCenter'"/>
+ <j:CardHeader>
+ <j:CardTitle text="VContainer itemsVerticalAlign='itemsCenter'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsCenter" className="wrapper">
- <j:Card width="50%" height="100">
- <j:Label text="vert center"/>
- </j:Card>
- <j:Card width="50%" height="100">
- <j:Label text="vert center"/>
- </j:Card>
- </j:VContainer>
+ <j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsCenter" className="wrapper">
+ <j:Card width="50%" height="100">
+ <j:Label text="vert center"/>
+ </j:Card>
+ <j:Card width="50%" height="100">
+ <j:Label text="vert center"/>
+ </j:Card>
+ </j:VContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HContainer itemsHorizontalAlign='itemsCenter'"/>
+ <j:CardHeader>
+ <j:CardTitle text="HContainer itemsHorizontalAlign='itemsCenter'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:HContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter" className="wrapper">
- <j:Card width="100" height="50%">
- <j:Label text="horz center"/>
- </j:Card>
- <j:Card width="100" height="50%">
- <j:Label text="horz center"/>
- </j:Card>
- </j:HContainer>
+ <j:HContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter" className="wrapper">
+ <j:Card width="100" height="50%">
+ <j:Label text="horz center"/>
+ </j:Card>
+ <j:Card width="100" height="50%">
+ <j:Label text="horz center"/>
+ </j:Card>
+ </j:HContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HContainer itemsHorizontalAlign='itemsRight'"/>
+ <j:CardHeader>
+ <j:CardTitle text="HContainer itemsHorizontalAlign='itemsRight'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:HContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsRight" className="wrapper">
- <j:Card width="100" height="50%">
- <j:Label text="horz right"/>
- </j:Card>
- <j:Card width="100" height="50%">
- <j:Label text="horz right"/>
- </j:Card>
- </j:HContainer>
+ <j:HContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsRight" className="wrapper">
+ <j:Card width="100" height="50%">
+ <j:Label text="horz right"/>
+ </j:Card>
+ <j:Card width="100" height="50%">
+ <j:Label text="horz right"/>
+ </j:Card>
+ </j:HContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HContainer itemsVerticalAlign='itemsBottom'"/>
+ <j:CardHeader>
+ <j:CardTitle text="HContainer itemsVerticalAlign='itemsBottom'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:HContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
- <j:Card width="100" height="50%">
- <j:Label text="vert bottom"/>
- </j:Card>
- <j:Card width="100" height="50%">
- <j:Label text="vert bottom"/>
- </j:Card>
- </j:HContainer>
+ <j:HContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
+ <j:Card width="100" height="50%">
+ <j:Label text="vert bottom"/>
+ </j:Card>
+ <j:Card width="100" height="50%">
+ <j:Label text="vert bottom"/>
+ </j:Card>
+ </j:HContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel HContainer itemsVerticalAlign='itemsCenter'"/>
+ <j:CardHeader>
+ <j:CardTitle text="HContainer itemsVerticalAlign='itemsCenter'" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
- <j:HContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsCenter" className="wrapper">
- <j:Card width="100" height="50%">
- <j:Label text="vert centered"/>
- </j:Card>
- <j:Card width="100" height="50%">
- <j:Label text="vert centered"/>
- </j:Card>
- </j:HContainer>
+ <j:HContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsCenter" className="wrapper">
+ <j:Card width="100" height="50%">
+ <j:Label text="vert centered"/>
+ </j:Card>
+ <j:Card width="100" height="50%">
+ <j:Label text="vert centered"/>
+ </j:Card>
+ </j:HContainer>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
</j:Grid>