royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 11/24: Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later
Date Sun, 18 Mar 2018 15:30:54 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit cdc4a9c5cca5a216e70e404bd5476c268ae8cc35
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Wed Mar 14 16:44:54 2018 +0100

    Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS,
but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime,
this must be revisited some time later
---
 .../src/main/royale/ButtonPlayGround.mxml          |  19 +--
 frameworks/projects/Jewel/pom.xml                  |   6 +-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   1 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |   1 +
 ...Gap.as => HorizontalLayoutWithPaddingAndGap.as} | 174 +++++++++------------
 .../royale/jewel/beads/layouts/VerticalLayout.as   |   4 +-
 .../layouts/VerticalLayoutWithPaddingAndGap.as     |  37 +----
 7 files changed, 90 insertions(+), 152 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index fd5f879..f89ecaa 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -32,7 +32,7 @@ limitations under the License.
 	</fx:Script>
 
 	<js:beads>
-		<js:VerticalLayoutWithPaddingAndGap gap="10"/>
+		<j:VerticalLayoutWithPaddingAndGap gap="10"/>
 	</js:beads>
 	
 	<j:Label text="Basic"/>
@@ -41,31 +41,22 @@ limitations under the License.
 
 	<j:Label text="Jewel Button"/>
 	<j:Button primary="true"/>
-
 	<j:Label text="Jewel TextButton"/>
-	
-	<j:TextButton text="DEFAULT"/>
-
+	<j:TextButton text="Default"/>
 	<j:TextButton text="Button With More Text"/>
-
-	<j:TextButton text="PRIMARY" primary="true"/>
-
-	<j:TextButton text="SECONDARY" secondary="true"/>
-
-	<j:TextButton text="EMPHASIZED" emphasized="true"/>
-
+	<j:TextButton text="Primary" primary="true"/>
+	<j:TextButton text="Secondary" secondary="true"/>
+	<j:TextButton text="Emphasized" emphasized="true"/>
 	<j:TextButton text="Disabled" primary="true">
 		<j:beads>
 			<j:Disabled/>
 		</j:beads>
 	</j:TextButton>
-
 	<j:Label text="Jewel Button Sizing (respect min values)"/>
 	<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
 				valueChange="onValueChange(event)"/>
 	<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
 				valueChange="onValueChange(event)"/>
-
 	<j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
 
 </js:Group>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 53fb1fc..e7de6c2 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -60,10 +60,10 @@
               <name>defaults.css</name>
               <path>../src/main/resources/defaults.css</path>
             </include-file>
-            <!-- <include-file>
-              <name>jewel.css</name>
+            <include-file>
+              <name>jewel-framework.css</name>
               <path>../src/main/resources/jewel-framework.css</path>
-            </include-file> -->
+            </include-file>
           </includeFiles>
           <includeLookupOnly>true</includeLookupOnly>
           <!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 96b6b31..b57f9a2 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -33,6 +33,7 @@
 
     <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
     <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+    <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
     <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
     
 </componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index b2dfb99..547acc3 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -41,6 +41,7 @@ package
 
         import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
         import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
+        import org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
         import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
     }
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
similarity index 62%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
index f941993..95b689d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
@@ -21,47 +21,39 @@ package org.apache.royale.jewel.beads.layouts
 	import org.apache.royale.core.LayoutBase;
 	
 	import org.apache.royale.core.IBeadLayout;
-	import org.apache.royale.core.IBeadModel;
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
 	import org.apache.royale.core.ILayoutChild;
 	import org.apache.royale.core.ILayoutHost;
 	import org.apache.royale.core.ILayoutView;
-	import org.apache.royale.core.ILayoutParent;
 	import org.apache.royale.core.IParentIUIBase;
-	import org.apache.royale.core.IStrand;
 	import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.layout.EdgeData;
 	import org.apache.royale.core.ValuesManager;
