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 00:57:14 UTC
[royale-asjs] branch develop updated: jewel-iconbuttonbar: new
ButtonBar with support for icons
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 fbaffbf jewel-iconbuttonbar: new ButtonBar with support for icons
fbaffbf is described below
commit fbaffbf7d8e6b15e2409668cd0e9f0120b0fffe1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Dec 15 01:57:05 2019 +0100
jewel-iconbuttonbar: new ButtonBar with support for icons
---
.../projects/Jewel/src/main/resources/defaults.css | 4 +
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../royale/org/apache/royale/jewel/IconButton.as | 9 +-
.../org/apache/royale/jewel/IconButtonBar.as | 128 +++++++++++++++++++++
.../royale/org/apache/royale/jewel/ToggleButton.as | 6 +-
.../jewel/itemRenderers/ButtonBarItemRenderer.as | 30 +----
...temRenderer.as => IconButtonBarItemRenderer.as} | 50 ++++----
.../Jewel/src/main/sass/components/_buttonbar.sass | 7 +-
8 files changed, 172 insertions(+), 64 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 2b8383e..8f47c3d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -287,6 +287,10 @@ j|ButtonBar {
IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup");
}
}
+j|IconButtonBar {
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.IconButtonBarItemRenderer");
+}
+
.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 4b586d9..3d0c40f 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -48,6 +48,7 @@
<component id="DataGridListArea" class="org.apache.royale.jewel.supportClasses.datagrid.DataGridListArea"/>
<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="SimpleButton" class="org.apache.royale.jewel.supportClasses.button.SimpleButton"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
@@ -100,6 +101,7 @@
<component id="HorizontalListScroll" class="org.apache.royale.jewel.beads.controls.list.HorizontalListScroll"/>
<component id="ButtonBar" class="org.apache.royale.jewel.ButtonBar"/>
+ <component id="IconButtonBar" class="org.apache.royale.jewel.IconButtonBar"/>
<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/IconButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
index 03b28a1..503d879 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
@@ -20,12 +20,15 @@ package org.apache.royale.jewel
{
COMPILE::JS
{
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.events.Event;
}
import org.apache.royale.core.IIcon;
import org.apache.royale.core.IIconSupport;
- import org.apache.royale.events.Event;
public class IconButton extends Button implements IIconSupport
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButtonBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButtonBar.as
new file mode 100644
index 0000000..d92ddc6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButtonBar.as
@@ -0,0 +1,128 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 IconButtonBar class is a component that displays a set of IconButtons. The IconButtonBar
+ * is actually a ButtonBar with an itemRenderer that produces Jewel IconButtons.
+ *
+ * By default buttons are equally sized, by setting `widthType` to NaN.
+ *
+ * The IconButtonBar 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 IconButtonBar extends ButtonBar
+ {
+ 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 IconButtonBar()
+ {
+ super();
+ }
+
+ private var _rightPosition:Boolean;
+ /**
+ * icon's position regarding the text content
+ * Can be false ("left") or true ("right"). defaults to false ("left")
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get rightPosition():Boolean
+ {
+ return _rightPosition;
+ }
+ public function set rightPosition(value:Boolean):void
+ {
+ if (_rightPosition != value)
+ {
+ _rightPosition = value;
+ }
+ }
+
+ private var _iconField:String = "icon";
+
+ /**
+ * The name of the field within the data to use as a icon.
+ * Defaults to "icon".
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get iconField():String
+ {
+ return _iconField;
+ }
+ public function set iconField(value:String):void
+ {
+ if(_iconField != value)
+ {
+ _iconField = value;
+ }
+ }
+
+ private var _material:Boolean;
+ /**
+ * Use the Material Icons
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get material():Boolean
+ {
+ return _material;
+ }
+ public function set material(value:Boolean):void
+ {
+ if (_material != value)
+ {
+ _material = value;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
index f6e366a..0f4dab0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
@@ -20,12 +20,12 @@ package org.apache.royale.jewel
{
COMPILE::SWF
{
- import flash.events.MouseEvent;
+ import flash.events.MouseEvent;
}
COMPILE::JS
{
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.MouseEvent;
}
import org.apache.royale.core.IIcon;
import org.apache.royale.core.ISelectable;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as
index 794a89c..2e6c93e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as
@@ -22,7 +22,6 @@ package org.apache.royale.jewel.itemRenderers
{
import org.apache.royale.core.WrappedHTMLElement;
}
-
import org.apache.royale.core.SimpleCSSStylesWithFlex;
import org.apache.royale.events.ItemClickedEvent;
import org.apache.royale.events.MouseEvent;
@@ -33,8 +32,8 @@ package org.apache.royale.jewel.itemRenderers
import org.apache.royale.jewel.beads.views.ButtonBarView;
/**
- * The ButtonBarItemRenderer class extends Button and turns it into an itemRenderer
- * suitable for use in most DataContainer/List/DataGrid applications.
+ * 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
@@ -50,7 +49,6 @@ package org.apache.royale.jewel.itemRenderers
style = new SimpleCSSStylesWithFlex();
addEventListener('click', handleClickEvent);
-
}
private var _data:Object;
@@ -72,26 +70,7 @@ package org.apache.royale.jewel.itemRenderers
public function set data(value:Object):void
{
_data = value;
-
- updateButtonLabelFromData();
- }
-
- /**
- * @royaleignorecoercion String
- */
- protected function updateButtonLabelFromData():void
- {
- var valueAsString:String;
-
- if (data == null) return;
- valueAsString = getLabelFromData(this,data);
- if (!valueAsString && data.hasOwnProperty("title")) {
- valueAsString = "" + data["title"];
- }
-
- if (valueAsString) {
- text = valueAsString;
- }
+ text = getLabelFromData(this, value);
}
/**
@@ -108,7 +87,6 @@ package org.apache.royale.jewel.itemRenderers
/*
* IItemRenderer, ISelectableItemRenderer
*/
-
private var _itemRendererParent:Object;
/**
* The parent container for the itemRenderer instance.
@@ -152,7 +130,7 @@ package org.apache.royale.jewel.itemRenderers
public function set labelField(value:String):void
{
_labelField = value;
- updateButtonLabelFromData();
+ text = getLabelFromData(this, value);
}
private var _listData:Object;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/IconButtonBarItemRenderer.as
similarity index 85%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/IconButtonBarItemRenderer.as
index 794a89c..637e471 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ButtonBarItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/IconButtonBarItemRenderer.as
@@ -22,35 +22,36 @@ package org.apache.royale.jewel.itemRenderers
{
import org.apache.royale.core.WrappedHTMLElement;
}
-
+ import org.apache.royale.core.IIcon;
import org.apache.royale.core.SimpleCSSStylesWithFlex;
+ import org.apache.royale.core.ValuesManager;
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.Button;
- import org.apache.royale.jewel.ButtonBar;
+ import org.apache.royale.jewel.IconButton;
import org.apache.royale.jewel.beads.views.ButtonBarView;
+ import org.apache.royale.jewel.supportClasses.IEmphasis;
+ 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.
+ * The IconButtonBarItemRenderer class extends IconButton 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 ButtonBarItemRenderer extends Button implements ITextItemRenderer
+ public class IconButtonBarItemRenderer extends IconButton implements ITextItemRenderer
{
- public function ButtonBarItemRenderer()
+ public function IconButtonBarItemRenderer()
{
super();
style = new SimpleCSSStylesWithFlex();
addEventListener('click', handleClickEvent);
-
}
private var _data:Object;
@@ -72,25 +73,15 @@ package org.apache.royale.jewel.itemRenderers
public function set data(value:Object):void
{
_data = value;
-
- updateButtonLabelFromData();
- }
-
- /**
- * @royaleignorecoercion String
- */
- protected function updateButtonLabelFromData():void
- {
- var valueAsString:String;
-
- if (data == null) return;
- valueAsString = getLabelFromData(this,data);
- if (!valueAsString && data.hasOwnProperty("title")) {
- valueAsString = "" + data["title"];
- }
-
- if (valueAsString) {
- text = valueAsString;
+ 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;
}
}
@@ -108,7 +99,6 @@ package org.apache.royale.jewel.itemRenderers
/*
* IItemRenderer, ISelectableItemRenderer
*/
-
private var _itemRendererParent:Object;
/**
* The parent container for the itemRenderer instance.
@@ -126,7 +116,7 @@ package org.apache.royale.jewel.itemRenderers
{
_itemRendererParent = value;
- var buttonBar:ButtonBar = (itemRendererParent as ButtonBarView).buttonBar;
+ var buttonBar:IEmphasis = (itemRendererParent as ButtonBarView).buttonBar;
if(buttonBar.emphasis != null)
{
emphasis = buttonBar.emphasis;
@@ -152,7 +142,7 @@ package org.apache.royale.jewel.itemRenderers
public function set labelField(value:String):void
{
_labelField = value;
- updateButtonLabelFromData();
+ text = getLabelFromData(this, value);
}
private var _listData:Object;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
index 64452ae..fdf227d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
@@ -34,7 +34,6 @@ $border-radius: .25rem
border-top-right-radius: $border-radius
border-bottom-right-radius: $border-radius
-
j|ButtonBar
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ButtonBarModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonBarView")
@@ -46,4 +45,8 @@ j|ButtonBar
@media -royale-swf
j|ButtonBar
- IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup")
\ No newline at end of file
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup")
+
+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")
\ No newline at end of file