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/05/06 06:12:42 UTC

[royale-asjs] branch develop updated: jewel basic layout and view, and fix part of alert layout

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 44635c2  jewel basic layout and view, and fix part of alert layout
44635c2 is described below

commit 44635c26d9e718ed1bdefa1f6a54470751f843e1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun May 6 08:12:36 2018 +0200

    jewel basic layout and view, and fix part of alert layout
---
 .../royale/JewelExample/src/main/royale/App.mxml   |   4 +-
 .../Basic/src/main/resources/basic-manifest.xml    |   1 +
 .../src/main/royale/org/apache/royale/core/View.as | 125 +++++++++++++
 .../Core/src/main/resources/basic-manifest.xml     |   1 -
 .../projects/Core/src/main/royale/CoreClasses.as   |   1 +
 .../projects/Jewel/src/main/resources/defaults.css |  11 ++
 .../Jewel/src/main/resources/jewel-manifest.xml    |   2 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |   1 +
 .../main/royale/org/apache/royale/jewel/View.as    | 126 +++++++++++++
 .../royale/jewel/beads/layouts/BasicLayout.as      | 199 +++++++++++++++++++++
 .../apache/royale/jewel/beads/views/AlertView.as   |   1 +
 .../projects/Jewel/src/main/sass/_global.sass      |   9 +
 .../Jewel/src/main/sass/components/_alert.sass     |   1 +
 .../JewelTheme/src/main/resources/defaults.css     |   4 +-
 .../src/main/sass/components-primary/_alert.sass   |   2 +-
 15 files changed, 482 insertions(+), 6 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index c358c9e..3b3102b 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -30,12 +30,12 @@
 		<js:SimpleCSSValuesImpl />
 	</j:valuesImpl>
 	<j:initialView>
-		<js:View>
+		<j:View>
 			<j:beads>
 				<j:VerticalLayoutWithPaddingAndGap gap="10"/>
 			</j:beads>
 			<html:H1 text="Apache Royale Jewel UI Set Theme Showcase"/>
 			<local:MainContent/>
-        </js:View>
+        </j:View>
 	</j:initialView>
 </j:Application>
diff --git a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index 95f9f31..f133836 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -23,6 +23,7 @@
 
     <component id="Application" class="org.apache.royale.core.Application"/>
     <component id="AirApplication" class="org.apache.royale.core.AirApplication"/>
+    <component id="View" class="org.apache.royale.core.View"/>
     <component id="Button" class="org.apache.royale.html.Button"/>
     <component id="CloseButton" class="org.apache.royale.html.CloseButton"/>
     <component id="ButtonBar" class="org.apache.royale.html.ButtonBar"/>
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/View.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/View.as
new file mode 100644
index 0000000..88632e0
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/View.as
@@ -0,0 +1,125 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.core
+{    	
+	import org.apache.royale.core.IMXMLDocument;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.utils.MXMLDataInterpreter;
+	
+	/**
+	 * The default property uses when additional MXML content appears within an element's
+	 * definition in an MXML file.
+	 */
+	[DefaultProperty("mxmlContent")]
+	
+    /**
+     *  The View class is the class for most views in a Royale
+     *  application.  It is generally used as the root tag of MXML
+     *  documents and UI controls and containers are added to it.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+	public class View extends ViewBase implements IMXMLDocument
+	{		
+		public function View()
+		{
+			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 necessary 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
+		 */
+		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;
+    }
+}
diff --git a/frameworks/projects/Core/src/main/resources/basic-manifest.xml b/frameworks/projects/Core/src/main/resources/basic-manifest.xml
index e451866..234b4f7 100644
--- a/frameworks/projects/Core/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Core/src/main/resources/basic-manifest.xml
@@ -61,7 +61,6 @@
     <component id="Border" class="org.apache.royale.core.supportClasses.Border"/>
 
     <component id="ArraySelectionModel" class="org.apache.royale.core.beads.models.ArraySelectionModel" />
-    <component id="View" class="org.apache.royale.core.View"/>
     
     <component id="State" class="org.apache.royale.states.State"/>
 </componentPackage>
