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 <[email protected]>
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="<strong>DropDownList
selecteItem:</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="<strong>ComboBox
selecteItem:</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"
