You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/10 01:13:35 UTC

[royale-asjs] branch develop updated: Fixed ComboBox to play with Form. The refactor made Combo unusable in certain circumstances, so it needs to be reworked to popup correctly.

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 a1101ff  Fixed ComboBox to play with Form. The refactor made Combo unusable in certain circumstances, so it needs to be reworked to popup correctly.
a1101ff is described below

commit a1101ff09f4127ccca84dd1b489373a58f04ab0d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Sep 10 03:13:29 2018 +0200

    Fixed ComboBox to play with Form. The refactor made Combo unusable in certain circumstances, so it needs to be reworked to popup correctly.
---
 .../projects/Jewel/src/main/resources/defaults.css | 15 +---
 .../projects/Jewel/src/main/royale/JewelClasses.as |  1 -
 .../jewel/beads/controllers/ComboBoxController.as  | 27 ++++---
 .../royale/jewel/beads/views/ComboBoxView.as       | 50 ++++++------
 .../royale/jewel/beads/views/DateFieldView.as      | 12 ++-
 .../jewel/supportClasses/combobox/ComboBoxList.as  | 93 +++++++++++++++++++++-
 .../combobox/ComboBoxListDataGroup.as              | 57 -------------
 .../Jewel/src/main/sass/components/_combobox.sass  | 27 ++-----
 .../src/main/sass/components/_datechooser.sass     |  2 +-
 .../Jewel/src/main/sass/components/_datefield.sass |  2 +
 10 files changed, 154 insertions(+), 132 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 9ccb0b9..cc5a973 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -317,6 +317,7 @@ j|ComboBox {
   transition: opacity 0.4s 0ms;
 }
 .combobox-popup .jewel.list {
+  position: relative;
   transform: translate(-50%, 100%);
   transition: none;
   will-change: transform, opacity;
@@ -373,16 +374,6 @@ j|ComboBox {
     height: 34px;
   }
 }
-j|ComboBoxList {
-  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
-  IContentView: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup");
-}
-
-@media -royale-swf {
-  j|ComboBoxList {
-    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
-  }
-}
 .jewel.datechooser .jewel.table .jewel.tableheadercell {
   padding: 12px 0px;
 }