diff --git a/frameworks/projects/Core/src/main/royale/CoreClasses.as b/frameworks/projects/Core/src/main/royale/CoreClasses.as
index 9900de4..d7044ea 100644
--- a/frameworks/projects/Core/src/main/royale/CoreClasses.as
+++ b/frameworks/projects/Core/src/main/royale/CoreClasses.as
@@ -28,6 +28,7 @@ internal class CoreClasses
 {
 	import org.apache.royale.core.UIBase; UIBase;
 	import org.apache.royale.core.LayoutBase; LayoutBase;
+	import org.apache.royale.core.ViewBase; ViewBase;
 	import org.apache.royale.core.GroupBase; GroupBase;
 	import org.apache.royale.core.ContainerBase; ContainerBase;
 	import org.apache.royale.core.ContainerBaseStrandChildren; ContainerBaseStrandChildren;
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index c828aec..7734c1f 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -40,6 +40,17 @@ j|Group {
   IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
 }
 
+j|View {
+  IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
+}
+
+@media -royale-swf {
+  j|View {
+    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+    IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+  }
+}
 .jewel.alert {
   display: block;
   position: fixed;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 93ea1bb..21ced4e 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -22,6 +22,7 @@
 <componentPackage>
 
     <component id="Application" class="org.apache.royale.jewel.Application"/>
+    <component id="View" class="org.apache.royale.jewel.View"/>
     <component id="Group" class="org.apache.royale.jewel.Group"/>
     <component id="Button" class="org.apache.royale.jewel.Button"/>
     <component id="Label" class="org.apache.royale.jewel.Label"/>
@@ -41,6 +42,7 @@
     <component id="Disabled" class="org.apache.royale.jewel.beads.controls.Disabled"/>
     <component id="TextPromptBead" class="org.apache.royale.jewel.beads.controls.textinput.TextPromptBead"/>
 
+    <component id="BasicLayout" class="org.apache.royale.jewel.beads.layouts.BasicLayout"/>
     <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
     <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
     <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index e4c7942..bf90bf2 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -60,6 +60,7 @@ package
             import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
         }
 
+        import org.apache.royale.jewel.beads.layouts.BasicLayout; BasicLayout;
         import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
         import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
         import org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as
new file mode 100644
index 0000000..e8796ff
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as
@@ -0,0 +1,126 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    import org.apache.royale.core.ViewBase;
+	import org.apache.royale.core.IMXMLDocument;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.utils.MXMLDataInterpreter;
+	
+	/**
+	 * The default property uses when additional MXML content appears within an element's
+	 * definition in an MXML file.
+	 */
+	[DefaultProperty("mxmlContent")]
+	
+    /**
+     *  The View class is the class for most views in a Royale
+     *  application.  It is generally used as the root tag of MXML
+     *  documents and UI controls and containers are added to it.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+	public class View extends ViewBase implements IMXMLDocument
+	{		
+		public function View()
+		{
+			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 necessary 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
+		 */
+		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;
+    }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
new file mode 100644
index 0000000..ffcf8f3
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+	import org.apache.royale.core.LayoutBase;
+	
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.ILayoutHost;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+
+    /**
+     *  The BasicLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  as specified by CSS properties like left, right, top
+     *  and bottom.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	public class BasicLayout extends LayoutBase implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function BasicLayout()
+		{
+			super();
+		}
+
+        /**
+         * @copy org.apache.royale.core.IBeadLayout#layout
+		 * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+         */
+		override public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+				var contentView:ILayoutView = layoutView;
+
+				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+				var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+				var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+				var n:int = contentView.numElements;
+
+                for (var i:int = 0; i < n; i++)
+                {
+                    var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+
+					var positions:Object = childPositions(child);
+					var margins:Object = childMargins(child, contentView.width, contentView.height);
+                    var ww:Number = w;
+                    var hh:Number = h;
+
+                    var ilc:ILayoutChild = child as ILayoutChild;
+
+					// set the top edge of the child
+                    if (!isNaN(positions.left))
+                    {
+                        if (ilc)
+                            ilc.setX(positions.left+margins.left);
+                        else
+                            child.x = positions.left+margins.left;
+                        ww -= positions.left + margins.left;
+                    }
+
+					// set the left edge of the child
+                    if (!isNaN(positions.top))
+                    {
+                        if (ilc)
+                            ilc.setY(positions.top+margins.top);
+                        else
+                            child.y = positions.top+margins.top;
+                        hh -= positions.top + margins.top;
+                    }
+
+					// set the right edge of the child
+					if (!isNaN(positions.right))
+					{
+						if (!hostWidthSizedToContent)
+						{
+							if (!isNaN(positions.left))
+							{
+								if (ilc)
+									ilc.setWidth(ww - positions.right - margins.right, false);
+								else
+									child.width = ww - positions.right - margins.right;
+							}
+							else
+							{
+								if (ilc)
+								{
+									ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+								}
+								else
+								{
+									child.x = w - positions.right - margins.left - child.width - margins.right;
+								}
+							}
+						}
+					}
+					else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+					{
+						ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+					}
+
+					// set the bottm edge of the child
+					if (!isNaN(positions.bottom))
+					{
+						if (!hostHeightSizedToContent)
+						{
+							if (!isNaN(positions.top))
+							{
+								if (ilc)
+									ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+								else
+									child.height = hh - positions.bottom - margins.bottom;
+							}
+							else
+							{
+								if (ilc)
+									ilc.setY( h - positions.bottom - child.height - margins.bottom);
+								else
+									child.y = h - positions.bottom - child.height - margins.bottom;
+							}
+						}
+					}
+					else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+					{
+						ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+					}
+					
+					if (margins.auto)
+					{
+						if (ilc)
+							ilc.setX( (w - child.width) / 2);
+						else
+							child.x = (w - child.width) / 2;
+					}
+                }
+
+                return true;
+
+            }
+
+            COMPILE::JS
+            {
+                var i:int
+                var n:int;
+				var contentView:ILayoutView = layoutView;
+
+                n = contentView.numElements;
+
+				// host must have either have position:absolute or position:relative
+				if (contentView.element.style.position != "absolute" && contentView.element.style.position != "relative") {
+					contentView.element.style.position = "relative";
+				}
+
+				// each child must have position:absolute for BasicLayout to work
+				for (i=0; i < n; i++) {
+					var child:UIBase = contentView.getElementAt(i) as UIBase;
+					child.positioner.style.position = "absolute";
+				}
+
+                return true;
+            }
+		}
+	}
+}
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 21ea1ed..05566ba 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
@@ -134,6 +134,7 @@ package org.apache.royale.jewel.beads.views
             
 			// Text
 			content = new Group();
