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/01/11 18:58:10 UTC
[royale-asjs] branch develop updated: tour-de-jewel: improve half
of the screen layouts to show similar
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 b52270a tour-de-jewel: improve half of the screen layouts to show similar
b52270a is described below
commit b52270a396972a4112c9f66e3d50a6f5701e4994
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jan 11 19:57:58 2020 +0100
tour-de-jewel: improve half of the screen layouts to show similar
---
.../src/main/royale/AlertPlayGround.mxml | 32 +-
.../src/main/royale/ButtonBarPlayGround.mxml | 1 +
.../src/main/royale/ButtonPlayGround.mxml | 8 +-
.../src/main/royale/CardPlayGround.mxml | 29 +-
.../src/main/royale/CheckBoxPlayGround.mxml | 42 +-
.../src/main/royale/ComboBoxPlayGround.mxml | 14 +-
.../src/main/royale/DataGridPlayGround.mxml | 5 +-
.../src/main/royale/DateComponentsPlayGround.mxml | 11 +-
.../src/main/royale/FormsValidationPlayGround.mxml | 13 +-
.../src/main/royale/GridPlayGround.mxml | 741 +++++++++++----------
.../src/main/royale/RadioButtonPlayGround.mxml | 44 +-
.../src/main/royale/TablePlayGround.mxml | 2 +-
.../src/main/royale/ViewStatesPlayGround.mxml | 2 +-
.../src/main/royale/WizardPlayGround.mxml | 269 ++++----
14 files changed, 624 insertions(+), 589 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
index 8bb7532..f36e016 100644
--- a/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
@@ -84,21 +84,25 @@ limitations under the License.
]]>
</fx:Script>
- <j:Card width="350">
- <html:H3 text="Jewel Alert"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card width="350">
+ <html:H3 text="Jewel Alert"/>
- <!-- Alert 1-->
- <j:Label text="Click the button below to display a simple Alert window" multiline="true"/>
- <j:Button text="Click Me" click="Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')"/>
+ <!-- Alert 1-->
+ <j:Label text="Click the button below to display a simple Alert window" multiline="true"/>
+ <j:Button text="Click Me" click="Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')"/>
- <!-- Alert 2-->
- <j:Label text="Click the button below to display an Alert window and capture the button pressed by the user." multiline="true"/>
- <j:Button text="Click Me" click="clickHandler(event)"/>
- <j:Label id="status"/>
-
- <!-- Alert 3 (Complex Example)-->
- <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts." multiline="true"/>
- <j:Button text="Click Me" click="clickHandler2(event)"/>
- </j:Card>
+ <!-- Alert 2-->
+ <j:Label text="Click the button below to display an Alert window and capture the button pressed by the user." multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler(event)"/>
+ <j:Label id="status"/>
+ <!-- Alert 3 (Complex Example)-->
+ <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts." multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler2(event)"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 00c67bc..9ba9ca7 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -65,6 +65,7 @@ limitations under the License.
<j:Label localId="bb_label"/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Jewel ButtonBar"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index d5502ee..dcfcd0e 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -75,6 +75,7 @@ limitations under the License.
<j:SimpleButton emphasis="{StyledUIBase.EMPHASIZED}"/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Button Sizes"/>
@@ -101,8 +102,7 @@ limitations under the License.
</j:Button>
</j:Card>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Button with Icons"/>
@@ -128,6 +128,7 @@ limitations under the License.
</j:HGroup>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Button size"/>
@@ -141,9 +142,7 @@ limitations under the License.
<j:Label text="Resize button to: '{reizableButton.width}x{reizableButton.height}'"/>
</j:Card>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel ToggleButton"/>
@@ -192,6 +191,7 @@ limitations under the License.
</j:HGroup>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Buttons with Badges"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/CardPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/CardPlayGround.mxml
index 3ccdebd..fb5d82c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/CardPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/CardPlayGround.mxml
@@ -23,13 +23,26 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*" sourceCodeUrl="CardPlayGround.mxml">
- <j:Card width="600">
- <html:H3 text="items expand test"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel Card"/>
- <j:HGroup itemsExpand="true" gap="3">
- <j:Button text="Hello"/>
- <j:Button text="Apache"/>
- <j:Button text="Royale!!!!"/>
- </j:HGroup>
- </j:Card>
+ <j:Label multiline="true" text="Apache Royale Card is 100% width by default and uses a Vertical layout with some default gap."/>
+ <j:Button text="Action" emphasis="primary"/>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="items expand test"/>
+
+ <j:HGroup itemsExpand="true" gap="3">
+ <j:Button text="Hello"/>
+ <j:Button text="Apache"/>
+ <j:Button text="Royale!!!!"/>
+ </j:HGroup>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
index c9bc7f3..99ce146 100644
--- a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
@@ -23,24 +23,28 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*" sourceCodeUrl="CheckBoxPlayGround.mxml">
- <j:Card width="350">
- <html:H3 text="Jewel CheckBox"/>
-
- <j:CheckBox text="Not Checkbox"/>
-
- <j:CheckBox text="Checked" selected="true"/>
-
- <j:CheckBox text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:CheckBox>
-
- <j:CheckBox text="Checked And Disabled" selected="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:CheckBox>
- </j:Card>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel CheckBox"/>
+
+ <j:CheckBox text="Not Checkbox"/>
+
+ <j:CheckBox text="Checked" selected="true"/>
+
+ <j:CheckBox text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
+
+ <j:CheckBox text="Checked And Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
index 44ea4b2..988d66d 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
@@ -87,12 +87,14 @@ limitations under the License.
<j:Grid gap="true" itemsVerticalAlign="itemsCentered">
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
- <j:ComboBox id="watchmenComboBox" dataProvider="{listModel.watchmen}">
- <j:beads>
- <j:ComboBoxTextPrompt prompt="Watchmen Team..."/>
- </j:beads>
- </j:ComboBox>
- <j:Button text="Assign new data" click="assignNewData()"/>
+ <j:HGroup gap="3">
+ <j:ComboBox id="watchmenComboBox" dataProvider="{listModel.watchmen}">
+ <j:beads>
+ <j:ComboBoxTextPrompt prompt="Watchmen Team..."/>
+ </j:beads>
+ </j:ComboBox>
+ <j:Button text="Assign new data" click="assignNewData()"/>
+ </j:HGroup>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1" itemsVerticalAlign="itemsCentered" width="290">
<j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index d867d43..f1a6d41 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -101,6 +101,7 @@ limitations under the License.
<j:Label id="datagrid_lb" text="DataGrid selection will be shown here"/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DataGrid"/>
@@ -129,9 +130,7 @@ limitations under the License.
</j:HGroup>
</j:Card>
</j:GridCell>
- </j:Grid>
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DataGrid"/>
@@ -158,6 +157,7 @@ limitations under the License.
<j:Label id="datagrid3_lb" text="DataGrid selection will be shown here"/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DataGrid"/>
@@ -180,6 +180,7 @@ limitations under the License.
<j:Button text="Refresh Grid" click="refreshGrid(datagrid4, (listModel as ListsModel).iconListData)" emphasis="primary"/>
</j:Card>
</j:GridCell>
+
</j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
index ba5c32e..91ea665 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
@@ -25,8 +25,6 @@ limitations under the License.
<fx:Script>
<![CDATA[
- import org.apache.royale.html.accessories.DateFormatDDMMYYYY;
-
private function dateChooserDefaultChanged():void
{
dateChooserDefaultSelectedDate.html = "<strong>DateChooser selected date:</strong> " + dateChooserDefault.selectedDate;
@@ -92,7 +90,7 @@ limitations under the License.
<js:ContainerDataBinding/>
</c:beads>
- <j:Grid gap="true">
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DateChooser (Default)"/>
@@ -109,9 +107,6 @@ limitations under the License.
</j:Card>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DateField (Default)"/>
@@ -144,9 +139,7 @@ limitations under the License.
<j:Label id="dateFieldESSelectedDate" multiline="true" html="<strong>DateField fecha seleccionada:</strong> "/>
</j:Card>
</j:GridCell>
- </j:Grid>
-
- <j:Grid gap="true">
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DateChooser - selectedDate: {someDate}"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
index 19d1c12..69dffcb 100644
--- a/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
@@ -23,10 +23,15 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*" sourceCodeUrl="FormsValidationPlayGround.mxml">
- <j:Card width="600">
- <html:H3 text="Jewel Form And Validators"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card width="600">
+ <html:H3 text="Jewel Form And Validators"/>
- <c:FormExample label="Form with validation example"/>
+ <c:FormExample label="Form with validation example"/>
- </j:Card>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
index 106d651..fe699c7 100644
--- a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
@@ -34,375 +34,376 @@ limitations under the License.
<js:ContainerDataBinding/>
</c:beads>
- <html:H3 text="Grids"/>
- <j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="1"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="2"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="2"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="3"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="3"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="3"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4"/>
- </j:GridCell>
- </j:Grid>
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="5"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="5"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="5"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="5"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="5"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="6"/>
- </j:GridCell>
-
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="7"/>
- </j:GridCell>
-
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="8"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="9"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="10"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="11"/>
- </j:GridCell>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <html:H3 text="Grids"/>
+ <j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="1"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ </j:Grid>
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9" tabletNumerator="1" tabletDenominator="4" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11" tabletNumerator="1" tabletDenominator="5" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid id="g" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H3 text="Grids Responsive Visibility"/>
+
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2a"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2" wideScreenVisible="false">
+ <html:Div className="box" text="2b - Hidden in WideScreen"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3" phoneVisible="false">
+ <html:Div className="box" text="3a - Hidden in Phones"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3" tabletVisible="false">
+ <html:Div className="box" text="3b - Hidden in Tablet"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3c"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4a"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4b"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1" desktopVisible="false">
+ <html:Div className="box" text="4c - Hidden in Desktop"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4d"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H3 text="Grids Horizontal Align"/>
+
+ <html:H4 text=" itemsTop"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsTop">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsBottom"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsBottom">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsCentered"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsSameHeight"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ </j:Grid>
</j:Grid>
-
- <j:Grid id="g" gap="{useGap}">
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="12" tabletNumerator="1" tabletDenominator="6" phoneNumerator="1" phoneDenominator="4">
- <html:Div className="box" text="12"/>
- </j:GridCell>
- </j:Grid>
-
- <html:H3 text="Grids Responsive Visibility"/>
-
- <j:Grid gap="true">
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2">
- <html:Div className="box" text="2a"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="2" wideScreenVisible="false">
- <html:Div className="box" text="2b - Hidden in WideScreen"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="true">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3" phoneVisible="false">
- <html:Div className="box" text="3a - Hidden in Phones"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3" tabletVisible="false">
- <html:Div className="box" text="3b - Hidden in Tablet"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="3c"/>
- </j:GridCell>
- </j:Grid>
-
- <j:Grid gap="true">
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4a"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4b"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1" desktopVisible="false">
- <html:Div className="box" text="4c - Hidden in Desktop"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="4" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
- <html:Div className="box" text="4d"/>
- </j:GridCell>
- </j:Grid>
-
- <html:H3 text="Grids Horizontal Align"/>
-
- <html:H4 text=" itemsTop"/>
-
- <j:Grid gap="true" itemsVerticalAlign="itemsTop">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
- </j:GridCell>
- </j:Grid>
-
- <html:H4 text=" itemsBottom"/>
-
- <j:Grid gap="true" itemsVerticalAlign="itemsBottom">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
- </j:GridCell>
- </j:Grid>
-
- <html:H4 text=" itemsCentered"/>
-
- <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 100px" height="100"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 200px" height="200"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="height: 300px" height="300"/>
- </j:GridCell>
- </j:Grid>
-
- <html:H4 text=" itemsSameHeight"/>
-
- <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="3">
- <html:Div className="box" text="Same Height"/>
- </j:GridCell>
- </j:Grid>
-
-
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
index d0ea7a6..d2ce460 100644
--- a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
@@ -23,23 +23,29 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*" sourceCodeUrl="RadioButtonPlayGround.mxml">
- <j:Card width="350">
- <html:H3 text="Jewel RadioButton"/>
-
- <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
- <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2" selected="true"/>
- <j:RadioButton text="RadioButton 3" groupName="radios" value="Test 3"/>
-
- <j:RadioButton text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:RadioButton>
-
- <j:RadioButton text="Set and Disabled" selected="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:RadioButton>
- </j:Card>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel RadioButton"/>
+
+ <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
+ <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2" selected="true"/>
+ <j:RadioButton text="RadioButton 3" groupName="radios" value="Test 3"/>
+
+ <j:RadioButton text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
+
+ <j:RadioButton text="Set and Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/TablePlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/TablePlayGround.mxml
index 66cf5d9..41f7ed3 100644
--- a/examples/royale/TourDeJewel/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/TablePlayGround.mxml
@@ -213,8 +213,8 @@ limitations under the License.
</j:VGroup>
</j:HGroup>
</j:Card>
-
</j:GridCell>
+
</j:Grid>
<fx:Script>
diff --git a/examples/royale/TourDeJewel/src/main/royale/ViewStatesPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ViewStatesPlayGround.mxml
index c720875..764a0c6 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ViewStatesPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ViewStatesPlayGround.mxml
@@ -23,7 +23,7 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*" sourceCodeUrl="ViewStatesPlayGround.mxml">
- <j:Grid gap="true">
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
<c:ViewStatesIncludeIn/>
<c:ViewStatesDotNotation/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
index 6686acc..f758057 100644
--- a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
@@ -53,136 +53,141 @@ limitations under the License.
<js:ContainerDataBinding/>
</c:beads>
- <j:Card width="600">
- <j:Wizard id="wizard" width="100%" height="500">
- <j:previousButton>
- <j:Group>
- <j:IconButton emphasis="{StyledUIBase.SECONDARY}">
- <j:icon>
- <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}" material="true" size="48"/>
- </j:icon>
- </j:IconButton>
- </j:Group>
- </j:previousButton>
-
- <j:nextButton>
- <j:Group>
- <j:IconButton emphasis="{StyledUIBase.SECONDARY}">
- <j:icon>
- <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}" material="true" size="48"/>
- </j:icon>
- </j:IconButton>
- </j:Group>
- </j:nextButton>
-
- <j:WizardPage name="page1" exitPage="formaExample.formValidator.removeAllErrorTips()">
- <j:step>
- <j:WizardStep name="page1" nextStep="page2" initialPage="true" stepLabel="Page 1"/>
- </j:step>
-
- <j:Group>
- <j:beads>
- <j:VerticalCenteredLayout gap="9"/>
- </j:beads>
-
- <c:FormExample localId="formaExample" label="Form Example in Page 1"/>
- </j:Group>
- </j:WizardPage>
-
- <j:WizardPage name="page2">
- <j:step>
- <j:WizardStep id="sl" name="page2" previousStep="page1" nextStep="page3" stepLabel="Page 2"/>
- </j:step>
-
- <j:Group>
- <j:beads>
- <j:VerticalCenteredLayout gap="9"/>
- </j:beads>
- <html:H1 text="{sl.stepLabel}"/>
- <j:CheckBox text="autoSkip next page?" change="sl.autoSkip = event.target.selected"/>
- </j:Group>
-
- </j:WizardPage>
-
- <j:WizardPage name="page3" localId="page3">
- <j:step>
- <j:WizardStep name="page3" previousStep="page2" nextStep="page4" stepLabel="Page 3"/>
- </j:step>
-
- <j:Group>
- <j:beads>
- <j:VerticalCenteredLayout gap="9"/>
- </j:beads>
- <html:H1 text="Page 3"/>
- <j:Button text="Go To Page 1" emphasis="primary" click="goToPage(1);"/>
- <j:Button text="Go To Page 6" emphasis="primary" click="goToPage(6);"/>
- <j:HGroup gap="3">
- <j:Button text="Go To Previous" emphasis="emphasized" click="goToPreviousPage();"/>
- <j:Button text="Go To Next" emphasis="emphasized" click="goToNextPage();"/>
- </j:HGroup>
- </j:Group>
-
- </j:WizardPage>
-
- <j:WizardPage localId="page4" name="page4">
- <j:step>
- <j:WizardStep name="page4" previousStep="page3" nextStep="page5" stepLabel="Page 4"/>
- </j:step>
-
- <j:Group>
- <j:beads>
- <j:VerticalCenteredLayout gap="9"/>
- </j:beads>
- <html:H1 text="Page 4"/>
- <j:CheckBox text="show next button?" selected="true" change="page4.showNextButton = event.target.selected"/>
- <j:CheckBox text="show previous button?" selected="true" change="page4.showPreviousButton = event.target.selected"/>
- </j:Group>
-
- </j:WizardPage>
-
- <j:WizardPage name="page5">
- <j:step>
- <j:WizardStep name="page5" previousStep="page4" nextStep="page6" stepLabel="Page 5"/>
- </j:step>
-
- <j:beads>
- <j:ScrollingViewport/>
- </j:beads>
-
- <j:Grid>
- <j:GridCell desktopNumerator="1" desktopDenominator="1"
- tabletNumerator="1" tabletDenominator="1"
- phoneNumerator="1" phoneDenominator="1">
-
- <html:H1 text="Page 5 (With Scroll)"/>
- <j:Label multiline="true" width="450" html="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus blandit risus sed elementum. Nulla consectetur vestibulum fringilla. Pellentesque id facilisis tortor. Fusce neque velit, placerat sit amet nibh at, interdum fringilla lectus. Pellentesque eget porta nulla. Aenean eu nisi eros. Sed consequat convallis neque vel iaculis. Aliquam ut varius nunc. Fusce sit amet mattis nisl. Nunc nibh diam, dictum sit amet lacus nec, moll [...]
-
- Donec tincidunt sit amet nisl ut varius. Sed varius massa augue, in convallis risus cursus ac. Donec accumsan lobortis tortor, quis mollis velit mollis nec. Cras placerat ullamcorper tellus. Suspendisse potenti. Aenean sed ipsum augue. Phasellus ullamcorper maximus urna, imperdiet facilisis risus ornare eget. Praesent imperdiet posuere nisl ut efficitur. Sed pharetra est eu lacus volutpat, nec congue urna sodales.
-
- Maecenas et convallis nisi, vel lobortis ex. Aliquam scelerisque interdum libero quis elementum. Nunc vitae auctor nunc, a lacinia sem. Duis ut posuere erat, at finibus tortor. Pellentesque in nisl in tellus rhoncus accumsan non eu nulla. In gravida imperdiet nibh, eget tincidunt lacus convallis id. Maecenas vel eleifend nunc. Quisque mattis turpis sed turpis sagittis fringilla. Donec cursus tempus tellus eu sodales. Pellentesque et tortor at nisl aliquet placerat. Nulla facilisi. Nunc [...]
-
- Nam massa ante, hendrerit quis sodales eu, auctor eu quam. Quisque ullamcorper vitae est non volutpat. Proin porta metus in purus pharetra, vel lobortis massa efficitur. Proin consequat metus sit amet ipsum consectetur, vitae mollis neque imperdiet. Maecenas condimentum, nulla vel placerat interdum, eros neque mollis dui, non cursus orci turpis eget ipsum. Nulla non velit at velit laoreet finibus. Pellentesque non consequat sapien. Cras et porttitor lectus. Aliquam ultricies rhoncus sem [...]
- </j:GridCell>
- </j:Grid>
-
- </j:WizardPage>
-
- <j:WizardPage name="page6">
- <j:step>
- <j:WizardStep name="page6" previousStep="page5" stepLabel="Page 6"/>
- </j:step>
-
- <j:beads>
- <j:ScrollingViewport/>
- </j:beads>
-
- <j:VGroup itemsVerticalAlign="itemsCentered" width="250">
- <html:H3 innerHTML="<strong>This Content is centered and has scroll. The scroll bar apears near the right border.</strong><br><br>"/>
- <j:Label multiline="true" html="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus blandit risus sed elementum. Nulla consectetur vestibulum fringilla. Pellentesque id facilisis tortor. Fusce neque velit, placerat sit amet nibh at, interdum fringilla lectus. Pellentesque eget porta nulla. Aenean eu nisi eros. Sed consequat convallis neque vel iaculis. Aliquam ut varius nunc. Fusce sit amet mattis nisl. Nunc nibh diam, dictum sit amet lacus nec, mollis aliquam ve [...]
- <j:Button text="Hi!" emphasis="primary" width="180"/>
- </j:VGroup>
-
- </j:WizardPage>
- </j:Wizard>
- </j:Card>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card width="600">
+ <j:Wizard id="wizard" width="100%" height="500">
+ <j:previousButton>
+ <j:Group>
+ <j:IconButton emphasis="{StyledUIBase.SECONDARY}">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_LEFT}" material="true" size="48"/>
+ </j:icon>
+ </j:IconButton>
+ </j:Group>
+ </j:previousButton>
+
+ <j:nextButton>
+ <j:Group>
+ <j:IconButton emphasis="{StyledUIBase.SECONDARY}">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.KEYBOARD_ARROW_RIGHT}" material="true" size="48"/>
+ </j:icon>
+ </j:IconButton>
+ </j:Group>
+ </j:nextButton>
+
+ <j:WizardPage name="page1" exitPage="formaExample.formValidator.removeAllErrorTips()">
+ <j:step>
+ <j:WizardStep name="page1" nextStep="page2" initialPage="true" stepLabel="Page 1"/>
+ </j:step>
+
+ <j:Group>
+ <j:beads>
+ <j:VerticalCenteredLayout gap="9"/>
+ </j:beads>
+
+ <c:FormExample localId="formaExample" label="Form Example in Page 1"/>
+ </j:Group>
+ </j:WizardPage>
+
+ <j:WizardPage name="page2">
+ <j:step>
+ <j:WizardStep id="sl" name="page2" previousStep="page1" nextStep="page3" stepLabel="Page 2"/>
+ </j:step>
+
+ <j:Group>
+ <j:beads>
+ <j:VerticalCenteredLayout gap="9"/>
+ </j:beads>
+ <html:H1 text="{sl.stepLabel}"/>
+ <j:CheckBox text="autoSkip next page?" change="sl.autoSkip = event.target.selected"/>
+ </j:Group>
+
+ </j:WizardPage>
+
+ <j:WizardPage name="page3" localId="page3">
+ <j:step>
+ <j:WizardStep name="page3" previousStep="page2" nextStep="page4" stepLabel="Page 3"/>
+ </j:step>
+
+ <j:Group>
+ <j:beads>
+ <j:VerticalCenteredLayout gap="9"/>
+ </j:beads>
+ <html:H1 text="Page 3"/>
+ <j:Button text="Go To Page 1" emphasis="primary" click="goToPage(1);"/>
+ <j:Button text="Go To Page 6" emphasis="primary" click="goToPage(6);"/>
+ <j:HGroup gap="3">
+ <j:Button text="Go To Previous" emphasis="emphasized" click="goToPreviousPage();"/>
+ <j:Button text="Go To Next" emphasis="emphasized" click="goToNextPage();"/>
+ </j:HGroup>
+ </j:Group>
+
+ </j:WizardPage>
+
+ <j:WizardPage localId="page4" name="page4">
+ <j:step>
+ <j:WizardStep name="page4" previousStep="page3" nextStep="page5" stepLabel="Page 4"/>
+ </j:step>
+
+ <j:Group>
+ <j:beads>
+ <j:VerticalCenteredLayout gap="9"/>
+ </j:beads>
+ <html:H1 text="Page 4"/>
+ <j:CheckBox text="show next button?" selected="true" change="page4.showNextButton = event.target.selected"/>
+ <j:CheckBox text="show previous button?" selected="true" change="page4.showPreviousButton = event.target.selected"/>
+ </j:Group>
+
+ </j:WizardPage>
+
+ <j:WizardPage name="page5">
+ <j:step>
+ <j:WizardStep name="page5" previousStep="page4" nextStep="page6" stepLabel="Page 5"/>
+ </j:step>
+
+ <j:beads>
+ <j:ScrollingViewport/>
+ </j:beads>
+
+ <j:Grid>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+
+ <html:H1 text="Page 5 (With Scroll)"/>
+ <j:Label multiline="true" width="450" html="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus blandit risus sed elementum. Nulla consectetur vestibulum fringilla. Pellentesque id facilisis tortor. Fusce neque velit, placerat sit amet nibh at, interdum fringilla lectus. Pellentesque eget porta nulla. Aenean eu nisi eros. Sed consequat convallis neque vel iaculis. Aliquam ut varius nunc. Fusce sit amet mattis nisl. Nunc nibh diam, dictum sit amet lacus nec, mo [...]
+
+ Donec tincidunt sit amet nisl ut varius. Sed varius massa augue, in convallis risus cursus ac. Donec accumsan lobortis tortor, quis mollis velit mollis nec. Cras placerat ullamcorper tellus. Suspendisse potenti. Aenean sed ipsum augue. Phasellus ullamcorper maximus urna, imperdiet facilisis risus ornare eget. Praesent imperdiet posuere nisl ut efficitur. Sed pharetra est eu lacus volutpat, nec congue urna sodales.
+
+ Maecenas et convallis nisi, vel lobortis ex. Aliquam scelerisque interdum libero quis elementum. Nunc vitae auctor nunc, a lacinia sem. Duis ut posuere erat, at finibus tortor. Pellentesque in nisl in tellus rhoncus accumsan non eu nulla. In gravida imperdiet nibh, eget tincidunt lacus convallis id. Maecenas vel eleifend nunc. Quisque mattis turpis sed turpis sagittis fringilla. Donec cursus tempus tellus eu sodales. Pellentesque et tortor at nisl aliquet placerat. Nulla facilisi. Nun [...]
+
+ Nam massa ante, hendrerit quis sodales eu, auctor eu quam. Quisque ullamcorper vitae est non volutpat. Proin porta metus in purus pharetra, vel lobortis massa efficitur. Proin consequat metus sit amet ipsum consectetur, vitae mollis neque imperdiet. Maecenas condimentum, nulla vel placerat interdum, eros neque mollis dui, non cursus orci turpis eget ipsum. Nulla non velit at velit laoreet finibus. Pellentesque non consequat sapien. Cras et porttitor lectus. Aliquam ultricies rhoncus s [...]
+ </j:GridCell>
+ </j:Grid>
+
+ </j:WizardPage>
+
+ <j:WizardPage name="page6">
+ <j:step>
+ <j:WizardStep name="page6" previousStep="page5" stepLabel="Page 6"/>
+ </j:step>
+
+ <j:beads>
+ <j:ScrollingViewport/>
+ </j:beads>
+
+ <j:VGroup itemsVerticalAlign="itemsCentered" width="250">
+ <html:H3 innerHTML="<strong>This Content is centered and has scroll. The scroll bar apears near the right border.</strong><br><br>"/>
+ <j:Label multiline="true" html="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris finibus blandit risus sed elementum. Nulla consectetur vestibulum fringilla. Pellentesque id facilisis tortor. Fusce neque velit, placerat sit amet nibh at, interdum fringilla lectus. Pellentesque eget porta nulla. Aenean eu nisi eros. Sed consequat convallis neque vel iaculis. Aliquam ut varius nunc. Fusce sit amet mattis nisl. Nunc nibh diam, dictum sit amet lacus nec, mollis aliquam [...]
+ <j:Button text="Hi!" emphasis="primary" width="180"/>
+ </j:VGroup>
+
+ </j:WizardPage>
+ </j:Wizard>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>