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 <carlosrov...@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 carlosrov...@apache.org.