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 2018/09/19 11:00:25 UTC

[royale-asjs] branch develop updated: And important redesign of layouts to make it more robust and clearly diferentiate absolute layout from others, and an start of example of all layouts. As well some refactor of components to supportClasses package for better organization

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 654d27d  And important redesign of layouts to make it more robust and clearly diferentiate absolute layout from others, and an start of example of all layouts. As well some refactor of components to supportClasses package for better organization
654d27d is described below

commit 654d27dbe6c8f65d61886bcb465e5bd237e834cb
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Sep 19 13:00:18 2018 +0200

    And important redesign of layouts to make it more robust and clearly diferentiate absolute layout from others, and an start of example of all layouts. As well some refactor of components to supportClasses package for better organization
---
 examples/royale/JewelExample/.vscode/tasks.json    |  4 +-
 .../src/main/royale/LayoutsPlayGround.mxml         | 82 +++++++++++++++++++++
 .../JewelExample/src/main/royale/MainContent.mxml  |  1 +
 .../src/main/royale/ViewStatesPlayGround.mxml      | 17 ++---
 .../royale/components/ViewStatesDotNotation.mxml   |  9 ++-
 .../royale/components/ViewStatesIncludeIn.mxml     |  9 ++-
 .../src/main/royale/models/MainNavigationModel.as  |  3 +-
 frameworks/projects/Jewel/.vscode/tasks.json       |  8 ++-
 .../projects/Jewel/src/main/resources/defaults.css | 84 ++++++++++++++++++++--
 .../Jewel/src/main/resources/jewel-manifest.xml    | 14 ++--
 .../jewel/beads/layouts/ResponsiveVisibility.as    |  2 +-
 .../apache/royale/jewel/beads/views/AlertView.as   | 40 ++++++-----
 .../jewel/supportClasses/combobox/ComboBoxList.as  |  8 +--
 .../{ => supportClasses/drawer}/DrawerContent.as   |  3 +-
 .../{ => supportClasses/drawer}/DrawerHeader.as    |  3 +-
 .../{ => supportClasses/topappbar}/TopAppBarRow.as |  3 +-
 .../topappbar}/TopAppBarSection.as                 |  3 +-
 .../topappbar}/TopAppBarTitle.as                   |  3 +-
 .../projects/Jewel/src/main/sass/_global.sass      | 19 ++---
 .../Jewel/src/main/sass/components/_alert.sass     |  4 +-
 .../sass/components/_applicationmaincontent.sass   |  2 +-
 .../Jewel/src/main/sass/components/_divider.sass   |  2 +-
 .../Jewel/src/main/sass/components/_drawer.sass    |  6 ++
 .../Jewel/src/main/sass/components/_layout.sass    |  2 +-
 .../src/main/sass/components/_sectioncontent.sass  |  1 +
 .../Jewel/src/main/sass/components/_table.sass     |  7 +-
 .../Jewel/src/main/sass/components/_topappbar.sass | 12 ++--
 27 files changed, 269 insertions(+), 82 deletions(-)

