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:40 UTC
[royale-asjs] 39/42: jewel-buttonbar: make widthType internal to
the component (will need to provide its own jewel buttonbarmodel)
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 9949c8b18dbd1c2b06aa42f3e2a92c5226447eef
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Dec 13 00:27:03 2019 +0100
jewel-buttonbar: make widthType internal to the component (will need to provide its own jewel buttonbarmodel)
---
.../royale/org/apache/royale/jewel/ButtonBar.as | 24 ++--
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 157 ++++++++-------------
.../Jewel/src/main/sass/components/_buttonbar.sass | 2 -
3 files changed, 73 insertions(+), 110 deletions(-)
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 26c6eef..cc0119f 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
@@ -26,9 +26,13 @@ package org.apache.royale.jewel
import org.apache.royale.html.beads.models.ButtonBarModel;
/**
- * The ButtonBar class is a component that displays a set of Buttons. The ButtonBar
+ * The Jewel ButtonBar class is a component that displays a set of Buttons. The ButtonBar
* is actually a List with a default horizontal layout and an itemRenderer that
- * produces Buttons. The ButtonBar uses the following beads:
+ * produces Jewel Buttons.
+ *
+ * By default buttons are equally sized, by setting `widthType` to NaN.
+ *
+ * The ButtonBar 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.
@@ -94,17 +98,17 @@ package org.apache.royale.jewel
* @productversion Royale 0.9.7
* @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
*/
- public function get widthType():Number
- {
- return ButtonBarModel(model).widthType;
- }
+ // public function get widthType():Number
+ // {
+ // return ButtonBarModel(model).widthType;
+ // }
/**
* @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
*/
- public function set widthType(value:Number):void
- {
- ButtonBarModel(model).widthType = value;
- }
+ // public function set widthType(value:Number):void
+ // {
+ // ButtonBarModel(model).widthType = value;
+ // }
private var _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
index 68b5e61..b1aadc8 100644
--- 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
@@ -26,11 +26,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.html.beads.models.ButtonBarModel;
/**
- * The ButtonBarLayout class bead sizes and positions the button
+ * The Jewel 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
+ * (widthType = NaN) unless the buttonWidths property has been set in which case
* the values stored in that array are used.
*
* @langversion 3.0
@@ -58,6 +58,7 @@ package org.apache.royale.jewel.beads.layouts
*/
public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+ private var model:ButtonBarModel;
/**
* Add class selectors when the component is addedToParent
* Otherwise component will not get the class selectors when
@@ -72,80 +73,70 @@ package org.apache.royale.jewel.beads.layouts
{
super.beadsAddedHandler();
- COMPILE::JS
- {
- if(proportionalWidths)
- {
- hostClassList.add("proportinalWidths");
- } else
- {
- hostClassList.add("sameWidths");
- }
+ model = (host as IStrand).getBeadByType(ButtonBarModel) as ButtonBarModel;
+ if (model) {
+ widthType = model.buttonWidths != null ? model.widthType : NaN;
}
}
- private var _proportionalWidths:Boolean;
/**
- * Switch between "proportionalWidth" and "sameWidths".
- * Default is false (sameWidths) and all buttons are has the same width.
- * True to make all buttons fill all size available proportionally.
+ * Switch between four different types of width
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- public function get proportionalWidths():Boolean
+ public function get widthType():Number
{
- return _proportionalWidths;
+ return model.widthType;
}
-
- public function set proportionalWidths(value:Boolean):void
+ public function set widthType(value:Number):void
{
- if (_proportionalWidths != value)
+ if (model.widthType != value)
{
+ model.widthType = value;
COMPILE::JS
{
if(hostComponent)
{
- if(value)
+ if (hostClassList.contains("pixelWidths"))
+ hostClassList.remove("pixelWidths");
+ if (hostClassList.contains("proportinalWidths"))
+ hostClassList.remove("proportinalWidths");
+ if (hostClassList.contains("percentWidths"))
+ hostClassList.remove("percentWidths");
+ if (hostClassList.contains("naturalWidths"))
+ hostClassList.remove("naturalWidths");
+ if (hostClassList.contains("sameWidths"))
+ hostClassList.remove("sameWidths");
+ if(isNaN(model.widthType))
{
- if (hostClassList.contains("sameWidths"))
- hostClassList.remove("sameWidths");
- hostClassList.add("proportinalWidths");
- } else
- {
- if (hostClassList.contains("proportinalWidths"))
- hostClassList.remove("proportinalWidths");
hostClassList.add("sameWidths");
}
+ else
+ {
+ switch(model.widthType)
+ {
+ case ButtonBarModel.PIXEL_WIDTHS:
+ hostClassList.add("pixelWidths");
+ break;
+ case ButtonBarModel.PROPORTIONAL_WIDTHS:
+ hostClassList.add("proportinalWidths");
+ break;
+ case ButtonBarModel.PERCENT_WIDTHS:
+ hostClassList.add("percentWidths");
+ break;
+ case ButtonBarModel.NATURAL_WIDTHS:
+ hostClassList.add("naturalWidths");
+ break;
+ }
+ }
}
}
- _proportionalWidths = value;
}
}
- 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
@@ -155,13 +146,6 @@ package org.apache.royale.jewel.beads.layouts
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;
@@ -171,49 +155,26 @@ package org.apache.royale.jewel.beads.layouts
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) {
+ COMPILE::JS
+ {
+ // otherwise let the flexbox layout handle matters on its own.
+ if (model.buttonWidths) {
+ var widthValue:* = model.buttonWidths[i];
+
+ if (model.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.
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
index b0d020c..64452ae 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_buttonbar.sass
@@ -40,11 +40,9 @@ j|ButtonBar
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ButtonBarView")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
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
@media -royale-swf
j|ButtonBar