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/03/08 19:32:06 UTC
[royale-asjs] branch develop updated: jewel-layouts: Make
horizontal and vertical layouts dispatch 'sizeChanged' events for child
elements in the container and update doc comments
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new fd5920f jewel-layouts: Make horizontal and vertical layouts dispatch 'sizeChanged' events for child elements in the container and update doc comments
fd5920f is described below
commit fd5920fbc6439f4c90244cee290a0fe7c57a85df
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 8 20:31:58 2020 +0100
jewel-layouts: Make horizontal and vertical layouts dispatch 'sizeChanged' events for child elements in the container and update doc comments
---
.../royale/jewel/beads/layouts/HorizontalLayout.as | 50 ++++--------------
.../jewel/beads/layouts/SimpleHorizontalLayout.as | 44 +++++++++++++---
.../jewel/beads/layouts/SimpleVerticalLayout.as | 60 ++++++++++++---------
.../royale/jewel/beads/layouts/VerticalLayout.as | 61 ++++------------------
4 files changed, 96 insertions(+), 119 deletions(-)
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 13c1882..9e03829 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
@@ -18,24 +18,21 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::SWF {
+ COMPILE::SWF
+ {
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.layout.EdgeData;
}
- // COMPILE::JS {
- // 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;
import org.apache.royale.events.Event;
/**
- * The HorizontalLayout class is a simple layout
- * bead similar to HorizontalLayout, but it adds support for
- * padding and gap values.
+ * The HorizontalLayout class is a horizontal layout
+ * bead similar to SimpleHorizontalLayout, but add support for gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -218,10 +215,12 @@ package org.apache.royale.jewel.beads.layouts
}
/**
- * @copy org.apache.royale.core.IBeadLayout#layout
- * @royaleignorecoercion org.apache.royale.core.ILayoutHost
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+ * Layout children horizontally
+ *
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
*/
override public function layout():Boolean
{
@@ -303,34 +302,7 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- //applyStyleToLayout(c, "gap");
-
- /*var children:Array = contentView.internalChildren();
- var i:int;
- var n:int = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
- if (child == null) continue;
- child.style.marginTop = _paddingTop + 'px';
- if(i === (n - 1))
- {
- child.style.marginRight = _paddingRight + 'px';
- }
- else
- {
- child.style.marginRight = '0px';
- }
- child.style.marginBottom = _paddingBottom + 'px';
- if(i == 0)
- {
- child.style.marginLeft = _paddingLeft + 'px';
- }
- else
- {
- child.style.marginLeft = _gap + 'px';
- }
- }*/
+ super.layout();
return true;
}
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 88c3044..e634bb8 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
@@ -27,14 +27,20 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
}
+ COMPILE::JS
+ {
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
-
+
/**
- * The HorizontalLayout class is a simple layout
- * bead. It takes the set of children and lays them out
- * horizontally in one row, separating them according to
- * CSS layout rules for margin and vertical-align styles.
+ * The SimpleHorizontalLayout class is a simple layout
+ * bead that takes the set of children and lays them out
+ * horizontally in one row. In JS we make use of the CSS flex layout rules.
+ *
+ * Note:SWF comes from basic layouts and are not tested
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -87,7 +93,7 @@ package org.apache.royale.jewel.beads.layouts
}
/**
- * Layout children vertically
+ * Layout children horizontally
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -186,8 +192,34 @@ package org.apache.royale.jewel.beads.layouts
* flex-flow: row nowrap;
* align-items: flex-start
* }
+ *
+ * .layout.horizontal > * {
+ * flex: 0 0 auto
+ * }
*/
+ // We just need to make chids resize themselves (through `sizeChanged` event)
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ try
+ {
+ var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
+ var child:WrappedHTMLElement
+ for (i = 0; i < n; i++)
+ {
+ child = children[i];
+ if(child && child.royale_wrapper)
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ else
+ trace("child ? ", child)
+ }
+ }
+ catch (error:Error)
+ {
+ trace("layout couldn't notify 'sizeChanged' event for child:", _strand);
+ }
+
return true;
}
}
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 6250dc6..a5bdc41 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
@@ -27,20 +27,26 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
}
+ COMPILE::JS
+ {
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
/**
- * The VerticalLayout class is a simple layout
- * bead. It takes the set of children and lays them out
- * vertically in one column, separating them according to
- * CSS layout rules for margin and horizontal-align styles.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
+ * The SimpleVerticalLayout class is a simple layout
+ * bead that takes the set of children and lays them out
+ * horizontally in one row. In JS we make use of the CSS flex layout rules.
+ *
+ * Note:SWF comes from basic layouts and are not tested
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
public class SimpleVerticalLayout extends StyledLayoutBase
{
/**
@@ -175,30 +181,36 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- // var children:Array = contentView.internalChildren();
- // var i:int;
- // var n:int = children.length;
- // for (i = 0; i < n; i++)
- // {
- // var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
- // if (child == null) continue;
-
- // child.royale_wrapper.dispatchEvent('sizeChanged');
- // }
-
/**
- * This Layout uses the following CSS rules
- * no code needed in JS for layout
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
*
- * .layout {
+ * .layout {
* display: flex:
* }
+ *
* .layout.vertical {
* flex-flow: column nowrap;
* align-items: flex-start;
* }
+ *
+ * .layout.vertical > * {
+ * flex: 0 1 auto
+ * }
*/
+ // We just need to make chids resize themselves (through `sizeChanged` event)
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
+ var child:WrappedHTMLElement
+ for (i = 0; i < n; i++)
+ {
+ child = children[i];
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+
return true;
}
}
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 24f4bc5..7ae0111 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
@@ -18,32 +18,27 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::SWF {
+ COMPILE::SWF
+ {
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
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;
import org.apache.royale.events.Event;
/**
- * The VerticalLayout class is a simple layout
- * bead similar to VerticalLayout, but it adds support for
- * padding and gap values.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
+ * The VerticalLayout class is a vertical layout
+ * bead similar to SimpleVerticalLayout, but add support for gap values.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
public class VerticalLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
{
/**
@@ -301,41 +296,7 @@ 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("vertical");
-
- //applyStyleToLayout(c, "gap");
-
- // var children:Array = contentView.internalChildren();
- // var i:int;
- // var n:int = children.length;
- // for (i = 0; i < n; i++)
- // {
- // var child:WrappedHTMLElement = children[i];
-
- // if(i == 0)
- // {
- // child.style.marginTop = _paddingTop + 'px';
- // }
- // else
- // {
- // child.style.marginTop = _gap + 'px';
- // }
- // child.style.marginRight = _paddingRight + 'px';
- // if(i === (n - 1))
- // {
- // child.style.marginBottom = _paddingBottom + 'px';
- // }
- // else
- // {
- // child.style.marginBottom = '0px';
- // }
- // child.style.marginLeft = _paddingLeft + 'px';
-
- // child.royale_wrapper.dispatchEvent('sizeChanged');
- // }
+ super.layout();
return true;
}