+			content.typeNames = "content";
 			label = new Label();
 			label.text = alertModel.message;
 			content.addElement(label);
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 58fe0b5..93b0ed4 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -37,3 +37,12 @@
 
 j|Group
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
+
+j|View
+	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+@media -royale-swf
+	j|View
+		IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+		IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 10e6fe9..da38a9f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -121,6 +121,7 @@ $alert-modal-opacity: .5
         background-color: rgba(0, 0, 0, $alert-modal-opacity)
 
 j|Alert
+    //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
     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/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 94a0c9d..c8e8cc4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -86,7 +86,7 @@ div {
   font-size: 1.9em;
   font-weight: bold;
 }
-.jewel.alert .Group {
+.jewel.alert .content {
   position: absolute;
   padding: 20px;
   top: 50px;
@@ -94,7 +94,7 @@ div {
   width: 100%;
   overflow-y: auto;
 }
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
   white-space: normal;
   color: #808080;
   font-size: 1.1em;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
index 6e1ad80..5ed5fdf 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
@@ -71,7 +71,7 @@ $alert-modal-opacity: .5
                 size: $alert-title-font-size
                 weight: $alert-title-font-weight
           
-    .Group
+    .content
         position: absolute
         padding: $alert-padding
         top: $alert-header-height

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.