You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/12 14:32:50 UTC
[royale-asjs] 21/22: 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
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 <ca...@apache.org>
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
carlosrovira@apache.org.