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 4c9e2cf  tour-de-jewel: add paddings and title to some pages
4c9e2cf is described below

commit 4c9e2cfd620264bfe3e36666dcf3d99a4f48a343
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Feb 22 01:04:29 2020 +0100

    tour-de-jewel: add paddings and title to some pages
---
 .../src/main/royale/AlertPlayGround.mxml           | 56 +++++++++++----
 .../src/main/royale/ButtonPlayGround.mxml          | 14 ++++
 .../src/main/royale/CheckBoxPlayGround.mxml        | 14 ++++
 .../src/main/royale/ComboBoxPlayGround.mxml        | 12 ++++
 .../src/main/royale/DataGridPlayGround.mxml        | 14 ++++
 .../src/main/royale/DateComponentsPlayGround.mxml  | 14 ++++
 .../src/main/royale/DropDownListPlayGround.mxml    | 13 ++++
 .../src/main/royale/FormsValidationPlayGround.mxml | 14 ++++
 .../src/main/royale/GridPlayGround.mxml            | 17 ++++-
 .../src/main/royale/HeadingsAndText.mxml           | 81 +++++++++++++++++++---
 .../src/main/royale/LayoutsPlayGround.mxml         | 72 +++++++++++--------
 .../src/main/royale/RadioButtonPlayGround.mxml     | 14 ++++
 .../src/main/royale/WizardPlayGround.mxml          | 17 ++++-
 13 files changed, 297 insertions(+), 55 deletions(-)

diff --git a/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
index f36e016..366b3f8 100644
--- a/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/AlertPlayGround.mxml
@@ -85,22 +85,54 @@ limitations under the License.
     </fx:Script>
 
     <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+        <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
-            <j:Card width="350">
-                <html:H3 text="Jewel Alert"/>
+                       <j:VGroup>
+                               <html:H1 text="Jewel Alert" 
className="emphasized-dark"/>
 
-                <!-- 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')"/>
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Alert 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
 
-                <!-- 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"/>
+               <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <!-- Alert 1-->
+            <j:Card>
+                <j:CardPrimaryContent>
+                    <j:Label text="Click the button below to display a simple 
Alert window" multiline="true"/>
+                </j:CardPrimaryContent>
+                <j:CardActions>
+                    <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')"/>
+                               </j:CardActions>
+            </j:Card>
+        </j:GridCell>
 
-                <!-- 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:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <!-- Alert 2-->
+            <j:Card>
+                <j:CardPrimaryContent>
+                    <j:Label text="Click the button below to display an Alert 
window and capture the button pressed by the user." multiline="true"/>
+                <j:Label id="status"/>
+                </j:CardPrimaryContent>
+                <j:CardActions>
+                    <j:Button text="Click Me" click="clickHandler(event)"/>
+                               </j:CardActions>
+            </j:Card>
+        </j:GridCell>
+        
+        <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <!-- Alert 3 (Complex Example)-->
+            <j:Card>
+                <j:CardPrimaryContent>
+                    <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:CardPrimaryContent>
+                <j:CardActions>
+                    <j:Button text="Click Me" click="clickHandler2(event)"/>
+                               </j:CardActions>
             </j:Card>
         </j:GridCell>
        </j:Grid>
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index dcfcd0e..afc6b25 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -47,6 +47,20 @@ limitations under the License.
        </c:beads>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel Button" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Button 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel Button"/>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
index 41b9045..30ebff7 100644
--- a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
@@ -24,6 +24,20 @@ limitations under the License.
        xmlns:c="components.*" sourceCodeUrl="CheckBoxPlayGround.mxml">
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel CheckBox" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Checkbox 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
             <j:Card>
                                <html:H3 text="Jewel CheckBox"/>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
index db60805..1412185 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ComboBoxPlayGround.mxml
@@ -74,9 +74,21 @@ limitations under the License.
        </c:model>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
 
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel ComboBox" 
className="emphasized-dark"/>
 
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel ComboBox 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel ComboBox (String 
Collection)"/>
 
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index 14fb9a3..888451e 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -112,6 +112,20 @@ limitations under the License.
        </c:beads>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel DataGrid" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel DataGrid 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel DataGrid"/>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
index 91ea665..6dddf5c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
@@ -91,6 +91,20 @@ limitations under the License.
        </c:beads>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel DateField &amp; 