-	COMPILE::JS
-	{
-		import org.apache.royale.core.WrappedHTMLElement;
-	}
-	import org.apache.royale.events.Event;
-	import org.apache.royale.events.IEventDispatcher;
-	import org.apache.royale.geom.Rectangle;
-	import org.apache.royale.utils.CSSUtils;
-
-	/**
-	 *  The VerticalLayoutWithPaddingAndGap class is a simple layout
-	 *  bead similar to VerticalLayout, but it adds support for
+	COMPILE::JS {
+        import org.apache.royale.core.WrappedHTMLElement;
+    }
+
+    /**
+	 *  The HorizontalLayoutWithPaddingAndGap class is a simple layout
+	 *  bead similar to HorizontalLayout, but it adds support for
 	 *  padding and gap values.
-	 *
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.0
-	 */
-	public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+	public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
 	{
-		/**
-		 *  Constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.0
-		 */
-		public function VerticalLayoutWithPaddingAndGap()
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function HorizontalLayoutWithPaddingAndGap()
 		{
 			super();
 		}
@@ -196,20 +188,16 @@ package org.apache.royale.jewel.beads.layouts
 			_gap = value;
 		}
 
-		/**
-		 *  Layout children vertically
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.0
-		 *  @royaleignorecoercion org.apache.royale.core.ILayoutHost
-		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-		 */
+        /**
+         * @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
 		{
-			COMPILE::SWF
-			{
+            COMPILE::SWF
+            {
 				var contentView:ILayoutView = layoutView;
 
 				var n:Number = contentView.numElements;
@@ -228,7 +216,7 @@ package org.apache.royale.jewel.beads.layouts
 
 				var paddingMetrics:EdgeData = new EdgeData();
                 paddingMetrics.left = _paddingLeft;
-                paddingMetrics.top  = _paddingTop;
+                paddingMetrics.top = _paddingTop;
                 paddingMetrics.right = _paddingRight;
                 paddingMetrics.bottom = _paddingBottom;
 				var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
@@ -250,92 +238,74 @@ package org.apache.royale.jewel.beads.layouts
 
 					ilc = child as ILayoutChild;
 
-					var childXpos:Number = xpos; // default x position
+					var childYpos:Number = ypos; // default y position
 
-					if (!hostWidthSizedToContent) {
-						var childWidth:Number = child.width;
-						if (ilc != null && !isNaN(ilc.percentWidth)) {
-							childWidth = hostWidth * ilc.percentWidth/100.0;
-							ilc.setWidth(childWidth);
+					if (!hostHeightSizedToContent) {
+						var childHeight:Number = child.height;
+						if (ilc != null && !isNaN(ilc.percentHeight)) {
+							childHeight = hostHeight * ilc.percentHeight/100.0;
+							ilc.setHeight(childHeight);
 						}
-						// the following code center-aligns the child, but since HTML does not
-						// do this normally, this code is commented. (Use VerticalFlexLayout for
-						// horizontally centered elements in a vertical column).
-						//					childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+						// the following code middle-aligns the child, but since HTML does not
+						// do this normally, this code is commented. (Use HorizontalFlexLayout for
+						// vertically centered elements in a horizontal row).
+//						childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
 					}
 
 					if (ilc) {
-						ilc.setX(childXpos);
-						ilc.setY(ypos);
+						ilc.setX(xpos);
+						ilc.setY(childYpos);
 
-						if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
-							var newHeight:Number = hostHeight * ilc.percentHeight / 100;
-							ilc.setHeight(newHeight);
+						if (!hostWidthSizedToContent && !isNaN(ilc.percentWidth)) {
+							var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+							ilc.setWidth(newWidth);
 						}
 
 					} else {
-						child.x = childXpos;
-						child.y = ypos;
+						child.x = xpos;
+						child.y = childYpos;
 					}
 
-					ypos += child.height + _gap;
+					xpos += child.width + _gap;
 				}
 
 				return true;
-			}
-			COMPILE::JS
-			{
-				var children:Array;
-				var i:int;
-				var n:int;
-				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
-				contentView.element.style["vertical-align"] = "top";
-				
-				children = contentView.internalChildren();
-				n = children.length;
-				for (i = 0; i < n; i++)
-				{
-					var child:WrappedHTMLElement = children[i];
-
-                    child.className += " vertical-layout-padding-gap";
 
+            }
+            COMPILE::JS
+            {
+                var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				contentView.element.classList.add("layout", "horizontal");
 
-					/*if(i == 0)
-					{
-						child.style.marginTop = _paddingTop + 'px';
-					}
-					else
-					{
-						child.style.marginTop = _gap + 'px';
-					}
-					child.style.marginRight = _paddingRight + 'px';
+				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.marginBottom = _paddingBottom + 'px';
+						child.style.marginRight = _paddingRight + 'px';
 					}
 					else
 					{
-						child.style.marginBottom = '0px';
+						child.style.marginRight = '0px';
 					}
-					child.style.marginLeft = _paddingLeft + 'px';
-					child.royale_wrapper.setDisplayStyleForLayout('block');
-					if (child.style.display === 'none')
+					child.style.marginBottom = _paddingBottom + 'px';
+					if(i == 0)
 					{
-						child.royale_wrapper.setDisplayStyleForLayout('block');
+						child.style.marginLeft = _paddingLeft + 'px';
 					}
 					else
 					{
-						// block elements don't measure width correctly so set to inline for a second
-						child.style.display = 'inline-block';
-						child.style.display = 'block';
-					}
-                    */
-					child.royale_wrapper.dispatchEvent('sizeChanged');
+						child.style.marginLeft = _gap + 'px';
+					}					
 				}
 
