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/03/26 16:20:48 UTC

[royale-asjs] branch develop updated: jewel-layouts: remove APIs from Group and Container that can't be used there and create interfaces and new subclasses to better organize the code

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 59aa623  jewel-layouts: remove APIs from Group and Container that can't be used there and create interfaces and new subclasses to better organize the code
59aa623 is described below

commit 59aa6238704586f4f40222fbec760b50318575a8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 26 17:20:41 2020 +0100

    jewel-layouts: remove APIs from Group and Container that can't be used there and create interfaces and new subclasses to better organize the code
---
 .../royale/org/apache/royale/jewel/Container.as    | 100 --------------
 .../main/royale/org/apache/royale/jewel/Grid.as    |   5 +-
 .../royale/org/apache/royale/jewel/GridCell.as     |   9 +-
 .../main/royale/org/apache/royale/jewel/Group.as   | 100 --------------
 .../royale/org/apache/royale/jewel/HContainer.as   |  33 +----
 .../main/royale/org/apache/royale/jewel/HGroup.as  |  34 +----
 .../royale/org/apache/royale/jewel/VContainer.as   |  60 +--------
 .../main/royale/org/apache/royale/jewel/VGroup.as  |  62 +--------
 .../royale/jewel/beads/layouts/GapConstants.as     |  40 ++++++
 .../beads/layouts/HorizontalCenteredLayout.as      |  18 +--
 .../jewel/beads/layouts/HorizontalFlowLayout.as    |  15 +--
 .../royale/jewel/beads/layouts/HorizontalLayout.as |  19 +--
 .../org/apache/royale/jewel/beads/layouts/IGap.as  |  39 ++++++
 .../jewel/beads/layouts/IVariableRowHeight.as      |  38 ++++++
 .../jewel/beads/layouts/VerticalCenteredLayout.as  |  15 +--
 .../jewel/beads/layouts/VerticalFlowLayout.as      |  14 +-
 .../royale/jewel/beads/layouts/VerticalLayout.as   |  19 +--
 .../container/AlignmentItemsContainer.as}          | 130 +++---------------
 .../container/AlignmentItemsContainerWithGap.as}   |  63 ++++-----
 .../group/AlignmentItemsGroup.as}                  | 150 ++++-----------------
 .../group/AlignmentItemsGroupWithGap.as}           |  70 +++++-----
 21 files changed, 275 insertions(+), 758 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
index 9a43555..0225651 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
@@ -21,10 +21,8 @@ package org.apache.royale.jewel
     import org.apache.royale.core.IMXMLDocument;
     import org.apache.royale.core.ValuesManager;
     import org.apache.royale.events.Event;
-    import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
     import org.apache.royale.jewel.supportClasses.container.ContainerBase;
     import org.apache.royale.utils.MXMLDataInterpreter;
-    import org.apache.royale.utils.StringUtil;
 	
 	/**
 	 * The default property uses when additional MXML content appears within an element's
@@ -83,104 +81,6 @@ package org.apache.royale.jewel
 			super();
 			typeNames = "jewel container";
 		}
-		
-        protected var _layout:StyledLayoutBase;
-
-        /**
-		 *  Distribute all items horizontally
-		 *  Possible values are:
-		 *  - itemsLeft
-		 *  - itemsCenter
-		 *  - itemsRight
-		 *  - itemsSpaceBetween
-		 *  - itemsSpaceAround
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsHorizontalAlign():String
-        {
-            return _layout.itemsHorizontalAlign;
-        }
-
-        [Inspectable(category="General", enumeration="itemsLeft,itemsCenter,itemsRight,itemsSpaceBetween,itemsSpaceAround")]
-        public function set itemsHorizontalAlign(value:String):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsHorizontalAlign);
-			_layout.itemsHorizontalAlign = value;
-			typeNames += " " + _layout.itemsHorizontalAlign;
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
-
-		/**
-		 *  Distribute all items vertically
-		 *  Possible values are:
-		 *  - itemsSameHeight
-		 *  - itemsCenter
-		 *  - itemsTop
-		 *  - itemsBottom
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsVerticalAlign():String
-        {
-            return _layout.itemsVerticalAlign;
-        }
-
-        [Inspectable(category="General", enumeration="itemsSameHeight,itemsCenter,itemsTop,itemsBottom")]
-        public function set itemsVerticalAlign(value:String):void
-        {
-			if(value == "itemsCenter") value += "ed";
-			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsVerticalAlign);
-			_layout.itemsVerticalAlign = value;
-			typeNames += " " + _layout.itemsVerticalAlign;
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
-
-        /**
-		 *  A boolean flag to activate "itemsExpand" effect selector.
-		 *  Make items resize to the fill all container space
-         *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsExpand():Boolean
-        {
-            return _layout.itemsExpand;
-        }
-
-        public function set itemsExpand(value:Boolean):void
-        {
-            typeNames = StringUtil.removeWord(typeNames, " itemsExpand");
-            _layout.itemsExpand = value;
-            if(_layout.itemsExpand)
-            {
-                typeNames += " itemsExpand";
-            }
-
-            COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
 
 		private var _mxmlDescriptor:Array;
 		private var _mxmlDocument:Object = this;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
index edea82d..ec78ea0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
@@ -19,6 +19,8 @@
 package org.apache.royale.jewel
 {
 	import org.apache.royale.jewel.beads.layouts.GridLayout;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
+	import org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainer;
 	import org.apache.royale.utils.StringUtil;
 
 	/**
@@ -31,7 +33,7 @@ package org.apache.royale.jewel
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.4
 	 */