diff --git a/examples/royale/JewelExample/.vscode/tasks.json b/examples/royale/JewelExample/.vscode/tasks.json
index 6a0a5cf..1119e5f 100644
--- a/examples/royale/JewelExample/.vscode/tasks.json
+++ b/examples/royale/JewelExample/.vscode/tasks.json
@@ -23,8 +23,10 @@
             ],
             "group": "build",
             "presentation": {
+                "echo": true,
                 "reveal": "always",
-                "panel": "new"
+                "focus": true,
+                "panel": "dedicated"
             },
             "problemMatcher": [
                 "$nextgenas_nomatch"
diff --git a/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml
new file mode 100644
index 0000000..66b9726
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:j="library://ns.apache.org/royale/jewel"
+				xmlns:html="library://ns.apache.org/royale/html"
+				xmlns:js="library://ns.apache.org/royale/basic">
+
+	<fx:Script>
+		<![CDATA[      
+            private function clickHandler(event:MouseEvent):void {
+                // button.emphasis = (button.emphasis == Button.PRIMARY) ? "" : Button.PRIMARY;
+            }
+
+		]]>
+	</fx:Script>
+	
+	<!-- <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 Group"/>
+				
+				<j:Group>
+					<j:Button text="X" emphasis="primary"/>
+					<j:Button text="Y" emphasis="secondary"/>
+					<j:Button text="Z" emphasis="emphasized"/>
+				</j:Group>
+
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="3"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H4 text="Jewel HGroup"/>
+
+				<j:HGroup>
+					<j:Button text="X" emphasis="primary"/>
+					<j:Button text="Y" emphasis="secondary"/>
+					<j:Button text="Z" emphasis="emphasized"/>
+				</j:HGroup>
+				
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="3"
+					tabletNumerator="1" tabletDenominator="3"
+					phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H4 text="Jewel VGroup"/>
+		
+				<j:VGroup>
+					<j:Button text="X" emphasis="primary"/>
+					<j:Button text="Y" emphasis="secondary"/>
+					<j:Button text="Z" emphasis="emphasized"/>
+				</j:VGroup>
+			</j:Card>
+		</j:GridCell>
+	</j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 4f9f636..1d0f8ca 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -143,6 +143,7 @@ limitations under the License.
         <local:SnackbarPlayGround id="snackbar_panel"/>
         <local:TabBarPlayGround id="tabbar_panel"/>
         <local:ViewStatesPlayGround id="viewstates_panel"/>
+        <local:LayoutsPlayGround id="layouts_panel"/>
     </j:ApplicationMainContent>
 
     <!-- <j:ResposiveSizeMonitor/> -->
diff --git a/examples/royale/JewelExample/src/main/royale/ViewStatesPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ViewStatesPlayGround.mxml
index a139a6d..eeec214 100644
--- a/examples/royale/JewelExample/src/main/royale/ViewStatesPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ViewStatesPlayGround.mxml
@@ -23,24 +23,15 @@ limitations under the License.
 				xmlns:js="library://ns.apache.org/royale/basic"
                 xmlns:components="components.*">
     
-	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
-		<j:GridCell desktopNumerator="1" desktopDenominator="1"
-					tabletNumerator="1" tabletDenominator="1"
-					phoneNumerator="1" phoneDenominator="1">
+	<j:Grid gap="true">
+		
 
 			<components:ViewStatesIncludeIn/>
 
-		</j:GridCell>
-	</j:Grid>
-
-	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
-		<j:GridCell desktopNumerator="1" desktopDenominator="1"
-					tabletNumerator="1" tabletDenominator="1"
-					phoneNumerator="1" phoneDenominator="1">
-
+		
 			<components:ViewStatesDotNotation/>
 
-		</j:GridCell>	
+		
 	</j:Grid>
 
 </j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/components/ViewStatesDotNotation.mxml b/examples/royale/JewelExample/src/main/royale/components/ViewStatesDotNotation.mxml
index 2b99e46..9d852db 100644
--- a/examples/royale/JewelExample/src/main/royale/components/ViewStatesDotNotation.mxml
+++ b/examples/royale/JewelExample/src/main/royale/components/ViewStatesDotNotation.mxml
@@ -17,10 +17,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 -->
-<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:GridCell xmlns:fx="http://ns.adobe.com/mxml/2009"
 		xmlns:j="library://ns.apache.org/royale/jewel"
 		xmlns:js="library://ns.apache.org/royale/basic"
-		xmlns:html="library://ns.apache.org/royale/html">
+		xmlns:html="library://ns.apache.org/royale/html"
+        desktopNumerator="1" desktopDenominator="2"
+		tabletNumerator="1" tabletDenominator="2"
+		phoneNumerator="1" phoneDenominator="1">
 
     <j:states>
         <js:State name="login"/>
@@ -46,4 +49,4 @@ limitations under the License.
         <html:H1 text="You are logged in!! :)"/>
         <j:Button text="Logout" click="currentState = 'login'"/>
     </j:Card>
-</j:Group>
\ No newline at end of file
+</j:GridCell>
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/components/ViewStatesIncludeIn.mxml b/examples/royale/JewelExample/src/main/royale/components/ViewStatesIncludeIn.mxml
index 010a5ea..bf7e296 100644
--- a/examples/royale/JewelExample/src/main/royale/components/ViewStatesIncludeIn.mxml
+++ b/examples/royale/JewelExample/src/main/royale/components/ViewStatesIncludeIn.mxml
@@ -17,10 +17,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 -->
-<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:GridCell xmlns:fx="http://ns.adobe.com/mxml/2009"
 		xmlns:j="library://ns.apache.org/royale/jewel"
 		xmlns:js="library://ns.apache.org/royale/basic"
-		xmlns:html="library://ns.apache.org/royale/html">
+		xmlns:html="library://ns.apache.org/royale/html"
+        desktopNumerator="1" desktopDenominator="2"
+		tabletNumerator="1" tabletDenominator="2"
+		phoneNumerator="1" phoneDenominator="1">
 
     <j:states>
         <js:State name="login"/>
@@ -46,4 +49,4 @@ limitations under the License.
         <html:H1 text="You are logged in!! :)"/>
         <j:Button text="Logout" click="currentState = 'login'"/>
     </j:Card>
-</j:Group>
\ No newline at end of file
+</j:GridCell>
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
index fbdefe1..aa0638c 100644
--- a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -52,8 +52,9 @@ package models
         
         private var _containerDrawerNavigation:ArrayList = new ArrayList([
             new NavigationLinkVO("View States", "viewstates_panel", MaterialIconType.FLIP_TO_FRONT),
+            new NavigationLinkVO("Layouts", "layouts_panel", MaterialIconType.VIEW_QUILT),
             new NavigationLinkVO("Grid", "grid_panel", MaterialIconType.GRID_ON),
-            new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_QUILT),
+            new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_LIST),
             new NavigationLinkVO("TabBar", "tabbar_panel", MaterialIconType.TAB),
             new NavigationLinkVO("Card", "card_panel", MaterialIconType.WEB_ASSET)
             // new NavigationLinkVO("Tabs", "tabs_panel")
diff --git a/frameworks/projects/Jewel/.vscode/tasks.json b/frameworks/projects/Jewel/.vscode/tasks.json
index 4a047cb..1119e5f 100644
--- a/frameworks/projects/Jewel/.vscode/tasks.json
+++ b/frameworks/projects/Jewel/.vscode/tasks.json
@@ -23,10 +23,14 @@
             ],
             "group": "build",
             "presentation": {
+                "echo": true,
                 "reveal": "always",
-                "panel": "new"
+                "focus": true,
+                "panel": "dedicated"
             },
