This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch jewel-ui in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a18e154e1d0e3500c4ccf4e4aef3a7c3e9a6b177 Author: Carlos Rovira <[email protected]> AuthorDate: Mon Mar 12 15:30:11 2018 +0100 add layouts to jewel that uses CSS classes instead of inline styles. This is still a work in progress and layouts are only put as placeholders --- .../src/main/royale/ButtonPlayGround.mxml | 3 - .../projects/Jewel/src/main/resources/defaults.css | 4 + .../Jewel/src/main/resources/jewel-manifest.xml | 4 + .../projects/Jewel/src/main/royale/JewelClasses.as | 3 + .../main/royale/org/apache/royale/jewel/Button.as | 30 +- .../royale/org/apache/royale/jewel/TextButton.as | 6 +- .../royale/jewel/beads/layouts/HorizontalLayout.as | 205 +++++++++++++ .../royale/jewel/beads/layouts/VerticalLayout.as | 193 ++++++++++++ .../layouts/VerticalLayoutWithPaddingAndGap.as | 341 +++++++++++++++++++++ 9 files changed, 769 insertions(+), 20 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index 5ca13a1..f217fca 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -31,9 +31,6 @@ limitations under the License. ]]> </fx:Script> - <js:beads> - <js:VerticalLayoutWithPaddingAndGap gap="10"/> - </js:beads> <js:Label text="Basic"/> <js:Button/> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index b23ca30..f09b980 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -19,6 +19,10 @@ @namespace "library://ns.apache.org/royale/jewel"; +.vertical-layout-padding-gap { + display: block !important; +} + /* * Jewel TextField */ diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index 1ba4366..b3bfccb 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -29,5 +29,9 @@ <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/> <component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/> + + <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/> + <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/> + <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 cc74f2e..3cb788e 100644 --- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as +++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as @@ -37,6 +37,9 @@ package import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView; } + 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.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap; } } \ No newline at end of file diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as index cd74a24..1dadb55 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as @@ -60,6 +60,8 @@ package org.apache.royale.jewel { super(); + typeNames = "jewel button"; + COMPILE::JS { _classList = new CSSClassList(); @@ -73,15 +75,26 @@ package org.apache.royale.jewel * @private * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ - COMPILE::JS + /*COMPILE::JS override protected function createElement():WrappedHTMLElement { addElementToWrapper(this,'button'); element.setAttribute('type', 'button'); typeNames = "jewel button"; return element; - } + }*/ + + COMPILE::JS + protected function addOrRemove(classNameVal:String,add:Boolean):void + { + add ? _classList.add(classNameVal) : _classList.remove(classNameVal); + } + COMPILE::JS + override protected function computeFinalClassNames():String + { + return super.computeFinalClassNames() + " " + _classList.compute(); + } private var _primary:Boolean = false; @@ -175,18 +188,5 @@ package org.apache.royale.jewel } } } - - - COMPILE::JS - protected function addOrRemove(classNameVal:String,add:Boolean):void - { - add ? _classList.add(classNameVal) : _classList.remove(classNameVal); - } - - COMPILE::JS - override protected function computeFinalClassNames():String - { - return _classList.compute() + super.computeFinalClassNames(); - } } } \ No newline at end of file diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as index d247b43..b02e5fe 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as @@ -50,6 +50,8 @@ package org.apache.royale.jewel public function TextButton() { super(); + + typeNames = "jewel textbutton"; } /** @@ -128,13 +130,13 @@ package org.apache.royale.jewel * @private * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ - COMPILE::JS + /*COMPILE::JS override protected function createElement():WrappedHTMLElement { addElementToWrapper(this,'button'); element.setAttribute('type', 'button'); typeNames = "jewel textbutton"; return element; - } + }*/ } } 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 new file mode 100644 index 0000000..66fc6c1 --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as @@ -0,0 +1,205 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.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; + import org.apache.royale.events.Event; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.geom.Rectangle; + import org.apache.royale.utils.CSSUtils; + COMPILE::SWF { + import org.apache.royale.core.UIBase; + } + COMPILE::JS { + import org.apache.royale.core.WrappedHTMLElement; + } + + /** + * 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. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public class HorizontalLayout extends LayoutBase implements IBeadLayout + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function HorizontalLayout() + { + super(); + } + + /** + * @copy org.apache.royale.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + * @royaleignorecoercion HTMLElement + * @royaleignorecoercion org.apache.royale.core.IUIBase + */ + override public function set strand(value:IStrand):void + { + super.strand = value; + + COMPILE::JS + { + var base:IUIBase = value as IUIBase; + if (base.element.style.display !== "none") { + base.element.style.display = "block"; + } + } + } + + /** + * @copy org.apache.royale.core.IBeadLayout#layout + * @royaleignorecoercion org.apache.royale.core.ILayoutHost + * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement + */ + override public function layout():Boolean + { + COMPILE::SWF + { + var contentView:ILayoutView = layoutView; + + var n:Number = contentView.numElements; + if (n == 0) return false; + + var maxWidth:Number = 0; + var maxHeight:Number = 0; + var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent(); + var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent(); + var hostWidth:Number = host.width; + var hostHeight:Number = host.height; + + var ilc:ILayoutChild; + var data:Object; + var canAdjust:Boolean = false; + + var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host); + var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host); + + // adjust the host's usable size by the metrics. If hostSizedToContent, then the + // resulting adjusted value may be less than zero. + hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right; + hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom; + + var xpos:Number = borderMetrics.left + paddingMetrics.left; + var ypos:Number = borderMetrics.top + paddingMetrics.top; + + // First pass determines the data about the child. + for(var i:int=0; i < n; i++) + { + var child:IUIBase = contentView.getElementAt(i) as IUIBase; + if (child == null || !child.visible) continue; + var positions:Object = childPositions(child); + var margins:Object = childMargins(child, hostWidth, hostHeight); + + ilc = child as ILayoutChild; + + xpos += margins.left; + + var childYpos:Number = ypos + margins.top; // default y position + + var childHeight:Number = child.height; + if (ilc != null && !isNaN(ilc.percentHeight)) { + childHeight = hostHeight * ilc.percentHeight/100.0; + ilc.setHeight(childHeight); + } + var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align"); + if (valign == "middle") + { + childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2; + } + + if (ilc) { + ilc.setX(xpos); + ilc.setY(childYpos); + + if (!isNaN(ilc.percentWidth)) { + var newWidth:Number = hostWidth * ilc.percentWidth / 100; + ilc.setWidth(newWidth); + } + + } else { + child.x = xpos; + child.y = childYpos; + } + + xpos += child.width + margins.right; + } + + return true; + + } + COMPILE::JS + { + var children:Array; + var i:int; + var n:int; + var contentView:IParentIUIBase = layoutView as IParentIUIBase; + + contentView.element.style["white-space"] = "nowrap"; + + children = contentView.internalChildren(); + + + n = children.length; + for (i = 0; i < n; i++) + { + var child:WrappedHTMLElement = children[i] as WrappedHTMLElement; + if (child == null) continue; + + /*child.royale_wrapper.setDisplayStyleForLayout('inline-block'); + if (child.style.display !== 'none') + { + child.style.display = 'inline-block'; + }*/ + } + + 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 new file mode 100644 index 0000000..98de873 --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as @@ -0,0 +1,193 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.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 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.3 + */ + public class VerticalLayout extends LayoutBase implements IBeadLayout + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function VerticalLayout() + { + super(); + } + + /** + * 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 + */ + override public function layout():Boolean + { + COMPILE::SWF + { + var contentView:ILayoutView = layoutView; + + var n:Number = contentView.numElements; + if (n == 0) return false; + + var maxWidth:Number = 0; + var maxHeight:Number = 0; + var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent(); + var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent(); + var hostWidth:Number = host.width; + var hostHeight:Number = host.height; + + var ilc:ILayoutChild; + var data:Object; + var canAdjust:Boolean = false; + + var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host); + var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host); + + // adjust the host's usable size by the metrics. If hostSizedToContent, then the + // resulting adjusted value may be less than zero. + hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right; + hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom; + + var xpos:Number = borderMetrics.left + paddingMetrics.left; + var ypos:Number = borderMetrics.top + paddingMetrics.top; + + // First pass determines the data about the child. + for(var i:int=0; i < n; i++) + { + var child:IUIBase = contentView.getElementAt(i) as IUIBase; + if (child == null || !child.visible) continue; + var positions:Object = childPositions(child); + var margins:Object = childMargins(child, hostWidth, hostHeight); + + ilc = child as ILayoutChild; + + ypos += margins.top; + + var childXpos:Number = xpos + margins.left; // default x position + + var childWidth:Number = child.width; + if (ilc != null && !isNaN(ilc.percentWidth)) { + childWidth = hostWidth * ilc.percentWidth/100.0; + ilc.setWidth(childWidth); + } + else if (ilc.isWidthSizedToContent() && !margins.auto) + { + childWidth = hostWidth; + ilc.setWidth(childWidth); + } + if (margins.auto) + childXpos = (hostWidth - childWidth) / 2; + + if (ilc) { + ilc.setX(childXpos); + ilc.setY(ypos); + + if (!isNaN(ilc.percentHeight)) { + var newHeight:Number = hostHeight * ilc.percentHeight / 100; + ilc.setHeight(newHeight); + } + + } else { + child.x = childXpos; + child.y = ypos; + } + + ypos += child.height + margins.bottom; + } + + return true; + } + COMPILE::JS + { + var children:Array; + var i:int; + var n:int; + var contentView:IParentIUIBase = layoutView as IParentIUIBase; + contentView.element.className += " layout parent";//style["vertical-align"] = "top"; + + children = contentView.internalChildren(); + n = children.length; + for (i = 0; i < n; i++) + { + var child:WrappedHTMLElement = children[i] as WrappedHTMLElement; + if (child == null) continue; + + child.className += " layout vertical"; + + /*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'); + } + + return true; + } + } + + } +} 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 new file mode 100644 index 0000000..f941993 --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as @@ -0,0 +1,341 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.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 + * 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 + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function VerticalLayoutWithPaddingAndGap() + { + super(); + } + + /** + * @private + */ + private var _paddingTop:Number = 0; + + /** + * The top padding value. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get paddingTop():Number + { + return _paddingTop; + } + + /** + * @private + */ + public function set paddingTop(value:Number):void + { + _paddingTop = value; + } + + /** + * @private + */ + private var _paddingRight:Number = 0; + + /** + * The right padding value. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get paddingRight():Number + { + return _paddingRight; + } + + /** + * @private + */ + public function set paddingRight(value:Number):void + { + _paddingRight = value; + } + + /** + * @private + */ + private var _paddingBottom:Number = 0; + + /** + * The top padding value. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get paddingBottom():Number + { + return _paddingBottom; + } + + /** + * @private + */ + public function set paddingBottom(value:Number):void + { + _paddingBottom = value; + } + + /** + * @private + */ + private var _paddingLeft:Number = 0; + + /** + * The left padding value. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get paddingLeft():Number + { + return _paddingLeft; + } + + /** + * @private + */ + public function set paddingLeft(value:Number):void + { + _paddingLeft = value; + } + + /** + * @private + */ + private var _gap:Number = 0; + + /** + * The gap between items. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get gap():Number + { + return _gap; + } + + /** + * @private + */ + public function set gap(value:Number):void + { + _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 + */ + override public function layout():Boolean + { + COMPILE::SWF + { + var contentView:ILayoutView = layoutView; + + var n:Number = contentView.numElements; + if (n == 0) return false; + + var maxWidth:Number = 0; + var maxHeight:Number = 0; + var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent(); + var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent(); + var hostWidth:Number = hostWidthSizedToContent ? 0 : contentView.width; + var hostHeight:Number = hostHeightSizedToContent ? 0 : contentView.height; + + var ilc:ILayoutChild; + var data:Object; + var canAdjust:Boolean = false; + + var paddingMetrics:EdgeData = new EdgeData(); + paddingMetrics.left = _paddingLeft; + paddingMetrics.top = _paddingTop; + paddingMetrics.right = _paddingRight; + paddingMetrics.bottom = _paddingBottom; + var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host); + + // adjust the host's usable size by the metrics. If hostSizedToContent, then the + // resulting adjusted value may be less than zero. + hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right; + hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom; + + var xpos:Number = borderMetrics.left + paddingMetrics.left; + var ypos:Number = borderMetrics.top + paddingMetrics.top; + + // First pass determines the data about the child. + for(var i:int=0; i < n; i++) + { + var child:IUIBase = contentView.getElementAt(i) as IUIBase; + if (child == null || !child.visible) continue; + var positions:Object = childPositions(child); + + ilc = child as ILayoutChild; + + var childXpos:Number = xpos; // default x position + + if (!hostWidthSizedToContent) { + var childWidth:Number = child.width; + if (ilc != null && !isNaN(ilc.percentWidth)) { + childWidth = hostWidth * ilc.percentWidth/100.0; + ilc.setWidth(childWidth); + } + // 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; + } + + if (ilc) { + ilc.setX(childXpos); + ilc.setY(ypos); + + if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) { + var newHeight:Number = hostHeight * ilc.percentHeight / 100; + ilc.setHeight(newHeight); + } + + } else { + child.x = childXpos; + child.y = ypos; + } + + ypos += child.height + _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"; + + + /*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.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'); + } + + return true; + } + } + + } +} -- To stop receiving notification emails like this one, please contact [email protected].
