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 2019/12/15 09:13:04 UTC
[royale-asjs] branch develop updated: jewel-togglebuttonbar: Add
Jewel ToggleButtonBar composed by Jewel ToggleButtons
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 7dfc8d1 jewel-togglebuttonbar: Add Jewel ToggleButtonBar composed by Jewel ToggleButtons
7dfc8d1 is described below
commit 7dfc8d15e22ce9c2a9b878787360a482774b11a3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Dec 15 10:12:54 2019 +0100
jewel-togglebuttonbar: Add Jewel ToggleButtonBar composed by Jewel ToggleButtons
---
.../src/main/royale/ButtonBarPlayGround.mxml | 27 +-
.../projects/Jewel/src/main/resources/defaults.css | 10 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../org/apache/royale/jewel/ToggleButtonBar.as | 61 +++++
.../itemRenderers/ToggleButtonBarItemRenderer.as | 303 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_buttonbar.sass | 12 +-
6 files changed, 410 insertions(+), 5 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 276abaf..dd34d26 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -119,7 +119,7 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel IconButtonBar"/>
- <j:Label html="Use icons in the buttons. At Application level CSS you need to specify the icon class with a declaration for <strong><i>j|IconButtonBar<i></strong> like this: <strong><i>iconClass: ClassReference('org.apache.royale.icons.FontIcon')</i></strong>"/>
+ <j:Label html="Is a ButtonBar. Use icons in the buttons. At Application level CSS you need to specify the icon class with a declaration for <strong><i>j|IconButtonBar<i></strong> like this: <strong><i>iconClass: ClassReference('org.apache.royale.icons.FontIcon')</i></strong>"/>
<html:H4 text="Width 100% and emphasized color"/>
@@ -138,4 +138,29 @@ limitations under the License.
</j:GridCell>
</j:Grid>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel ToggleButtonBar"/>
+
+ <j:Label html="Is a IconButtonBar"/>
+
+ <html:H4 text="Width 100% and emphasized color"/>
+
+ <j:ToggleButtonBar localId="tbb" change="tbb_label.text = tbb.selectedItem.label + ' (icon: ' + tbb.selectedItem.icon + '). isSelected? ' + tbb.selectedItem.selected"
+ emphasis="primary" width="100%" material="true"
+ dataProvider="{listModel.iconButtonData}"/>
+
+ <html:H4 text="No Width and icons to the right"/>
+
+ <j:ToggleButtonBar localId="tbb2"
+ change="tbb_label.text = tbb2.selectedItem.label + ' (icon: ' + tbb2.selectedItem.icon + '). isSelected? ' + tbb2.selectedItem.selected"
+ emphasis="emphasized" rightPosition="true" material="true" iconField="icon"
+ dataProvider="{listModel.iconButtonData}"/>
+
+ <j:Label localId="tbb_label"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8f47c3d..84bb535 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -260,14 +260,14 @@ j|Alert {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonView");
}
}
-.jewel.buttonbar .jewel.button {
+.jewel.buttonbar .jewel.button, .jewel.buttonbar .jewel.togglebutton {
border-radius: 0;
}
-.jewel.buttonbar .jewel.button.first {
+.jewel.buttonbar .jewel.button.first, .jewel.buttonbar .jewel.togglebutton.first {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
-.jewel.buttonbar .jewel.button.last {
+.jewel.buttonbar .jewel.button.last, .jewel.buttonbar .jewel.togglebutton.last {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
@@ -291,6 +291,10 @@ j|IconButtonBar {
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.IconButtonBarItemRenderer");
}
+j|ToggleButtonBar {
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ToggleButtonBarItemRenderer");
+}
+
.jewel.card {
min-width: 240px;
min-height: 52px;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 3d0c40f..6ef462c 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -49,6 +49,7 @@
<component id="DataGridButtonBar" class="org.apache.royale.jewel.supportClasses.datagrid.DataGridButtonBar"/>
<component id="ButtonBarItemRenderer" class="org.apache.royale.jewel.itemRenderers.ButtonBarItemRenderer"/>
<component id="IconButtonBarItemRenderer" class="org.apache.royale.jewel.itemRenderers.IconButtonBarItemRenderer"/>
+ <component id="ToggleButtonBarItemRenderer" class="org.apache.royale.jewel.itemRenderers.ToggleButtonBarItemRenderer"/>
<component id="SimpleButton" class="org.apache.royale.jewel.supportClasses.button.SimpleButton"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
@@ -102,6 +103,7 @@
<component id="ButtonBar" class="org.apache.royale.jewel.ButtonBar"/>
<component id="IconButtonBar" class="org.apache.royale.jewel.IconButtonBar"/>
+ <component id="ToggleButtonBar" class="org.apache.royale.jewel.ToggleButtonBar"/>
<component id="TabBar" class="org.apache.royale.jewel.TabBar"/>
<component id="TabBarButtonItemRenderer" class="org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer"/>
<component id="TabBarButtonInidicatorRestrictedToContentItemRenderer" class="org.apache.royale.jewel.itemRenderers.TabBarButtonInidicatorRestrictedToContentItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButtonBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButtonBar.as
new file mode 100644
index 0000000..a6f63a9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButtonBar.as
@@ -0,0 +1,61 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ /**
+ * The Jewel ToggleButtonBar class is a component that displays a set of ToggleButtons. The ToggleButtonBar
+ * is actually an IconButtonBar with an itemRenderer that produces Jewel ToggleButtons.
+ *
+ * By default buttons are equally sized, by setting `widthType` to NaN.
+ *
+ * The ToggleButtonBar uses the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model for the ButtonBar, including the dataProvider.
+ * org.apache.royale.core.IBeadView: constructs the parts of the component.
+ * org.apache.royale.core.IBeadController: handles input events.
+ * org.apache.royale.core.IBeadLayout: sizes and positions the component parts.
+ * org.apache.royale.core.IDataProviderItemRendererMapper: produces itemRenderers.
+ * org.apache.royale.core.IItemRenderer: the class or class factory to use.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class ToggleButtonBar extends IconButtonBar
+ {
+ public static const PRIMARY:String = "primary";
+ public static const SECONDARY:String = "secondary";
+ public static const EMPHASIZED:String = "emphasized";
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function ToggleButtonBar()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ToggleButtonBarItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ToggleButtonBarItemRenderer.as
new file mode 100644
index 0000000..3ce4fb8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ToggleButtonBarItemRenderer.as
@@ -0,0 +1,303 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.core.SimpleCSSStylesWithFlex;
+ import org.apache.royale.events.ItemClickedEvent;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.html.beads.ITextItemRenderer;
+ import org.apache.royale.html.util.getLabelFromData;
+ import org.apache.royale.jewel.ToggleButton;
+ import org.apache.royale.jewel.ButtonBar;
+ import org.apache.royale.jewel.beads.views.ButtonBarView;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IIcon;
+ import org.apache.royale.jewel.IconButtonBar;
+
+ /**
+ * The ButtonBarItemRenderer class extends Button and turns it into an itemRenderer
+ * suitable for use in most DataContainer/List/DataGrid applications.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class ToggleButtonBarItemRenderer extends ToggleButton implements ITextItemRenderer
+ {
+ public function ToggleButtonBarItemRenderer()
+ {
+ super();
+
+ style = new SimpleCSSStylesWithFlex();
+
+ addEventListener('click', handleClickEvent);
+ }
+
+ private var _data:Object;
+
+ /**
+ * The data to be displayed as the text value. Use this in conjunction with
+ * the labelField property to select an item from the dataProvider record to use
+ * as the text value of the button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get data():Object
+ {
+ return _data;
+ }
+ public function set data(value:Object):void
+ {
+ _data = value;
+ text = getLabelFromData(this, value);
+ rightPosition = ((itemRendererParent as ButtonBarView).buttonBar as IconButtonBar).rightPosition;
+ if(value.icon)
+ {
+ var iconClass:Class = ValuesManager.valuesImpl.getValue((itemRendererParent as ButtonBarView).buttonBar, "iconClass") as Class;
+ var fontIcon:IIcon = new iconClass();
+ fontIcon.material = ((itemRendererParent as ButtonBarView).buttonBar as IconButtonBar).material;
+ fontIcon.text = value[((itemRendererParent as ButtonBarView).buttonBar as IconButtonBar).iconField];
+ icon = fontIcon;
+ }
+ }
+
+ /**
+ * @private
+ */
+ protected function handleClickEvent(event:MouseEvent):void
+ {
+ var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
+ newEvent.index = index;
+ newEvent.data = data;
+ dispatchEvent(newEvent);
+ }
+
+ /*
+ * IItemRenderer, ISelectableItemRenderer
+ */
+ private var _itemRendererParent:Object;
+ /**
+ * The parent container for the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get itemRendererParent():Object
+ {
+ return _itemRendererParent;
+ }
+ public function set itemRendererParent(value:Object):void
+ {
+ _itemRendererParent = value;
+
+ var buttonBar:ButtonBar = (itemRendererParent as ButtonBarView).buttonBar;
+ if(buttonBar.emphasis != null)
+ {
+ emphasis = buttonBar.emphasis;
+ }
+ }
+
+ private var _labelField:String = null;
+
+ /**
+ * The name of the field within the data to use as a label. Some itemRenderers use this field to
+ * identify the value they should show while other itemRenderers ignore this if they are showing
+ * complex information.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get labelField():String
+ {
+ return _labelField;
+ }
+ public function set labelField(value:String):void
+ {
+ _labelField = value;
+ text = getLabelFromData(this, value);
+ }
+
+ private var _listData:Object;
+
+ [Bindable("__NoChangeEvent__")]
+ /**
+ * Additional data about the list structure the itemRenderer may
+ * find useful.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get listData():Object
+ {
+ return _listData;
+ }
+ public function set listData(value:Object):void
+ {
+ _listData = value;
+ }
+
+ private var _index:int;
+ /**
+ * The position with the dataProvider being shown by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get index():int
+ {
+ return _index;
+ }
+ public function set index(value:int):void
+ {
+ _index = value;
+
+ if(_index == 0)
+ {
+ addClass("first");
+ }
+ else if( _index == (itemRendererParent as ButtonBarView).buttonBar.dataProvider.length - 1 )
+ {
+ addClass("last");
+ }
+ else
+ {
+ addClass("middle");
+ }
+ }
+
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
+
+ private var _hovered:Boolean;
+
+ /**
+ * Whether or not the itemRenderer is in a hovered state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get hovered():Boolean
+ {
+ return _hovered;
+ }
+ public function set hovered(value:Boolean):void
+ {
+ _hovered = value;
+ }
+
+ // private var _selected:Boolean;
+
+ // /**
+ // * Whether or not the itemRenderer is in a selected state.
+ // *
+ // * @langversion 3.0
+ // * @playerversion Flash 10.2
+ // * @playerversion AIR 2.6
+ // * @productversion Royale 0.9.7
+ // */
+ // public function get selected():Boolean
+ // {
+ // return _selected;
+ // }
+ // public function set selected(value:Boolean):void
+ // {
+ // _selected = value;
+ // }
+
+ private var _down:Boolean;
+
+ /**
+ * Whether or not the itemRenderer is in a down (or pre-selected) state.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get down():Boolean
+ {
+ return _down;
+ }
+ public function set down(value:Boolean):void
+ {
+ _down = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
index fdf227d..cbe8e37 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
@@ -23,7 +23,7 @@ $border-radius: .25rem
// ButtonVar variables
.jewel.buttonbar
- .jewel.button
+ .jewel.button, .jewel.togglebutton
border-radius: 0
&.first
@@ -47,6 +47,16 @@ j|ButtonBar
j|ButtonBar
IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup")
+
+// IconButtonBar
+
j|IconButtonBar
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.IconButtonBarItemRenderer")
+ // this requires in App to define in CSS -> iconClass: ClassReference("org.apache.royale.icons.FontIcon")
+
+// ToggleButtonBar
+
+// ButtonVar variables
+j|ToggleButtonBar
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ToggleButtonBarItemRenderer")
// this requires in App to define in CSS -> iconClass: ClassReference("org.apache.royale.icons.FontIcon")
\ No newline at end of file