royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch feature/jewel-ui-set updated: Jewel Alert first iteration
Date Wed, 28 Mar 2018 22:05:28 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
     new a41e009  Jewel Alert first iteration
a41e009 is described below

commit a41e00921867940323827ebbfc8b08480b34855f
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Thu Mar 29 00:05:23 2018 +0200

    Jewel Alert first iteration
---
 .../src/main/royale/ButtonPlayGround.mxml          |  22 +-
 .../projects/Jewel/src/main/resources/defaults.css |  77 +++++
 .../Jewel/src/main/resources/jewel-manifest.xml    |   5 +-
 .../projects/Jewel/src/main/royale/JewelClasses.as |   5 +
 .../main/royale/org/apache/royale/jewel/Alert.as   | 322 +++++++++++++++++++++
 .../royale/org/apache/royale/jewel/ControlBar.as   |  88 ++++++
 .../royale/org/apache/royale/jewel/TitleBar.as     | 139 +++++++++
 .../jewel/beads/controllers/AlertController.as     | 102 +++++++
 .../beads/measurements/TitleBarMeasurementBead.as  | 109 +++++++
 .../apache/royale/jewel/beads/views/AlertView.as   | 321 ++++++++++++++++++++
 .../royale/jewel/beads/views/TitleBarView.mxml     |  59 ++++
 .../Jewel/src/main/sass/components/_alert.sass     |  60 ++++
 .../src/main/sass/components/_controlbar.sass      |  34 +++
 .../Jewel/src/main/sass/components/_titlebar.sass  |  35 +++
 .../projects/Jewel/src/main/sass/defaults.sass     |   3 +
 .../src/main/sass/components/_alert.sass           |  24 ++
 .../src/main/sass/components/_controlbar.sass      |  24 ++
 .../src/main/sass/components/_titlebar.sass        |  24 ++
 .../themes/JewelTheme/src/main/sass/defaults.sass  |   3 +
 19 files changed, 1448 insertions(+), 8 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 7344748..6210078 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -25,12 +25,20 @@ limitations under the License.
     
 	<fx:Script>
 		<![CDATA[
-        private function onValueChange(event:Event):void
-        {
-        	//button.width = slider.value;
-			//button.height = slider_v.value;
-        }
-    	]]>
+			import org.apache.royale.jewel.Alert;
+
+			private function showAlert(event:MouseEvent):void
+			{
+				var alert:Alert = Alert.show("Are you sure ?", this, "Alert Title", Alert.OK | Alert.CANCEL);
+				//alert.height = 150;
+				//alert.addEventListener("close", onShowAlertAction);
+			}
+			
+			/*private function onShowAlertAction(event:CloseEvent):void
+			{
+				alertStatus.text = "Alert status: " + event.detail;
+			}*/
+		]]>
 	</fx:Script>
 
 	<js:beads>
@@ -39,7 +47,7 @@ limitations under the License.
 	
 	<html:H3 text="Jewel Button"/>
 	
-	<j:Button />
+	<j:Button click="showAlert(event)"/>
 	<j:Button primary="true"/>
 	<j:Button emphasized="true"/>
 	
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index c99e1f8..c60a0b6 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -30,12 +30,69 @@
   display: block !important;
 }
 
+.jewel.alert {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  top: 12%;
+  min-width: 400px;
+  min-height: 210px;
+  overflow: auto;
+  box-shadow: 0px 6px 60px -10px rgba(112, 112, 112, 0.7);
+  background-color: #FFFFFF;
+  border: 0px solid;
+  border-radius: 10px;
+}
+.jewel.alert .jewel.titleBar {
+  font-size: 2em;
+}
+.jewel.alert .Group {
+  padding: 20px;
+}
+.jewel.alert .jewel.controlbar {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  padding: 8px 6px;
+}
+
+j|Alert {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
+  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
+}
+
+@media -royale-swf {
+  j|Alert {
+    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+    IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+  }
+}
 @media -royale-swf {
   j|CheckBox {
     IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel");
     IBeadView: ClassReference("org.apache.royale.html.beads.CheckBoxView");
   }
 }
+.jewel.controlbar {
+  padding: 6px;
+  background-color: transparent;
+  height: 30px;
+}
+
+j|ControlBar {
+  IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+  IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalFlexLayout");
+}
+
+@media -royale-swf {
+  j|ControlBar {
+    IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
+    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+    IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+  }
+}
 .jewel.label {
   white-space: nowrap;
 }
