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: TileLayout in Jewel, still needs to be updated to use CSS rules
Date Sat, 26 May 2018 13:31:47 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 c1e2167  TileLayout in Jewel, still needs to be updated to use CSS rules
c1e2167 is described below

commit c1e216783678afc5b7630b37dfe25b9bdefd01c8
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sat May 26 15:31:29 2018 +0200

    TileLayout in Jewel, still needs to be updated to use CSS rules
---
 .../Jewel/src/main/resources/jewel-manifest.xml    |   2 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |   1 +
 .../royale/jewel/beads/layouts/TileLayout.as       | 247 +++++++++++++++++++++
 3 files changed, 250 insertions(+)

diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 097e6bd..acfb15b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -45,10 +45,12 @@
     <component id="TextPrompt" class="org.apache.royale.jewel.beads.controls.textinput.TextPrompt"/>
 
     <component id="BasicLayout" class="org.apache.royale.jewel.beads.layouts.BasicLayout"/>
+    <component id="TileLayout" class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
     <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"/>
+    
     <component id="HorizontalLayoutSpaceBetween" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
     
     <component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index b2ec58b..683b0b5 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -62,6 +62,7 @@ package
         }
 
         import org.apache.royale.jewel.beads.layouts.BasicLayout; BasicLayout;
+        import org.apache.royale.jewel.beads.layouts.TileLayout; TileLayout;
         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;
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
new file mode 100644
index 0000000..2a8c7fa
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -0,0 +1,247 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+	import org.apache.royale.core.IParentIUIBase;
+	import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.layout.EdgeData;
+	import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.ValuesManager;
+
+	/**
+	 *  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
+	 *  for the layout.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class TileLayout extends LayoutBase implements IBeadLayout
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function TileLayout()
+		{
+			super();
+		}
+
+		private var _numColumns:Number = 4;
+		private var _columnWidth:Number = Number.NaN;
+		private var _rowHeight:Number = Number.NaN;
+
+		/**
+		 *  The number of tiles to fit horizontally into the layout.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get numColumns():Number
+		{
+			return _numColumns;
+		}
+		public function set numColumns(value:Number):void
+		{
+			_numColumns = value;
+		}
+
+		/**
+		 *  The width of each column, in pixels. If left unspecified, the
+		 *  columnWidth is determined by dividing the numColumns into the
+		 *  strand's bounding box width.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get columnWidth():Number
+		{
+			return _columnWidth;
+		}
+		public function set columnWidth(value:Number):void
+		{
+			_columnWidth = value;
+		}
+
+		/**
+		 *  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.0
+		 */
+		public function get rowHeight():Number
+		{
+			return _rowHeight;
+		}
+		public function set rowHeight(value:Number):void
+		{
+			_rowHeight = value;
+		}
+
+        /**
+         * @copy org.apache.royale.core.IBeadLayout#layout
+         * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+         */
+		override public function layout():Boolean
+		{
+			// var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+			
+			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 / numColumns); // + gap
+				if (isNaN(useHeight)) {
+					// given the width and total number of items, how many rows?
+					var numRows:Number = Math.ceil(realN/numColumns);
+					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)%numColumns;
+
+					if (test == 0) {
+						xpos = 0;
+						ypos += useHeight;
+						maxHeight = Math.max(maxHeight,ypos);
+					}
+				}
+
+				maxWidth = Math.max(maxWidth, numColumns*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
+			{
+				var children:Array;
+				var i:int;
+				var n:int;
+				var child:UIBase;
+				var xpos:Number;
+				var ypos:Number;
+				var useWidth:Number;
+				var useHeight:Number;
+
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				
+				children = contentView.internalChildren();
+				n = children.length;
+				if (n === 0) return false;
+
+				contentView.element.style["display"] = "flex";
+				contentView.element.style["flexFlow"] = "row wrap";
+				contentView.element.style["alignContent"] = "flex-start";
+				var realN:int = n;
+				for (i = 0; i < n; i++)
+				{
+					child = children[i].royale_wrapper;
+					if (!child.visible) realN--;
+				}
+
+				xpos = 0;
+				ypos = 0;
+				useWidth = columnWidth;
+				useHeight = rowHeight;
+				var needWidth:Boolean = isNaN(useWidth);
+				var needHeight:Boolean = isNaN(useHeight);
+				if(needHeight || needWidth){
+					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);
+					if (needWidth)
+						useWidth = Math.floor(adjustedWidth / numColumns); // + gap
+					
+					if (needHeight)
+					{
+						// given the width and total number of items, how many rows?
+						var numRows:Number = Math.ceil(realN / numColumns);
+						if (host.isHeightSizedToContent()) useHeight = 30; // default height
+						else useHeight = Math.floor(adjustedHeight / numRows);
+					}
+				}
+
+				for (i = 0; i < n; i++)
+				{
+					child = children[i].royale_wrapper;
+					if (!child.visible) continue;
+					child.setDisplayStyleForLayout('inline-block');
+					child.width = useWidth;
+					child.height = useHeight;
+				}
+				return true;
+			}
+		}
+	}
+}

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

Mime
View raw message