-            "problemMatcher": []
+            "problemMatcher": [
+                "$nextgenas_nomatch"
+            ]
         },
         {
             "label": "Build Release with AS3 Extension",
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index f5440e4..996dba9 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -46,11 +46,12 @@ button, input, textarea {
 
 j|View {
   IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
-  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
 }
 
 j|ApplicationResponsiveView {
   IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
 }
 
 .applicationResponsiveView {
@@ -61,10 +62,11 @@ j|ApplicationResponsiveView {
 
 j|ApplicationView {
   IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
-  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
 }
 
 j|Group {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
   IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
 }
 
@@ -76,8 +78,17 @@ j|VGroup {
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
 }
 
+j|Grid {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout");
+}
+
+j|GridCell {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridCellLayout");
+}
+
 j|Container {
   IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
   IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
   IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
 }
@@ -137,7 +148,6 @@ j|Form {
   height: 50px;
 }
 .jewel.alert .content {
-  position: absolute;
   top: 50px;
   bottom: 50px;
   width: 100%;
@@ -558,6 +568,10 @@ j|DateField {
   border: none;
 }
 
+j|Divider {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .jewel.drawer.float {
   position: fixed;
   pointer-events: none;
@@ -644,6 +658,22 @@ j|DateField {
   touch-action: pan-y;
 }
 
+j|DrawerBase {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|Drawer {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|DrawerHeader {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|DrawerContent {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .jewel.dropdownlist {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -738,9 +768,6 @@ j|Label {
   overflow: auto;
 }
 
-.layout.absolute {
-  position: absolute;
-}
 .layout.absolute > * {
   position: absolute;
 }
@@ -3078,6 +3105,10 @@ j|Spinner {
   display: flex;
 }
 
+j|SectionContent {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .jewel.slider {
   position: relative;
   height: 27px;
@@ -3262,6 +3293,10 @@ j|TabBarButtonItemRenderer {
   padding: 12px;
 }
 
+j|SimpleTable {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .jewel.table {
   position: relative;
   white-space: nowrap;
@@ -3339,6 +3374,26 @@ j|TableItemRenderer {
   IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
 }
 
+j|TBody {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|THead {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TFoot {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TableCell {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TableRow {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .alignTextLeft {
   text-align: left;
 }
@@ -3544,6 +3599,22 @@ j|TitleBar {
   text-overflow: ellipsis;
 }
 
+j|TopAppBar {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TopAppBarRow {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TopAppBarSection {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
+j|TopAppBarTitle {
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+}
+
 .jewel.main {
   width: 100%;
   min-height: 100%;
@@ -3555,6 +3626,7 @@ j|TitleBar {
 
 j|ApplicationMainContent {
   IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
   IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
   IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
 }
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index fe9d947..b3f0ad2 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -85,15 +85,19 @@
     <component id="DateChooserModel" class="org.apache.royale.jewel.beads.models.DateChooserModel"/>
 
     <component id="ApplicationResponsiveView" class="org.apache.royale.jewel.ApplicationResponsiveView"/>
+    
     <component id="TopAppBar" class="org.apache.royale.jewel.TopAppBar"/>
-    <component id="TopAppBarRow" class="org.apache.royale.jewel.TopAppBarRow"/>
-    <component id="TopAppBarSection" class="org.apache.royale.jewel.TopAppBarSection"/>
-    <component id="TopAppBarTitle" class="org.apache.royale.jewel.TopAppBarTitle"/>
+    <component id="TopAppBarRow" class="org.apache.royale.jewel.supportClasses.topappbar.TopAppBarRow"/>
+    <component id="TopAppBarSection" class="org.apache.royale.jewel.supportClasses.topappbar.TopAppBarSection"/>
+    <component id="TopAppBarTitle" class="org.apache.royale.jewel.supportClasses.topappbar.TopAppBarTitle"/>
+
     <component id="ApplicationMainContent" class="org.apache.royale.jewel.ApplicationMainContent"/>
     <component id="SectionContent" class="org.apache.royale.jewel.SectionContent"/>
+    
     <component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
-    <component id="DrawerHeader" class="org.apache.royale.jewel.DrawerHeader"/>
-    <component id="DrawerContent" class="org.apache.royale.jewel.DrawerContent"/>
+    <component id="DrawerHeader" class="org.apache.royale.jewel.supportClasses.drawer.DrawerHeader"/>
+    <component id="DrawerContent" class="org.apache.royale.jewel.supportClasses.drawer.DrawerContent"/>
+
     <component id="Divider" class="org.apache.royale.jewel.Divider"/>
 
     <component id="Image" class="org.apache.royale.jewel.Image"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as
index ea50c85..1a509e6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as
@@ -24,7 +24,7 @@ package org.apache.royale.jewel.beads.layouts
 	
 	/**
 	 *  The ResponsiveVisibility bead class is a specialty bead that 
-	 *  can be used to show or hide a Jewel control depending on responsive
+	 *  can be used to show or hide a Jewel component depending on responsive
 	 *  rules.
 	 *  
 	 *  @langversion 3.0
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index 5051e0d..367aaec 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -18,13 +18,21 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.beads.views
 {
-    import org.apache.royale.html.beads.GroupView;
+    COMPILE::SWF
+	{
+        import flash.utils.setTimeout;
+
+        import org.apache.royale.core.IMeasurementBead;
+        import org.apache.royale.core.ValuesManager;
+        import org.apache.royale.html.beads.IBackgroundBead;
+        import org.apache.royale.html.beads.IBorderBead;
+        import org.apache.royale.utils.loadBeadFromValuesManager;
+	}
     import org.apache.royale.core.IAlertModel;
-    import org.apache.royale.core.IBead;
+    import org.apache.royale.core.IBeadLayout;
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
     import org.apache.royale.core.IParent;
     import org.apache.royale.core.IStrand;
-    import org.apache.royale.core.IBeadLayout;
     import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.UIBase;
     import org.apache.royale.core.layout.EdgeData;
@@ -32,24 +40,17 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.events.Event;
     import org.apache.royale.events.IEventDispatcher;
     import org.apache.royale.events.MouseEvent;
-    import org.apache.royale.jewel.Group;
+    import org.apache.royale.html.beads.GroupView;
     import org.apache.royale.jewel.Alert;
-    import org.apache.royale.jewel.Label;
     import org.apache.royale.jewel.Button;
-    import org.apache.royale.jewel.TitleBar;
     import org.apache.royale.jewel.ControlBar;
-	import org.apache.royale.jewel.beads.views.AlertTitleBarView;
-	import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+    import org.apache.royale.jewel.Group;
+    import org.apache.royale.jewel.Label;
+    import org.apache.royale.jewel.TitleBar;
+    import org.apache.royale.jewel.VGroup;
+    import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+    import org.apache.royale.jewel.beads.views.AlertTitleBarView;
 
-    COMPILE::SWF
-	{
-        import org.apache.royale.html.beads.IBackgroundBead;
-        import org.apache.royale.html.beads.IBorderBead;
-        import org.apache.royale.core.IMeasurementBead;
-        import org.apache.royale.core.ValuesManager;
-        import org.apache.royale.utils.loadBeadFromValuesManager;
-		import flash.utils.setTimeout;
-	}
 	
 	/**
 	 *  The AlertView class creates the visual elements of the org.apache.royale.jewel.Alert
@@ -163,11 +164,12 @@ package org.apache.royale.jewel.beads.views
 			IParent(_strand).addElement(titleBar);
 
 			// Text
-			content = new Group();
-			content.typeNames = "content";
 			label = new Label();
 			label.multiline = true;
 			label.text = alertModel.message;
+			
+			content = new VGroup();
+			content.addClass("content");
 			content.addElement(label);
 			IParent(_strand).addElement(content);
 			
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
index 63cb5d4..0113349 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
@@ -18,13 +18,11 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.supportClasses.combobox
 {
+    import org.apache.royale.core.IDataProviderModel;
     import org.apache.royale.core.IPopUp;
-    import org.apache.royale.events.Event;
-    import org.apache.royale.jewel.List;
-    import org.apache.royale.core.StyledUIBase;
-    import org.apache.royale.jewel.beads.layouts.BasicLayout;
     import org.apache.royale.core.ISelectionModel;
-    import org.apache.royale.core.IDataProviderModel;
+    import org.apache.royale.core.StyledUIBase;
+    import org.apache.royale.jewel.List;
     
     //--------------------------------------
     //  Events
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerContent.as
similarity index 95%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerContent.as
index d729181..f9c2e9f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerContent.as
@@ -16,13 +16,14 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.drawer
 {
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
+	import org.apache.royale.jewel.Group;
 
 	/**
 	 *  The DrawerContent class is a Container component mainly used in Drawer to hold 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerHeader.as
similarity index 95%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerHeader.as
index 7e2b1d1..5b6d444 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerHeader.as
@@ -16,13 +16,14 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.drawer
 {
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
+	import org.apache.royale.jewel.Group;
 
 	/**
 	 *  The DrawerHeader class is a Container component to hold Drawer Header
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarRow.as
similarity index 94%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarRow.as
index 5547fef..d943227 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarRow.as
@@ -16,13 +16,14 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.topappbar
 {
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
+	import org.apache.royale.jewel.Group;
 
 	/**
 	 *  The TopAppBarRow class is a container component used with TopAppBar
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarSection.as
similarity index 96%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarSection.as
index 04d2d24..8f10d3a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarSection.as
@@ -16,13 +16,14 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.topappbar
 {
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
+	import org.apache.royale.jewel.Group;
 
 	/**
 	 *  The TopAppBarSection class is a container component for items in
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarTitle.as
similarity index 96%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarTitle.as
index 46a00a0..c0ff729 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/topappbar/TopAppBarTitle.as
@@ -16,13 +16,14 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.topappbar
 {
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
     }
+	import org.apache.royale.jewel.Group;
 
 	/**
 	 *  The TopAppBarTitle class is the application title
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index ce24abc..c2fe47b 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -46,11 +46,11 @@ button, input, textarea
 	
 j|View
 	IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
-	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 j|ApplicationResponsiveView
 	IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
-	//IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 .applicationResponsiveView
 	display: inline-flex
@@ -59,8 +59,7 @@ j|ApplicationResponsiveView
 
 j|ApplicationView
 	IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
-	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
-	// IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 // .responsive
 // 	width: 100%
@@ -73,6 +72,7 @@ j|ApplicationView
 // 	-webkit-overflow-scrolling: touch
 
 j|Group
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
 	IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
 
 j|HGroup
@@ -81,9 +81,15 @@ j|HGroup
 j|VGroup
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
 
+j|Grid
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout")
+
+j|GridCell
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridCellLayout")
+
 j|Container
 	IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
-	//IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
 	IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
 	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
 	//align-items: flex-start
@@ -93,9 +99,6 @@ j|Image
 	IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.ImageView")
 //vertical-align: top
 
-//j|Grid
-//	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout")
-
 j|DataGroup
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
 	IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 944b17f..493f9a1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -86,7 +86,7 @@ $alert-footer-height: 50px
         //         background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829, -278)'><g fill='#777777' transform='translate(825, 274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4 [...]
                 
     .content
-        position: absolute
+        // position: absolute
         // padding: $alert-padding
         top: $alert-header-height
         bottom: $alert-footer-height
@@ -130,7 +130,7 @@ $alert-footer-height: 50px
         min-width: $alert-min-width + 100
 
 j|Alert
-    //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+    // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel")
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
     IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.AlertView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
index d6df042..8245ce6 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -39,6 +39,6 @@
 
 j|ApplicationMainContent
     IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
-    //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout") // Basic layoutr doesn't work here
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
     IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
     IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
index 5a27600..189efa8 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
@@ -23,4 +23,4 @@
     border: none
     
 j|Divider
-
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
index 6ec0b6e..6b9d34f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -126,8 +126,14 @@ $drawer-float-max-width: 310px
 
 
 
+j|DrawerBase
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
+
 j|Drawer
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 j|DrawerHeader
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 j|DrawerContent
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index b155d79..feebb8a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -35,7 +35,7 @@ $gap-size: 10px !default
 
 // Absolute
 .layout.absolute
-	position: absolute
+	// position: absolute
 	> *
 		position: absolute
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
index 87ea6b7..d08b2fc 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
@@ -30,5 +30,6 @@
         display: flex
 
 j|SectionContent
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
     // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
     // gap: 3
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index cb77780..8ed48c3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -49,7 +49,7 @@
             padding: 12px
 
 j|SimpleTable
-
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 
 // Jewel Table
@@ -141,12 +141,17 @@ j|TableItemRenderer
 
 
 j|TBody
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 j|THead
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 j|TFoot
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
 j|TableCell
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 j|TableHeaderCell
 j|TableRow
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 j|TableColumn
 
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index 89b9aa1..9a77595 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -130,10 +130,14 @@ $top-app-bar-button-size: 48px
         transform: inherit
         overflow: ellipsis
     
-j|ToolBar
+j|TopAppBar
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
-j|ToolBarRow
+j|TopAppBarRow
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
-j|ToolBarSection
+j|TopAppBarSection
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
 
-j|ToolBarTitle
\ No newline at end of file
+j|TopAppBarTitle
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
\ No newline at end of file