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/12 23:47:21 UTC
[royale-asjs] 20/42: jewel-buttonbar: add ButtonBarLayout and make
ButtonBar support Collections instead of simple arrays
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
commit 280649bbff8173487b0c8c15c63001d979d4194c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Dec 2 14:33:56 2019 +0100
jewel-buttonbar: add ButtonBarLayout and make ButtonBar support Collections instead of simple arrays
---
.../src/main/royale/ButtonBarPlayGround.mxml | 45 +++---
.../projects/Jewel/src/main/resources/defaults.css | 4 +-
.../projects/Jewel/src/main/royale/JewelClasses.as | 5 +-
.../main/royale/org/apache/royale/jewel/Button.as | 162 ++++++++++-----------
.../royale/org/apache/royale/jewel/ButtonBar.as | 11 +-
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 148 +++++++++++++++++++
.../jewel/itemRenderers/ButtonBarItemRenderer.as | 6 +-
.../Jewel/src/main/sass/components/_buttonbar.sass | 5 +-
8 files changed, 263 insertions(+), 123 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index d546be6..6175926 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -23,16 +23,6 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:models="models.*"
xmlns:c="components.*" sourceCodeUrl="ButtonBarPlayGround.mxml">
-
- <fx:Script>
- <![CDATA[
- [Bindable]
- public var two_options:Array = ["Features", "Support"];
-
- [Bindable]
- public var three_options:Array = ["Features", "Support", "Service & Operations", "four"];
- ]]>
- </fx:Script>
<c:beads>
<js:ContainerDataBinding/>
@@ -43,16 +33,19 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel ButtonBar"/>
- <j:ButtonBar localId="bb1" change="bb1_label.text = bb1.selectedItem as String"
- dataProvider="{two_options}">
- <!-- <j:dataProvider>
- <fx:Array>
- <fx:String>Features</fx:String>
- <fx:String>Support</fx:String>
- </fx:Array>
- </j:dataProvider> -->
+ <j:ButtonBar localId="bb1" change="bb_label.text = bb1.selectedItem as String">
+ <j:dataProvider>
+ <js:ArrayList source="[Features, Support]" />
+ </j:dataProvider>
+ </j:ButtonBar>
+
+ <j:ButtonBar localId="bb" change="bb_label.text = bb.selectedItem as String"
+ emphasis="primary">
+ <j:dataProvider>
+ <js:ArrayList source="[Iron Man, Hulk, Thor, Captain America, Black Widow]" />
+ </j:dataProvider>
</j:ButtonBar>
- <j:Label localId="bb1_label"/>
+ <j:Label localId="bb_label"/>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
@@ -60,16 +53,12 @@ limitations under the License.
<html:H4 text="ButtonBar"/>
<j:ButtonBar localId="bb2" change="bb2_label.text = bb2.selectedItem as String"
- emphasis="{ButtonBar.SECONDARY}"
- dataProvider="{three_options}">
- <!-- <js:dataProvider>
- <fx:Array>
- <fx:String>Features</fx:String>
- <fx:String>Support</fx:String>
- <fx:String>Control</fx:String>
- </fx:Array>
- </js:dataProvider> -->
+ emphasis="secondary">
+ <j:dataProvider>
+ <js:ArrayList source="[Features, Support, Service and Operations, four]" />
+ </j:dataProvider>
</j:ButtonBar>
+
<j:Label localId="bb2_label"/>
</j:Card>
</j:GridCell>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e95ab07..0b31caa 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -276,8 +276,8 @@ j|ButtonBar {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ButtonBarModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonBarView");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout");
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.ButtonBarLayout");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ButtonBarItemRenderer");
}
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 97d0a07..4d48f3b 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -118,6 +118,7 @@ package
import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList; DataGridColumnList;
import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator; DataGridColumnChangePropagator;
import org.apache.royale.jewel.beads.layouts.DataGridLayout; DataGridLayout;
+ import org.apache.royale.jewel.beads.layouts.ButtonBarLayout; ButtonBarLayout;
import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
@@ -129,8 +130,8 @@ package
COMPILE::JS
{
- import dialogPolyfill; dialogPolyfill;
- import org.apache.royale.utils.transparentPixelElement; transparentPixelElement;
+ import dialogPolyfill; dialogPolyfill;
+ import org.apache.royale.utils.transparentPixelElement; transparentPixelElement;
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index bca7d02..4a8fb27 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -44,98 +44,98 @@ package org.apache.royale.jewel
*/
public class Button extends SimpleButton
{
- 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.4
- */
- public function Button()
- {
- super();
- }
-
- [Bindable("textChange")]
- /**
- * The text to appear on the control.
- *
- * @copy org.apache.royale.jewel.Label#text
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- COMPILE::SWF
- {
- return ITextModel(model).text;
- }
- COMPILE::JS
+ 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.4
+ */
+ public function Button()
{
- return (element as HTMLButtonElement).innerHTML;
+ super();
}
- }
- /**
- * @private
- */
- public function set text(value:String):void
- {
- COMPILE::SWF
+
+ [Bindable("textChange")]
+ /**
+ * The text to appear on the control.
+ *
+ * @copy org.apache.royale.jewel.Label#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
{
- ITextModel(model).text = value;
+ COMPILE::SWF
+ {
+ return ITextModel(model).text;
+ }
+ COMPILE::JS
+ {
+ return (element as HTMLButtonElement).innerHTML;
+ }
}
- COMPILE::JS
+ /**
+ * @private
+ */
+ public function set text(value:String):void
{
- (element as HTMLButtonElement).innerHTML = value;
- dispatchEvent(new Event('textChange'));
+ COMPILE::SWF
+ {
+ ITextModel(model).text = value;
+ }
+ COMPILE::JS
+ {
+ (element as HTMLButtonElement).innerHTML = value;
+ dispatchEvent(new Event('textChange'));
+ }
}
- }
- [Bindable("htmlChange")]
- /**
- * The html text to appear on the control.
- *
- * @copy org.apache.royale.jewel.Label#html
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get html():String
- {
- COMPILE::SWF
- {
- return ITextModel(model).html;
- }
- COMPILE::JS
- {
- return (element as HTMLButtonElement).innerHTML;
- }
- }
- /**
- * @private
- */
- public function set html(value:String):void
- {
- COMPILE::SWF
+ [Bindable("htmlChange")]
+ /**
+ * The html text to appear on the control.
+ *
+ * @copy org.apache.royale.jewel.Label#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get html():String
{
- ITextModel(model).html = value;
+ COMPILE::SWF
+ {
+ return ITextModel(model).html;
+ }
+ COMPILE::JS
+ {
+ return (element as HTMLButtonElement).innerHTML;
+ }
}
- COMPILE::JS
+ /**
+ * @private
+ */
+ public function set html(value:String):void
{
- (element as HTMLButtonElement).innerHTML = value;
- dispatchEvent(new Event('htmlChange'));
+ COMPILE::SWF
+ {
+ ITextModel(model).html = value;
+ }
+ COMPILE::JS
+ {
+ (element as HTMLButtonElement).innerHTML = value;
+ dispatchEvent(new Event('htmlChange'));
+ }
}
- }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ButtonBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ButtonBar.as
index 9de3f06..26c6eef 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ButtonBar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ButtonBar.as
@@ -18,13 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.beads.models.ButtonBarModel;
-
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
}
+ import org.apache.royale.html.beads.models.ButtonBarModel;
/**
* The ButtonBar class is a component that displays a set of Buttons. The ButtonBar
@@ -71,7 +70,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.7
* @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
*/
public function get buttonWidths():Array
@@ -92,7 +91,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.7
* @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
*/
public function get widthType():Number
@@ -107,7 +106,7 @@ package org.apache.royale.jewel
ButtonBarModel(model).widthType = value;
}
- private var _emphasis:String = "primary";
+ private var _emphasis:String;
/**
* Applies emphasis color display. Possible constant values are: PRIMARY, SECONDARY, EMPHASIZED.
* Colors are defined in royale jewel theme CSS.
@@ -117,7 +116,7 @@ package org.apache.royale.jewel
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.6
+ * @productversion Royale 0.9.7
*/
public function get emphasis():String
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as
new file mode 100644
index 0000000..9ddd3c8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ButtonBarLayout.as
@@ -0,0 +1,148 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStyleableObject;
+ import org.apache.royale.html.beads.models.ButtonBarModel;
+
+ /**
+ * The ButtonBarLayout class bead sizes and positions the button
+ * elements that make up a org.apache.royale.jewel.ButtonBar. This bead arranges the Buttons
+ * horizontally and makes them all the same width unless the buttonWidths property has been set in which case
+ * the values stored in that array are used.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class ButtonBarLayout extends HorizontalLayout
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function ButtonBarLayout()
+ {
+ super();
+ }
+
+ private var _widthType:Number = ButtonBarModel.PIXEL_WIDTHS;
+ private var _buttonWidths:Array = null;
+
+ /**
+ * An array of widths (Number), one per button. These values supersede the
+ * default of equally-sized buttons.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function get buttonWidths():Array
+ {
+ return _buttonWidths;
+ }
+ public function set buttonWidths(value:Array):void
+ {
+ _buttonWidths = value;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.ILayoutChild
+ * @royaleignorecoercion org.apache.royale.core.IStrand
+ * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+ */
+ override public function layout():Boolean
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var model:ButtonBarModel = (host as IStrand).getBeadByType(ButtonBarModel) as ButtonBarModel;
+ if (model) {
+ buttonWidths = model.buttonWidths;
+ _widthType = model.widthType;
+ }
+
+ var n:int = contentView.numElements;
+ if (n <= 0) return false;
+
+ for (var i:int=0; i < n; i++)
+ {
+ var ilc:ILayoutChild = contentView.getElementAt(i) as ILayoutChild;
+ if (ilc == null || !ilc.visible) continue;
+ if (!(ilc is IStyleableObject)) continue;
+
+ COMPILE::SWF {
+ if (buttonWidths) {
+ var widthValue:* = buttonWidths[i];
+
+ if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+ if (widthValue != null) ilc.width = Number(widthValue);
+ IStyleableObject(ilc).style.flexGrow = 0;
+ }
+ else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+ if (widthValue != null) {
+ IStyleableObject(ilc).style.flexGrow = Number(widthValue);
+ }
+ }
+ else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+ if (widthValue != null) ilc.percentWidth = Number(widthValue);
+ IStyleableObject(ilc).style.flexGrow = 0;
+ }
+ } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
+ IStyleableObject(ilc).style.flexGrow = 1;
+ }
+ }
+
+ COMPILE::JS {
+ // otherwise let the flexbox layout handle matters on its own.
+ if (buttonWidths) {
+ var widthValue:* = buttonWidths[i];
+
+ if (_widthType == ButtonBarModel.PIXEL_WIDTHS) {
+ if (widthValue != null) ilc.width = Number(widthValue);
+ }
+ else if (_widthType == ButtonBarModel.PROPORTIONAL_WIDTHS) {
+ if (widthValue != null) ilc.element.style["flex-grow"] = String(widthValue);
+ }
+ else if (_widthType == ButtonBarModel.PERCENT_WIDTHS) {
+ if (widthValue != null) ilc.percentWidth = Number(widthValue);
+ }
+ } else if (!_widthType == ButtonBarModel.NATURAL_WIDTHS) {
+ ilc.element.style["flex-grow"] = "1";
+ }
+
+ if (!host.isHeightSizedToContent())
+ ilc.height = contentView.height;
+ }
+ }
+
+ // now let the horizontal layout take care of things.
+ return super.layout();
+ }
+ }
+}
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 aa210be..438b7a4 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
@@ -31,7 +31,6 @@ package org.apache.royale.jewel.itemRenderers
import org.apache.royale.jewel.Button;
import org.apache.royale.jewel.ButtonBar;
import org.apache.royale.jewel.beads.views.ButtonBarView;
- import org.apache.royale.core.IItemRendererParent;
/**
* The ButtonBarItemRenderer class extends Button and turns it into an itemRenderer
@@ -129,7 +128,10 @@ package org.apache.royale.jewel.itemRenderers
_itemRendererParent = value;
var buttonBar:ButtonBar = (itemRendererParent as ButtonBarView).buttonBar;
- emphasis = buttonBar.emphasis;
+ if(buttonBar.emphasis != null)
+ {
+ emphasis = buttonBar.emphasis;
+ }
}
private var _labelField:String = null;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
index db7237a..7a2bdf7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
@@ -38,8 +38,9 @@ j|ButtonBar
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ButtonBarModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonBarView")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout")
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.ButtonBarLayout")
+ // 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.ButtonBarItemRenderer")
// border-style: none