-	public class Grid extends Container
+	public class Grid extends AlignmentItemsContainer
 	{
 		/**
 		 *  constructor.
@@ -59,6 +61,7 @@ package org.apache.royale.jewel
         {
             _layout = value;
         }
+		
 
         /**
 		 *  Assigns variable gap to grid from 1 to 20
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
index 1efaeba..2ad6c21 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
@@ -18,11 +18,10 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	COMPILE::JS
-	{
-	import org.apache.royale.utils.StringUtil;
-	}
 	import org.apache.royale.jewel.beads.layouts.GridCellLayout;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
+	import org.apache.royale.utils.StringUtil;
+	import org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainer;
 
 	/**
 	 *  The GridCell class is the inmediate container in a Grid Layout
@@ -33,7 +32,7 @@ package org.apache.royale.jewel
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.4
 	 */
-	public class GridCell extends Group
+	public class GridCell extends AlignmentItemsContainer
 	{
 		/**
 		 *  constructor.
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
index 2b85e46..4712e69 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
@@ -21,10 +21,8 @@ package org.apache.royale.jewel
     import org.apache.royale.core.IMXMLDocument;
     import org.apache.royale.core.ValuesManager;
     import org.apache.royale.events.Event;
-    import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
     import org.apache.royale.jewel.supportClasses.group.GroupBase;
     import org.apache.royale.utils.MXMLDataInterpreter;
-    import org.apache.royale.utils.StringUtil;
 
     /**
 	 *  Indicates that the children of the container is have been added.
@@ -146,103 +144,5 @@ package org.apache.royale.jewel
          *  @royalesuppresspublicvarwarning
 		 */
 		public var mxmlContent:Array;
-
-        protected var _layout:StyledLayoutBase;
-        
-        /**
-		 *  Distribute all items horizontally
-		 *  Possible values are:
-		 *  - itemsLeft
-		 *  - itemsCenter
-		 *  - itemsRight
-		 *  - itemsSpaceBetween
-		 *  - itemsSpaceAround
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsHorizontalAlign():String
-        {
-            return _layout.itemsHorizontalAlign;
-        }
-
-        [Inspectable(category="General", enumeration="itemsLeft,itemsCenter,itemsRight,itemsSpaceBetween,itemsSpaceAround")]
-        public function set itemsHorizontalAlign(value:String):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsHorizontalAlign);
-			_layout.itemsHorizontalAlign = value;
-			typeNames += " " + _layout.itemsHorizontalAlign;
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
-
-		/**
-		 *  Distribute all items vertically
-		 *  Possible values are:
-		 *  - itemsSameHeight
-		 *  - itemsCenter
-		 *  - itemsTop
-		 *  - itemsBottom
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsVerticalAlign():String
-        {
-            return _layout.itemsVerticalAlign;
-        }
-
-        [Inspectable(category="General", enumeration="itemsSameHeight,itemsCenter,itemsTop,itemsBottom")]
-        public function set itemsVerticalAlign(value:String):void
-        {
-			if(value == "itemsCenter") value += "ed";
-			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsVerticalAlign);
-			_layout.itemsVerticalAlign = value;
-			typeNames += " " + _layout.itemsVerticalAlign;
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
-
-        /**
-		 *  A boolean flag to activate "itemsExpand" effect selector.
-		 *  Make items resize to the fill all container space
-         *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get itemsExpand():Boolean
-        {
-            return _layout.itemsExpand;
-        }
-
-        public function set itemsExpand(value:Boolean):void
-        {
-            typeNames = StringUtil.removeWord(typeNames, " itemsExpand");
-            _layout.itemsExpand = value;
-            if(_layout.itemsExpand)
-            {
-                typeNames += " itemsExpand";
-            }
-
-            COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HContainer.as
index 4808a03..5dde88f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HContainer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HContainer.as
@@ -19,7 +19,7 @@
 package org.apache.royale.jewel
 {
     import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
-    import org.apache.royale.utils.StringUtil;
+    import org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap;
 
     /**
      *  This Container subclass uses HorizontalLayout as its default layout.
@@ -31,7 +31,7 @@ package org.apache.royale.jewel
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.7
      */
-	public class HContainer extends Container
+	public class HContainer extends AlignmentItemsContainerWithGap
 	{
         /**
          *  Constructor.
@@ -59,35 +59,6 @@ package org.apache.royale.jewel
         {
             _layout = value;
         }
-        
-        /**
-		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
-		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
-		 *  i.e: gap-2x3px will result in a gap of 6px
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
-		 */
-        public function get gap():Number
-        {
-            return layout.gap;
-        }
 
-        public function set gap(value:Number):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + HorizontalLayout.GAP_STEP + "px");
-			if(value != 0)
-				typeNames += " gap-" + value + "x" + HorizontalLayout.GAP_STEP + "px";
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.gap = value;
-        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
index 39571a4..154911e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
@@ -19,7 +19,7 @@
 package org.apache.royale.jewel
 {
     import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
-    import org.apache.royale.utils.StringUtil;
+    import org.apache.royale.jewel.supportClasses.group.AlignmentItemsGroupWithGap;
 
     /**
      *  This Group subclass uses HorizontalLayout as its default layout.
@@ -31,7 +31,7 @@ package org.apache.royale.jewel
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class HGroup extends Group
+	public class HGroup extends AlignmentItemsGroupWithGap
 	{
         /**
          *  Constructor.
@@ -59,35 +59,5 @@ package org.apache.royale.jewel
         {
             _layout = value;
         }
-        
-        /**
-		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
-		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
-		 *  i.e: gap-2x3px will result in a gap of 6px
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get gap():Number
-        {
-            return layout.gap;
-        }
-
-        public function set gap(value:Number):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + HorizontalLayout.GAP_STEP + "px");
-			if(value != 0)
-				typeNames += " gap-" + value + "x" + HorizontalLayout.GAP_STEP + "px";
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.gap = value;
-        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
index fd5d31e..bfb2cf0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
@@ -19,7 +19,7 @@
 package org.apache.royale.jewel
 {
     import org.apache.royale.jewel.beads.layouts.VerticalLayout;
-    import org.apache.royale.utils.StringUtil;
+    import org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap;
 
     /**
      *  This Container subclass uses VerticalLayout as its default layout.
@@ -31,7 +31,7 @@ package org.apache.royale.jewel
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.7
      */
-	public class VContainer extends Container
+	public class VContainer extends AlignmentItemsContainerWithGap
 	{
         /**
          *  Constructor.
@@ -59,61 +59,5 @@ package org.apache.royale.jewel
         {
             _layout = value;
         }
-
-        /**
-		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
-		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
-		 *  i.e: gap-2x3px will result in a gap of 6px
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
-		 */
-        public function get gap():Number
-        {
-            return layout.gap;
-        }
-        public function set gap(value:Number):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
-			if(value != 0)
-				typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.gap = value;
-        }
-        
-        /**
-		 *  
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
-		 */
-        public function get variableRowHeight():Boolean
-        {
-            return layout.variableRowHeight;
-        }
-        public function set variableRowHeight(value:Boolean):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " variableRowHeight");
-			if(value)
-				typeNames += " variableRowHeight";
-            
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.variableRowHeight = value;
-        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
index 7cf7a65..3bf3106 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
@@ -19,7 +19,7 @@
 package org.apache.royale.jewel
 {
     import org.apache.royale.jewel.beads.layouts.VerticalLayout;
-    import org.apache.royale.utils.StringUtil;
+    import org.apache.royale.jewel.supportClasses.group.AlignmentItemsGroupWithGap;
 
     /**
      *  This Group subclass uses VerticalLayout as its default layout.
@@ -31,7 +31,7 @@ package org.apache.royale.jewel
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class VGroup extends Group
+	public class VGroup extends AlignmentItemsGroupWithGap
 	{
         /**
          *  Constructor.
@@ -50,7 +50,7 @@ package org.apache.royale.jewel
 			layout = new VerticalLayout();
 			addBead(layout);
 		}
-
+		
         public function get layout():VerticalLayout
         {
             return _layout as VerticalLayout;
@@ -59,61 +59,5 @@ package org.apache.royale.jewel
         {
             _layout = value;
         }
-
-        /**
-		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
-		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
-		 *  i.e: gap-2x3px will result in a gap of 6px
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-        public function get gap():Number
-        {
-            return layout.gap;
-        }
-        public function set gap(value:Number):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
-			if(value != 0)
-				typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.gap = value;
-        }
-        
-        /**
-		 *  
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
-		 */
-        public function get variableRowHeight():Boolean
-        {
-            return layout.variableRowHeight;
-        }
-        public function set variableRowHeight(value:Boolean):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " variableRowHeight");
-			if(value)
-				typeNames += " variableRowHeight";
-            
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-
-			layout.variableRowHeight = value;
-        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GapConstants.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GapConstants.as
new file mode 100644
index 0000000..9420705
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GapConstants.as
@@ -0,0 +1,40 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+	/**
+	 *  Jewel GapConstants must to be synced with _layout.sass values
+	 */
+	public class GapConstants
+	{
+		/**
+		 * number of gap styles available in CSS
+		 * 
+		 * @see $gaps variable in _layout.sass
+		 */
+		public static const GAPS:Number = 10;
+
+		/**
+		 * gap step size in each gap style rule in CSS
+		 * 
+		 * @see $gap-step variable in _layout.sass
+		 */
+		public static const GAP_STEP:Number = 3;
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
index 7fe48dc..12a555a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
@@ -43,7 +43,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class HorizontalCenteredLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
+	public class HorizontalCenteredLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties, IGap
 	{
         /**
          *  Constructor.
@@ -164,11 +164,7 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
-
+		
 		protected var _gap:Number = 0;
 		/**
 		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
@@ -206,14 +202,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 		
         /**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
index 186a8b4..79b2021 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
@@ -164,11 +164,6 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
-
 		protected var _gap:Number = 0;
 		/**
 		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
@@ -206,14 +201,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 		
         /**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index 01f6fc9..af51754 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -39,7 +39,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class HorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
+	public class HorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties, IGap, IVariableRowHeight
 	{
         /**
          *  Constructor.
@@ -160,12 +160,7 @@ package org.apache.royale.jewel.beads.layouts
 				}	
 			}
 		}
-
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
-
+		
 		private var gapInitialized:Boolean;
 		protected var _gap:Number = 0;
 		/**
@@ -204,14 +199,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 
 		private var variableRowHeightInitialized:Boolean;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IGap.as
new file mode 100644
index 0000000..0922e70
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IGap.as
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+	/**
+	 *  Jewel IGap is the interface used by Jewel Layouts that implement gaps.
+	 */
+	public interface IGap
+	{
+		/**
+		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+		 *  i.e: gap-2x3px will result in a gap of 6px
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 */
+		function get gap():Number;
+		function set gap(value:Number):void;
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IVariableRowHeight.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IVariableRowHeight.as
new file mode 100644
index 0000000..6a5f89f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/IVariableRowHeight.as
@@ -0,0 +1,38 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+	/**
+	 *  Jewel IVariableRowHeight is the interface used by Jewel Layouts that implement gaps.
+	 */
+	public interface IVariableRowHeight
+	{
+		/**
+		 *  Specifies whether layout elements are allocated their preferred height.
+		 *  Setting this property to false specifies fixed height rows.
+		 *  
+		 *  If false, the actual height of each layout element is the value of rowHeight.
+		 *  The default value is true. 
+		 *  
+		 *  Note: From Flex but we should see what to do in Royale -> Setting this property to false causes the layout to ignore the layout elements' percentHeight property.
+		 */
+		function get variableRowHeight():Boolean;
+		function set variableRowHeight(value:Boolean):void;
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
index 363274f..7d74a34 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
@@ -164,11 +164,6 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
-
 		protected var _gap:Number = 0;
 		/**
 		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
@@ -206,14 +201,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 		
         /**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
index c99b828..fe1ae31 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
@@ -165,10 +165,6 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
 
 		protected var _gap:Number = 0;
 		/**
@@ -207,14 +203,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 		
         /**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index b06566b..21e02c4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -39,7 +39,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class VerticalLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
+	public class VerticalLayout extends SimpleVerticalLayout implements ILayoutStyleProperties, IGap, IVariableRowHeight
 	{
 		/**
 		 *  Constructor.
@@ -160,12 +160,7 @@ package org.apache.royale.jewel.beads.layouts
 				}	
 			}
 		}
-
-		// number of gap styles available in CSS @see $gaps variable in _layout.sass
-		public static const GAPS:Number = 10;
-		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
-		public static const GAP_STEP:Number = 3;
-
+		
 		private var gapInitialized:Boolean;
 		protected var _gap:Number = 0;
 		/**
@@ -204,14 +199,14 @@ package org.apache.royale.jewel.beads.layouts
 		COMPILE::JS
 		private function setGap(value:Number):void
 		{
-			if (value >= 0 && value <= GAPS)
+			if (value >= 0 && value <= GapConstants.GAPS)
 			{
-				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
-					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
 				if(value != 0)
-					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+					hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
 			} else
-				throw new Error("Gap needs to be between 0 and " + GAPS);
+				throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
 		}
 
 		private var variableRowHeightInitialized:Boolean;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
similarity index 55%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
index 2b85e46..85c56f1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainer.as
@@ -16,139 +16,43 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.container
 {
-    import org.apache.royale.core.IMXMLDocument;
-    import org.apache.royale.core.ValuesManager;
-    import org.apache.royale.events.Event;
     import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
-    import org.apache.royale.jewel.supportClasses.group.GroupBase;
-    import org.apache.royale.utils.MXMLDataInterpreter;
     import org.apache.royale.utils.StringUtil;
-
-    /**
-	 *  Indicates that the children of the container is have been added.
-	 *
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.8
-	 */
-	[Event(name="childrenAdded", type="org.apache.royale.events.Event")]
-	
-	/**
-	 * The default property uses when additional MXML content appears within an element's
-	 * definition in an MXML file.
-	 */
-	[DefaultProperty("mxmlContent")]
-
+    import org.apache.royale.jewel.Container;
+    
     /**
-     *  The Jewel Group class provides a light-weight container for visual elements. By default
-	 *  the Group does not have a layout, allowing its children to be sized and positioned
-	 *  using styles or CSS.
-     *
-     *  @toplevel
-     *  @see org.apache.royale.jewel.beads.layout
-     *  @see org.apache.royale.jewel.supportClasses.jewel.ScrollingViewport
+     *  The Jewel AlignmentItemsGroup class is the base class for groups
+	 *  that unlike normal Jewel Group class that positions elements in a the canvas
+	 *  wants to follow a concret layout algorithm like Horizontal or Vertical layouts.
+	 *  that can make its items to distribute in different ways normally HGroup and VGroup.
+     *  
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
-     *  @productversion Royale 0.9.4
+     *  @productversion Royale 0.9.7
      */
-	public class Group extends GroupBase implements IMXMLDocument
+	public class AlignmentItemsContainer extends Container
 	{
         /**
          *  Constructor.
-         *
+         *  
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.4
+         *  @productversion Royale 0.9.7
          */
-		public function Group()
+		public function AlignmentItemsContainer()
 		{
-			super();
-            typeNames = "jewel group";
+			super();            
 		}
 
-        private var _mxmlDescriptor:Array;
-		private var _mxmlDocument:Object = this;
-		private var _initialized:Boolean;
-		
-		/**
-		 * @private
-		 */
-		override public function addedToParent():void
-		{
-			if (!_initialized)
-			{
-				// each MXML file can also have styles in fx:Style block
-				ValuesManager.valuesImpl.init(this);
-			}
-			
-			super.addedToParent();
-			
-			if (!_initialized)
-			{
-				MXMLDataInterpreter.generateMXMLInstances(_mxmlDocument, this, MXMLDescriptor);
-				
-				dispatchEvent(new Event("initBindings"));
-				dispatchEvent(new Event("initComplete"));
-				_initialized = true;
-				
-				//?? why was this added here? childrenAdded(); //?? Is this needed since MXMLDataInterpreter will already have called it
-			}
-		}
-		
-		/**
-		 *  @copy org.apache.royale.core.Application#MXMLDescriptor
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-		 */
-		public function get MXMLDescriptor():Array
-		{
-			return _mxmlDescriptor;
-		}
-		
 		/**
-		 *  @private
-		 */
-		public function setMXMLDescriptor(document:Object, value:Array):void
-		{
-			_mxmlDocument = document;
-			_mxmlDescriptor = value;
-		}
-		
-		/**
-		 *  @copy org.apache.royale.core.Application#generateMXMLAttributes()
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
+		 * the layout to use in this group
 		 */
-		public function generateMXMLAttributes(data:Array):void
-		{
-			MXMLDataInterpreter.generateMXMLProperties(this, data);
-		}
+		protected var _layout:StyledLayoutBase;
 		
-		/**
-		 *  @copy org.apache.royale.core.ItemRendererClassFactory#mxmlContent
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-         * 
-         *  @royalesuppresspublicvarwarning
-		 */
-		public var mxmlContent:Array;
-
-        protected var _layout:StyledLayoutBase;
-        
         /**
 		 *  Distribute all items horizontally
 		 *  Possible values are:
@@ -244,5 +148,5 @@ package org.apache.royale.jewel
                 	setClassName(computeFinalClassNames()); 
 			}
         }
-	}
+    }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainerWithGap.as
similarity index 60%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainerWithGap.as
index fd5d31e..7935bff 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/container/AlignmentItemsContainerWithGap.as
@@ -16,51 +16,40 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.container
 {
-    import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+    import org.apache.royale.jewel.beads.layouts.IGap;
+    import org.apache.royale.jewel.beads.layouts.IVariableRowHeight;
     import org.apache.royale.utils.StringUtil;
-
+    import org.apache.royale.jewel.beads.layouts.GapConstants;
+    
     /**
-     *  This Container subclass uses VerticalLayout as its default layout.
-     *
-     *  @toplevel
-     *  @see org.apache.royale.jewel.beads.layouts
+     *  The Jewel AlignmentItemsGroup class is the base class for groups
+	 *  that unlike normal Jewel Group class that positions elements in a the canvas
+	 *  wants to follow a concret layout algorithm like Horizontal or Vertical layouts.
+	 *  that can make its items to distribute in different ways normally HGroup and VGroup.
+     *  
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.7
      */
-	public class VContainer extends Container
+	public class AlignmentItemsContainerWithGap extends AlignmentItemsContainer
 	{
         /**
          *  Constructor.
-         *
+         *  
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
          *  @productversion Royale 0.9.7
          */
-		public function VContainer()
+		public function AlignmentItemsContainerWithGap()
 		{
-			super();
-
-			typeNames += " " + VerticalLayout.LAYOUT_TYPE_NAMES;
-
-			layout = new VerticalLayout();
-			addBead(layout);
+			super();            
 		}
 
-        public function get layout():VerticalLayout
-        {
-            return _layout as VerticalLayout;
-        }
-		public function set layout(value:VerticalLayout):void
-        {
-            _layout = value;
-        }
-
-        /**
+		/**
 		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
 		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
 		 *  i.e: gap-2x3px will result in a gap of 6px
@@ -68,17 +57,17 @@ package org.apache.royale.jewel
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
+		 *  @productversion Royale 0.9.4
 		 */
         public function get gap():Number
         {
-            return layout.gap;
+            return (_layout as IGap).gap;
         }
         public function set gap(value:Number):void
         {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
+			typeNames = StringUtil.removeWord(typeNames, " gap-" + (_layout as IGap).gap + "x" + GapConstants.GAP_STEP + "px");
 			if(value != 0)
-				typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
+				typeNames += " gap-" + value + "x" + GapConstants.GAP_STEP + "px";
 
 			COMPILE::JS
             {
@@ -86,11 +75,17 @@ package org.apache.royale.jewel
                 	setClassName(computeFinalClassNames()); 
 			}
 
-			layout.gap = value;
+			(_layout as IGap).gap = value;
         }
         
         /**
+		 *  Specifies whether layout elements are allocated their preferred height.
+		 *  Setting this property to false specifies fixed height rows.
+		 *  
+		 *  If false, the actual height of each layout element is the value of rowHeight.
+		 *  The default value is true. 
 		 *  
+		 *  Note: From Flex but we should see what to do in Royale -> Setting this property to false causes the layout to ignore the layout elements' percentHeight property.
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -99,7 +94,7 @@ package org.apache.royale.jewel
 		 */
         public function get variableRowHeight():Boolean
         {
-            return layout.variableRowHeight;
+            return (_layout as IVariableRowHeight).variableRowHeight;
         }
         public function set variableRowHeight(value:Boolean):void
         {
@@ -113,7 +108,7 @@ package org.apache.royale.jewel
                 	setClassName(computeFinalClassNames()); 
 			}
 
-			layout.variableRowHeight = value;
+			(_layout as IVariableRowHeight).variableRowHeight = value;
         }
-	}
+    }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
similarity index 51%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
index 2b85e46..aeb2415 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroup.as
@@ -16,139 +16,45 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.group
 {
-    import org.apache.royale.core.IMXMLDocument;
-    import org.apache.royale.core.ValuesManager;
-    import org.apache.royale.events.Event;
+    import org.apache.royale.jewel.Group;
     import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
-    import org.apache.royale.jewel.supportClasses.group.GroupBase;
-    import org.apache.royale.utils.MXMLDataInterpreter;
     import org.apache.royale.utils.StringUtil;
-
-    /**
-	 *  Indicates that the children of the container is have been added.
-	 *
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.8
-	 */
-	[Event(name="childrenAdded", type="org.apache.royale.events.Event")]
-	
-	/**
-	 * The default property uses when additional MXML content appears within an element's
-	 * definition in an MXML file.
-	 */
-	[DefaultProperty("mxmlContent")]
-
+    
     /**
-     *  The Jewel Group class provides a light-weight container for visual elements. By default
-	 *  the Group does not have a layout, allowing its children to be sized and positioned
-	 *  using styles or CSS.
-     *
-     *  @toplevel
-     *  @see org.apache.royale.jewel.beads.layout
-     *  @see org.apache.royale.jewel.supportClasses.jewel.ScrollingViewport
+     *  The Jewel AlignmentItemsGroup class is the base class for groups that
+	 *  distribute items along one of its axis. Used extensions are normally HGroup and VGroup.
+	 *  
+	 *  Unlike normal Jewel Group class that positions elements in a canvas using x and y
+	 *  this class and its extensions use to follow a concret layout algorithm (like Horizontal or Vertical layouts)
+	 *  and need to distribute its items in different ways.
+	 *  
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
-     *  @productversion Royale 0.9.4
+     *  @productversion Royale 0.9.7
      */
-	public class Group extends GroupBase implements IMXMLDocument
+	public class AlignmentItemsGroup extends Group
 	{
         /**
          *  Constructor.
-         *
+         *  
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.4
+         *  @productversion Royale 0.9.7
          */
-		public function Group()
+		public function AlignmentItemsGroup()
 		{
-			super();
-            typeNames = "jewel group";
+			super();            
 		}
 
-        private var _mxmlDescriptor:Array;
-		private var _mxmlDocument:Object = this;
-		private var _initialized:Boolean;
-		
 		/**
-		 * @private
+		 * the layout to use in this group
 		 */
-		override public function addedToParent():void
-		{
-			if (!_initialized)
-			{
-				// each MXML file can also have styles in fx:Style block
-				ValuesManager.valuesImpl.init(this);
-			}
-			
-			super.addedToParent();
-			
-			if (!_initialized)
-			{
-				MXMLDataInterpreter.generateMXMLInstances(_mxmlDocument, this, MXMLDescriptor);
-				
-				dispatchEvent(new Event("initBindings"));
-				dispatchEvent(new Event("initComplete"));
-				_initialized = true;
-				
-				//?? why was this added here? childrenAdded(); //?? Is this needed since MXMLDataInterpreter will already have called it
-			}
-		}
+		protected var _layout:StyledLayoutBase;
 		
-		/**
-		 *  @copy org.apache.royale.core.Application#MXMLDescriptor
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-		 */
-		public function get MXMLDescriptor():Array
-		{
-			return _mxmlDescriptor;
-		}
-		
-		/**
-		 *  @private
-		 */
-		public function setMXMLDescriptor(document:Object, value:Array):void
-		{
-			_mxmlDocument = document;
-			_mxmlDescriptor = value;
-		}
-		
-		/**
-		 *  @copy org.apache.royale.core.Application#generateMXMLAttributes()
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-		 */
-		public function generateMXMLAttributes(data:Array):void
-		{
-			MXMLDataInterpreter.generateMXMLProperties(this, data);
-		}
-		
-		/**
-		 *  @copy org.apache.royale.core.ItemRendererClassFactory#mxmlContent
-		 *  
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.8
-         * 
-         *  @royalesuppresspublicvarwarning
-		 */
-		public var mxmlContent:Array;
-
-        protected var _layout:StyledLayoutBase;
-        
         /**
 		 *  Distribute all items horizontally
 		 *  Possible values are:
@@ -177,8 +83,8 @@ package org.apache.royale.jewel
 
 			COMPILE::JS
             {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
+			if (parent)
+				setClassName(computeFinalClassNames()); 
 			}
         }
 
@@ -210,8 +116,8 @@ package org.apache.royale.jewel
 
 			COMPILE::JS
             {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
+			if (parent)
+				setClassName(computeFinalClassNames()); 
 			}
         }
 
@@ -233,16 +139,14 @@ package org.apache.royale.jewel
         {
             typeNames = StringUtil.removeWord(typeNames, " itemsExpand");
             _layout.itemsExpand = value;
-            if(_layout.itemsExpand)
-            {
-                typeNames += " itemsExpand";
-            }
+            if(value)
+            	typeNames += " itemsExpand";
 
             COMPILE::JS
             {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
+			if (parent)
+				setClassName(computeFinalClassNames()); 
 			}
         }
-	}
+    }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroupWithGap.as
similarity index 60%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroupWithGap.as
index fd5d31e..d0fec17 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VContainer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/group/AlignmentItemsGroupWithGap.as
@@ -16,51 +16,39 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses.group
 {
-    import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+    import org.apache.royale.jewel.beads.layouts.IGap;
+    import org.apache.royale.jewel.beads.layouts.IVariableRowHeight;
     import org.apache.royale.utils.StringUtil;
-
+    import org.apache.royale.jewel.beads.layouts.GapConstants;
+    
     /**
-     *  This Container subclass uses VerticalLayout as its default layout.
-     *
-     *  @toplevel
-     *  @see org.apache.royale.jewel.beads.layouts
+     *  The Jewel AlignmentItemsGroupWithGap class is the base class for groups
+	 *  that need to distribute its items in different ways and support gaps.
+     *  
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.7
      */
-	public class VContainer extends Container
+	public class AlignmentItemsGroupWithGap extends AlignmentItemsGroup
 	{
         /**
          *  Constructor.
-         *
+         *  
          *  @langversion 3.0
          *  @playerversion Flash 10.2
          *  @playerversion AIR 2.6
          *  @productversion Royale 0.9.7
          */
-		public function VContainer()
+		public function AlignmentItemsGroupWithGap()
 		{
-			super();
-
-			typeNames += " " + VerticalLayout.LAYOUT_TYPE_NAMES;
-
-			layout = new VerticalLayout();
-			addBead(layout);
+			super();            
 		}
 
-        public function get layout():VerticalLayout
-        {
-            return _layout as VerticalLayout;
-        }
-		public function set layout(value:VerticalLayout):void
-        {
-            _layout = value;
-        }
-
-        /**
+        
+		/**
 		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
 		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
 		 *  i.e: gap-2x3px will result in a gap of 6px
@@ -68,29 +56,35 @@ package org.apache.royale.jewel
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.7
+		 *  @productversion Royale 0.9.4
 		 */
         public function get gap():Number
         {
-            return layout.gap;
+            return (_layout as IGap).gap;
         }
         public function set gap(value:Number):void
         {
-			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
+			typeNames = StringUtil.removeWord(typeNames, " gap-" + (_layout as IGap).gap + "x" + GapConstants.GAP_STEP + "px");
 			if(value != 0)
-				typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
+				typeNames += " gap-" + value + "x" + GapConstants.GAP_STEP + "px";
 
 			COMPILE::JS
             {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
+			if (parent)
+				setClassName(computeFinalClassNames()); 
 			}
 
-			layout.gap = value;
+			(_layout as IGap).gap = value;
         }
         
         /**
+		 *  Specifies whether layout elements are allocated their preferred height.
+		 *  Setting this property to false specifies fixed height rows.
+		 *  
+		 *  If false, the actual height of each layout element is the value of rowHeight.
+		 *  The default value is true. 
 		 *  
+		 *  Note: From Flex but we should see what to do in Royale -> Setting this property to false causes the layout to ignore the layout elements' percentHeight property.
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
@@ -99,21 +93,21 @@ package org.apache.royale.jewel
 		 */
         public function get variableRowHeight():Boolean
         {
-            return layout.variableRowHeight;
+            return (_layout as IVariableRowHeight).variableRowHeight;
         }
         public function set variableRowHeight(value:Boolean):void
         {
 			typeNames = StringUtil.removeWord(typeNames, " variableRowHeight");
+			(_layout as IVariableRowHeight).variableRowHeight = value;
 			if(value)
 				typeNames += " variableRowHeight";
             
 			COMPILE::JS
             {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
+			if (parent)
+				setClassName(computeFinalClassNames()); 
 			}
 
-			layout.variableRowHeight = value;
         }
-	}
+    }
 }