royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: jewel basic layout based on CSS. This fixes as well the problem with View States that make behave inconsistent. The fix is a loop over child to dispatch "sizeChanged" event like in the rest of layouts. Maybe this can be fixed in other way.
Date Mon, 04 Jun 2018 21:32:40 GMT
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 9977143  jewel basic layout based on CSS. This fixes as well the problem with View
States that make behave inconsistent. The fix is a loop over child to dispatch "sizeChanged"
event like in the rest of layouts. Maybe this can be fixed in other way.
9977143 is described below

commit 9977143856957624243e0874abf9061b24be4d1f
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Mon Jun 4 23:32:31 2018 +0200

    jewel basic layout based on CSS. This fixes as well the problem with View States that
make behave inconsistent.
    The fix is a loop over child to dispatch "sizeChanged" event like in the rest of layouts.
Maybe this can be fixed in other way.
---
 ..._Using_View_States_to_show_or_hide_content.mxml |  1 -
 .../projects/Jewel/src/main/resources/defaults.css | 14 ++++++---
 .../royale/jewel/beads/layouts/BasicLayout.as      | 33 +++++++++++-----------
 .../projects/Jewel/src/main/sass/_global.sass      | 13 +++++++--
 4 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
index 1df5a5e..e4ab34b 100644
--- a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
@@ -30,7 +30,6 @@
             </j:states>
             
             <j:beads>
-                <j:VerticalLayout/>
                 <js:SimpleStatesImpl/>
             </j:beads>
 
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index dbc88ff..7b0c208 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -24,6 +24,13 @@ j|Application *, .royale *, .royale *:before, .royale *:after {
   display: flex;
 }
 
+.layout.absolute {
+  position: relative;
+}
+.layout.absolute > * {
+  position: absolute;
+}
+
 .layout.horizontal {
   flex-flow: row nowrap;
   align-items: flex-start;
@@ -36,20 +43,19 @@ j|Application *, .royale *, .royale *:before, .royale *:after {
 
 .layout.horizontal.space {
   justify-content: space-between;
-  align-items: flex-start;
 }
 
 ::-moz-focus-inner, ::-moz-focus-outer {
   border: 0;
 }
 
-j|Group {
+j|View {
   IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
 }
 
-j|View {
+j|Group {
   IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
-  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
 }
 
 j|Container {
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 ffcf8f3..4633cf6 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
@@ -19,13 +19,18 @@
 package org.apache.royale.jewel.beads.layouts
 {
 	import org.apache.royale.core.LayoutBase;
-	
 	import org.apache.royale.core.IBeadLayout;
 	import org.apache.royale.core.ILayoutChild;
 	import org.apache.royale.core.ILayoutHost;
 	import org.apache.royale.core.ILayoutView;
 	import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.UIBase;
+	import org.apache.royale.core.IParentIUIBase;
+
+	COMPILE::JS {
+		import org.apache.royale.utils.cssclasslist.addStyles;
+		import org.apache.royale.core.WrappedHTMLElement;
+    }
 
     /**
      *  The BasicLayout class is a simple layout
@@ -175,21 +180,17 @@ package org.apache.royale.jewel.beads.layouts
 
             COMPILE::JS
             {
-                var i:int
-                var n:int;
-				var contentView:ILayoutView = layoutView;
-
-                n = contentView.numElements;
-
-				// host must have either have position:absolute or position:relative
-				if (contentView.element.style.position != "absolute" && contentView.element.style.position
!= "relative") {
-					contentView.element.style.position = "relative";
-				}
-
-				// each child must have position:absolute for BasicLayout to work
-				for (i=0; i < n; i++) {
-					var child:UIBase = contentView.getElementAt(i) as UIBase;
-					child.positioner.style.position = "absolute";
+                var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				addStyles (contentView, "layout absolute");
+
+				// without this a state change in a View with BasicLayout will have a wrong behaviour
+				var children:Array = contentView.internalChildren();
+				var i:int;
+				var n:int = children.length;
+				for (i = 0; i < n; i++)
+				{
+					var child:WrappedHTMLElement = children[i];
+					child.royale_wrapper.dispatchEvent('sizeChanged');
 				}
 
                 return true;
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 26ead5f..c4f14ca 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -41,6 +41,12 @@ j|Application *, .royale *, .royale *:before, .royale *:after
 	//position: relative
 	//-webkit-overflow-scrolling: touch
 
+.layout.absolute
+	position: relative
+	//justify-content: flex-start // align main axis (default)
+	> *
+		position: absolute
+	
 .layout.horizontal
 	flex-flow: row nowrap
 	//justify-content: flex-start // align main axis (default)
@@ -63,13 +69,14 @@ j|Application *, .royale *, .royale *:before, .royale *:after
 ::-moz-focus-inner, ::-moz-focus-outer
 	border: 0
 	
-j|Group
-	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
-
 j|View
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
 
+j|Group
+	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
+
+
 j|Container
 	IBeadView: ClassReference("org.apache.royale.core.beads.views.ContainerView")
 	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message