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 2020/06/04 14:03:19 UTC
[royale-asjs] branch develop updated (bd78f0c -> ddf707c)
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a change to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.
from bd78f0c Removed font mentions
new 041b748 layoutbase: change import
new d88dd70 jewel-layouts: remove hostClassList and use StyledUIBase as base class, since is ui base class in Jewel
new 9de25e6 jewel-tilelayout: changes to tilelayout
new fe5b1d0 layoutbase: make isLayoutRunning protected for extensibility
new 2f41214 styledlayoutbased: implement "waitForSize" as a user feature that can be turn on/off
new 75f4287 tilelayout: get right columns and row with gaps (hor & vert). Still no tile size involved
new 1e9d562 tour-de-jewel: improve tilelayout example
new 7acc17c tilelayout: add bindable to properties
new 5918efc tour-de-jewel: adjust columnCount ontilelayout example
new ce8ee47 jewel-tilelayout: make it work very similar to Flex TileLayout
new 939d7c8 tour-de-jewel: improve tilelayout example
new bd3c5f3 jewel-tilelayout: fix final issues
new 7c49aa5 jewel-tilehorizontallayout: tilelayout with orientation columns or horizontal
new e0df55e jewel-tilelayout: restore old code since we are splitting in 2 classes. This class will be removed soon
new dac30fa jewel-tilehorizontallayout: latest fixes and clean up
new 5119634 jewel-layout: update tile to depend on hor/ver layouts
new ddf707c tour-de-jewel: improve tilelayout example
The 17 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/main/royale/LayoutsPlayGround.mxml | 59 +++
.../royale/org/apache/royale/core/LayoutBase.as | 7 +-
.../projects/Jewel/src/main/resources/defaults.css | 10 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../royale/jewel/beads/layouts/BasicLayout.as | 12 +-
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 30 +-
.../royale/jewel/beads/layouts/FormItemLayout.as | 12 +-
.../royale/jewel/beads/layouts/FormLayout.as | 12 +-
.../royale/jewel/beads/layouts/GridCellLayout.as | 54 +--
.../royale/jewel/beads/layouts/GridLayout.as | 24 +-
.../beads/layouts/HorizontalCenteredLayout.as | 20 +-
.../jewel/beads/layouts/HorizontalFlowLayout.as | 20 +-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 12 +-
.../jewel/beads/layouts/SimpleHorizontalLayout.as | 12 +-
.../jewel/beads/layouts/SimpleVerticalLayout.as | 12 +-
.../royale/jewel/beads/layouts/StyledLayoutBase.as | 159 +++++--
.../royale/jewel/beads/layouts/TableLayout.as | 20 +-
.../jewel/beads/layouts/TileHorizontalLayout.as | 486 +++++++++++++++++++++
.../jewel/beads/layouts/VerticalCenteredLayout.as | 20 +-
.../jewel/beads/layouts/VerticalFlowLayout.as | 20 +-
.../royale/jewel/beads/layouts/VerticalLayout.as | 12 +-
.../Jewel/src/main/sass/components/_layout.sass | 13 +-
22 files changed, 821 insertions(+), 206 deletions(-)
create mode 100644 frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
[royale-asjs] 13/17: jewel-tilehorizontallayout: tilelayout with
orientation columns or horizontal
Posted by ca...@apache.org.
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 7c49aa595cc81b9943364d53fb6802af0a113676
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 11:55:21 2020 +0200
jewel-tilehorizontallayout: tilelayout with orientation columns or horizontal
---
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../jewel/beads/layouts/TileHorizontalLayout.as | 514 +++++++++++++++++++++
2 files changed, 515 insertions(+)
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 842ac20..a39b5cf 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -207,6 +207,7 @@
<component id="HorizontalFlowLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalFlowLayout"/>
<component id="VerticalFlowLayout" class="org.apache.royale.jewel.beads.layouts.VerticalFlowLayout"/>
<component id="TileLayout" class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
+ <component id="TileHorizontalLayout" class="org.apache.royale.jewel.beads.layouts.TileHorizontalLayout"/>
<component id="GridLayout" class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
<component id="GridCellLayout" class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
<component id="TableLayout" class="org.apache.royale.jewel.beads.layouts.TableLayout"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
new file mode 100644
index 0000000..b48b1f0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
@@ -0,0 +1,514 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.IUIBase;
+ }
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The TileLayout class bead sizes and positions the elements it manages into rows and columns.
+ * The size of each element is determined either by setting TileLayout's columnWidth and rowHeight
+ * properties, or having the tile size determined by factoring the columnCount into the area assigned
+ * for the layout.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public class TileHorizontalLayout extends StyledLayoutBase implements ILayoutStyleProperties
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function TileHorizontalLayout()
+ {
+ super();
+ }
+
+ public static const LAYOUT_TYPE_NAMES:String = "layout tile";
+
+ /**
+ * Add class selectors when the component is addedToParent
+ * Otherwise component will not get the class selectors when
+ * perform "removeElement" and then "addElement"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ override public function beadsAddedHandler(event:Event = null):void
+ {
+ super.beadsAddedHandler();
+
+ COMPILE::JS
+ {
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("tile"))
+ hostComponent.removeClass("tile");
+ hostComponent.addClass("tile");
+ }
+ }
+
+ private var _columnCount:int = -1;
+ /**
+ * The number of tiles to fit horizontally into the layout.
+ * Contain the actual column count.
+ * The default value is -1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function get columnCount():int
+ {
+ return _columnCount;
+ }
+
+ private var _requestedColumnCount:int = -1;
+ /**
+ * Number of columns to be displayed.
+ * Set to -1 to allow the TileLayout to determine the column count automatically.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("requestedColumnCountChanged")]
+ public function get requestedColumnCount():int
+ {
+ return _requestedColumnCount;
+ }
+ public function set requestedColumnCount(value:int):void
+ {
+ _requestedColumnCount = value;
+ layout();
+ }
+
+ private var _columnWidth:Number = Number.NaN;
+ /**
+ * Contain the actual column width, in pixels.
+ * If not explicitly set, the column width is determined from the width of the widest element.
+ * If the columnAlign property is set to "justifyUsingWidth", the column width grows to the container width to justify the fully-visible columns.
+ * The default value is NaN.
+ * This property can be used as the source for data binding.
+ *
+ * The width of each column, in pixels. If left unspecified, the
+ * columnWidth is determined by dividing the columnCount into the
+ * strand's bounding box width.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("columnWidthChanged")]
+ public function get columnWidth():Number
+ {
+ return _columnWidth;
+ }
+ public function set columnWidth(value:Number):void
+ {
+ _columnWidth = value;
+ layout();
+ }
+
+ private var _rowCount:int = -1;
+ /**
+ * The number of tiles to fit horizontally into the layout.
+ * The row count.
+ * The default value is -1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("rowCountChanged")]
+ public function get rowCount():int
+ {
+ return _rowCount;
+ }
+
+ private var _requestedRowCount:int = -1;
+ /**
+ * Number of rows to be displayed.
+ * Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.
+ * If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.
+ * The default value is -1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("requestedRowCountChanged")]
+ public function get requestedRowCount():int
+ {
+ return _requestedRowCount;
+ }
+ public function set requestedRowCount(value:int):void
+ {
+ _requestedRowCount = value;
+ layout();
+ }
+
+ private var _rowHeight:Number = Number.NaN;
+ /**
+ * The row height, in pixels.
+ * If not explicitly set, the row height is determined from the maximum of elements' height.
+ * If rowAlign is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.
+ * The default value is NaN.
+ * This property can be used as the source for data binding.
+ *
+ * The height of each row, in pixels. If left unspecified, the
+ * rowHeight is determine by dividing the possible number of rows
+ * into the strand's bounding box height.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("rowHeightChanged")]
+ public function get rowHeight():Number
+ {
+ return _rowHeight;
+ }
+ public function set rowHeight(value:Number):void
+ {
+ _rowHeight = value;
+ layout();
+ }
+
+ /**
+ * @private
+ */
+ private var horizontalGapInitialized:Boolean;
+ public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
+ private var _horizontalGap:Number = 0;
+ /**
+ * The horizontalGap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("horizontalGapChanged")]
+ public function get horizontalGap():Number
+ {
+ return _horizontalGap;
+ }
+ /**
+ * @private
+ */
+ public function set horizontalGap(value:Number):void
+ {
+ _horizontalGap = value;
+ horizontalGapInitialized = true;
+ // layout();
+ }
+
+ /**
+ * @private
+ */
+ private var verticalGapInitialized:Boolean;
+ public static const VERTICAL_GAP_STYLE:String = "verticalGap"
+ private var _verticalGap:Number = 0;
+ /**
+ * The verticalGap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("verticalGapChanged")]
+ public function get verticalGap():Number
+ {
+ return _verticalGap;
+ }
+ /**
+ * @private
+ */
+ public function set verticalGap(value:Number):void
+ {
+ _verticalGap = value;
+ verticalGapInitialized = true;
+ // layout();
+ }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ // override public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ // {
+ // var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ // if (cssValue !== undefined)
+ // {
+ // switch(cssProperty)
+ // {
+ // case VERTICAL_GAP_STYLE:
+ // if(!verticalGapInitialized)
+ // {
+ // verticalGap = Number(cssValue);
+ // }
+ // break;
+ // default:
+ // break;
+ // }
+ // }
+ // }
+
+ /**
+ * Layout children
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var area:UIBase = layoutView as UIBase;
+
+ var xpos:Number = 0;
+ var ypos:Number = 0;
+ var useWidth:Number = columnWidth;
+ var useHeight:Number = rowHeight;
+ var n:Number = area.numElements;
+ if (n == 0) return false;
+
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+
+ var realN:Number = n;
+ for(var j:int=0; j < n; j++)
+ {
+ var testChild:IUIBase = area.getElementAt(i) as IUIBase;
+ if (testChild == null || !testChild.visible) realN--;
+ }
+
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / columnCount); // + gap
+ if (isNaN(useHeight)) {
+ // given the width and total number of items, how many rows?
+ var numRows:Number = Math.ceil(realN/columnCount);
+ if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ else useHeight = Math.floor(adjustedHeight / numRows);
+ }
+
+ var maxWidth:Number = useWidth;
+ var maxHeight:Number = useHeight;
+
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = area.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ child.width = useWidth;
+ child.height = useHeight;
+ child.x = xpos;
+ child.y = ypos;
+
+ xpos += useWidth;
+ maxWidth = Math.max(maxWidth,xpos);
+
+ var test:Number = (i+1)%columnCount;
+
+ if (test == 0) {
+ xpos = 0;
+ ypos += useHeight;
+ maxHeight = Math.max(maxHeight,ypos);
+ }
+ }
+
+ maxWidth = Math.max(maxWidth, columnCount*useWidth);
+ maxHeight = Math.max(maxHeight, numRows*useHeight);
+
+ // Only return true if the contentView needs to be larger; that new
+ // size is stored in the model.
+ var sizeChanged:Boolean = true;
+
+ return sizeChanged;
+ }
+ COMPILE::JS
+ {
+ trace(" **** TILE LAYOUT ****");
+
+ trace(" - requestedColumnCount", requestedColumnCount);
+ trace(" - columnCount", columnCount);
+ trace(" - columnWidth", columnWidth);
+ trace(" - horizontalGap", horizontalGap);
+
+ trace(" - requestedRowCount", requestedRowCount);
+ trace(" - rowCount", rowCount);
+ trace(" - rowHeight", rowHeight);
+ trace(" - verticalGap", verticalGap);
+
+ var i:int;
+ var n:int;
+ var child:UIBase;
+ var useWidth:Number;
+ var useHeight:Number;
+
+ var contentView:ILayoutView = layoutView as ILayoutView;
+ n = contentView.numElements;
+
+ if (n === 0) return false;
+
+
+ useWidth = columnWidth;
+ trace(" - useWidth", useWidth);
+ useHeight = rowHeight;
+ trace(" - useHeight", useHeight);
+ var needWidth:Boolean = isNaN(useWidth);
+ trace(" - needWidth", needWidth);
+ var needHeight:Boolean = isNaN(useHeight);
+ trace(" - needHeight", needHeight);
+
+ var realN:int = n;
+ var widestTile:Number = 0; // hold the widest tile
+ var tallestTile:Number = 0; // hold the widest tile
+ for (i = 0; i < n; i++)
+ {
+ child = contentView.getElementAt(i) as UIBase;
+ if (!child.visible) realN--;
+ if (needWidth && child.width > widestTile) widestTile = child.width;
+ if (needWidth && child.height > tallestTile) tallestTile = child.height;
+ }
+ trace(" - widestTile", widestTile);
+ trace(" - tallestTile", tallestTile);
+
+ if(needHeight || needWidth)
+ {
+ trace(" -- calculate useWidth & useHeight");
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ trace(" - adjustedWidth", adjustedHostWidth);
+ var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ trace(" - adjustedHeight", adjustedHostHeight);
+ if (needWidth)
+ {
+ // calculate columnCount in base of the widesTile
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
+ } else {
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
+ }
+ trace(" -- _columnCount", _columnCount);
+ trace(" -- useWidth", useWidth);
+
+ // given the width and total number of items, how many rows?
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + verticalGap));
+ _rowCount = Math.ceil(realN / columnCount);
+ trace(" -- _rowCount", _rowCount);
+
+ if (needHeight)
+ {
+ useHeight = tallestTile;
+
+ // if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ // else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
+ // trace(" -- useHeight", useHeight);
+ } else {
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + verticalGap));
+ useHeight = _rowHeight;
+ }
+ // else {
+ // // we have tile height so calculate rowCount
+ // _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
+ // }
+ }
+
+ trace(" -- useHeight", useHeight);
+ for (i = 0; i < n; i++)
+ {
+ child = contentView.getElementAt(i) as UIBase;
+
+ if (!child.visible) continue;
+
+ trace(i, i % columnCount, i % rowCount);
+
+ // add horizontalGap
+ if(i % columnCount != 0)
+ child.positioner.style.marginLeft = horizontalGap + "px";
+ else
+ child.positioner.style.marginLeft = null;
+
+ // add verticalGap
+ if(i >= columnCount)
+ child.positioner.style.marginTop = verticalGap + "px";
+ else
+ child.positioner.style.marginTop = null;
+
+ //child.setDisplayStyleForLayout('inline-flex');
+ //if the parent width/height not explicitly set, we can't calculate the child width/height
+ if(useWidth > 0)
+ child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
+ if(useHeight > 0)
+ child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
+
+ // avoid a tile from the next row stay in the previous row due to flexbox algorithm
+ if(i % columnCount == columnCount - 1)
+ child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + horizontalGap) * (_columnCount - 1))) + "px";
+ else
+ child.positioner.style.marginRight = null;
+
+ child.dispatchEvent('sizeChanged');
+ }
+ return true;
+ }
+ }
+ }
+}
[royale-asjs] 05/17: styledlayoutbased: implement "waitForSize" as
a user feature that can be turn on/off
Posted by ca...@apache.org.
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 2f41214b45344b4a08ca24ff33c04eb7cd03aad8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 17:41:34 2020 +0200
styledlayoutbased: implement "waitForSize" as a user feature that can be turn on/off
---
.../src/main/royale/LayoutsPlayGround.mxml | 2 +-
.../royale/jewel/beads/layouts/StyledLayoutBase.as | 134 ++++++++++++++++++---
.../royale/jewel/beads/layouts/TileLayout.as | 32 ++---
3 files changed, 127 insertions(+), 41 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index d082ec4..03081a2 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -198,7 +198,7 @@ limitations under the License.
<j:Group className="wrapper" width="100%" height="200">
<j:beads>
- <j:TileLayout localId="tl" horizontalGap="6" />
+ <j:TileLayout localId="tl" horizontalGap="6" waitForSize="true"/>
</j:beads>
<j:Button text="1" emphasis="primary" width="60" height="60"/>
<j:Button text="2" emphasis="secondary" width="60" height="60"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
index 3a51de8..f30b49a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -18,6 +18,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.LayoutBase;
@@ -26,6 +28,7 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.layout.ILayoutStyleProperties;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.utils.sendStrandEvent;
/**
* The StyledLayoutBase class is an extension of LayoutBase
@@ -91,14 +94,14 @@ package org.apache.royale.jewel.beads.layouts
{
COMPILE::JS
{
- applyStyleToLayout(hostComponent, "itemsExpand");
- setHostComponentClass("itemsExpand", _itemsExpand ? "itemsExpand":"");
+ applyStyleToLayout(hostComponent, "itemsExpand");
+ setHostComponentClass("itemsExpand", _itemsExpand ? "itemsExpand":"");
- applyStyleToLayout(hostComponent, "itemsHorizontalAlign");
- setHostComponentClass(_itemsHorizontalAlign, _itemsHorizontalAlign);
+ applyStyleToLayout(hostComponent, "itemsHorizontalAlign");
+ setHostComponentClass(_itemsHorizontalAlign, _itemsHorizontalAlign);
- applyStyleToLayout(hostComponent, "itemsVerticalAlign");
- setHostComponentClass(_itemsVerticalAlign, _itemsVerticalAlign);
+ applyStyleToLayout(hostComponent, "itemsVerticalAlign");
+ setHostComponentClass(_itemsVerticalAlign, _itemsVerticalAlign);
}
}
@@ -166,9 +169,9 @@ package org.apache.royale.jewel.beads.layouts
{
COMPILE::JS
{
- setHostComponentClass(_itemsHorizontalAlign, value);
- _itemsHorizontalAlign = value;
- itemsHorizontalAlignInitialized = true;
+ setHostComponentClass(_itemsHorizontalAlign, value);
+ _itemsHorizontalAlign = value;
+ itemsHorizontalAlignInitialized = true;
}
}
}
@@ -201,9 +204,9 @@ package org.apache.royale.jewel.beads.layouts
{
COMPILE::JS
{
- setHostComponentClass(_itemsVerticalAlign, value);
- _itemsVerticalAlign = value;
- itemsVerticalAlignInitialized = true;
+ setHostComponentClass(_itemsVerticalAlign, value);
+ _itemsVerticalAlign = value;
+ itemsVerticalAlignInitialized = true;
}
}
}
@@ -231,9 +234,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- setHostComponentClass("itemsExpand", value ? "itemsExpand" : "");
- _itemsExpand = value;
- itemsExpandInitialized = true;
+ setHostComponentClass("itemsExpand", value ? "itemsExpand" : "");
+ _itemsExpand = value;
+ itemsExpandInitialized = true;
}
}
}
@@ -249,5 +252,106 @@ package org.apache.royale.jewel.beads.layouts
if (newValue) hostComponent.addClass(newValue);
}
+
+ /**
+ * Allow user to wait for the host size to be set in case of unset or %
+ * or avoid and perform layout
+ */
+ COMPILE::JS
+ public var waitForSize:Boolean = false;
+
+ /**
+ * If waitForSize is true, sizeInitialized will be true when host get size.
+ */
+ COMPILE::JS
+ protected var sizeInitialized:Boolean = false;
+
+ /**
+ * We call requestAnimationFrame until we get width and height
+ */
+ COMPILE::JS
+ protected function checkHostSize():void {
+ if(sizeInitialized) return;
+ if((host.width == 0 && !isNaN(host.percentWidth)) ||
+ (host.height == 0 && !isNaN(host.percentHeight)))
+ {
+ requestAnimationFrame(checkHostSize);
+ } else
+ {
+ sizeInitialized = true;
+ executeLayout();
+ }
+ }
+
+ /**
+ * Performs the layout in three parts: before, layout, after.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ * @royaleignorecoercion org.apache.royale.core.ILayoutParent
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function performLayout():void
+ {
+ // avoid running this layout instance recursively.
+ if (isLayoutRunning) return;
+
+ isLayoutRunning = true;
+ /* Not all components need measurement
+ COMPILE::SWF
+ {
+ host.measuredHeight = host.height;
+ host.measuredWidth = host.width;
+ }
+ */
+
+ viewBead = (host as ILayoutParent).getLayoutHost();
+
+ if (viewBead.beforeLayout())
+ {
+ COMPILE::SWF
+ {
+ executeLayout();
+ }
+
+ COMPILE::JS
+ {
+ if(waitForSize) {
+ checkHostSize();
+ } else
+ executeLayout();
+ }
+ }
+ }
+
+ protected var viewBead:ILayoutHost;
+
+ public function executeLayout():void
+ {
+ if (layout()) {
+ viewBead.afterLayout();
+ }
+
+ isLayoutRunning = false;
+
+ sendStrandEvent(_strand, "layoutComplete");
+
+ /* measurement may not matter for all components
+ COMPILE::SWF
+ {
+ // check sizes to see if layout changed the size or not
+ // and send an event to re-layout parent of host
+ if (host.width != host.measuredWidth ||
+ host.height != host.measuredHeight)
+ {
+ isLayoutRunning = true;
+ host.dispatchEvent(new Event("sizeChanged"));
+ isLayoutRunning = false;
+ }
+ }
+ */
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 54c836a..2fd3216 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -74,12 +74,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostComponent.containsClass("layout"))
- hostComponent.removeClass("layout");
- hostComponent.addClass("layout");
- if(hostComponent.containsClass("tile"))
- hostComponent.removeClass("tile");
- hostComponent.addClass("tile");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("tile"))
+ hostComponent.removeClass("tile");
+ hostComponent.addClass("tile");
}
}
@@ -248,22 +248,7 @@ package org.apache.royale.jewel.beads.layouts
// }
// }
// }
-
- /**
- * Used at begining of layout for % height
- */
- protected var _noSize:Boolean = true;
-
- COMPILE::JS
- protected function checkHostSize():Boolean {
- if(host.width == 0 && !isNaN(host.percentWidth)) {
- requestAnimationFrame(layout);
- return false;
- }
-
- return true;
- }
-
+
/**
* Layout children
*
@@ -341,9 +326,6 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- if(_noSize)
- checkHostSize();
-
trace(" **** TILE LAYOUT ****");
trace(" - columnCount", columnCount);
trace(" - columnWidth", columnWidth);
[royale-asjs] 04/17: layoutbase: make isLayoutRunning protected for
extensibility
Posted by ca...@apache.org.
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 fe5b1d012b7d24616155438a5543e971bbdceab2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 15:09:27 2020 +0200
layoutbase: make isLayoutRunning protected for extensibility
---
.../projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
index deda30d..26c8e10 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
@@ -302,7 +302,7 @@ package org.apache.royale.core
return viewBead.contentView;
}
- private var isLayoutRunning:Boolean = false;
+ protected var isLayoutRunning:Boolean = false;
/**
* Performs the layout in three parts: before, layout, after.
[royale-asjs] 16/17: jewel-layout: update tile to depend on hor/ver
layouts
Posted by ca...@apache.org.
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 5119634a206a027522674ac11235dd233ff327be
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 15:36:38 2020 +0200
jewel-layout: update tile to depend on hor/ver layouts
---
frameworks/projects/Jewel/src/main/resources/defaults.css | 10 ++++++----
.../royale/jewel/beads/layouts/TileHorizontalLayout.as | 7 ++-----
.../projects/Jewel/src/main/sass/components/_layout.sass | 13 +++++++------
3 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 5a4d960..21a6db1 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1061,6 +1061,9 @@ j|Label {
.layout.horizontal.centered > * {
flex: 0 0 auto !important;
}
+.layout.horizontal.tile {
+ flex-wrap: wrap;
+}
.layout.horizontal.formitem {
width: 100%;
align-items: flex-start;
@@ -1161,6 +1164,9 @@ j|Label {
.layout.vertical.centered > * {
flex: 0 0 auto !important;
}
+.layout.vertical.tile {
+ flex-wrap: wrap;
+}
.layout.vertical.form {
width: 100%;
}
@@ -1224,10 +1230,6 @@ j|Label {
.layout.vertical.gap-10x3px > * {
margin-top: 30px;
}
-.layout.tile {
- flex-flow: row wrap;
- align-items: flex-start;
-}
.layout.grid {
flex-flow: row wrap;
width: 100%;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
index b1482d5..d7e2f31 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
@@ -41,7 +41,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.8
*/
- public class TileHorizontalLayout extends StyledLayoutBase implements ILayoutStyleProperties
+ public class TileHorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
{
/**
* constructor.
@@ -56,7 +56,7 @@ package org.apache.royale.jewel.beads.layouts
super();
}
- public static const LAYOUT_TYPE_NAMES:String = "layout tile";
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal tile";
/**
* Add class selectors when the component is addedToParent
@@ -74,9 +74,6 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostComponent.containsClass("layout"))
- hostComponent.removeClass("layout");
- hostComponent.addClass("layout");
if(hostComponent.containsClass("tile"))
hostComponent.removeClass("tile");
hostComponent.addClass("tile");
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index c4c34aa..d45e448 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -72,6 +72,9 @@ $gap-size: 10px !default
> *
flex: 0 0 auto !important
+ &.tile
+ flex-wrap: wrap
+
// FormItemLayout
&.formitem
width: 100%
@@ -128,10 +131,13 @@ $gap-size: 10px !default
> *
flex: 0 0 auto !important
+ &.tile
+ flex-wrap: wrap
+
// FormLayout (consider for now Forms are always vertical)
&.form
width: 100%
-
+
// FormItemLayout
// &.formitem
// width: 100%
@@ -142,11 +148,6 @@ $gap-size: 10px !default
margin-top: 0px
> *
margin-top: $gap + $i * $gap-step
-
- // Tile
- &.tile
- flex-flow: row wrap
- align-items: flex-start
// this not compile******
// &.gap
[royale-asjs] 01/17: layoutbase: change import
Posted by ca...@apache.org.
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 041b7485857f5e0f1d74d2973af48930e036ff64
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 12:55:05 2020 +0200
layoutbase: change import
---
.../Core/src/main/royale/org/apache/royale/core/LayoutBase.as | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
index 64b100f..deda30d 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
@@ -18,6 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.core
{
+ COMPILE::SWF
+ {
+ import org.apache.royale.events.IEventDispatcher;
+ }
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -30,7 +34,6 @@ package org.apache.royale.core
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.layout.MarginData;
import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.utils.sendStrandEvent;
/**
[royale-asjs] 11/17: tour-de-jewel: improve tilelayout example
Posted by ca...@apache.org.
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 939d7c8d632ae5b1095e291cf68d1eab56ebb0a3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jun 3 19:35:26 2020 +0200
tour-de-jewel: improve tilelayout example
---
.../src/main/royale/LayoutsPlayGround.mxml | 22 +++++++++++++---------
1 file changed, 13 insertions(+), 9 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index 527c64d..830708f 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -218,26 +218,30 @@ limitations under the License.
<j:CardActions itemsHorizontalAlign = "itemsCenter">
<j:VGroup>
<j:VGroup>
- <j:Label text="columnCount = {tl.columnCount}"/>
- <j:HSlider width="200" value="4" minimum="1" maximum="6" valueChange="tl.columnCount = event.target.value"/>
+ <j:Label text="requestedColumnCount"/>
+ <j:HSlider width="200" value="4" minimum="1" maximum="8" valueChange="tl.requestedColumnCount = event.target.value"/>
</j:VGroup>
<j:VGroup>
<j:Label text="columnWidth"/>
- <j:HSlider width="200" value="100" minimum="50" maximum="150" valueChange="tl.columnWidth = event.target.value"/>
+ <j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="tl.columnWidth = event.target.value"/>
</j:VGroup>
<j:VGroup>
- <j:Label text="rowHeight"/>
- <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.rowHeight = event.target.value"/>
+ <j:Label text="horizontalGap"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="tl.horizontalGap = event.target.value"/>
</j:VGroup>
</j:VGroup>
<j:VGroup>
<j:VGroup>
- <j:Label text="verticalGap"/>
- <j:HSlider width="200" value="6" minimum="0" maximum="10" valueChange="tl.verticalGap = event.target.value"/>
+ <j:Label text="requestedRowCount"/>
+ <j:HSlider width="200" value="2" minimum="1" maximum="8" valueChange="tl.requestedRowCount = event.target.value"/>
</j:VGroup>
<j:VGroup>
- <j:Label text="horizontalGap"/>
- <j:HSlider width="200" value="6" minimum="0" maximum="10" valueChange="tl.horizontalGap = event.target.value"/>
+ <j:Label text="rowHeight"/>
+ <j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="tl.rowHeight = event.target.value"/>
+ </j:VGroup>
+ <j:VGroup>
+ <j:Label text="verticalGap"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="tl.verticalGap = event.target.value"/>
</j:VGroup>
</j:VGroup>
</j:CardActions>
[royale-asjs] 10/17: jewel-tilelayout: make it work very similar to
Flex TileLayout
Posted by ca...@apache.org.
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 ce8ee47f55c80f8ddcfad29fed7ee1b48313077c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jun 3 19:35:07 2020 +0200
jewel-tilelayout: make it work very similar to Flex TileLayout
---
.../royale/jewel/beads/layouts/TileLayout.as | 137 ++++++++++++++++-----
1 file changed, 106 insertions(+), 31 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 5448ceb..a6ebf2e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -83,28 +83,51 @@ package org.apache.royale.jewel.beads.layouts
}
}
- private var _columnCount:Number = 4;
+ private var _columnCount:int = -1;
/**
* The number of tiles to fit horizontally into the layout.
+ * Contain the actual column count.
+ * The default value is -1.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("columnCountChanged")]
- public function get columnCount():Number
+ public function get columnCount():int
{
return _columnCount;
}
- public function set columnCount(value:Number):void
+
+ private var _requestedColumnCount:int = -1;
+ /**
+ * Number of columns to be displayed.
+ * Set to -1 to allow the TileLayout to determine the column count automatically.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("requestedColumnCountChanged")]
+ public function get requestedColumnCount():int
+ {
+ return _requestedColumnCount;
+ }
+ public function set requestedColumnCount(value:int):void
{
- _columnCount = value;
+ _requestedColumnCount = value;
layout();
}
private var _columnWidth:Number = Number.NaN;
/**
+ * Contain the actual column width, in pixels.
+ * If not explicitly set, the column width is determined from the width of the widest element.
+ * If the columnAlign property is set to "justifyUsingWidth", the column width grows to the container width to justify the fully-visible columns.
+ * The default value is NaN.
+ * This property can be used as the source for data binding.
+ *
* The width of each column, in pixels. If left unspecified, the
* columnWidth is determined by dividing the columnCount into the
* strand's bounding box width.
@@ -125,9 +148,11 @@ package org.apache.royale.jewel.beads.layouts
layout();
}
- private var _rowCount:Number = 4;
+ private var _rowCount:int = -1;
/**
* The number of tiles to fit horizontally into the layout.
+ * The row count.
+ * The default value is -1.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -135,18 +160,42 @@ package org.apache.royale.jewel.beads.layouts
* @productversion Royale 0.9.8
*/
[Bindable("rowCountChanged")]
- public function get rowCount():Number
+ public function get rowCount():int
{
return _rowCount;
}
- public function set rowCount(value:Number):void
+
+ private var _requestedRowCount:int = -1;
+ /**
+ * Number of rows to be displayed.
+ * Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.
+ * If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.
+ * The default value is -1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ [Bindable("requestedRowCountChanged")]
+ public function get requestedRowCount():int
+ {
+ return _requestedRowCount;
+ }
+ public function set requestedRowCount(value:int):void
{
- _rowCount = value;
+ _requestedRowCount = value;
layout();
}
private var _rowHeight:Number = Number.NaN;
/**
+ * The row height, in pixels.
+ * If not explicitly set, the row height is determined from the maximum of elements' height.
+ * If rowAlign is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.
+ * The default value is NaN.
+ * This property can be used as the source for data binding.
+ *
* The height of each row, in pixels. If left unspecified, the
* rowHeight is determine by dividing the possible number of rows
* into the strand's bounding box height.
@@ -193,6 +242,7 @@ package org.apache.royale.jewel.beads.layouts
{
_horizontalGap = value;
horizontalGapInitialized = true;
+ // layout();
}
/**
@@ -221,6 +271,7 @@ package org.apache.royale.jewel.beads.layouts
{
_verticalGap = value;
verticalGapInitialized = true;
+ // layout();
}
/**
@@ -333,12 +384,17 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
trace(" **** TILE LAYOUT ****");
+
+ trace(" - requestedColumnCount", requestedColumnCount);
trace(" - columnCount", columnCount);
trace(" - columnWidth", columnWidth);
trace(" - horizontalGap", horizontalGap);
+
+ trace(" - requestedRowCount", requestedRowCount);
trace(" - rowCount", rowCount);
trace(" - rowHeight", rowHeight);
trace(" - verticalGap", verticalGap);
+
var i:int;
var n:int;
var child:UIBase;
@@ -350,12 +406,6 @@ package org.apache.royale.jewel.beads.layouts
if (n === 0) return false;
- var realN:int = n;
- for (i = 0; i < n; i++)
- {
- child = contentView.getElementAt(i) as UIBase;
- if (!child.visible) realN--;
- }
useWidth = columnWidth;
trace(" - useWidth", useWidth);
@@ -365,9 +415,23 @@ package org.apache.royale.jewel.beads.layouts
trace(" - needWidth", needWidth);
var needHeight:Boolean = isNaN(useHeight);
trace(" - needHeight", needHeight);
+
+ var realN:int = n;
+ var widestTile:Number = 0; // hold the widest tile
+ var tallestTile:Number = 0; // hold the widest tile
+ for (i = 0; i < n; i++)
+ {
+ child = contentView.getElementAt(i) as UIBase;
+ if (!child.visible) realN--;
+ if (needWidth && child.width > widestTile) widestTile = child.width;
+ if (needWidth && child.height > tallestTile) tallestTile = child.height;
+ }
+ trace(" - widestTile", widestTile);
+ trace(" - tallestTile", tallestTile);
+
if(needHeight || needWidth)
{
- trace(" -- calculate useWidth & useHeight");
+ trace(" -- calculate useWidth & useHeight");
var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
trace(" - adjustedWidth", adjustedHostWidth);
@@ -375,25 +439,36 @@ package org.apache.royale.jewel.beads.layouts
trace(" - adjustedHeight", adjustedHostHeight);
if (needWidth)
{
- useWidth = Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
- trace(" -- useWidth", useWidth);
+ // calculate columnCount in base of the widesTile
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
} else {
- // we have tile width so calculate columnCount
- _columnCount = Math.floor((adjustedHostWidth + horizontalGap)/ useWidth);
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
}
+ trace(" -- _columnCount", _columnCount);
+ trace(" -- useWidth", useWidth);
+
+ // given the width and total number of items, how many rows?
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + verticalGap));
+ _rowCount = Math.ceil(realN / columnCount);
+ trace(" -- _rowCount", _rowCount);
if (needHeight)
- {
- // given the width and total number of items, how many rows?
- var numRows:Number = Math.ceil(realN / columnCount);
- trace(" -- numRows", numRows);
- if (host.isHeightSizedToContent()) useHeight = 30; // default height
- else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
- trace(" -- useHeight", useHeight);
+ {
+ useHeight = tallestTile;
+
+ // if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ // else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
+ // trace(" -- useHeight", useHeight);
} else {
- // we have tile height so calculate rowCount
- _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + verticalGap));
+ useHeight = _rowHeight;
}
+ // else {
+ // // we have tile height so calculate rowCount
+ // _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
+ // }
}
trace(" -- useHeight", useHeight);
@@ -420,9 +495,9 @@ package org.apache.royale.jewel.beads.layouts
//child.setDisplayStyleForLayout('inline-flex');
//if the parent width/height not explicitly set, we can't calculate the child width/height
if(useWidth > 0)
- child.width = useWidth - horizontalGap;
+ child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
if(useHeight > 0)
- child.height = useHeight - verticalGap;
+ child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
child.dispatchEvent('sizeChanged');
}
return true;
[royale-asjs] 15/17: jewel-tilehorizontallayout: latest fixes and
clean up
Posted by ca...@apache.org.
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 dac30fa12ae8f0bb307cabac1515b011af5a4283
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 15:30:24 2020 +0200
jewel-tilehorizontallayout: latest fixes and clean up
---
.../jewel/beads/layouts/TileHorizontalLayout.as | 173 +++++++++------------
1 file changed, 74 insertions(+), 99 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
index b48b1f0..b1482d5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
@@ -94,6 +94,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.8
*/
+ [Bindable("columnCountChanged")]
public function get columnCount():int
{
return _columnCount;
@@ -116,6 +117,8 @@ package org.apache.royale.jewel.beads.layouts
}
public function set requestedColumnCount(value:int):void
{
+ if(!isNaN(value))
+ _columnWidth = NaN;
_requestedColumnCount = value;
layout();
}
@@ -144,6 +147,8 @@ package org.apache.royale.jewel.beads.layouts
}
public function set columnWidth(value:Number):void
{
+ if(!isNaN(value))
+ _requestedColumnCount = -1;
_columnWidth = value;
layout();
}
@@ -165,29 +170,6 @@ package org.apache.royale.jewel.beads.layouts
return _rowCount;
}
- private var _requestedRowCount:int = -1;
- /**
- * Number of rows to be displayed.
- * Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.
- * If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.
- * The default value is -1.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("requestedRowCountChanged")]
- public function get requestedRowCount():int
- {
- return _requestedRowCount;
- }
- public function set requestedRowCount(value:int):void
- {
- _requestedRowCount = value;
- layout();
- }
-
private var _rowHeight:Number = Number.NaN;
/**
* The row height, in pixels.
@@ -242,7 +224,7 @@ package org.apache.royale.jewel.beads.layouts
{
_horizontalGap = value;
horizontalGapInitialized = true;
- // layout();
+ layout();
}
/**
@@ -271,7 +253,7 @@ package org.apache.royale.jewel.beads.layouts
{
_verticalGap = value;
verticalGapInitialized = true;
- // layout();
+ layout();
}
/**
@@ -325,8 +307,8 @@ package org.apache.royale.jewel.beads.layouts
var xpos:Number = 0;
var ypos:Number = 0;
- var useWidth:Number = columnWidth;
- var useHeight:Number = rowHeight;
+ var useWidth:Number = _columnWidth;
+ var useHeight:Number = _rowHeight;
var n:Number = area.numElements;
if (n == 0) return false;
@@ -340,10 +322,10 @@ package org.apache.royale.jewel.beads.layouts
if (testChild == null || !testChild.visible) realN--;
}
- if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / columnCount); // + gap
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / _columnCount); // + gap
if (isNaN(useHeight)) {
// given the width and total number of items, how many rows?
- var numRows:Number = Math.ceil(realN/columnCount);
+ var numRows:Number = Math.ceil(realN/_columnCount);
if (host.isHeightSizedToContent()) useHeight = 30; // default height
else useHeight = Math.floor(adjustedHeight / numRows);
}
@@ -363,7 +345,7 @@ package org.apache.royale.jewel.beads.layouts
xpos += useWidth;
maxWidth = Math.max(maxWidth,xpos);
- var test:Number = (i+1)%columnCount;
+ var test:Number = (i+1)%_columnCount;
if (test == 0) {
xpos = 0;
@@ -372,7 +354,7 @@ package org.apache.royale.jewel.beads.layouts
}
}
- maxWidth = Math.max(maxWidth, columnCount*useWidth);
+ maxWidth = Math.max(maxWidth, _columnCount*useWidth);
maxHeight = Math.max(maxHeight, numRows*useHeight);
// Only return true if the contentView needs to be larger; that new
@@ -383,17 +365,16 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- trace(" **** TILE LAYOUT ****");
+ // trace(" **** TILE LAYOUT ****");
- trace(" - requestedColumnCount", requestedColumnCount);
- trace(" - columnCount", columnCount);
- trace(" - columnWidth", columnWidth);
- trace(" - horizontalGap", horizontalGap);
+ // trace(" - requestedColumnCount", _requestedColumnCount);
+ // trace(" - columnCount", _columnCount);
+ // trace(" - columnWidth", _columnWidth);
+ // trace(" - horizontalGap", _horizontalGap);
- trace(" - requestedRowCount", requestedRowCount);
- trace(" - rowCount", rowCount);
- trace(" - rowHeight", rowHeight);
- trace(" - verticalGap", verticalGap);
+ // trace(" - rowCount", _rowCount);
+ // trace(" - rowHeight", _rowHeight);
+ // trace(" - verticalGap", _verticalGap);
var i:int;
var n:int;
@@ -406,15 +387,14 @@ package org.apache.royale.jewel.beads.layouts
if (n === 0) return false;
-
- useWidth = columnWidth;
- trace(" - useWidth", useWidth);
- useHeight = rowHeight;
- trace(" - useHeight", useHeight);
+ useWidth = _columnWidth;
+ // trace(" - useWidth", useWidth);
+ useHeight = _rowHeight;
+ // trace(" - useHeight", useHeight);
var needWidth:Boolean = isNaN(useWidth);
- trace(" - needWidth", needWidth);
+ // trace(" - needWidth", needWidth);
var needHeight:Boolean = isNaN(useHeight);
- trace(" - needHeight", needHeight);
+ // trace(" - needHeight", needHeight);
var realN:int = n;
var widestTile:Number = 0; // hold the widest tile
@@ -426,82 +406,77 @@ package org.apache.royale.jewel.beads.layouts
if (needWidth && child.width > widestTile) widestTile = child.width;
if (needWidth && child.height > tallestTile) tallestTile = child.height;
}
- trace(" - widestTile", widestTile);
- trace(" - tallestTile", tallestTile);
+ // trace(" - widestTile", widestTile);
+ // trace(" - tallestTile", tallestTile);
- if(needHeight || needWidth)
+
+ // trace(" -- calculate useWidth & useHeight");
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ // trace(" - adjustedWidth", adjustedHostWidth);
+ var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ // trace(" - adjustedHeight", adjustedHostHeight);
+
+ if (needWidth)
{
- trace(" -- calculate useWidth & useHeight");
- var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
- var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
- trace(" - adjustedWidth", adjustedHostWidth);
- var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
- trace(" - adjustedHeight", adjustedHostHeight);
- if (needWidth)
- {
- // calculate columnCount in base of the widesTile
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- } else {
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- }
- trace(" -- _columnCount", _columnCount);
- trace(" -- useWidth", useWidth);
+ // calculate columnCount based of the widesTile
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + _horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - _horizontalGap) / _columnCount);
+ } else {
+ // calculate columnCount based on columnWidth
+ _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + _horizontalGap));
+ useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - _horizontalGap) / _columnCount);
+ }
+ // trace(" -- _columnCount", _columnCount);
+ // trace(" -- useWidth", useWidth);
- // given the width and total number of items, how many rows?
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + verticalGap));
- _rowCount = Math.ceil(realN / columnCount);
- trace(" -- _rowCount", _rowCount);
-
- if (needHeight)
- {
- useHeight = tallestTile;
-
- // if (host.isHeightSizedToContent()) useHeight = 30; // default height
- // else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
- // trace(" -- useHeight", useHeight);
- } else {
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + verticalGap));
- useHeight = _rowHeight;
- }
- // else {
- // // we have tile height so calculate rowCount
- // _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
- // }
+ // given the width and total number of items, how many rows?
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + _verticalGap));
+ _rowCount = Math.ceil(realN / _columnCount);
+ // trace(" -- _rowCount", _rowCount);
+
+ if (needHeight)
+ {
+ useHeight = tallestTile;
+ // if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ // else useHeight = Math.floor((adjustedHostHeight + _verticalGap) / numRows);
+ // trace(" -- useHeight", useHeight);
+ } else {
+ // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + _verticalGap));
+ useHeight = _rowHeight;
}
+ // trace(" -- useHeight", useHeight);
- trace(" -- useHeight", useHeight);
for (i = 0; i < n; i++)
{
child = contentView.getElementAt(i) as UIBase;
if (!child.visible) continue;
- trace(i, i % columnCount, i % rowCount);
+ // trace(i, i % _columnCount, i % _rowCount);
// add horizontalGap
- if(i % columnCount != 0)
- child.positioner.style.marginLeft = horizontalGap + "px";
+ if(i % _columnCount != 0)
+ child.positioner.style.marginLeft = _horizontalGap + "px";
else
child.positioner.style.marginLeft = null;
// add verticalGap
- if(i >= columnCount)
- child.positioner.style.marginTop = verticalGap + "px";
+ if(i >= _columnCount)
+ child.positioner.style.marginTop = _verticalGap + "px";
else
child.positioner.style.marginTop = null;
- //child.setDisplayStyleForLayout('inline-flex');
//if the parent width/height not explicitly set, we can't calculate the child width/height
if(useWidth > 0)
- child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
+ child.width = _requestedColumnCount == -1 ? useWidth : useWidth - _horizontalGap;
if(useHeight > 0)
- child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
+ child.height = useHeight;// - _verticalGap;
+ // child.height = _requestedColumnCount == -1 ? useHeight : useHeight - _verticalGap;
- // avoid a tile from the next row stay in the previous row due to flexbox algorithm
- if(i % columnCount == columnCount - 1)
- child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + horizontalGap) * (_columnCount - 1))) + "px";
+ // add dummy margin: avoid a tile from the next row stay in the previous row due to flexbox algorithm
+ if(i % _columnCount == _columnCount - 1)
+ child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + _horizontalGap) * (_columnCount - 1))) + "px";
else
child.positioner.style.marginRight = null;
[royale-asjs] 17/17: tour-de-jewel: improve tilelayout example
Posted by ca...@apache.org.
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 ddf707cb19b1c4399109aef859b3a14dbad44697
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 15:36:50 2020 +0200
tour-de-jewel: improve tilelayout example
---
.../TourDeJewel/src/main/royale/LayoutsPlayGround.mxml | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index 830708f..b11399b 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -192,13 +192,13 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<j:CardHeader>
- <j:CardTitle text="TileLayout" className="primary-normal"/>
+ <j:CardTitle text="TileHorizontalLayout" className="primary-normal"/>
</j:CardHeader>
<j:CardPrimaryContent>
- <j:Group className="wrapper" width="100%" height="200">
+ <j:Group className="wrapper" width="100%">
<j:beads>
- <j:TileLayout localId="tl" horizontalGap="6" verticalGap="6" waitForSize="true"/>
+ <j:TileHorizontalLayout localId="tl" waitForSize="true"/>
</j:beads>
<j:Button text="1" emphasis="primary" width="60" height="60"/>
<j:Button text="2" emphasis="secondary" width="60" height="60"/>
@@ -218,10 +218,6 @@ limitations under the License.
<j:CardActions itemsHorizontalAlign = "itemsCenter">
<j:VGroup>
<j:VGroup>
- <j:Label text="requestedColumnCount"/>
- <j:HSlider width="200" value="4" minimum="1" maximum="8" valueChange="tl.requestedColumnCount = event.target.value"/>
- </j:VGroup>
- <j:VGroup>
<j:Label text="columnWidth"/>
<j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="tl.columnWidth = event.target.value"/>
</j:VGroup>
@@ -229,12 +225,16 @@ limitations under the License.
<j:Label text="horizontalGap"/>
<j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="tl.horizontalGap = event.target.value"/>
</j:VGroup>
+ <j:VGroup>
+ <j:Label text="requestedColumnCount"/>
+ <j:HSlider width="200" value="4" minimum="1" maximum="8" valueChange="tl.requestedColumnCount = event.target.value"/>
+ </j:VGroup>
</j:VGroup>
<j:VGroup>
- <j:VGroup>
+ <!-- <j:VGroup>
<j:Label text="requestedRowCount"/>
<j:HSlider width="200" value="2" minimum="1" maximum="8" valueChange="tl.requestedRowCount = event.target.value"/>
- </j:VGroup>
+ </j:VGroup> -->
<j:VGroup>
<j:Label text="rowHeight"/>
<j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="tl.rowHeight = event.target.value"/>
[royale-asjs] 14/17: jewel-tilelayout: restore old code since we
are splitting in 2 classes. This class will be removed soon
Posted by ca...@apache.org.
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 e0df55e4a970bf77301b87926df0ff7e73881a78
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 11:58:23 2020 +0200
jewel-tilelayout: restore old code since we are splitting in 2 classes. This class will be removed soon
---
.../royale/jewel/beads/layouts/TileLayout.as | 369 ++++++---------------
1 file changed, 110 insertions(+), 259 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 0df34e0..e91378c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -18,22 +18,23 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::SWF
+ COMPILE::JS
{
- import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
}
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
- import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.layout.ILayoutStyleProperties;
- import org.apache.royale.events.Event;
/**
* The TileLayout class bead sizes and positions the elements it manages into rows and columns.
* The size of each element is determined either by setting TileLayout's columnWidth and rowHeight
- * properties, or having the tile size determined by factoring the columnCount into the area assigned
+ * properties, or having the tile size determined by factoring the numColumns into the area assigned
* for the layout.
*
* @langversion 3.0
@@ -41,7 +42,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class TileLayout extends StyledLayoutBase implements ILayoutStyleProperties
+ public class TileLayout extends LayoutBase implements ILayoutStyleProperties
{
/**
* constructor.
@@ -56,80 +57,30 @@ package org.apache.royale.jewel.beads.layouts
super();
}
- public static const LAYOUT_TYPE_NAMES:String = "layout tile";
-
- /**
- * Add class selectors when the component is addedToParent
- * Otherwise component will not get the class selectors when
- * perform "removeElement" and then "addElement"
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- override public function beadsAddedHandler(event:Event = null):void
- {
- super.beadsAddedHandler();
-
- COMPILE::JS
- {
- if (hostComponent.containsClass("layout"))
- hostComponent.removeClass("layout");
- hostComponent.addClass("layout");
- if(hostComponent.containsClass("tile"))
- hostComponent.removeClass("tile");
- hostComponent.addClass("tile");
- }
- }
+ private var _numColumns:Number = 4;
+ private var _columnWidth:Number = Number.NaN;
+ private var _rowHeight:Number = Number.NaN;
- private var _columnCount:int = -1;
/**
* The number of tiles to fit horizontally into the layout.
- * Contain the actual column count.
- * The default value is -1.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get columnCount():int
+ public function get numColumns():Number
{
- return _columnCount;
+ return _numColumns;
}
-
- private var _requestedColumnCount:int = -1;
- /**
- * Number of columns to be displayed.
- * Set to -1 to allow the TileLayout to determine the column count automatically.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("requestedColumnCountChanged")]
- public function get requestedColumnCount():int
- {
- return _requestedColumnCount;
- }
- public function set requestedColumnCount(value:int):void
+ public function set numColumns(value:Number):void
{
- _requestedColumnCount = value;
- layout();
+ _numColumns = value;
}
- private var _columnWidth:Number = Number.NaN;
/**
- * Contain the actual column width, in pixels.
- * If not explicitly set, the column width is determined from the width of the widest element.
- * If the columnAlign property is set to "justifyUsingWidth", the column width grows to the container width to justify the fully-visible columns.
- * The default value is NaN.
- * This property can be used as the source for data binding.
- *
* The width of each column, in pixels. If left unspecified, the
- * columnWidth is determined by dividing the columnCount into the
+ * columnWidth is determined by dividing the numColumns into the
* strand's bounding box width.
*
* @langversion 3.0
@@ -137,7 +88,6 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("columnWidthChanged")]
public function get columnWidth():Number
{
return _columnWidth;
@@ -145,57 +95,9 @@ package org.apache.royale.jewel.beads.layouts
public function set columnWidth(value:Number):void
{
_columnWidth = value;
- layout();
- }
-
- private var _rowCount:int = -1;
- /**
- * The number of tiles to fit horizontally into the layout.
- * The row count.
- * The default value is -1.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("rowCountChanged")]
- public function get rowCount():int
- {
- return _rowCount;
- }
-
- private var _requestedRowCount:int = -1;
- /**
- * Number of rows to be displayed.
- * Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.
- * If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.
- * The default value is -1.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("requestedRowCountChanged")]
- public function get requestedRowCount():int
- {
- return _requestedRowCount;
- }
- public function set requestedRowCount(value:int):void
- {
- _requestedRowCount = value;
- layout();
}
- private var _rowHeight:Number = Number.NaN;
/**
- * The row height, in pixels.
- * If not explicitly set, the row height is determined from the maximum of elements' height.
- * If rowAlign is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.
- * The default value is NaN.
- * This property can be used as the source for data binding.
- *
* The height of each row, in pixels. If left unspecified, the
* rowHeight is determine by dividing the possible number of rows
* into the strand's bounding box height.
@@ -205,7 +107,6 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("rowHeightChanged")]
public function get rowHeight():Number
{
return _rowHeight;
@@ -213,65 +114,64 @@ package org.apache.royale.jewel.beads.layouts
public function set rowHeight(value:Number):void
{
_rowHeight = value;
- layout();
}
/**
* @private
*/
- private var horizontalGapInitialized:Boolean;
- public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
- private var _horizontalGap:Number = 0;
+ private var verticalGapInitialized:Boolean;
+ public static const VERTICAL_GAP_STYLE:String = "verticalGap"
+ private var _verticalGap:Number = 0;
+
/**
- * The horizontalGap between items.
+ * The verticalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("horizontalGapChanged")]
- public function get horizontalGap():Number
+ public function get verticalGap():Number
{
- return _horizontalGap;
+ return _verticalGap;
}
+
/**
* @private
*/
- public function set horizontalGap(value:Number):void
+ public function set verticalGap(value:Number):void
{
- _horizontalGap = value;
- horizontalGapInitialized = true;
- // layout();
+ _verticalGap = value;
+ verticalGapInitialized = true;
}
/**
* @private
*/
- private var verticalGapInitialized:Boolean;
- public static const VERTICAL_GAP_STYLE:String = "verticalGap"
- private var _verticalGap:Number = 0;
+ private var horizontalGapInitialized:Boolean;
+ public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
+ private var _horizontalGap:Number = 0;
+
/**
- * The verticalGap between items.
+ * The horizontalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("verticalGapChanged")]
- public function get verticalGap():Number
+ public function get horizontalGap():Number
{
- return _verticalGap;
+ return _horizontalGap;
}
+
/**
* @private
*/
- public function set verticalGap(value:Number):void
+ public function set horizontalGap(value:Number):void
{
- _verticalGap = value;
- verticalGapInitialized = true;
- // layout();
+ _horizontalGap = value;
+ horizontalGapInitialized = true;
}
/**
@@ -287,25 +187,25 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- // override public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
- // {
- // var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
- // if (cssValue !== undefined)
- // {
- // switch(cssProperty)
- // {
- // case VERTICAL_GAP_STYLE:
- // if(!verticalGapInitialized)
- // {
- // verticalGap = Number(cssValue);
- // }
- // break;
- // default:
- // break;
- // }
- // }
- // }
-
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case VERTICAL_GAP_STYLE:
+ if(!verticalGapInitialized)
+ {
+ verticalGap = Number(cssValue);
+ }
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
/**
* Layout children
*
@@ -340,10 +240,10 @@ package org.apache.royale.jewel.beads.layouts
if (testChild == null || !testChild.visible) realN--;
}
- if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / columnCount); // + gap
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / numColumns); // + verticalGap
if (isNaN(useHeight)) {
// given the width and total number of items, how many rows?
- var numRows:Number = Math.ceil(realN/columnCount);
+ var numRows:Number = Math.ceil(realN/numColumns);
if (host.isHeightSizedToContent()) useHeight = 30; // default height
else useHeight = Math.floor(adjustedHeight / numRows);
}
@@ -363,7 +263,7 @@ package org.apache.royale.jewel.beads.layouts
xpos += useWidth;
maxWidth = Math.max(maxWidth,xpos);
- var test:Number = (i+1)%columnCount;
+ var test:Number = (i+1)%numColumns;
if (test == 0) {
xpos = 0;
@@ -372,7 +272,7 @@ package org.apache.royale.jewel.beads.layouts
}
}
- maxWidth = Math.max(maxWidth, columnCount*useWidth);
+ maxWidth = Math.max(maxWidth, numColumns*useWidth);
maxHeight = Math.max(maxHeight, numRows*useHeight);
// Only return true if the contentView needs to be larger; that new
@@ -383,129 +283,80 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- trace(" **** TILE LAYOUT ****");
-
- trace(" - requestedColumnCount", requestedColumnCount);
- trace(" - columnCount", columnCount);
- trace(" - columnWidth", columnWidth);
- trace(" - horizontalGap", horizontalGap);
-
- trace(" - requestedRowCount", requestedRowCount);
- trace(" - rowCount", rowCount);
- trace(" - rowHeight", rowHeight);
- trace(" - verticalGap", verticalGap);
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ var c:UIBase = (contentView as UIBase);
+ c.element.classList.add("layout");
+ c.element.classList.add("tile");
+ var children:Array = contentView.internalChildren();
var i:int;
- var n:int;
- var child:UIBase;
- var useWidth:Number;
- var useHeight:Number;
-
- var contentView:ILayoutView = layoutView as ILayoutView;
- n = contentView.numElements;
-
+ var n:int = children.length;
if (n === 0) return false;
-
- useWidth = columnWidth;
- trace(" - useWidth", useWidth);
- useHeight = rowHeight;
- trace(" - useHeight", useHeight);
- var needWidth:Boolean = isNaN(useWidth);
- trace(" - needWidth", needWidth);
- var needHeight:Boolean = isNaN(useHeight);
- trace(" - needHeight", needHeight);
-
var realN:int = n;
- var widestTile:Number = 0; // hold the widest tile
- var tallestTile:Number = 0; // hold the widest tile
for (i = 0; i < n; i++)
{
- child = contentView.getElementAt(i) as UIBase;
+ child = children[i].royale_wrapper;
if (!child.visible) realN--;
- if (needWidth && child.width > widestTile) widestTile = child.width;
- if (needWidth && child.height > tallestTile) tallestTile = child.height;
}
- trace(" - widestTile", widestTile);
- trace(" - tallestTile", tallestTile);
- if(needHeight || needWidth)
+ var useWidth:Number = columnWidth;
+ var useHeight:Number = rowHeight;
+ var needWidth:Boolean = isNaN(useWidth);
+ var needHeight:Boolean = isNaN(useHeight);
+
+ // given the width and total number of items, how many rows?
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ var numRows:Number = Math.ceil(realN / (numColumns + _verticalGap));
+
+ if(needWidth || needHeight)
{
- trace(" -- calculate useWidth & useHeight");
- var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
- var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
- trace(" - adjustedWidth", adjustedHostWidth);
- var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
- trace(" - adjustedHeight", adjustedHostHeight);
if (needWidth)
- {
- // calculate columnCount in base of the widesTile
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- } else {
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- }
- trace(" -- _columnCount", _columnCount);
- trace(" -- useWidth", useWidth);
-
- // given the width and total number of items, how many rows?
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + verticalGap));
- _rowCount = Math.ceil(realN / columnCount);
- trace(" -- _rowCount", _rowCount);
+ useWidth = Math.floor(adjustedWidth / numColumns);// + _horizontalGap;
if (needHeight)
- {
- useHeight = tallestTile;
-
- // if (host.isHeightSizedToContent()) useHeight = 30; // default height
- // else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
- // trace(" -- useHeight", useHeight);
- } else {
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + verticalGap));
- useHeight = _rowHeight;
+ {
+ if (host.isHeightSizedToContent())
+ useHeight = 30; // default height
+ else
+ useHeight = Math.floor(adjustedHeight / numRows);// + _verticalGap;
}
- // else {
- // // we have tile height so calculate rowCount
- // _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
- // }
}
+
+ var child:UIBase;
+ var numCols:Number = Math.floor(1+(adjustedWidth - useWidth) / (useWidth + _horizontalGap));
- trace(" -- useHeight", useHeight);
for (i = 0; i < n; i++)
{
- child = contentView.getElementAt(i) as UIBase;
-
+ child = children[i].royale_wrapper;
if (!child.visible) continue;
+ child.width = useWidth;
+ child.height = useHeight;
+
+ var childW:WrappedHTMLElement = children[i];
+ if (childW == null) continue;
- trace(i, i % columnCount, i % rowCount);
-
- // add horizontalGap
- if(i % columnCount != 0)
- child.positioner.style.marginLeft = horizontalGap + "px";
- else
- child.positioner.style.marginLeft = null;
-
- // add verticalGap
- if(i >= columnCount)
- child.positioner.style.marginTop = verticalGap + "px";
+ if(i < numCols)
+ {
+ childW.style.marginTop = 0 + 'px';//_paddingTop
+ }
else
- child.positioner.style.marginTop = null;
+ {
+ childW.style.marginTop = _verticalGap + 'px';
+ }
- //child.setDisplayStyleForLayout('inline-flex');
- //if the parent width/height not explicitly set, we can't calculate the child width/height
- if(useWidth > 0)
- child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
- if(useHeight > 0)
- child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
-
- // avoid a tile from the next row stay in the previous row due to flexbox algorithm
- if(i % columnCount == columnCount - 1)
- child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + horizontalGap) * (_columnCount - 1))) + "px";
+ if(i % numCols)
+ {
+ childW.style.marginLeft = _horizontalGap + 'px';
+ }
else
- child.positioner.style.marginRight = null;
-
- child.dispatchEvent('sizeChanged');
+ {
+ childW.style.marginLeft = 0 + 'px';//_paddingLeft
+ }
+
+ childW.royale_wrapper.dispatchEvent('sizeChanged');
}
return true;
}
[royale-asjs] 07/17: tour-de-jewel: improve tilelayout example
Posted by ca...@apache.org.
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 1e9d562e651eb395a8bd8032dddd7e8a471bdecb
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 23:52:17 2020 +0200
tour-de-jewel: improve tilelayout example
---
examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index 03081a2..cc32c4a 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -198,7 +198,7 @@ limitations under the License.
<j:Group className="wrapper" width="100%" height="200">
<j:beads>
- <j:TileLayout localId="tl" horizontalGap="6" waitForSize="true"/>
+ <j:TileLayout localId="tl" horizontalGap="6" verticalGap="6" waitForSize="true"/>
</j:beads>
<j:Button text="1" emphasis="primary" width="60" height="60"/>
<j:Button text="2" emphasis="secondary" width="60" height="60"/>
@@ -218,7 +218,7 @@ limitations under the License.
<j:CardActions itemsHorizontalAlign = "itemsCenter">
<j:VGroup>
<j:VGroup>
- <j:Label text="columnCount"/>
+ <j:Label text="columnCount = {tl.columnCount}"/>
<j:HSlider width="200" value="3" minimum="1" maximum="6" valueChange="tl.columnCount = event.target.value"/>
</j:VGroup>
<j:VGroup>
@@ -233,11 +233,11 @@ limitations under the License.
<j:VGroup>
<j:VGroup>
<j:Label text="verticalGap"/>
- <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.verticalGap = event.target.value"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="10" valueChange="tl.verticalGap = event.target.value"/>
</j:VGroup>
<j:VGroup>
<j:Label text="horizontalGap"/>
- <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.horizontalGap = event.target.value"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="10" valueChange="tl.horizontalGap = event.target.value"/>
</j:VGroup>
</j:VGroup>
</j:CardActions>
[royale-asjs] 12/17: jewel-tilelayout: fix final issues
Posted by ca...@apache.org.
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 bd3c5f3bf33090aaa872407f9887fadb8eb398d8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 00:32:25 2020 +0200
jewel-tilelayout: fix final issues
---
.../org/apache/royale/jewel/beads/layouts/TileLayout.as | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index a6ebf2e..0df34e0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -441,10 +441,10 @@ package org.apache.royale.jewel.beads.layouts
{
// calculate columnCount in base of the widesTile
_columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
+ useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
} else {
_columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
+ useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
}
trace(" -- _columnCount", _columnCount);
trace(" -- useWidth", useWidth);
@@ -498,6 +498,13 @@ package org.apache.royale.jewel.beads.layouts
child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
if(useHeight > 0)
child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
+
+ // avoid a tile from the next row stay in the previous row due to flexbox algorithm
+ if(i % columnCount == columnCount - 1)
+ child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + horizontalGap) * (_columnCount - 1))) + "px";
+ else
+ child.positioner.style.marginRight = null;
+
child.dispatchEvent('sizeChanged');
}
return true;
[royale-asjs] 08/17: tilelayout: add bindable to properties
Posted by ca...@apache.org.
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 7acc17cabfac130621276162121f71ae06e62a5e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jun 3 09:26:07 2020 +0200
tilelayout: add bindable to properties
---
.../royale/jewel/beads/layouts/TileLayout.as | 54 ++++++++++++----------
1 file changed, 30 insertions(+), 24 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 2deb048..5448ceb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -92,7 +92,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable]
+ [Bindable("columnCountChanged")]
public function get columnCount():Number
{
return _columnCount;
@@ -114,7 +114,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable]
+ [Bindable("columnWidthChanged")]
public function get columnWidth():Number
{
return _columnWidth;
@@ -134,7 +134,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.8
*/
- [Bindable]
+ [Bindable("rowCountChanged")]
public function get rowCount():Number
{
return _rowCount;
@@ -156,7 +156,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable]
+ [Bindable("rowHeightChanged")]
public function get rowHeight():Number
{
return _rowHeight;
@@ -170,57 +170,57 @@ package org.apache.royale.jewel.beads.layouts
/**
* @private
*/
- private var verticalGapInitialized:Boolean;
- public static const VERTICAL_GAP_STYLE:String = "verticalGap"
- private var _verticalGap:Number = 0;
+ private var horizontalGapInitialized:Boolean;
+ public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
+ private var _horizontalGap:Number = 0;
/**
- * The verticalGap between items.
+ * The horizontalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable]
- public function get verticalGap():Number
+ [Bindable("horizontalGapChanged")]
+ public function get horizontalGap():Number
{
- return _verticalGap;
+ return _horizontalGap;
}
/**
* @private
*/
- public function set verticalGap(value:Number):void
+ public function set horizontalGap(value:Number):void
{
- _verticalGap = value;
- verticalGapInitialized = true;
+ _horizontalGap = value;
+ horizontalGapInitialized = true;
}
/**
* @private
*/
- private var horizontalGapInitialized:Boolean;
- public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
- private var _horizontalGap:Number = 0;
+ private var verticalGapInitialized:Boolean;
+ public static const VERTICAL_GAP_STYLE:String = "verticalGap"
+ private var _verticalGap:Number = 0;
/**
- * The horizontalGap between items.
+ * The verticalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable]
- public function get horizontalGap():Number
+ [Bindable("verticalGapChanged")]
+ public function get verticalGap():Number
{
- return _horizontalGap;
+ return _verticalGap;
}
/**
* @private
*/
- public function set horizontalGap(value:Number):void
+ public function set verticalGap(value:Number):void
{
- _horizontalGap = value;
- horizontalGapInitialized = true;
+ _verticalGap = value;
+ verticalGapInitialized = true;
}
/**
@@ -377,6 +377,9 @@ package org.apache.royale.jewel.beads.layouts
{
useWidth = Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
trace(" -- useWidth", useWidth);
+ } else {
+ // we have tile width so calculate columnCount
+ _columnCount = Math.floor((adjustedHostWidth + horizontalGap)/ useWidth);
}
if (needHeight)
@@ -387,6 +390,9 @@ package org.apache.royale.jewel.beads.layouts
if (host.isHeightSizedToContent()) useHeight = 30; // default height
else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
trace(" -- useHeight", useHeight);
+ } else {
+ // we have tile height so calculate rowCount
+ _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
}
}
[royale-asjs] 03/17: jewel-tilelayout: changes to tilelayout
Posted by ca...@apache.org.
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 9de25e6fb6d34924496527829a9864662fab451a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 12:56:44 2020 +0200
jewel-tilelayout: changes to tilelayout
---
.../royale/jewel/beads/layouts/TileLayout.as | 249 +++++++++++++--------
1 file changed, 161 insertions(+), 88 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index e91378c..54c836a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -18,23 +18,22 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::JS
+ COMPILE::SWF
{
- import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.IUIBase;
}
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
- import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IUIBase;
- import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.layout.ILayoutStyleProperties;
+ import org.apache.royale.events.Event;
/**
* The TileLayout class bead sizes and positions the elements it manages into rows and columns.
* The size of each element is determined either by setting TileLayout's columnWidth and rowHeight
- * properties, or having the tile size determined by factoring the numColumns into the area assigned
+ * properties, or having the tile size determined by factoring the columnCount into the area assigned
* for the layout.
*
* @langversion 3.0
@@ -42,7 +41,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class TileLayout extends LayoutBase implements ILayoutStyleProperties
+ public class TileLayout extends StyledLayoutBase implements ILayoutStyleProperties
{
/**
* constructor.
@@ -57,10 +56,34 @@ package org.apache.royale.jewel.beads.layouts
super();
}
- private var _numColumns:Number = 4;
- private var _columnWidth:Number = Number.NaN;
- private var _rowHeight:Number = Number.NaN;
+ public static const LAYOUT_TYPE_NAMES:String = "layout tile";
+
+ /**
+ * Add class selectors when the component is addedToParent
+ * Otherwise component will not get the class selectors when
+ * perform "removeElement" and then "addElement"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function beadsAddedHandler(event:Event = null):void
+ {
+ super.beadsAddedHandler();
+
+ COMPILE::JS
+ {
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("tile"))
+ hostComponent.removeClass("tile");
+ hostComponent.addClass("tile");
+ }
+ }
+ private var _columnCount:Number = 4;
/**
* The number of tiles to fit horizontally into the layout.
*
@@ -69,18 +92,20 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get numColumns():Number
+ public function get columnCount():Number
{
- return _numColumns;
+ return _columnCount;
}
- public function set numColumns(value:Number):void
+ public function set columnCount(value:Number):void
{
- _numColumns = value;
+ _columnCount = value;
+ layout();
}
+ private var _columnWidth:Number = Number.NaN;
/**
* The width of each column, in pixels. If left unspecified, the
- * columnWidth is determined by dividing the numColumns into the
+ * columnWidth is determined by dividing the columnCount into the
* strand's bounding box width.
*
* @langversion 3.0
@@ -95,8 +120,29 @@ package org.apache.royale.jewel.beads.layouts
public function set columnWidth(value:Number):void
{
_columnWidth = value;
+ layout();
}
+ private var _rowCount:Number = 4;
+ /**
+ * The number of tiles to fit horizontally into the layout.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function get rowCount():Number
+ {
+ return _rowCount;
+ }
+ public function set rowCount(value:Number):void
+ {
+ _rowCount = value;
+ layout();
+ }
+
+ private var _rowHeight:Number = Number.NaN;
/**
* The height of each row, in pixels. If left unspecified, the
* rowHeight is determine by dividing the possible number of rows
@@ -114,6 +160,7 @@ package org.apache.royale.jewel.beads.layouts
public function set rowHeight(value:Number):void
{
_rowHeight = value;
+ layout();
}
/**
@@ -122,7 +169,6 @@ package org.apache.royale.jewel.beads.layouts
private var verticalGapInitialized:Boolean;
public static const VERTICAL_GAP_STYLE:String = "verticalGap"
private var _verticalGap:Number = 0;
-
/**
* The verticalGap between items.
*
@@ -135,7 +181,6 @@ package org.apache.royale.jewel.beads.layouts
{
return _verticalGap;
}
-
/**
* @private
*/
@@ -151,7 +196,6 @@ package org.apache.royale.jewel.beads.layouts
private var horizontalGapInitialized:Boolean;
public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
private var _horizontalGap:Number = 0;
-
/**
* The horizontalGap between items.
*
@@ -164,7 +208,6 @@ package org.apache.royale.jewel.beads.layouts
{
return _horizontalGap;
}
-
/**
* @private
*/
@@ -187,23 +230,38 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
- {
- var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
- if (cssValue !== undefined)
- {
- switch(cssProperty)
- {
- case VERTICAL_GAP_STYLE:
- if(!verticalGapInitialized)
- {
- verticalGap = Number(cssValue);
- }
- break;
- default:
- break;
- }
+ // override public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ // {
+ // var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ // if (cssValue !== undefined)
+ // {
+ // switch(cssProperty)
+ // {
+ // case VERTICAL_GAP_STYLE:
+ // if(!verticalGapInitialized)
+ // {
+ // verticalGap = Number(cssValue);
+ // }
+ // break;
+ // default:
+ // break;
+ // }
+ // }
+ // }
+
+ /**
+ * Used at begining of layout for % height
+ */
+ protected var _noSize:Boolean = true;
+
+ COMPILE::JS
+ protected function checkHostSize():Boolean {
+ if(host.width == 0 && !isNaN(host.percentWidth)) {
+ requestAnimationFrame(layout);
+ return false;
}
+
+ return true;
}
/**
@@ -240,10 +298,10 @@ package org.apache.royale.jewel.beads.layouts
if (testChild == null || !testChild.visible) realN--;
}
- if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / numColumns); // + verticalGap
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / columnCount); // + gap
if (isNaN(useHeight)) {
// given the width and total number of items, how many rows?
- var numRows:Number = Math.ceil(realN/numColumns);
+ var numRows:Number = Math.ceil(realN/columnCount);
if (host.isHeightSizedToContent()) useHeight = 30; // default height
else useHeight = Math.floor(adjustedHeight / numRows);
}
@@ -263,7 +321,7 @@ package org.apache.royale.jewel.beads.layouts
xpos += useWidth;
maxWidth = Math.max(maxWidth,xpos);
- var test:Number = (i+1)%numColumns;
+ var test:Number = (i+1)%columnCount;
if (test == 0) {
xpos = 0;
@@ -272,7 +330,7 @@ package org.apache.royale.jewel.beads.layouts
}
}
- maxWidth = Math.max(maxWidth, numColumns*useWidth);
+ maxWidth = Math.max(maxWidth, columnCount*useWidth);
maxHeight = Math.max(maxHeight, numRows*useHeight);
// Only return true if the contentView needs to be larger; that new
@@ -283,80 +341,95 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- var c:UIBase = (contentView as UIBase);
- c.element.classList.add("layout");
- c.element.classList.add("tile");
-
- var children:Array = contentView.internalChildren();
+ if(_noSize)
+ checkHostSize();
+
+ trace(" **** TILE LAYOUT ****");
+ trace(" - columnCount", columnCount);
+ trace(" - columnWidth", columnWidth);
+ trace(" - horizontalGap", horizontalGap);
+ trace(" - rowCount", rowCount);
+ trace(" - rowHeight", rowHeight);
+ trace(" - verticalGap", verticalGap);
var i:int;
- var n:int = children.length;
+ var n:int;
+ var child:UIBase;
+ var useWidth:Number;
+ var useHeight:Number;
+
+ var contentView:ILayoutView = layoutView as ILayoutView;
+ n = contentView.numElements;
+
if (n === 0) return false;
var realN:int = n;
for (i = 0; i < n; i++)
{
- child = children[i].royale_wrapper;
+ child = contentView.getElementAt(i) as UIBase;
if (!child.visible) realN--;
}
-
- var useWidth:Number = columnWidth;
- var useHeight:Number = rowHeight;
+
+ useWidth = columnWidth;
+ trace(" - useWidth", useWidth);
+ useHeight = rowHeight;
+ trace(" - useHeight", useHeight);
var needWidth:Boolean = isNaN(useWidth);
+ trace(" - needWidth", needWidth);
var needHeight:Boolean = isNaN(useHeight);
-
- // given the width and total number of items, how many rows?
- var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
- var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
- var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
- var numRows:Number = Math.ceil(realN / (numColumns + _verticalGap));
-
- if(needWidth || needHeight)
+ trace(" - needHeight", needHeight);
+ if(needHeight || needWidth)
{
+ trace(" -- calculate useWidth & useHeight");
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ trace(" - adjustedWidth", adjustedWidth);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ trace(" - adjustedHeight", adjustedHeight);
if (needWidth)
- useWidth = Math.floor(adjustedWidth / numColumns);// + _horizontalGap;
+ {
+ useWidth = Math.floor(adjustedWidth / columnCount) + horizontalGap; // + gap
+ trace(" -- useWidth", useWidth);
+ }
if (needHeight)
{
- if (host.isHeightSizedToContent())
- useHeight = 30; // default height
- else
- useHeight = Math.floor(adjustedHeight / numRows);// + _verticalGap;
+ // given the width and total number of items, how many rows?
+ var numRows:Number = Math.ceil(realN / columnCount);
+ trace(" -- numRows", numRows);
+ if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ else useHeight = Math.floor(adjustedHeight / numRows) + verticalGap;
+ trace(" -- useHeight", useHeight);
}
}
-
- var child:UIBase;
- var numCols:Number = Math.floor(1+(adjustedWidth - useWidth) / (useWidth + _horizontalGap));
+ trace(" -- useHeight", useHeight);
for (i = 0; i < n; i++)
{
- child = children[i].royale_wrapper;
- if (!child.visible) continue;
- child.width = useWidth;
- child.height = useHeight;
+ child = contentView.getElementAt(i) as UIBase;
- var childW:WrappedHTMLElement = children[i];
- if (childW == null) continue;
+ if (!child.visible) continue;
- if(i < numCols)
- {
- childW.style.marginTop = 0 + 'px';//_paddingTop
- }
+ trace(i, i % columnCount, i % rowCount);
+
+ // add horizontalGap
+ if(i % (columnCount - 1) != 0)
+ child.positioner.style.marginLeft = horizontalGap + "px";
else
- {
- childW.style.marginTop = _verticalGap + 'px';
- }
-
- if(i % numCols)
- {
- childW.style.marginLeft = _horizontalGap + 'px';
- }
+ child.positioner.style.marginLeft = null;
+
+ // add verticalGap
+ if(i % (columnCount - 1) != 0)
+ child.positioner.style.marginTop = verticalGap + "px";
else
- {
- childW.style.marginLeft = 0 + 'px';//_paddingLeft
- }
+ child.positioner.style.marginTop = null;
- childW.royale_wrapper.dispatchEvent('sizeChanged');
+ //child.setDisplayStyleForLayout('inline-flex');
+ //if the parent width/height not explicitly set, we can't calculate the child width/height
+ if(useWidth > 0)
+ child.width = useWidth;
+ if(useHeight > 0)
+ child.height = useHeight;
+ child.dispatchEvent('sizeChanged');
}
return true;
}
[royale-asjs] 02/17: jewel-layouts: remove hostClassList and use
StyledUIBase as base class, since is ui base class in Jewel
Posted by ca...@apache.org.
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 d88dd70b3923390a2396c3de123518eb1fc7855f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 12:56:09 2020 +0200
jewel-layouts: remove hostClassList and use StyledUIBase as base class, since is ui base class in Jewel
---
.../src/main/royale/LayoutsPlayGround.mxml | 55 ++++++++++++++++++++++
.../royale/jewel/beads/layouts/BasicLayout.as | 12 ++---
.../royale/jewel/beads/layouts/ButtonBarLayout.as | 30 ++++++------
.../royale/jewel/beads/layouts/FormItemLayout.as | 12 ++---
.../royale/jewel/beads/layouts/FormLayout.as | 12 ++---
.../royale/jewel/beads/layouts/GridCellLayout.as | 54 ++++++++++-----------
.../royale/jewel/beads/layouts/GridLayout.as | 24 ++++------
.../beads/layouts/HorizontalCenteredLayout.as | 20 ++++----
.../jewel/beads/layouts/HorizontalFlowLayout.as | 20 ++++----
.../royale/jewel/beads/layouts/HorizontalLayout.as | 12 ++---
.../jewel/beads/layouts/SimpleHorizontalLayout.as | 12 ++---
.../jewel/beads/layouts/SimpleVerticalLayout.as | 12 ++---
.../royale/jewel/beads/layouts/StyledLayoutBase.as | 37 ++++++---------
.../royale/jewel/beads/layouts/TableLayout.as | 20 ++++----
.../jewel/beads/layouts/VerticalCenteredLayout.as | 20 ++++----
.../jewel/beads/layouts/VerticalFlowLayout.as | 20 ++++----
.../royale/jewel/beads/layouts/VerticalLayout.as | 12 ++---
17 files changed, 199 insertions(+), 185 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index e83fb01..d082ec4 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -188,6 +188,61 @@ limitations under the License.
</j:CardActions>
</j:Card>
</j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <j:CardTitle text="TileLayout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Group className="wrapper" width="100%" height="200">
+ <j:beads>
+ <j:TileLayout localId="tl" horizontalGap="6" />
+ </j:beads>
+ <j:Button text="1" emphasis="primary" width="60" height="60"/>
+ <j:Button text="2" emphasis="secondary" width="60" height="60"/>
+ <j:Button text="3" emphasis="emphasized" width="60" height="60"/>
+ <j:Button text="4" width="60" height="60"/>
+ <j:Button text="5" emphasis="primary" width="60" height="60"/>
+ <j:Button text="6" emphasis="secondary" width="60" height="60"/>
+ <j:Button text="7" emphasis="emphasized" width="60" height="60"/>
+ <j:Button text="8" width="60" height="60"/>
+ <j:Button text="9" emphasis="primary" width="60" height="60"/>
+ <j:Button text="10" emphasis="secondary" width="60" height="60"/>
+ <j:Button text="11" emphasis="emphasized" width="60" height="60"/>
+ <j:Button text="12" width="60" height="60"/>
+ </j:Group>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign = "itemsCenter">
+ <j:VGroup>
+ <j:VGroup>
+ <j:Label text="columnCount"/>
+ <j:HSlider width="200" value="3" minimum="1" maximum="6" valueChange="tl.columnCount = event.target.value"/>
+ </j:VGroup>
+ <j:VGroup>
+ <j:Label text="columnWidth"/>
+ <j:HSlider width="200" value="100" minimum="50" maximum="150" valueChange="tl.columnWidth = event.target.value"/>
+ </j:VGroup>
+ <j:VGroup>
+ <j:Label text="rowHeight"/>
+ <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.rowHeight = event.target.value"/>
+ </j:VGroup>
+ </j:VGroup>
+ <j:VGroup>
+ <j:VGroup>
+ <j:Label text="verticalGap"/>
+ <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.verticalGap = event.target.value"/>
+ </j:VGroup>
+ <j:VGroup>
+ <j:Label text="horizontalGap"/>
+ <j:HSlider width="200" value="0" minimum="0" maximum="10" valueChange="tl.horizontalGap = event.target.value"/>
+ </j:VGroup>
+ </j:VGroup>
+ </j:CardActions>
+ </j:Card>
+ </j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="3" tabletNumerator="1" tabletDenominator="3" phoneNumerator="1" phoneDenominator="1">
<j:Card>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
index 3f4bb6b..223fb5e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
@@ -75,12 +75,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("layout"))
- hostClassList.remove("layout");
- hostClassList.add("layout");
- if(hostClassList.contains("basic"))
- hostClassList.remove("basic");
- hostClassList.add("basic");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("basic"))
+ hostComponent.removeClass("basic");
+ hostComponent.addClass("basic");
}
}
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 b1aadc8..637e4aa 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
@@ -100,35 +100,35 @@ package org.apache.royale.jewel.beads.layouts
{
if(hostComponent)
{
- 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 (hostComponent.containsClass("pixelWidths"))
+ hostComponent.removeClass("pixelWidths");
+ if (hostComponent.containsClass("proportinalWidths"))
+ hostComponent.removeClass("proportinalWidths");
+ if (hostComponent.containsClass("percentWidths"))
+ hostComponent.removeClass("percentWidths");
+ if (hostComponent.containsClass("naturalWidths"))
+ hostComponent.removeClass("naturalWidths");
+ if (hostComponent.containsClass("sameWidths"))
+ hostComponent.removeClass("sameWidths");
if(isNaN(model.widthType))
{
- hostClassList.add("sameWidths");
+ hostComponent.addClass("sameWidths");
}
else
{
switch(model.widthType)
{
case ButtonBarModel.PIXEL_WIDTHS:
- hostClassList.add("pixelWidths");
+ hostComponent.addClass("pixelWidths");
break;
case ButtonBarModel.PROPORTIONAL_WIDTHS:
- hostClassList.add("proportinalWidths");
+ hostComponent.addClass("proportinalWidths");
break;
case ButtonBarModel.PERCENT_WIDTHS:
- hostClassList.add("percentWidths");
+ hostComponent.addClass("percentWidths");
break;
case ButtonBarModel.NATURAL_WIDTHS:
- hostClassList.add("naturalWidths");
+ hostComponent.addClass("naturalWidths");
break;
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as
index 8f58321..0a12c8c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as
@@ -18,12 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::JS {
- import org.apache.royale.core.UIBase;
- }
- import org.apache.royale.core.ILayoutChild;
- import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.IUIBase;
import org.apache.royale.events.Event;
/**
@@ -73,9 +67,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("formitem"))
- hostClassList.remove("formitem");
- hostClassList.add("formitem");
+ if(hostComponent.containsClass("formitem"))
+ hostComponent.removeClass("formitem");
+ hostComponent.addClass("formitem");
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as
index 00ae316..9784f21 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as
@@ -18,12 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::JS {
- import org.apache.royale.core.UIBase;
- }
- import org.apache.royale.core.ILayoutChild;
- import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.IUIBase;
import org.apache.royale.events.Event;
/**
@@ -73,9 +67,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("form"))
- hostClassList.remove("form");
- hostClassList.add("form");
+ if(hostComponent.containsClass("form"))
+ hostComponent.removeClass("form");
+ hostComponent.addClass("form");
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
index 8dc7bfd..6a3b147 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
@@ -325,9 +325,9 @@ package org.apache.royale.jewel.beads.layouts
if (den <= 0 || den > MAX_COLUMNS)
throw new Error(screen + " denominator must be between 1 and " + MAX_COLUMNS);
- if (hostClassList.contains(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator))
- hostClassList.remove(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator);
- hostClassList.add(screen + "-col-" + num + "-" + den);
+ if (hostComponent.containsClass(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator))
+ hostComponent.removeClass(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator);
+ hostComponent.addClass(screen + "-col-" + num + "-" + den);
}
}
@@ -358,14 +358,14 @@ package org.apache.royale.jewel.beads.layouts
{
if(_phoneVisible)
{
- if (hostClassList.contains("hidden-phone"))
- hostClassList.remove("hidden-phone");
- hostClassList.add("visible-phone");
+ if (hostComponent.containsClass("hidden-phone"))
+ hostComponent.removeClass("hidden-phone");
+ hostComponent.addClass("visible-phone");
} else
{
- if (hostClassList.contains("visible-phone"))
- hostClassList.remove("visible-phone");
- hostClassList.add("hidden-phone");
+ if (hostComponent.containsClass("visible-phone"))
+ hostComponent.removeClass("visible-phone");
+ hostComponent.addClass("hidden-phone");
}
}
}
@@ -399,14 +399,14 @@ package org.apache.royale.jewel.beads.layouts
{
if(_tabletVisible)
{
- if (hostClassList.contains("hidden-tablet"))
- hostClassList.remove("hidden-tablet");
- hostClassList.add("visible-tablet");
+ if (hostComponent.containsClass("hidden-tablet"))
+ hostComponent.removeClass("hidden-tablet");
+ hostComponent.addClass("visible-tablet");
} else
{
- if (hostClassList.contains("visible-tablet"))
- hostClassList.remove("visible-tablet");
- hostClassList.add("hidden-tablet");
+ if (hostComponent.containsClass("visible-tablet"))
+ hostComponent.removeClass("visible-tablet");
+ hostComponent.addClass("hidden-tablet");
}
}
}
@@ -440,14 +440,14 @@ package org.apache.royale.jewel.beads.layouts
{
if(_desktopVisible)
{
- if (hostClassList.contains("hidden-desktop"))
- hostClassList.remove("hidden-desktop");
- hostClassList.add("visible-desktop");
+ if (hostComponent.containsClass("hidden-desktop"))
+ hostComponent.removeClass("hidden-desktop");
+ hostComponent.addClass("visible-desktop");
} else
{
- if (hostClassList.contains("visible-desktop"))
- hostClassList.remove("visible-desktop");
- hostClassList.add("hidden-desktop");
+ if (hostComponent.containsClass("visible-desktop"))
+ hostComponent.removeClass("visible-desktop");
+ hostComponent.addClass("hidden-desktop");
}
}
}
@@ -481,14 +481,14 @@ package org.apache.royale.jewel.beads.layouts
{
if(_wideScreenVisible)
{
- if (hostClassList.contains("hidden-widescreen"))
- hostClassList.remove("hidden-widescreen");
- hostClassList.add("visible-widescreen");
+ if (hostComponent.containsClass("hidden-widescreen"))
+ hostComponent.removeClass("hidden-widescreen");
+ hostComponent.addClass("visible-widescreen");
} else
{
- if (hostClassList.contains("visible-widescreen"))
- hostClassList.remove("visible-widescreen");
- hostClassList.add("hidden-widescreen");
+ if (hostComponent.containsClass("visible-widescreen"))
+ hostComponent.removeClass("visible-widescreen");
+ hostComponent.addClass("hidden-widescreen");
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
index 4b46483..f32d177 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
@@ -18,10 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::JS {
- import org.apache.royale.core.UIBase;
- import org.apache.royale.core.WrappedHTMLElement;
- }
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
@@ -70,12 +66,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("layout"))
- hostClassList.remove("layout");
- hostClassList.add("layout");
- if(hostClassList.contains("grid"))
- hostClassList.remove("grid");
- hostClassList.add("grid");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("grid"))
+ hostComponent.removeClass("grid");
+ hostComponent.addClass("grid");
setGap(_gap);
}
@@ -117,7 +113,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
private function setGap(value:Boolean):void
{
- value ? hostClassList.add("gap") : hostClassList.remove("gap");
+ value ? hostComponent.addClass("gap") : hostComponent.removeClass("gap");
}
// protected var _gap:Number = 0;
@@ -158,10 +154,10 @@ package org.apache.royale.jewel.beads.layouts
// {
// if (value >= 0 && value <= 20)
// {
- // if (hostClassList.contains("gap-" + _gap + "dp"))
- // hostClassList.remove("gap-" + _gap + "dp");
+ // if (hostComponent.containsClass("gap-" + _gap + "dp"))
+ // hostComponent.removeClass("gap-" + _gap + "dp");
// if(value != 0)
- // hostClassList.add("gap-" + value + "dp");
+ // hostComponent.addClass("gap-" + value + "dp");
// } else
// throw new Error("Grid gap needs to be between 0 and 20");
// }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
index 12a555a..c2169c7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
@@ -24,10 +24,6 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.layout.EdgeData;
}
- // COMPILE::JS {
- // import org.apache.royale.core.UIBase;
- // import org.apache.royale.core.WrappedHTMLElement;
- // }
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.ILayoutStyleProperties;
@@ -79,9 +75,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("centered"))
- hostClassList.remove("centered");
- hostClassList.add("centered");
+ if(hostComponent.containsClass("centered"))
+ hostComponent.removeClass("centered");
+ hostComponent.addClass("centered");
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
@@ -127,9 +123,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -204,10 +200,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
index 79b2021..812d58f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
@@ -24,10 +24,6 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.layout.EdgeData;
}
- // COMPILE::JS {
- // import org.apache.royale.core.UIBase;
- // import org.apache.royale.core.WrappedHTMLElement;
- // }
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.ILayoutStyleProperties;
@@ -79,9 +75,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("flow"))
- hostClassList.remove("flow");
- hostClassList.add("flow");
+ if(hostComponent.containsClass("flow"))
+ hostComponent.removeClass("flow");
+ hostComponent.addClass("flow");
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
@@ -127,9 +123,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -203,10 +199,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index ec312f6..3ffaeb2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -120,9 +120,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -201,10 +201,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
@@ -242,7 +242,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
private function setVariableRowHeight(value:Boolean):void
{
- hostClassList.toggle("variableRowHeight", value);
+ hostComponent.toggleClass("variableRowHeight", value);
}
/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
index b942c58..06f09e4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
@@ -83,12 +83,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("layout"))
- hostClassList.remove("layout");
- hostClassList.add("layout");
- if(hostClassList.contains("horizontal"))
- hostClassList.remove("horizontal");
- hostClassList.add("horizontal");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("horizontal"))
+ hostComponent.removeClass("horizontal");
+ hostComponent.addClass("horizontal");
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
index 3285b44..ffbe408 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
@@ -84,12 +84,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("layout"))
- hostClassList.remove("layout");
- hostClassList.add("layout");
- if(hostClassList.contains("vertical"))
- hostClassList.remove("vertical");
- hostClassList.add("vertical");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("vertical"))
+ hostComponent.removeClass("vertical");
+ hostComponent.addClass("vertical");
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
index 18809ca..3a51de8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -21,11 +21,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.LayoutBase;
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.core.layout.ILayoutStyleProperties;
/**
* The StyledLayoutBase class is an extension of LayoutBase
@@ -57,10 +57,7 @@ package org.apache.royale.jewel.beads.layouts
*/
public static const LAYOUT_TYPE_NAMES:String = "";
- protected var hostComponent:UIBase;
-
- COMPILE::JS
- protected var hostClassList:DOMTokenList;
+ protected var hostComponent:StyledUIBase;
/**
* @copy org.apache.royale.core.IBead#strand
@@ -75,13 +72,7 @@ package org.apache.royale.jewel.beads.layouts
override public function set strand(value:IStrand):void
{
super.strand = value;
-
- COMPILE::JS
- {
- hostComponent = host as UIBase;
- hostClassList = hostComponent.positioner.classList;
- }
-
+ hostComponent = host as StyledUIBase;
IEventDispatcher(value).addEventListener("beadsAdded", beadsAddedHandler);
beadsAddedHandler();
}
@@ -101,13 +92,13 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
applyStyleToLayout(hostComponent, "itemsExpand");
- setHostClassList("itemsExpand", _itemsExpand ? "itemsExpand":"");
+ setHostComponentClass("itemsExpand", _itemsExpand ? "itemsExpand":"");
applyStyleToLayout(hostComponent, "itemsHorizontalAlign");
- setHostClassList(_itemsHorizontalAlign, _itemsHorizontalAlign);
+ setHostComponentClass(_itemsHorizontalAlign, _itemsHorizontalAlign);
applyStyleToLayout(hostComponent, "itemsVerticalAlign");
- setHostClassList(_itemsVerticalAlign, _itemsVerticalAlign);
+ setHostComponentClass(_itemsVerticalAlign, _itemsVerticalAlign);
}
}
@@ -175,7 +166,7 @@ package org.apache.royale.jewel.beads.layouts
{
COMPILE::JS
{
- setHostClassList(_itemsHorizontalAlign, value);
+ setHostComponentClass(_itemsHorizontalAlign, value);
_itemsHorizontalAlign = value;
itemsHorizontalAlignInitialized = true;
}
@@ -210,7 +201,7 @@ package org.apache.royale.jewel.beads.layouts
{
COMPILE::JS
{
- setHostClassList(_itemsVerticalAlign, value);
+ setHostComponentClass(_itemsVerticalAlign, value);
_itemsVerticalAlign = value;
itemsVerticalAlignInitialized = true;
}
@@ -240,7 +231,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- setHostClassList("itemsExpand", value ? "itemsExpand" : "");
+ setHostComponentClass("itemsExpand", value ? "itemsExpand" : "");
_itemsExpand = value;
itemsExpandInitialized = true;
}
@@ -248,15 +239,15 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
- protected function setHostClassList(oldValue:String, newValue:String):void {
+ protected function setHostComponentClass(oldValue:String, newValue:String):void {
if (!hostComponent) return;
- if (oldValue && hostClassList.contains(oldValue)) {
+ if (oldValue && hostComponent.containsClass(oldValue)) {
if (oldValue == newValue) return;
- hostClassList.remove(oldValue);
+ hostComponent.removeClass(oldValue);
}
- if (newValue) hostClassList.add(newValue);
+ if (newValue) hostComponent.addClass(newValue);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
index fb2efa7..d7b5fc1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
@@ -18,13 +18,13 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::JS {
- import org.apache.royale.core.UIBase;
- }
- import org.apache.royale.core.ILayoutChild;
+ COMPILE::SWF {
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.ILayoutChild;
+ }
import org.apache.royale.events.Event;
+
/**
* The TableLayout class is a simple layout
@@ -72,12 +72,12 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostClassList.contains("layout"))
- hostClassList.remove("layout");
- hostClassList.add("layout");
- if(hostClassList.contains("table"))
- hostClassList.remove("table");
- hostClassList.add("table");
+ if (hostComponent.containsClass("layout"))
+ hostComponent.removeClass("layout");
+ hostComponent.addClass("layout");
+ if(hostComponent.containsClass("table"))
+ hostComponent.removeClass("table");
+ hostComponent.addClass("table");
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
index 7d74a34..1abcdaa 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
@@ -24,10 +24,6 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.layout.EdgeData;
}
- // COMPILE::JS {
- // import org.apache.royale.core.UIBase;
- // import org.apache.royale.core.WrappedHTMLElement;
- // }
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.ILayoutStyleProperties;
@@ -79,9 +75,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("centered"))
- hostClassList.remove("centered");
- hostClassList.add("centered");
+ if(hostComponent.containsClass("centered"))
+ hostComponent.removeClass("centered");
+ hostComponent.addClass("centered");
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
@@ -127,9 +123,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -203,10 +199,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
index fe1ae31..af1e8aa 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
@@ -24,10 +24,6 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.layout.EdgeData;
}
- // COMPILE::JS {
- // import org.apache.royale.core.UIBase;
- // import org.apache.royale.core.WrappedHTMLElement;
- // }
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.ILayoutStyleProperties;
@@ -80,9 +76,9 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if(hostClassList.contains("flow"))
- hostClassList.remove("flow");
- hostClassList.add("flow");
+ if(hostComponent.containsClass("flow"))
+ hostComponent.removeClass("flow");
+ hostComponent.addClass("flow");
applyStyleToLayout(hostComponent, "gap");
setGap(_gap);
@@ -128,9 +124,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -205,10 +201,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index a485840..b714911 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -120,9 +120,9 @@ package org.apache.royale.jewel.beads.layouts
// private function setGap(value:Boolean):void
// {
// if (value)
- // hostClassList.add("gap");
+ // hostComponent.addClass("gap");
// else
- // hostClassList.remove("gap");
+ // hostComponent.removeClass("gap");
// }
/**
@@ -201,10 +201,10 @@ package org.apache.royale.jewel.beads.layouts
{
if (value >= 0 && value <= GapConstants.GAPS)
{
- if (hostClassList.contains("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
- hostClassList.remove("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
+ if (hostComponent.containsClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px"))
+ hostComponent.removeClass("gap-" + _gap + "x" + GapConstants.GAP_STEP + "px");
if(value != 0)
- hostClassList.add("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
+ hostComponent.addClass("gap-" + value + "x" + GapConstants.GAP_STEP + "px");
} else
throw new Error("Gap needs to be between 0 and " + GapConstants.GAPS);
}
@@ -242,7 +242,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
private function setVariableRowHeight(value:Boolean):void
{
- hostClassList.toggle("variableRowHeight", value);
+ hostComponent.toggleClass("variableRowHeight", value);
}
/**
[royale-asjs] 06/17: tilelayout: get right columns and row with
gaps (hor & vert). Still no tile size involved
Posted by ca...@apache.org.
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 75f4287a80f48eac89808163f821206d55916820
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 2 23:51:55 2020 +0200
tilelayout: get right columns and row with gaps (hor & vert). Still no tile size involved
---
.../royale/jewel/beads/layouts/TileLayout.as | 26 +++++++++++++---------
1 file changed, 16 insertions(+), 10 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 2fd3216..2deb048 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -92,6 +92,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable]
public function get columnCount():Number
{
return _columnCount;
@@ -113,6 +114,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable]
public function get columnWidth():Number
{
return _columnWidth;
@@ -132,6 +134,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.8
*/
+ [Bindable]
public function get rowCount():Number
{
return _rowCount;
@@ -153,6 +156,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable]
public function get rowHeight():Number
{
return _rowHeight;
@@ -177,6 +181,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable]
public function get verticalGap():Number
{
return _verticalGap;
@@ -204,6 +209,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable]
public function get horizontalGap():Number
{
return _horizontalGap;
@@ -363,13 +369,13 @@ package org.apache.royale.jewel.beads.layouts
{
trace(" -- calculate useWidth & useHeight");
var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
- var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
- trace(" - adjustedWidth", adjustedWidth);
- var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
- trace(" - adjustedHeight", adjustedHeight);
+ var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ trace(" - adjustedWidth", adjustedHostWidth);
+ var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ trace(" - adjustedHeight", adjustedHostHeight);
if (needWidth)
{
- useWidth = Math.floor(adjustedWidth / columnCount) + horizontalGap; // + gap
+ useWidth = Math.floor((adjustedHostWidth + horizontalGap)/ columnCount);
trace(" -- useWidth", useWidth);
}
@@ -379,7 +385,7 @@ package org.apache.royale.jewel.beads.layouts
var numRows:Number = Math.ceil(realN / columnCount);
trace(" -- numRows", numRows);
if (host.isHeightSizedToContent()) useHeight = 30; // default height
- else useHeight = Math.floor(adjustedHeight / numRows) + verticalGap;
+ else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
trace(" -- useHeight", useHeight);
}
}
@@ -394,13 +400,13 @@ package org.apache.royale.jewel.beads.layouts
trace(i, i % columnCount, i % rowCount);
// add horizontalGap
- if(i % (columnCount - 1) != 0)
+ if(i % columnCount != 0)
child.positioner.style.marginLeft = horizontalGap + "px";
else
child.positioner.style.marginLeft = null;
// add verticalGap
- if(i % (columnCount - 1) != 0)
+ if(i >= columnCount)
child.positioner.style.marginTop = verticalGap + "px";
else
child.positioner.style.marginTop = null;
@@ -408,9 +414,9 @@ package org.apache.royale.jewel.beads.layouts
//child.setDisplayStyleForLayout('inline-flex');
//if the parent width/height not explicitly set, we can't calculate the child width/height
if(useWidth > 0)
- child.width = useWidth;
+ child.width = useWidth - horizontalGap;
if(useHeight > 0)
- child.height = useHeight;
+ child.height = useHeight - verticalGap;
child.dispatchEvent('sizeChanged');
}
return true;
[royale-asjs] 09/17: tour-de-jewel: adjust columnCount ontilelayout
example
Posted by ca...@apache.org.
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 5918efc0a0cea7e3c8925aad424fa5270c761316
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jun 3 09:26:50 2020 +0200
tour-de-jewel: adjust columnCount ontilelayout example
---
examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
index cc32c4a..527c64d 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/LayoutsPlayGround.mxml
@@ -219,7 +219,7 @@ limitations under the License.
<j:VGroup>
<j:VGroup>
<j:Label text="columnCount = {tl.columnCount}"/>
- <j:HSlider width="200" value="3" minimum="1" maximum="6" valueChange="tl.columnCount = event.target.value"/>
+ <j:HSlider width="200" value="4" minimum="1" maximum="6" valueChange="tl.columnCount = event.target.value"/>
</j:VGroup>
<j:VGroup>
<j:Label text="columnWidth"/>