-				return true;
-			}
+                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 cc217c2..947a7de 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
@@ -153,10 +153,8 @@ package org.apache.royale.jewel.beads.layouts
 				contentView.element.classList.add("layout", "vertical");
 				
 				var children:Array = contentView.internalChildren();
-				n = children.length;
-
 				var i:int;
-				var n:int;
+				var n:int = children.length;
 				for (i = 0; i < n; i++)
 				{
 					var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
index f941993..ed602a2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts
 	import org.apache.royale.core.LayoutBase;
 	
 	import org.apache.royale.core.IBeadLayout;
-	import org.apache.royale.core.IBeadModel;
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
 	import org.apache.royale.core.ILayoutChild;
 	import org.apache.royale.core.ILayoutHost;
 	import org.apache.royale.core.ILayoutView;
-	import org.apache.royale.core.ILayoutParent;
 	import org.apache.royale.core.IParentIUIBase;
-	import org.apache.royale.core.IStrand;
 	import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.layout.EdgeData;
 	import org.apache.royale.core.ValuesManager;
@@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts
 	{
 		import org.apache.royale.core.WrappedHTMLElement;
 	}
-	import org.apache.royale.events.Event;
-	import org.apache.royale.events.IEventDispatcher;
-	import org.apache.royale.geom.Rectangle;
-	import org.apache.royale.utils.CSSUtils;
 
 	/**
 	 *  The VerticalLayoutWithPaddingAndGap class is a simple layout
@@ -285,22 +278,17 @@ package org.apache.royale.jewel.beads.layouts
 			}
 			COMPILE::JS
 			{
-				var children:Array;
-				var i:int;
-				var n:int;
 				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
-				contentView.element.style["vertical-align"] = "top";
-				
-				children = contentView.internalChildren();
-				n = children.length;
+				contentView.element.classList.add("layout", "vertical");
+
+				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.className += " vertical-layout-padding-gap";
-
-
-					/*if(i == 0)
+					if(i == 0)
 					{
 						child.style.marginTop = _paddingTop + 'px';
 					}
@@ -318,18 +306,7 @@ package org.apache.royale.jewel.beads.layouts
 						child.style.marginBottom = '0px';
 					}
 					child.style.marginLeft = _paddingLeft + 'px';
-					child.royale_wrapper.setDisplayStyleForLayout('block');
-					if (child.style.display === 'none')
-					{
-						child.royale_wrapper.setDisplayStyleForLayout('block');
-					}
-					else
-					{
-						// block elements don't measure width correctly so set to inline for a second
-						child.style.display = 'inline-block';
-						child.style.display = 'block';
-					}
-                    */
+					
 					child.royale_wrapper.dispatchEvent('sizeChanged');
 				}
 

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

Mime
View raw message