DateChooser" className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel DateField 
&amp; DateChooser examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel DateChooser (Default)"/>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
index 83cb969..5ec4967 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DropDownListPlayGround.mxml
@@ -60,6 +60,19 @@ limitations under the License.
        </c:model>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel DropDownList" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel DropDownList 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
 
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
index 62758d9..1ef9b9b 100644
--- a/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/FormsValidationPlayGround.mxml
@@ -24,6 +24,20 @@ limitations under the License.
        xmlns:c="components.*" sourceCodeUrl="FormsValidationPlayGround.mxml">
        
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel Forms &amp; Validation" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Forms &amp; 
Validation examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
             <j:Card>
                                <html:H3 text="Jewel Form And Validators"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
index fe699c7..44e3cb6 100644
--- a/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/GridPlayGround.mxml
@@ -35,8 +35,21 @@ limitations under the License.
        </c:beads>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
-               <html:H3 text="Grids"/>
-               <j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" 
selected="true"/>
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel Grid" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Grids 
examples.</p>]]></j:html>
+                               </j:Label>
+                               <j:CheckBox text="Turn Gap on/off" 
change="useGap = !useGap;" selected="true"/>
+                       </j:VGroup>
+               </j:GridCell>
+               
 
                <j:Grid gap="{useGap}">
                        <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
diff --git a/examples/royale/TourDeJewel/src/main/royale/HeadingsAndText.mxml 
b/examples/royale/TourDeJewel/src/main/royale/HeadingsAndText.mxml
index 9e1287e..fef0099 100644
--- a/examples/royale/TourDeJewel/src/main/royale/HeadingsAndText.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/HeadingsAndText.mxml
@@ -24,22 +24,81 @@ limitations under the License.
        xmlns:c="components.*" sourceCodeUrl="HeadingsAndText.mxml">
        
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
-            <j:Card>
-                               <html:H3 text="Headings and text"/>
+                       <j:VGroup>
+                               <html:H1 text="Jewel Headings &amp; Text" 
className="emphasized-dark"/>
 
-                               <html:H1 text="Heading H1"/>
-                               <html:H2 text="Heading H2"/>
-                               <html:H3 text="Heading H3"/>
-                               <html:H4 text="Heading H4"/>
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Headings 
&amp; Text examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
 
-                               <html:Hr width="100%"/>
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+            <j:Card>
+                               <j:CardHeader>
+                                       <html:H3 text="Headings and text"/>
+                               </j:CardHeader>
+                               <j:CardPrimaryContent>
+                                       <html:H1 text="Heading H1"/>
+                                       <html:H2 text="Heading H2"/>
+                                       <html:H3 text="Heading H3"/>
+                                       <html:H4 text="Heading H4"/>
+                                       <html:Hr width="100%"/>
+                                       <html:Span text="Some span text."/>
+                                       <html:Hr width="100%"/>
+
+                                       <j:Label text="Normal text used in a 
div, texts and fields with single line or multiple lines." multiline="true"/>
+                               </j:CardPrimaryContent>
+                       </j:Card>
+        </j:GridCell>
+               
+               <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <j:Card>
+                               <j:CardHeader>
+                                       <html:H3 text="Primary Text Colors"/>
+                               </j:CardHeader>
+                               <j:CardPrimaryContent>
+                                       <j:Label text="Primary Color lightest" 
className="primary-lightest"/>
+                                       <j:Label text="Primary Color light" 
className="primary-light"/>
+                                       <j:Label text="Primary Color normal" 
className="primary-normal"/>
+                                       <j:Label text="Primary Color dark" 
className="primary-dark"/>
+                                       <j:Label text="Primary Color darkest" 
className="primary-darkest"/>
+                               </j:CardPrimaryContent>
+                       </j:Card>
+        </j:GridCell>
 
-                               <html:Span text="Some span text."/>
-                               
-                               <html:Hr width="100%"/>
+               <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <j:Card>
+                               <j:CardHeader>
+                                       <html:H3 text="Secondary Text Colors"/>
+                               </j:CardHeader>
+                               <j:CardPrimaryContent>
+                                       <j:Label text="Secondary Color 
lightest" className="secondary-lightest"/>
+                                       <j:Label text="Secondary Color light" 
className="secondary-light"/>
+                                       <j:Label text="Secondary Color normal" 
className="secondary-normal"/>
+                                       <j:Label text="Secondary Color dark" 
className="secondary-dark"/>
+                                       <j:Label text="Secondary Color darkest" 
className="secondary-darkest"/>
+                               </j:CardPrimaryContent>
+                       </j:Card>
+        </j:GridCell>
 