@@ -82,4 +139,24 @@ j|TextField {
   IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
 }
 
+.jewel.titlebar {
+  background-color: transparent;
+  padding: 6px;
+  min-height: 30px;
+}
+
+j|TitleBar {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel");
+  IMeasurementBead: ClassReference("org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView");
+}
+
+@media -royale-swf {
+  j|TitleBar {
+    IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+    border: 1px solid #333333;
+  }
+}
+
 /*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 332b2eb..b97804b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -29,7 +29,10 @@
     <component id="Slider" class="org.apache.royale.jewel.Slider"/>
     <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
     <component id="CheckBox" class="org.apache.royale.jewel.CheckBox"/>
-
+    <component id="Alert" class="org.apache.royale.jewel.Alert"/>
+    <component id="ControlBar" class="org.apache.royale.jewel.ControlBar"/>
+    <component id="TitleBar" class="org.apache.royale.jewel.TitleBar"/>
+    
     <component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
 
     <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 8e0a078..d498f59 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -32,6 +32,11 @@ package
         import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
 	    import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
 
+        import org.apache.royale.jewel.beads.controllers.AlertController; AlertController;
+        import org.apache.royale.jewel.beads.views.AlertView; AlertView;
+        import org.apache.royale.jewel.beads.views.TitleBarView; TitleBarView;
+        import org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead; TitleBarMeasurementBead;
+        
         COMPILE::SWF
 	    {
             import org.apache.royale.html.beads.TextFieldView; TextFieldView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
new file mode 100644
index 0000000..3029329
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
@@ -0,0 +1,322 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.Group;
+	import org.apache.royale.core.IAlertModel;
+	import org.apache.royale.core.IPopUp;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    [Event(name="close", type="org.apache.royale.events.CloseEvent")]
+	/**
+	 *  The Alert class is a component that displays a message and one or more buttons
+	 *  in a view that pops up over all other controls and views. The Alert component
+	 *  uses the AlertView bead to display a modal dialog with a title and a variety
+	 *  of buttons configured through the flag property of its show() static function.
+	 *  The Alert component uses the following beads:
+	 * 
+	 *  org.apache.royale.core.IBeadModel: the data model for the Alert.
+	 *  org.apache.royale.core.IBeadView: the bead used to create the parts of the Alert.
+	 *  org.apache.royale.core.IBeadController: the bead used to handle input events.
+	 *  org.apache.royale.core.IBorderBead: if present, draws a border around the Alert.
+	 *  org.apache.royale.core.IBackgroundBead: if present, places a solid color background below the Alert.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class Alert extends Group implements IPopUp
+	{
+		/**
+		 *  The bitmask button flag to show the YES button.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public static const YES:uint    = 0x000001;
+		
+		/**
+		 *  The bitmask button flag to show the NO button.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public static const NO:uint     = 0x000002;
+		
+		/**
+		 *  The bitmask button flag to show the OK button.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public static const OK:uint     = 0x000004;
+		
+		/**
+		 *  The bitmask button flag to show the Cancel button.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public static const CANCEL:uint = 0x000008;
+		
+		/**
+		 *  constructor.
+		 *
+         *  <inject_html>
+         *  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.css">
+         *  <script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.js"></script>
+         *  </inject_html>
+         * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function Alert()
+		{
+			super();
+			
+			typeNames = "jewel alert";
+		}
+
+        /**
+		 * The html dialog component that parents the dialog content
+		 */
+		COMPILE::JS
+		private var dialog:HTMLDialogElement;
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 * @royaleignorecoercion HTMLDialogElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+            dialog = addElementToWrapper(this,'dialog') as HTMLDialogElement;
+            return element;
+        }
+
+        /**
+		 * flag to ensure only one dialog is created
+		 */
+		private var lockDialogCreation:Boolean = false;
+        
+        /**
+		 *  This function make the dialog be added to document.body only once
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		private function prepareDialog():void
+		{
+            COMPILE::JS
+			{
+				if(!lockDialogCreation)
+				{
+					lockDialogCreation = true;
+					var body:HTMLElement = document.getElementsByTagName('body')[0];
+					body.appendChild(element);
+					this.addedToParent();
+
+					if (!("showModal" in dialog))
+					{
+						window["dialogPolyfill"]["registerDialog"](dialog);
+					}
+				}
+			}
+		}
+
+         // note: only passing parent to this function as I don't see a way to identify
+         // the 'application' or top level view without supplying a place to start to
+         // look for it.
+         /**
+          *  This static method is a convenience function to quickly create and display an Alert. The
+          *  text and parent paramters are required, the others will default.
+          *
+          *  @param String message The message content of the Alert.
+          *  @param Object parent The object that hosts the pop-up.
+          *  @param String title An optional title for the Alert.
+          *  @param uint flags Identifies which buttons to display in the alert.
+          *
+          *  @langversion 3.0
+          *  @playerversion Flash 10.2
+          *  @playerversion AIR 2.6
+          *  @productversion Royale 0.0
+          */
+        static public function show( message:String, parent:Object, title:String="", flags:uint=Alert.OK ) : Alert
+		{
+            var alert:Alert = new Alert();
+            alert.message = message;
+            alert.title  = title;
+            alert.flags = flags;
+
+            COMPILE::SWF
+			{
+				alert.show(parent);
+			}
+
+            COMPILE::JS
+			{
+				alert.show();
+			}
+            
+            /*COMPILE::JS
+            {
+                alert.positioner.style.margin = 'auto';
+                alert.positioner.style.left = "50%";
+                alert.positioner.style.top = "50%";
+                alert.positioner.style.width = "200px";
+            }*/
+            return alert;
+		}
+
+        /**
+		 *  Displays the dialog element and makes it the top-most modal dialog.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function showModal():void
+		{
+			prepareDialog();
+
+			COMPILE::JS
+			{
+				dialog.showModal()
+			}
+		}
+		
+		/**
+		 *  Shows the Alert anchored to the given parent object which is usally a root component such
+		 *  as a UIView..
+		 * 
+		 *  @param Object parent The object that hosts the pop-up.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function show(parent:Object = null) : void
+		{
+            prepareDialog();
+
+            COMPILE::SWF
+			{
+				parent.addElement(this);
+			}
+
+            COMPILE::JS
+			{
+				dialog.show();
+			}
+		}
+		
+        /**
+		 *  Closes the dialog element.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function close():void
+		{
+			COMPILE::JS
+			{
+				dialog.close();
+			}
+		}
+
+		/**
+		 *  The tile of the Alert.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get title():String
+		{
+			return IAlertModel(model).title;
+		}
+
+		public function set title(value:String):void
+		{
+			IAlertModel(model).title = value;
+		}
+
+		/**
+		 *  The message to display in the Alert body.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get message():String
+		{
+			return IAlertModel(model).message;
+		}
+		public function set message(value:String):void
+		{
+			IAlertModel(model).message = value;
+		}
+
+		/**
+		 *  The buttons to display on the Alert as bit-mask values.
+		 *
+		 *  Alert.YES
+         *  Alert.NO
+         *  Alert.OK
+         *  Alert.CANCEL
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get flags():uint
+		{
+			return IAlertModel(model).flags;
+		}
+		public function set flags(value:uint):void
+		{
+			IAlertModel(model).flags = value;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as
new file mode 100644
index 0000000..bdfeb89
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.Group;
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.IChrome;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.utils.loadBeadFromValuesManager;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The ControlBar class is used within a Panel as a place to position
+	 *  additional controls. The ControlBar appears at the bottom of the
+	 *  org.apache.royale.html.Panel
+	 *  and is not part of the Panel's scrollable content area. The ControlBar
+	 *  is a Container and implements the org.apache.royale.core.IChrome interface, indicating that is
+	 *  outside of the Container's content area. The ControlBar uses the following
+	 *  beads:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model for the component.
+	 *  org.apache.royale.core.IMeasurementBead: helps determine the overlay size of the ControlBar for layout.
+	 *  org.apache.royale.core.IBorderBead: if present, displays a border around the component.
+	 *  org.apache.royale.core.IBackgroundBead: if present, displays a solid background below the ControlBar.
+	 *
+     *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class ControlBar extends Group implements IChrome
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function ControlBar()
+		{
+			super();
+
+			typeNames = "jewel controlbar";
+		}
+
+		/**
+		 * @private
+		 */
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+		}
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this,'div');
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
new file mode 100644
index 0000000..e165e8a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
@@ -0,0 +1,139 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.html.Group;
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.IChrome;
+	import org.apache.royale.core.ITitleBarModel;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.utils.loadBeadFromValuesManager;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+	
+	/**
+	 *  The TitleBar class is a Container component that displays a title and an
+	 *  optional close button. The TitleBar uses the following bead types:
+	 * 
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the title and showCloseButton values.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the component.
+	 *  org.apache.royale.core.IBeadLayout: the bead that handles size and position of the component parts 
+	 *  (org.apache.royale.html.Label and org.apache.royale.html.Button).
+	 *  org.apache.royale.core.IMeasurementBead: a bead that helps determine the size of the 
+	 *  org.apache.royale.html.TitleBar for layout.
+	 * 
+     *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class TitleBar extends Group implements IChrome
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function TitleBar()
+		{
+			super();
+			
+			typeNames = "jewel titlebar";
+		}
+		
+		/**
+		 *  The title string to display.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get title():String
+		{
+			return ITitleBarModel(model).title;
+		}
+		public function set title(value:String):void
+		{
+			ITitleBarModel(model).title = value;
+		}
+		
+		/**
+		 *  The HTML title to display.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get htmlTitle():String
+		{
+			return ITitleBarModel(model).htmlTitle;
+		}
+		public function set htmlTitle(value:String):void
+		{
+			ITitleBarModel(model).htmlTitle = value;
+		}
+		
+		/**
+		 *  Whether or not to show a org.apache.royale.html.Button that indicates the component
+		 *  may be closed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get showCloseButton():Boolean
+		{
+			return ITitleBarModel(model).showCloseButton;
+		}
+		public function set showCloseButton(value:Boolean):void
+		{
+			ITitleBarModel(model).showCloseButton = value;
+		}
+		
+		/**
+		 * @private
+		 */
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+			loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+		}
+        
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this,'div');
+        }        
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as
new file mode 100644
index 0000000..6fcab21
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.controllers
+{
+    COMPILE::SWF
+    {
+        import flash.display.DisplayObject;
+    }
+
+    import org.apache.royale.core.UIBase;
+	import org.apache.royale.core.IBeadController;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.CloseEvent;
+	import org.apache.royale.events.IEventDispatcher;
+
+	/**
+	 *  The AlertControler class bead handles the close event on the org.apache.royale.jewwl.Alert 
+	 *  by removing the org.apache.royale.jewel.Alert from the display.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+    public class AlertController implements IBeadController
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function AlertController()
+		{
+		}
+		
+        private var _strand:IStrand;
+        
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+        public function get strand():IStrand
+        {
+            return _strand;
+        }
+        
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+        public function set strand(value:IStrand):void
+        {
+            _strand = value;
+            IEventDispatcher(value).addEventListener("close", alertCloseHandler);
+        }
+        
+		/**
+		 * @private
+		 */
+        private function alertCloseHandler(event:CloseEvent):void
+        {
+			COMPILE::SWF
+            {
+                DisplayObject(_strand).parent.removeChild(DisplayObject(_strand));
+            }
+
+			COMPILE::JS
+			{
+				var host:UIBase = strand as UIBase;
+                var htmlElement:HTMLElement = host.element as HTMLElement;
+                htmlElement.parentElement.removeChild(host.element);
+			}
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as
new file mode 100644
index 0000000..1e14af0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/measurements/TitleBarMeasurementBead.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.measurements
+{
+	import org.apache.royale.core.IMeasurementBead;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.jewel.TitleBar;
+    import org.apache.royale.jewel.beads.views.TitleBarView;
+	
+	/**
+	 *  The TitleBarMeasurementBead class measures the overall size of a 
+	 *  org.apache.royale.jewel.TitleBar.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class TitleBarMeasurementBead implements IMeasurementBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function TitleBarMeasurementBead()
+		{
+		}
+		
+		/**
+		 *  The overall width of the org.apache.royale.html.TitleBar.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get measuredWidth():Number
+		{
+			var mwidth:Number = 0;
+			var titleBar:TitleBar = _strand as TitleBar;
+			var titleView:TitleBarView = _strand.getBeadByType(TitleBarView) as TitleBarView;
+			var labelMeasure:IMeasurementBead = titleView.titleLabel.measurementBead;
+			mwidth = labelMeasure.measuredWidth;
+			if( titleBar.showCloseButton ) {
+				var buttonMeasure:IMeasurementBead = titleView.closeButton.measurementBead;
+				mwidth += buttonMeasure.measuredWidth;
+			}
+			return mwidth;
+		}
+		
+		/**
+		 *  The overall height of the org.apache.royale.html.TitleBar.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get measuredHeight():Number
+		{
+			var mheight:Number = 0;
+			var titleBar:TitleBar = _strand as TitleBar;
+			var titleView:TitleBarView = _strand.getBeadByType(TitleBarView) as TitleBarView;
+			var labelMeasure:IMeasurementBead = titleView.titleLabel.measurementBead;
+			mheight = labelMeasure.measuredHeight;
+			if( titleBar.showCloseButton ) {
+				var buttonMeasure:IMeasurementBead = titleView.closeButton.measurementBead;
+				mheight = Math.max(mheight,buttonMeasure.measuredHeight);
+			}
+			return mheight;
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
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
new file mode 100644
index 0000000..04a2131
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -0,0 +1,321 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.views
+{
+    import org.apache.royale.core.BeadViewBase;
+    import org.apache.royale.core.IAlertModel;
+    import org.apache.royale.core.IBead;
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+    import org.apache.royale.core.IParent;
+    import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.layout.EdgeData;
+    import org.apache.royale.events.CloseEvent;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.events.MouseEvent;
+    import org.apache.royale.html.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.TextButton;
+    import org.apache.royale.jewel.TitleBar;
+    import org.apache.royale.jewel.ControlBar;
+	
+    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.geom.Rectangle;
+        import org.apache.royale.utils.loadBeadFromValuesManager;
+	}
+	
+	/**
+	 *  The AlertView class creates the visual elements of the org.apache.royale.jewel.Alert
+	 *  component. The job of the view bead is to put together the parts of the Alert, such as the 
+	 *  title bar, message, and various buttons, within the space of the Alert component strand.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class AlertView extends GroupView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function AlertView()
+		{
+		}
+		
+		protected var titleBar:TitleBar;
+		protected var controlBar:UIBase;
+		protected var label:Label;
+		protected var labelContent:Group;
+
+        protected var okButton:TextButton;
+        protected var cancelButton:TextButton;
+        protected var yesButton:TextButton;
+        protected var noButton:TextButton;
+
+        protected var alertModel:IAlertModel;
+
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+
+			COMPILE::SWF
+            {
+                var backgroundColor:Object = ValuesManager.valuesImpl.getValue(value, "background-color");
+                var backgroundImage:Object = ValuesManager.valuesImpl.getValue(value, "background-image");
+                if (backgroundColor != null || backgroundImage != null)
+                {
+                    loadBeadFromValuesManager(IBackgroundBead, "iBackgroundBead", value);
+                }
+
+                var borderStyle:String;
+                var borderStyles:Object = ValuesManager.valuesImpl.getValue(value, "border");
+                if (borderStyles is Array)
+                {
+                    borderStyle = borderStyles[1];
+                }
+                if (borderStyle == null)
+                {
+                    borderStyle = ValuesManager.valuesImpl.getValue(value, "border-style") as String;
+                }
+                if (borderStyle != null && borderStyle != "none")
+                {
+                    loadBeadFromValuesManager(IBorderBead, "iBorderBead", value);
+                }
+            }
+
+			alertModel = (_strand as UIBase).model as IAlertModel;
+
+			createButtons();
+
+			if (alertModel.title)
+            {
+                titleBar = new TitleBar();
+                //titleBar.height = 25;
+                titleBar.title = alertModel.title;
+                IParent(_strand).addElement(titleBar);
+            }
+
+			label = new Label();
+			label.text = alertModel.message;
+			
+			labelContent = new Group();
+			labelContent.percentWidth = 100;
+			labelContent.percentHeight = 100;
+
+			labelContent.addElement(label);
+			
+            IParent(_strand).addElement(labelContent);
+
+			/*COMPILE::JS
+			{
+                label.element.style["white-space"] = "unset";
+				labelContent.element.style["minHeight"] = "30px";
+				controlBar.element.style["flex-direction"] = "row";
+				controlBar.element.style["justify-content"] = "flex-end";
+				controlBar.element.style["border"] = "none";
+				controlBar.element.style["background-color"] = "#FFFFFF";
+			}*/
+            IParent(_strand).addElement(controlBar);
+
+			COMPILE::SWF
+            {
+                refreshSize();
+            }
+		}
+
+		private function createButtons():void
+		{
+			COMPILE::SWF
+			{
+				controlBar = new Group();
+            }
+
+			COMPILE::JS
+			{
+				controlBar = new ControlBar();
+			}
+
+            var flags:uint = alertModel.flags;
+            if( flags & Alert.OK )
+            {
+                okButton = new TextButton();
+                okButton.text = alertModel.okLabel;
+                okButton.addEventListener("click",handleOK);
+
+                controlBar.addElement(okButton);
+
+                /*COMPILE::JS
+                {
+                    okButton.element.style["margin-left"] = "2px";
+                    okButton.element.style["margin-right"] = "2px";
+                }*/
+            }
+            if( flags & Alert.CANCEL )
+            {
+                cancelButton = new TextButton();
+                cancelButton.text = alertModel.cancelLabel;
+                cancelButton.addEventListener("click",handleCancel);
+
+                controlBar.addElement(cancelButton);
+
+                /*COMPILE::JS
+                {
+                    cancelButton.element.style["margin-left"] = "2px";
+                    cancelButton.element.style["margin-right"] = "2px";
+                }*/
+            }
+            if( flags & Alert.YES )
+            {
+                yesButton = new TextButton();
+                yesButton.text = alertModel.yesLabel;
+                yesButton.addEventListener("click",handleYes);
+
+                controlBar.addElement(yesButton);
+
+                /*COMPILE::JS
+                {
+                    yesButton.element.style["margin-left"] = "2px";
+                    yesButton.element.style["margin-right"] = "2px";
+                }*/
+            }
+            if( flags & Alert.NO )
+            {
+                noButton = new TextButton();
+                noButton.text = alertModel.noLabel;
+                noButton.addEventListener("click",handleNo);
+
+                controlBar.addElement(noButton);
+
+                /*COMPILE::JS
+                {
+                    noButton.element.style["margin-left"] = "2px";
+                    noButton.element.style["margin-right"] = "2px";
+                }*/
+            }
+		}
+
+		/**
+		 * @private
+         * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+		 */
+		COMPILE::SWF
+		private function refreshSize():void
+		{
+			var labelMeasure:IMeasurementBead = label.measurementBead;
+			var titleMeasure:IMeasurementBead = titleBar.measurementBead;
+			var titleBarWidth:Number = titleBar ? titleBar.measurementBead.measuredWidth : 0;
+
+			var maxWidth:Number = Math.max(titleMeasure.measuredWidth, titleBarWidth, labelMeasure.measuredWidth);
+
+			var metrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderAndPaddingMetrics(_strand as IUIBase);
+
+            var titleBarHeight:Number = 0;
+			if (titleBar)
+            {
+                titleBarHeight = titleBar.height;
+                titleBar.x = 0;
+                titleBar.y = 0;
+                titleBar.width = maxWidth;
+                titleBar.dispatchEvent(new Event("layoutNeeded"));
+            }
+
+			// content placement here
+			label.x = metrics.left;
+			label.y = titleBarHeight + metrics.top;
+			label.width = maxWidth - metrics.left - metrics.right;
+			
+			controlBar.x = 0;
+			controlBar.y = titleBarHeight + label.y + label.height + metrics.bottom;
+			controlBar.width = maxWidth;
+			controlBar.dispatchEvent(new Event("layoutNeeded"));
+			
+			UIBase(_strand).width = maxWidth;
+			UIBase(_strand).height = titleBarHeight + label.height + controlBar.height + metrics.top + metrics.bottom;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleOK(event:MouseEvent):void
+		{
+			// create some custom event where the detail value
+			// is the OK button flag. Do same for other event handlers
+			dispatchCloseEvent(Alert.OK);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleCancel(event:MouseEvent):void
+		{
+			dispatchCloseEvent(Alert.CANCEL);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleYes(event:MouseEvent):void
+		{
+			dispatchCloseEvent(Alert.YES);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function handleNo(event:MouseEvent):void
+		{
+			dispatchCloseEvent(Alert.NO);
+		}
+		
+		/**
+		 * @private
+		 */
+		public function dispatchCloseEvent(buttonFlag:uint):void
+		{
+			var closeEvent:CloseEvent = new CloseEvent("close", false, false, buttonFlag);
+			IEventDispatcher(_strand).dispatchEvent(closeEvent);
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
new file mode 100644
index 0000000..debf93d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
@@ -0,0 +1,59 @@
+<?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.
+
+-->
+<!---
+ The TitleBarView is the view for a Panel's TitleBar written in MXML
+
+ @langversion 3.0
+ @playerversion Flash 10.2
+ @playerversion AIR 2.6
+ @productversion Royale 0.0
+-->
+<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
+                     xmlns:js="library://ns.apache.org/royale/basic">
+				  
+    <fx:Script>
+        <![CDATA[
+            import org.apache.royale.jewel.TitleBar;
+            import org.apache.royale.core.ITitleBarModel;
+            import org.apache.royale.core.UIBase;
+            import org.apache.royale.events.Event;
+            
+            private function clickHandler():void
+            {
+                var newEvent:org.apache.royale.events.Event = new org.apache.royale.events.Event('close');
+                UIBase(_strand).dispatchEvent(newEvent)   
+            }
+        ]]>
+    </fx:Script>
+    
+    <js:beads>
+        <js:MXMLBeadViewDataBinding />
+        <js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
+    </js:beads>
+
+    <js:Label id="titleLabel" text="{ITitleBarModel(model).title}" className="TitleBarTitle" >
+        <js:style>
+            <js:SimpleCSSStyles fontWeight="inherit" marginRight="5" marginLeft="5" />
+        </js:style>
+    </js:Label>
+    <js:CloseButton id="closeButton" click="clickHandler()" className="TitleBarCloseButton"
+                    visible="{ITitleBarModel(model).showCloseButton}"/>
+    
+</js:MXMLBeadView>
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
new file mode 100644
index 0000000..b4ea905
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+.jewel.alert
+    position: fixed //avoid move with scroll 
+    z-index: 1 // above rest of content
+    left: 0
+    right: 0
+    top: 12%
+    min-width: 400px
+    min-height: 210px
+    overflow: auto  // if needed show let scroll
+
+    box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
+
+    background-color: #FFFFFF
+    border: 0px solid
+    border-radius: 10px
+
+    .jewel.titleBar
+        font:
+            size: 2em
+    
+    .Group
+        padding: 20px
+
+    .jewel.controlbar
+        display: flex
+        flex-direction: row-reverse
+        flex-wrap: wrap
+        padding: 8px 6px
+
+
+
+j|Alert
+    IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel")
+    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
+    //IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalFlexLayout")
+    IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.AlertView")
+
+@media -royale-swf	
+    j|Alert
+        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/_controlbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
new file mode 100644
index 0000000..c832ea1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+.jewel.controlbar
+    padding: 6px
+    background-color: transparent
+    height: 30px
+
+j|ControlBar
+    IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
+    IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalFlexLayout")
+
+@media -royale-swf
+    j|ControlBar
+        IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead")
+        IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+        IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+        //border: 1px solid #333333
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
new file mode 100644
index 0000000..a3ce0db
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+.jewel.titlebar
+    background-color: transparent
+    padding: 6px
+    min-height: 30px
+
+j|TitleBar
+    IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel")
+    IMeasurementBead: ClassReference("org.apache.royale.jewel.beads.measurements.TitleBarMeasurementBead")
+    //IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.FlexibleFirstChildHorizontalLayout")
+    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView")
+
+@media -royale-swf
+    j|TitleBar
+        IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+        IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+        border: 1px solid #333333
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index dc2d096..0516751 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -21,11 +21,14 @@
 @import "global"
 
 // Components
+@import "components/alert"    
 @import "components/button"
 @import "components/checkbox"
+@import "components/controlbar"
 @import "components/label"
 @import "components/radiobutton"
 @import "components/slider"
 @import "components/textbutton"
 @import "components/textfield"
+@import "components/titlebar"
 
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
new file mode 100644
index 0000000..a4257b5
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_alert.sass
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel Alert
+
+// Alert variables
+
+.jewel.alert
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_controlbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_controlbar.sass
new file mode 100644
index 0000000..49bc0db
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_controlbar.sass
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel ControlBar
+
+// ControlBar variables
+
+.jewel.controlbar
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_titlebar.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_titlebar.sass
new file mode 100644
index 0000000..047d4d4
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_titlebar.sass
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel TitleBAr
+
+// TitleBar variables
+
+.jewel.titlebar
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index dad6b9a..b4f6a8f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -24,10 +24,13 @@
 @import "global"
 
 // Components
+@import "components/alert"    
 @import "components/button"
 @import "components/checkbox"
+@import "components/controlbar"
 @import "components/label"
 @import "components/radiobutton"
 @import "components/slider"
 @import "components/textbutton"
 @import "components/textfield"
+@import "components/titlebar"

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

Mime
View raw message