royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: Jewel ComboBox first round
Date Mon, 27 Aug 2018 09:14:50 GMT
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 63411f6  Jewel ComboBox first round
63411f6 is described below

commit 63411f67d9ba2761e8a12ff439838949e0515ab6
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Mon Aug 27 11:14:46 2018 +0200

    Jewel ComboBox first round
---
 .../src/main/royale/DropDownListPlayGround.mxml    |  26 +-
 .../projects/Jewel/src/main/resources/defaults.css |  61 ++++-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   1 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |  19 +-
 .../royale/org/apache/royale/jewel/ComboBox.as     | 118 +++++++++
 .../jewel/beads/controllers/ComboBoxController.as  |  75 ++++++
 .../jewel/beads/controls/combobox/IComboBoxView.as |  76 ++++++
 .../royale/jewel/beads/models/ComboBoxModel.as     | 101 ++++++++
 .../royale/jewel/beads/views/ComboBoxView.as       | 263 +++++++++++++++++++++
 .../jewel/supportClasses/combobox/ComboBoxList.as  |  63 +++++
 .../Jewel/src/main/sass/components/_combobox.sass  |  81 +++++++
 .../Jewel/src/main/sass/components/_datefield.sass |   8 -
 .../projects/Jewel/src/main/sass/defaults.sass     |   1 +
 .../JewelTheme/src/main/resources/defaults.css     |  14 ++
 .../main/sass/components-primary/_combobox.sass    |  42 ++++
 .../themes/JewelTheme/src/main/sass/defaults.sass  |   1 +
 16 files changed, 916 insertions(+), 34 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index a0c219b..2064d66 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -27,16 +27,13 @@ limitations under the License.
 		<![CDATA[      
             import org.apache.royale.collections.ArrayList;
 
-            private function changeHandler(event:Event):void {
-                trace("ddl change");
+            private function dropDownListHandler(event:Event):void {
+                dropDownListResult.text = "<strong>DropDownList selecteItem:</strong>
" + dropdownlist.selectedItem;
             }
 
-			private var _strings:Array = ["AAPL", "ADBE", "GOOG", "MSFT", "YHOO"];
-			[Bindable("__NoChangeEvent__")]
-			public function get strings():Array
-			{
-				return _strings;
-			}
+            private function comboboxSelectedItem(event:Event):void {
+                comboBoxResult.text = "<strong>ComboBox selecteItem:</strong>
" + combobox.selectedItem;
+            }
 		]]>
 	</fx:Script>
 
@@ -52,7 +49,9 @@ limitations under the License.
 		
 		<html:H3 text="Jewel DropDownList"/>
 		
-		<j:DropDownList dataProvider="{listModel.watchmen}" change="changeHandler(event)"/>
+		<j:DropDownList id="dropdownlist" dataProvider="{listModel.watchmen}" change="dropDownListHandler(event)"/>
+		
+		<j:Label id="dropDownListResult" html="&lt;strong>DropDownList selecteItem:&lt;/strong>
"/>
 
 		<!-- <j:DropDownList change="changeHandler(event)">
 			<j:dataProvider>
@@ -60,5 +59,14 @@ limitations under the License.
 			</j:dataProvider>
 		</j:DropDownList> -->
 	</j:Card>
+	<j:Card width="350">
+		
+		<html:H3 text="Jewel ComboBox"/>
+		
+		<j:ComboBox id="combobox" dataProvider="{listModel.watchmen}" change="comboboxSelectedItem(event)"/>
+
+		<j:Label id="comboBoxResult" html="&lt;strong>ComboBox selecteItem:&lt;/strong>
"/>
+		
+	</j:Card>
 	
 </j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8038392..b171d22 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -250,6 +250,51 @@ j|ControlBar {
     IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
   }
 }
