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 <[email protected]>
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>