-                               <j:Label text="Normal text used in a div, texts 
and fields with single line or multiple lines." multiline="true"/>
+               <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+            <j:Card>
+                               <j:CardHeader>
+                                       <html:H3 text="Emphasized Text Colors"/>
+                               </j:CardHeader>
+                               <j:CardPrimaryContent>
+                                       <j:Label text="Emphasized Color 
lightest" className="emphasized-lightest"/>
+                                       <j:Label text="Emphasized Color light" 
className="emphasized-light"/>
+                                       <j:Label text="Emphasized Color normal" 
className="emphasized-normal"/>
+                                       <j:Label text="Emphasized Color dark" 
className="emphasized-dark"/>
+                                       <j:Label text="Emphasized Color 
darkest" className="emphasized-darkest"/>
+                               </j:CardPrimaryContent>
                        </j:Card>
         </j:GridCell>
        </j:Grid>
diff --git a/examples/royale/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index 0d8b6dc..f595be0 100644
--- a/examples/royale/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -23,36 +23,53 @@ limitations under the License.
        xmlns:js="library://ns.apache.org/royale/basic" 
        xmlns:c="components.*" sourceCodeUrl="LayoutsPlayGround.mxml">
 
-       <!-- <j:beads>
-        <js:ContainerDataBinding/>
-    </j:beads> -->
-
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
-               <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
-                       <j:Card>
-                               <html:H3 text="Jewel BasicLayout (width200, 
height:200px)"/>
-
-                               <j:Group width="200" height="200" 
className="wrapper">
-                                       <j:Button text="Origin" 
emphasis="primary"/>
-                                       <j:Button text="x:30,y:30" 
emphasis="secondary" x="30" y="30"/>
-                                       <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:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel Layouts" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Layouts 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
 
+               <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:Card>
+                               <j:CardHeader>
+                                       <html:H3 text="Jewel BasicLayout"/>
+                               </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"/>
+                                               <j:Button text="x:30,y:30" 
emphasis="secondary" x="30" y="30"/>
+                                               <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="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
+               <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
-                               <html:H4 text="Jewel HorizontalLayout"/>
-
-                               <j:HGroup id="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:HSlider width="200" value="3" minimum="0" 
maximum="10" valueChange="hg.gap = event.target.value"/>
+                               <j:CardHeader>
+                                       <html:H3 text="Jewel HorizontalLayout"/>
+                               </j:CardHeader>
+                               <j:CardPrimaryContent>
+                                       <j:HGroup id="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"/>
+                               </j:CardActions>
                        </j:Card>
                </j:GridCell>
                <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
@@ -69,8 +86,7 @@ limitations under the License.
                                <j:HSlider width="200" value="3" minimum="0" 
maximum="10" valueChange="vg.gap = event.target.value"/>
                        </j:Card>
                </j:GridCell>
-       </j:Grid>
-       <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+
                <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel HorizontalCenteredLayout 
(width200, height:200px)"/>
@@ -108,9 +124,7 @@ limitations under the License.
 
                        </j:Card>
                </j:GridCell>
-       </j:Grid>
 
-       <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
                <j:GridCell desktopNumerator="1" desktopDenominator="3" 
tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" 
phoneDenominator="1">
                        <j:Card>
                                <html:H3 text="Jewel HorizontalFlowLayout"/>
diff --git 
a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
index 26f5c42..617fb93 100644
--- a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
@@ -24,6 +24,20 @@ limitations under the License.
        xmlns:c="components.*" sourceCodeUrl="RadioButtonPlayGround.mxml">
        
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel RadioButton" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel RadioButton 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
             <j:Card>
                                <html:H3 text="Jewel RadioButton"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
index f758057..25b6501 100644
--- a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
@@ -54,8 +54,23 @@ limitations under the License.
        </c:beads>
 
        <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+               <j:beads>
+                       <j:Paddings paddingTop="0" paddingLeft="50" 
paddingRight="50" paddingBottom="50"/>
+               </j:beads>
+
+               <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
+                       <j:VGroup>
+                               <html:H1 text="Jewel Wizard" 
className="emphasized-dark"/>
+
+                               <j:Label multiline="true">
+                                       <j:html><![CDATA[<p>Jewel Wizard 
examples.</p>]]></j:html>
+                               </j:Label>
+                       </j:VGroup>
+               </j:GridCell>
+
                <j:GridCell desktopNumerator="1" desktopDenominator="1" 
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" 
phoneDenominator="1">
-                       <j:Card width="600">
+                       <j:Card>
+                               
                                <j:Wizard id="wizard" width="100%" height="500">
                                        <j:previousButton>
                                                <j:Group>

Reply via email to