+.jewel.combobox {
+  display: inline-flex;
+}
+.jewel.combobox .jewel.button::before {
+  margin: 0;
+  padding: 0;
+  line-height: 22px;
+}
+.jewel.combobox .jewel.button::after {
+  content: " ";
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  left: calc(50% - 11px);
+  top: calc(50% - 11px);
+}
+
+j|ComboBox {
+  IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ComboBoxModel");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxView");
+  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ComboBoxController");
+  IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxList");
+}
+
+.jewel.list.combobox {
+  position: absolute;
+}
+
+j|ComboBoxList {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
+  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.VerticalLayout");
+  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
+  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");
+}
+
+@media -royale-swf {
+  ComboBoxList {
+    IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+  }
+}
 .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::before,
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::before
{
   margin: 0;
   padding: 0;
@@ -300,12 +345,6 @@ j|DateChooser {
   margin: 0;
   padding: 0;
   line-height: 22px;
-  content: " ";
-  position: absolute;
-  left: calc(50% - 11px);
-  top: calc(50% - 11px);
-  width: 22px;
-  height: 22px;
 }
 .jewel.datefield .jewel.button::after {
   content: " ";
@@ -2695,7 +2734,15 @@ j|Label {
 }
 
 .hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
-  display: block !important;
+  display: flex !important;
+}
+
+.visible {
+  display: none !important;
+}
+
+.hidden {
+  display: flex !important;
 }
 
 .jewel.list, .jewel.navigation {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index bffb938..819917b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -57,6 +57,7 @@
     <component id="TitleBar" class="org.apache.royale.jewel.TitleBar"/>
     <component id="List" class="org.apache.royale.jewel.List"/>
     <component id="DropDownList" class="org.apache.royale.jewel.DropDownList"/>
+    <component id="ComboBox" class="org.apache.royale.jewel.ComboBox"/>
     <component id="Spacer" class="org.apache.royale.jewel.Spacer"/>
     <component id="DateChooser" class="org.apache.royale.jewel.DateChooser"/>
     <component id="DateField" class="org.apache.royale.jewel.DateField"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 2425926..3db51db 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -35,6 +35,7 @@ package
         import org.apache.royale.jewel.beads.models.RangeModel; RangeModel;
         import org.apache.royale.jewel.beads.models.DateChooserModel; DateChooserModel;
         import org.apache.royale.jewel.beads.models.DataProviderModel; DataProviderModel;
+        import org.apache.royale.jewel.beads.models.ComboBoxModel; ComboBoxModel;
 
         import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
         import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
@@ -44,6 +45,7 @@ package
         import org.apache.royale.jewel.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
         import org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController;
ListSingleSelectionMouseController;
         import org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController;
TableCellSelectionMouseController;
+        import org.apache.royale.jewel.beads.controllers.ComboBoxController; ComboBoxController;
         
         import org.apache.royale.jewel.beads.views.ImageView; ImageView;
         import org.apache.royale.jewel.beads.views.SpinnerView; SpinnerView;
@@ -54,11 +56,11 @@ package
         import org.apache.royale.jewel.beads.views.AlertTitleBarView; AlertTitleBarView;
         import org.apache.royale.jewel.beads.views.ListView; ListView;
         import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
+        import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
         import org.apache.royale.jewel.beads.views.DateChooserView; DateChooserView;
         import org.apache.royale.jewel.beads.views.TableView; TableView;
+        import org.apache.royale.jewel.beads.views.ComboBoxView; ComboBoxView;
 
-        import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; DateChooserTable;
-        import org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport; ScrollingViewport;
         
         COMPILE::SWF
 	    {
@@ -73,12 +75,7 @@ package
             // import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
             import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
         }
-
-        // import org.apache.royale.html.beads.TableCellView; TableCellView;
-        // import org.apache.royale.html.beads.layouts.SimpleTableLayout; SimpleTableLayout;
-        // import org.apache.royale.html.beads.layouts.TableCellLayout; TableCellLayout;
-        // import org.apache.royale.html.beads.layouts.TableHeaderLayout; TableHeaderLayout;
-
+        
         import org.apache.royale.jewel.ResponsiveSizes; ResponsiveSizes;
 
         import org.apache.royale.jewel.supportClasses.INavigationRenderer; INavigationRenderer;
@@ -86,9 +83,11 @@ package
         import org.apache.royale.jewel.supportClasses.textinput.ITextInput; ITextInput;
 
         import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn; DataGridColumn;
-
+        import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; DateChooserTable;
+        import org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport; ScrollingViewport;
         import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
-        
+        import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList; ComboBoxList;
+
         //import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
     }
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as
new file mode 100644
index 0000000..93988f6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as
@@ -0,0 +1,118 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IUIBase;
+	import org.apache.royale.core.StyledUIBase;
+
+    import org.apache.royale.core.IComboBoxModel;
+    import org.apache.royale.jewel.beads.models.ComboBoxModel;
+	
+	[Event(name="change", type="org.apache.royale.events.Event")]
+	
+	/**
+	 *  The ComboBox class is a component that displays an input field and
+	 *  pop-up List with selections. Selecting an item from the pop-up List
+	 *  places that item into the input field of the ComboBox. The ComboBox
+	 *  uses the following bead types:
+	 * 
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider,
selectedItem, and
+	 *  so forth.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the
component.
+	 *  org.apache.royale.core.IBeadController: the bead that handles input and output.
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class ComboBox extends StyledUIBase
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function ComboBox()
+		{
+			super();
+            
+            typeNames = "jewel combobox";
+		}
+		
+		/**
+		 *  The data for display by the ComboBox.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get dataProvider():Object
+		{
+			return IComboBoxModel(model).dataProvider;
+		}
+		public function set dataProvider(value:Object):void
+		{
+			IComboBoxModel(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.0
+		 */
+		public function get selectedIndex():int
+		{
+			return IComboBoxModel(model).selectedIndex;
+		}
+		public function set selectedIndex(value:int):void
+		{
+			IComboBoxModel(model).selectedIndex = value;
+		}
+		
+        [Bindable("change")]
+		/**
+		 *  The item that is currently selected. Changing this item changes
+		 *  the selectedIndex.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get selectedItem():Object
+		{
+			return IComboBoxModel(model).selectedItem;
+		}
+		public function set selectedItem(value:Object):void
+		{
+			IComboBoxModel(model).selectedItem = value;
+		}
+		
+	}
+}
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
new file mode 100644
index 0000000..fd67cb0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
@@ -0,0 +1,75 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+	import org.apache.royale.core.IBeadController;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.events.MouseEvent;
+	import org.apache.royale.jewel.TextInput;
+	import org.apache.royale.jewel.List;
+	import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
+	
+	public class ComboBoxController implements IBeadController
+	{
+		public function ComboBoxController()
+		{
+		}
+		
+		private var _strand:IStrand;
+		
+		protected var viewBead:IComboBoxView;
+		
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
+			if (viewBead) {
+				finishSetup(null);
+			} else {
+				IEventDispatcher(_strand).addEventListener("viewChanged", finishSetup);
+			}
+		}
+		
+		protected function finishSetup(event:Event):void
+		{
+			if (viewBead == null) {
+				viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
+			}
+			
+			IEventDispatcher(viewBead.popupButton).addEventListener("click", handleButtonClick);
+            IEventDispatcher(viewBead.textInputField).addEventListener("click", handleButtonClick);
+		}
+		
+		protected function handleButtonClick(event:MouseEvent):void
+		{			
+			viewBead.popUpVisible = !viewBead.popUpVisible;
+			IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
+		}
+		
+		private function handleListChange(event:Event):void
+		{
+			viewBead.popUpVisible = false;
+			
+			IEventDispatcher(_strand).dispatchEvent(new Event("change"));
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as
new file mode 100644
index 0000000..ec0c8ae
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.controls.combobox
+{
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IStrand;
+    
+	/**
+	 *  The IComboBoxView interface provides the protocol for any bead that
+	 *  creates the visual parts for a org.apache.royale.jewel.ComboBox control.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public interface IComboBoxView extends IBeadView
+	{
+		/**
+		 *  The sub-component used for the input area of the ComboBox.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		function get textInputField():Object;
+		
+		/**
+		 *  The sub-component used for the button to activate the pop-up.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		function get popupButton():Object;
+		
+		/**
+		 *  The component housing the selection list.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		function get popUp():Object;
+		
+		/**
+		 *  Determines whether or not the pop-up with the selection list is visible or not.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		function get popUpVisible():Boolean;
+		function set popUpVisible(value:Boolean):void;
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as
new file mode 100644
index 0000000..632cdfd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.models
+{
+	import org.apache.royale.jewel.beads.models.ArrayListSelectionModel;
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IComboBoxModel;
+	import org.apache.royale.events.Event;
+			
+	/**
+	 *  The ComboBoxModel class bead extends org.apache.royale.jewel.beads.models.ArrayListSelectionModel

+	 *  and adds the text being displayed by the org.apache.royale.jewel.ComboBox's input field.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class ComboBoxModel extends ArrayListSelectionModel implements IBead, IComboBoxModel
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function ComboBoxModel()
+		{
+		}
+
+		private var _text:String;
+		
+		/**
+		 *  The string to display in the org.apache.royale.html.ComboBox input field.
+		 * 
+		 *  @copy org.apache.royale.core.IComboBoxModel#text
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get text():String
+		{
+			return _text;
+		}
+		
+		public function set text(value:String):void
+		{
+			if (value != _text)
+			{
+				_text = value;
+				dispatchEvent(new Event("textChange"));
+			}
+		}
+		
+		private var _html:String;
+		
+		/**
+		 *  The HTML string to display in the org.apache.royale.html.ComboBox input field.
+		 * 
+		 *  @copy org.apache.royale.core.IComboBoxModel#html
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get html():String
+		{
+			return _html;
+		}
+		
+		public function set html(value:String):void
+		{
+			if (value != _html)
+			{
+				_html = value;
+				dispatchEvent(new Event("htmlChange"));
+			}
+		}
+	}
+}
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
new file mode 100644
index 0000000..dc2670d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -0,0 +1,263 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IUIBase;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.StyledUIBase;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.jewel.TextInput;
+	import org.apache.royale.jewel.Button;
+	import org.apache.royale.jewel.Button;
+	import org.apache.royale.jewel.List;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.core.IComboBoxModel;
+	import org.apache.royale.utils.UIUtils;
+	import org.apache.royale.utils.PointUtils;
+	import org.apache.royale.core.IPopUpHost;
+	import org.apache.royale.geom.Point;
+	import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
+	import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+	
+	/**
+	 *  The ComboBoxView class creates the visual elements of the org.apache.royale.jewel.ComboBox

+	 *  component. The job of the view bead is to put together the parts of the ComboBox such
as the TextInput
+	 *  control and org.apache.royale.jewel.Button to trigger the pop-up.
+	 *  
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class ComboBoxView extends BeadViewBase implements IComboBoxView
+	{
+		public function ComboBoxView()
+		{
+			super();
+		}
+		
+		private var input:TextInput;
+		
+		/**
+		 *  The TextInput component of the ComboBox.
+		 * 
+		 *  @copy org.apache.royale.html.beads.IComboBoxView#text
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get textInputField():Object
+		{
+			return input;
+		}
+		
+		private var button:Button;
+		
+		/**
+		 *  The Button component of the ComboBox.
+		 * 
+		 *  @copy org.apache.royale.html.beads.IComboBoxView#text
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get popupButton():Object
+		{
+			return button;
+		}
+		
+		private var list:StyledUIBase;
+		
+		/**
+		 *  The pop-up list component of the ComboBox.
+		 * 
+		 *  @copy org.apache.royale.html.beads.IComboBoxView#text
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get popUp():Object
+		{
+			return list;
+		}
+		
+		/**
+		 * @private
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 * @royaleignorecoercion org.apache.royale.core.StyledUIBase
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+			var host:StyledUIBase = value as StyledUIBase;
+			
+			input = new TextInput();
+			// input.className = "ComboBoxTextInput";			
+			
+			button = new Button();
+			// button.style = {
+			// 	"padding": 0,
+			// 	"margin": 0
+			// };
+			button.text = '\u25BC';
+			
+			// if (isNaN(host.width)) input.width = 100;
+			
+			// COMPILE::JS 
+			// {
+			// 	// inner components are absolutely positioned so we want to make sure the host is
the offset parent
+			// 	if (!host.element.style.position)
+			// 	{
+			// 		host.element.style.position = "relative";
+			// 	}
+			// }
+			host.addElement(input);
+			host.addElement(button);
+			
+			var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+			list = new popUpClass() as StyledUIBase;
+			list.visible = false;
+            // list.addClass("hidden");
+			
+			var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+			model.addEventListener("selectedIndexChanged", handleItemChange);
+			model.addEventListener("selectedItemChanged", handleItemChange);
+			
+			IEventDispatcher(_strand).addEventListener("sizeChanged", handleSizeChange);
+			
+			// set initial value and positions using default sizes
+			itemChangeAction();
+			sizeChangeAction();
+		}
+		
+		/**
+		 *  Returns whether or not the pop-up is visible.
+		 * 
+		 *  @copy org.apache.royale.html.beads.IComboBoxView#text
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get popUpVisible():Boolean
+		{
+			if (list) return list.visible;
+			else return false;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+		 * @royaleignorecoercion org.apache.royale.core.IUIBase
+		 */
+		public function set popUpVisible(value:Boolean):void
+		{
+			if (value && !list.visible) {
+				var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+				list.model = model;
+				// list.width = input.width;
+				// list.height = 200;
+                list.visible = true;
+                // list.removeClass("hidden");
+				
+				var origin:Point = new Point(0, button.y+button.height);
+				var relocated:Point = PointUtils.localToGlobal(origin,_strand);
+				list.x = relocated.x
+				list.y = relocated.y;
+				
+				var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
+				popupHost.popUpParent.addElement(list);
+			}
+			else if (list.visible) {
+				UIUtils.removePopUp(list);
+                list.visible = false;
+                // list.addClass("hidden");
+			}
+		}
+		
+		/**
+		 * @private
+		 */
+		protected function handleSizeChange(event:Event):void
+		{
+			sizeChangeAction();
+		}
+		
+		/**
+		 * @private
+		 */
+		protected function handleItemChange(event:Event):void
+		{
+			itemChangeAction();
+		}
+		
+		/**
+		 * @private
+		 * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+		 */
+		protected function itemChangeAction():void
+		{
+			var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+			input.text = getLabelFromData(model,model.selectedItem);
+		}
+		
+		/**
+		 * @private
+		 * @royaleignorecoercion org.apache.royale.core.StyledUIBase
+		 */
+		protected function sizeChangeAction():void
+		{
+			var host:StyledUIBase = StyledUIBase(_strand);
+			
+			// input.x = 0;
+			// input.y = 0;
+			// if (host.isWidthSizedToContent()) {
+			// 	input.width = 100;
+			// } else {
+			// 	input.width = host.width - 20;
+			// }
+			
+			// button.x = input.width;
+			// button.y = 0;
+			// button.width = 20;
+			// button.height = input.height;
+			
+			// COMPILE::JS {
+			// 	input.element.style.position = "absolute";
+			// 	button.element.style.position = "absolute";
+			// }
+				
+			// if (host.isHeightSizedToContent()) {
+			// 	host.height = input.height;
+			// }
+			// if (host.isWidthSizedToContent()) {
+			// 	host.width = input.width + button.width;
+			// }
+		}
+	}
+}
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
new file mode 100644
index 0000000..59fa18c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
@@ -0,0 +1,63 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.core.IPopUp;
+    import org.apache.royale.jewel.List;
+    
+    //--------------------------------------
+    //  Events
+    //--------------------------------------
+    
+    /**
+     *  @copy org.apache.royale.core.ISelectionModel#change
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+    [Event(name="change", type="org.apache.royale.events.Event")]
+    
+    /**
+     *  The ComboBoxList class is the List class used internally
+     *  by ComboBox as the dropdown/popup.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	public class ComboBoxList extends List implements IPopUp
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function ComboBoxList()
+		{
+			super();
+            typeNames = "jewel list combobox"
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
new file mode 100644
index 0000000..7bd3a73
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -0,0 +1,81 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 ComboBox
+
+// ComboBox variables
+$combobox-button-size: 22px
+$combobox-button-xoffset: calc(50% - #{$combobox-button-size/2})
+$combobox-button-yoffset: calc(50% - #{$combobox-button-size/2})
+
+.jewel.combobox
+    display: inline-flex
+
+    // .jewel.textinput
+    //     input
+            
+    .jewel.button
+        
+        &::before
+            margin: 0
+            padding: 0
+            
+            line-height: $combobox-button-size
+            
+        &::after
+            content: ' '
+            position: absolute
+
+            width: $combobox-button-size
+            height: $combobox-button-size
+
+            left: $combobox-button-xoffset
+            top: $combobox-button-yoffset
+
+j|ComboBox
+    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ComboBoxModel")
+    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxView")
+    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ComboBoxController")
+    IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxList")
+
+
+.jewel.list.combobox
+    position: absolute
+
+j|ComboBoxList
+    IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel")
+    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.VerticalLayout")
+    // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData")
+    IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+    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")
+    // border-style: solid
+    // border-radius: 4px
+    // border-color: #000000
+    // border-width: 1px
+    // background-color: #FFFFFF
+
+@media -royale-swf
+    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/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index b72f9d1..7f07f5d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -40,14 +40,6 @@ $datechooser-popup-overlay-opacity: .65 !default
             padding: 0
             
             line-height: $datefield-button-size
-            content: ' '
-            position: absolute
-
-            left: $datefield-button-xoffset
-            top: $datefield-button-yoffset
-
-            width: $datefield-button-size
-            height: $datefield-button-size
 
         &::after
             content: ' '
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 5a53044..8862eb0 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
 @import "components/card"
 @import "components/checkbox"
 @import "components/controlbar"
+@import "components/combobox"
 @import "components/datechooser"
 @import "components/datefield"
 @import "components/divider"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index efc6fe2..2009f66 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -233,6 +233,20 @@ j|Card {
   font-size: 16px;
 }
 
+.jewel.combobox .jewel.textinput input {
+  border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+  color: transparent;
+  border-bottom-left-radius: 0px;
+  border-top-left-radius: 0px;
+  border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+  background-size: 66%;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000,
-1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon
transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41
8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+}
+
 .jewel.datechooser .jewel.table {
   background: white;
   border: 1px solid #d9d9d9;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass
new file mode 100644
index 0000000..0cee2b3
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 ComboBox
+
+// ComboBox variables
+// $combobox-input-width: 8em
+$combobox-border-radius: $border-radius
+
+.jewel.combobox
+    .jewel.textinput
+        input
+            // width: $combobox-input-width
+            border-radius: $combobox-border-radius 0px 0px $combobox-border-radius
+            
+    .jewel.button
+        color: transparent
+        border-bottom-left-radius: 0px
+        border-top-left-radius: 0px
+        border-left: 0px
+        
+        &::before
+                
+        &::after
+            background-size: 66%
+            background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000,
-1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000,
0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000,
-4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>")
no- [...]
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 9618266..1bc15f2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -30,6 +30,7 @@
 @import "components-primary/button"
 @import "components-primary/card"
 @import "components-primary/checkbox"
+@import "components-primary/combobox"
 @import "components-primary/controlbar"
 @import "components-primary/datechooser"
 @import "components-primary/datefield"


Mime
View raw message