@@ -425,7 +416,7 @@ j|ComboBoxList {
 j|DateChooser {
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView");
-  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
   IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController");
 }
 
@@ -475,6 +466,7 @@ j|DateChooser {
   transition: opacity 0.4s 0ms;
 }
 .datechooser-popup .jewel.table {
+  position: relative;
   transform: translate(-50%, 100%);
   transition: none;
   will-change: transform, opacity;
@@ -535,6 +527,7 @@ j|DateField {
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
   IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController");
   IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY");
+  IPopUp: ClassReference("org.apache.royale.jewel.DateChooser");
 }
 
 .jewel.divider {
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 9a1f0fd..730232b 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -89,7 +89,6 @@ package
         import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
         import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList; ComboBoxList;
         import org.apache.royale.jewel.supportClasses.list.DataGroup; DataGroup;
-        import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup; ComboBoxListDataGroup;
 
         //import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
     }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
index f547339..8d33dc3 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
@@ -30,7 +30,11 @@ package org.apache.royale.jewel.beads.controllers
 	import org.apache.royale.events.MouseEvent;
 	import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
 	import org.apache.royale.jewel.beads.views.ListView;
-	import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup;
+	import org.apache.royale.jewel.List;
+	import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList;
+	import org.apache.royale.core.IComboBoxModel;
+	import org.apache.royale.core.ISelectionModel;
+	
 	
 	/**
 	 *  The ComboBoxController class is responsible for listening to
@@ -57,7 +61,8 @@ package org.apache.royale.jewel.beads.controllers
 		}
 		
 		protected var viewBead:IComboBoxView;
-		private var dataGroup:ComboBoxListDataGroup;
+		private var list:List;
+		private var model:IComboBoxModel;
 		
 		private var _strand:IStrand;
 		
@@ -74,6 +79,7 @@ package org.apache.royale.jewel.beads.controllers
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;
+			model = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
 			viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
 			if (viewBead) {
 				finishSetup();
@@ -101,12 +107,12 @@ package org.apache.royale.jewel.beads.controllers
 			
 			viewBead.popUpVisible = true;
 			
-			IEventDispatcher(viewBead.popup).addEventListener(Event.CHANGE, changeHandler);
+			IEventDispatcher(viewBead.popup.list).addEventListener(Event.CHANGE, changeHandler);
 
-			// viewBead.popup is ComboBoxList that fills 100% of browser window-> We want ComboBoxListDataGroup inside
-			dataGroup = viewBead.popup.view.contentView.view.contentView;
+			// viewBead.popup is ComboBoxList that fills 100% of browser window-> We want List inside
+			list = (viewBead.popup as ComboBoxList).list;
 
-			IEventDispatcher(dataGroup).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+			IEventDispatcher(list).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
 			IUIBase(viewBead.popup).addEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
 		}
 
@@ -120,9 +126,9 @@ package org.apache.royale.jewel.beads.controllers
 		 */
 		protected function removePopUpWhenClickOutside(event:MouseEvent = null):void
 		{
-			IEventDispatcher(dataGroup).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+			IEventDispatcher(list).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
 			IUIBase(viewBead.popup).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
-			IEventDispatcher(viewBead.popup).removeEventListener(Event.CHANGE, changeHandler);
+			IEventDispatcher(viewBead.popup.list).removeEventListener(Event.CHANGE, changeHandler);
 			viewBead.popUpVisible = false;
 		}
 		
@@ -133,10 +139,11 @@ package org.apache.royale.jewel.beads.controllers
 		private function changeHandler(event:Event):void
 		{
 			event.stopImmediatePropagation();
-			IEventDispatcher(dataGroup).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+			IEventDispatcher(list).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
 			IUIBase(viewBead.popup).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
-			IEventDispatcher(viewBead.popup).removeEventListener(Event.CHANGE, changeHandler);
+			IEventDispatcher(viewBead.popup.list).removeEventListener(Event.CHANGE, changeHandler);
 
+			model.selectedItem = ISelectionModel(viewBead.popup.list.getBeadByType(ISelectionModel)).selectedItem;
 			viewBead.popUpVisible = false;
 			
 			IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
index 29b4c5c..431bea0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -39,7 +39,7 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.geom.Point;
 	import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
 	import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
-	import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup;
+	import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList;
 	import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
 	
 	/**
@@ -92,6 +92,7 @@ package org.apache.royale.jewel.beads.views
 			return _button;
 		}
 		
+		private var _combolist:ComboBoxList;
 		private var _list:List;
 		
 		/**
@@ -106,7 +107,7 @@ package org.apache.royale.jewel.beads.views
 		 */
 		public function get popup():Object
 		{
-			return _list;
+			return _combolist;
 		}
 		
 		/**
@@ -151,7 +152,7 @@ package org.apache.royale.jewel.beads.views
 		 */
 		public function get popUpVisible():Boolean
 		{
-			return _list == null ? false : true;
+			return _combolist == null ? false : true;
 		}
 		/**
 		 * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
@@ -159,20 +160,21 @@ package org.apache.royale.jewel.beads.views
 		 */
 		public function set popUpVisible(value:Boolean):void
 		{
+			
 			if (value) {
 				var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
-				_list = new popUpClass() as List;
-
-				var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
-				_list.model = model;
+				_combolist = new popUpClass() as ComboBoxList;
 				
-				var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
-				popupHost.popUpParent.addElement(_list);
+				var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+				_combolist.model = model;
+				_combolist.list.model = _combolist.model;
 
-				// popup is ComboBoxList that fills 100% of browser window-> We want ComboBoxListDataGroup inside to adjust height
-				dataGroup = popup.view.contentView.view.contentView;
-				// dataGroup = (popup.getBeadByType(ListView) as ListView).dataGroup as ComboBoxListDataGroup;
-				dataGroup.height = 250;
+				var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
+				popupHost.popUpParent.addElement(_combolist);
+				
+				// popup is ComboBoxList that fills 100% of browser window-> We want the internal List inside to adjust height
+				_list = _combolist.list;
+				_list.height = 250;
 				
 				setTimeout(prepareForPopUp,  300);
 
@@ -183,14 +185,14 @@ package org.apache.royale.jewel.beads.views
 
 				autoResizeHandler();
 			}
-			else if(_list != null) {
-				UIUtils.removePopUp(_list);
+			else if(_combolist != null) {
+				UIUtils.removePopUp(_combolist);
 				COMPILE::JS
 				{
 				document.body.classList.remove("viewport");
 				window.removeEventListener('resize', autoResizeHandler, false);
 				}
-				_list = null;
+				_combolist = null;
 			}
 		}
 
@@ -198,7 +200,7 @@ package org.apache.royale.jewel.beads.views
         {
 			COMPILE::JS
 			{
-				_list.element.classList.add("open");
+				_combolist.element.classList.add("open");
 				//avoid scroll in html
 				document.body.classList.add("viewport");
 			}
@@ -268,7 +270,7 @@ package org.apache.royale.jewel.beads.views
 			// }
 		}
 
-		private var dataGroup:ComboBoxListDataGroup;
+		private var comboList:ComboBoxList;
 		/**
 		 *  When set to "auto" this resize handler monitors the width of the app window
 		 *  and switch between fixed and float modes.
@@ -292,15 +294,15 @@ package org.apache.royale.jewel.beads.views
 				{
 					var origin:Point = new Point(0, button.y+button.height);
 					var relocated:Point = PointUtils.localToGlobal(origin,_strand);
-					// dataGroup.x = relocated.x;
-					// dataGroup.y = relocated.y;
-					dataGroup.positioner.style["left"] = relocated.x + "px";
-					dataGroup.positioner.style["top"] = relocated.y + "px";
+					// comboList.x = relocated.x;
+					// comboList.y = relocated.y;
+					_list.positioner.style["left"] = relocated.x + "px";
+					_list.positioner.style["top"] = relocated.y + "px";
 				}
 				else
 				{
-					dataGroup.positioner.style["left"] = "50%";
-					dataGroup.positioner.style["top"] = "calc(100% - 10px)";
+					_list.positioner.style["left"] = "50%";
+					_list.positioner.style["top"] = "calc(100% - 10px)";
 				}
 			}
 		}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index a20bd96..9a3a74f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -39,6 +39,7 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
 	import org.apache.royale.jewel.Table;
 	import org.apache.royale.jewel.beads.views.DateChooserView;
+	import org.apache.royale.core.ValuesManager;
 
 	COMPILE::SWF
 	{
@@ -215,11 +216,9 @@ package org.apache.royale.jewel.beads.views
 				_popUpVisible = value;
 				if (value)
 				{
-					if (!_popUp)
-					{
-						_popUp = new DateChooser();
-					}
-
+					var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+					_popUp = new popUpClass() as DateChooser;
+					
 					_popUp.className = "datechooser-popup";
 					_popUp.addEventListener("initComplete", handlePopUpInitComplete);
 
@@ -231,9 +230,8 @@ package org.apache.royale.jewel.beads.views
 
 					var host:IPopUpHost = UIUtils.findPopUpHost(getHost()) as IPopUpHost;
 					host.popUpParent.addElement(_popUp);
-					
 					// viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
-					daysTable = (popUp.getBeadByType(DateChooserView) as DateChooserView).daysTable;
+					daysTable = (popUp.view as DateChooserView).daysTable;
 
 					// rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11, setInterval/Timer as well doesn't work right in Firefox
 					setTimeout(prepareForPopUp,  300);
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
index 19914fb..63cb5d4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
@@ -21,6 +21,10 @@ package org.apache.royale.jewel.supportClasses.combobox
     import org.apache.royale.core.IPopUp;
     import org.apache.royale.events.Event;
     import org.apache.royale.jewel.List;
+    import org.apache.royale.core.StyledUIBase;
+    import org.apache.royale.jewel.beads.layouts.BasicLayout;
+    import org.apache.royale.core.ISelectionModel;
+    import org.apache.royale.core.IDataProviderModel;
     
     //--------------------------------------
     //  Events
@@ -45,7 +49,7 @@ package org.apache.royale.jewel.supportClasses.combobox
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.4
      */
-	public class ComboBoxList extends List implements IPopUp
+	public class ComboBoxList extends StyledUIBase implements IPopUp
 	{
         /**
          *  Constructor.
@@ -59,6 +63,93 @@ package org.apache.royale.jewel.supportClasses.combobox
 		{
 			super();
             typeNames = "combobox-popup"
+
+            _list = new List();
         }
+
+        /**
+		 * @private
+		 */
+		override public function addedToParent():void
+		{
+            super.addedToParent();
+            addElement(_list);
+        }
+
+        private var _list:List;
+
+        public function get list():List
+        {
+        	return _list;
+        }
+
+        public function set list(value:List):void
+        {
+        	_list = value;
+        }
+
+        /**
+		 *  The data for display by the ComboBox.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 *  @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function get dataProvider():Object
+		{
+			return IDataProviderModel(model).dataProvider;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function set dataProvider(value:Object):void
+		{
+			IDataProviderModel(model).dataProvider = value;
+		}
+
+        [Bindable("change")]
+		/**
+		 *  The index of the currently selected item. Changing this item changes
+		 *  the selectedItem value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		public function get selectedIndex():int
+		{
+			return ISelectionModel(model).selectedIndex;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		public function set selectedIndex(value:int):void
+		{
+			ISelectionModel(model).selectedIndex = value;
+		}
+
+        [Bindable("change")]
+		/**
+		 *  The item currently selected. Changing this value also
+		 *  changes the selectedIndex property.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.4
+		 *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		public function get selectedItem():Object
+		{
+			return ISelectionModel(model).selectedItem;
+		}
+		public function set selectedItem(value:Object):void
+		{
+			ISelectionModel(model).selectedItem = value;
+		}
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as
deleted file mode 100644
index 1557f69..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as
+++ /dev/null
@@ -1,57 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  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.supportClasses.combobox
-{
-	import org.apache.royale.jewel.supportClasses.list.DataGroup;
-
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
-
-	/**
-	 *  The ComboBoxListDataGroup class is the IItemRendererParent used internally
-     *  by org.apache.royale.jewel.ComboBoxList class, the list component used 
-	 *  in Jewel ComboBox
-	 *  
-     *  @toplevel
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.4
-	 */
-	public class ComboBoxListDataGroup extends DataGroup
-	{
-		/**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-		public function ComboBoxListDataGroup()
-		{
-			super();
-
-			typeNames = "jewel list viewport scroll";
-		}
-    }
-}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index 0e6c387..de88fca 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -100,6 +100,7 @@ $combobox-item-min-heigh: 34px
 
 
     .jewel.list
+        position: relative
         transform: translate(-50%, 100%)
         transition: none
         will-change: transform, opacity
@@ -159,25 +160,11 @@ $combobox-item-min-heigh: 34px
                     height: $combobox-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass
 
 
-
+// this is a StyledUIBase with a List inside
 j|ComboBoxList
-    // IBeadView:  ClassReference("org.apache.royale.jewel.beads.views.ListView")
-    // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
-    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
-    // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
-    // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
-    // IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
-    // IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
-    // IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel")
-    // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
-    IContentView: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup")
-    // border-style: solid
-    // border-radius: 4px
-    // border-color: #000000
-    // border-width: 1px
-    // background-color: #FFFFFF
-
-@media -royale-swf
-    j|ComboBoxList
-        IBackgroundBead: ClassReference('org.apache.royale.html.beads.SolidBackgroundBead')
+
+
+// @media -royale-swf
+//     j|ComboBoxList
+//         IBackgroundBead: ClassReference('org.apache.royale.html.beads.SolidBackgroundBead')
 	
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index bd46d75..f3c818d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -77,7 +77,7 @@ $datechooser-tableitem-size: 38px
 j|DateChooser
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")			
     IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView")
-    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout")
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController")
 
 j|DateChooserTable
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index e6854d5..cee16c3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -90,6 +90,7 @@ $datechooser-item-min-heigh: 34px
 
 
     .jewel.table
+        position: relative
         transform: translate(-50%, 100%)
         transition: none
         will-change: transform, opacity
@@ -153,6 +154,7 @@ j|DateField
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController")
     IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY")
+    IPopUp: ClassReference("org.apache.royale.jewel.DateChooser")
 
 @media -royale-swf