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:24 UTC
[royale-asjs] 05/17: styledlayoutbased: implement "waitForSize" as
a user feature that can be turn on/off
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);