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 3dc1259 add centered layouts, end list icon example, add material
icon list_alt, and make some layout general fixes
3dc1259 is described below
commit 3dc125902ce3307876db24da5c8da95d2d3fdc8e
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Jul 13 13:24:22 2018 +0200
add centered layouts, end list icon example, add material icon list_alt,
and make some layout general fixes
---
.../BE0009_Using_an_Item_Renderer_with_a_List.mxml | 17 +-
.../src/main/royale/models/ListsModel.as | 20 +-
.../Icons/src/main/royale/MaterialIconType.as | 2 +
.../projects/Jewel/src/main/resources/defaults.css | 21 +
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../beads/layouts/HorizontalCenteredLayout.as | 446 +++++++++++++++++++++
.../jewel/beads/layouts/VerticalCenteredLayout.as | 446 +++++++++++++++++++++
.../projects/Jewel/src/main/sass/_global.sass | 5 +-
.../Jewel/src/main/sass/components/_layout.sass | 64 +--
9 files changed, 978 insertions(+), 45 deletions(-)
diff --git a/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
b/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
index ff90a3f..0770fec 100644
--- a/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
+++ b/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
@@ -22,12 +22,6 @@
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
xmlns:models="models.*">
-
- <fx:Script>
- <![CDATA[
- import MaterialIconType; MaterialIconType;
- ]]>
- </fx:Script>
<fx:Style>
@namespace "http://www.w3.org/1999/xhtml";;
@@ -47,12 +41,13 @@
<models:ListsModel id="listModel"/>
</j:model>
- <j:beads>
- <js:ApplicationDataBinding/>
- </j:beads>
-
<j:initialView>
- <j:View id="view">
+ <j:View>
+ <js:beads>
+ <j:HorizontalCenteredLayout/>
+ <js:ApplicationDataBinding/>
+ </js:beads>
+
<j:Card width="350">
<html:H3 text="Jewel List With ItemRenderer"/>
diff --git a/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/models/ListsModel.as
b/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/models/ListsModel.as
index bf858e7..e8e15ae 100644
--- a/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/models/ListsModel.as
+++ b/examples/blog/BE0009_Using_an_Item_
Renderer_with_a_List/src/main/royale/models/ListsModel.as
@@ -27,16 +27,16 @@ package models
* this is the dataProvider for the List
*/
private var _iconListData:ArrayList = new ArrayList([
- new IconListVO("Alert", "web_asset"),
- new IconListVO("Button", "crop_7_5"),
- new IconListVO("DropDownList", "credit_card"),
- new IconListVO("CheckBox", "check_box"),
- new IconListVO("Label", "label"),
- new IconListVO("List", "list_alt"),
- new IconListVO("RadioButton", "radio_button_checked"),
- new IconListVO("Slider", "storage"),
- new IconListVO("Text", "subject"),
- new IconListVO("TextInput", "text_fields")
+ new IconListVO("Alert", MaterialIconType.WEB_ASSET),
+ new IconListVO("Button", MaterialIconType.CROP_7_5),
+ new IconListVO("DropDownList", MaterialIconType.CREDIT_CARD),
+ new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
+ new IconListVO("Label", MaterialIconType.LABEL),
+ new IconListVO("List", MaterialIconType.LIST_ALT),
+ new IconListVO("RadioButton",
MaterialIconType.RADIO_BUTTON_CHECKED),
+ new IconListVO("Slider", MaterialIconType.STORAGE),
+ new IconListVO("Text", MaterialIconType.SUBJECT),
+ new IconListVO("TextInput", MaterialIconType.TEXT_FIELDS)
]);
public function get iconListData():ArrayList
diff --git a/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
b/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
index 1916f72..b03ca2b 100644
--- a/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
+++ b/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
@@ -1069,5 +1069,7 @@ package
public static const STAR:String = 'star';
public static const STAR_BORDER:String = 'star_border';
public static const STAR_HALF:String = 'star_half';
+
+ public static const LIST_ALT:String = 'list_alt';
}
}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 49144b6..729a472 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -20,6 +20,10 @@
box-sizing: border-box;
}
+html, body {
+ height: 100%;
+}
+
::-moz-focus-inner, ::-moz-focus-outer {
border: 0;
}
@@ -44,6 +48,7 @@ j|ApplicationResponsiveView {
.applicationResponsiveView {
display: inline-flex;
width: 100%;
+ height: 100%;
}
j|ApplicationView {
@@ -390,6 +395,15 @@ j|Label {
.layout.horizontal > * {
flex: 1 0 auto;
}
+.layout.horizontal.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ height: 100%;
+}
+.layout.horizontal.centered > * {
+ flex: 0 0 auto;
+}
.layout.horizontal.gap-1x3px > *:first-child {
margin: 0px;
}
@@ -459,6 +473,13 @@ j|Label {
.layout.vertical > * {
flex: 0 0 auto;
}
+.layout.vertical.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ flex-direction: column;
+ height: 100%;
+}
.layout.vertical.gap-1x3px > *:first-child {
margin: 0px;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 251fad1..b25a27d 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -77,6 +77,8 @@
<component id="SimpleVerticalLayout"
class="org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout"/>
<component id="HorizontalLayout"
class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
<component id="VerticalLayout"
class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+ <component id="HorizontalCenteredLayout"
class="org.apache.royale.jewel.beads.layouts.HorizontalCenteredLayout"/>
+ <component id="VerticalCenteredLayout"
class="org.apache.royale.jewel.beads.layouts.VerticalCenteredLayout"/>
<component id="TileLayout"
class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
<component id="GridLayout"
class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
<component id="GridCellLayout"
class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
new file mode 100644
index 0000000..86e34d9
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
@@ -0,0 +1,446 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The HorizontalCenteredLayout 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.9.3
+ */
+ public class HorizontalCenteredLayout extends SimpleHorizontalLayout
implements ILayoutStyleProperties
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function HorizontalCenteredLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
horizontal centered";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("centered"))
+ hostClassList.remove("centered");
+ hostClassList.add("centered");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ 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.9.3
+ */
+ 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.9.3
+ */
+ 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.9.3
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the
component to retrieve
+ *
+ * @see
org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase,
cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function applyStyleToLayout(component:IUIBase,
cssProperty:String):void
+ {
+ var cssValue:* =
ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in
_layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step
variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x"
+ GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap +
"x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x"
+ GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and
" + GAPS*GAP_STEP);
+ }
+
+ /**
+ * @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
+ {
+ 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 childYpos:Number = ypos; // default
y position
+
+ 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
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(xpos);
+ ilc.setY(childYpos);
+
+ if (!hostWidthSizedToContent &&
!isNaN(ilc.percentWidth)) {
+ var newWidth:Number =
hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
+ }
+
+ } else {
+ child.x = xpos;
+ child.y = childYpos;
+ }
+
+ xpos += child.width + _gap;
+ }
+
+ return true;
+
+ }
+ COMPILE::JS
+ {
+ //applyStyleToLayout(c, "gap");
+
+ /*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.marginRight =
_paddingRight + 'px';
+ }
+ else
+ {
+ child.style.marginRight = '0px';
+ }
+ child.style.marginBottom =
_paddingBottom + 'px';
+ if(i == 0)
+ {
+ child.style.marginLeft =
_paddingLeft + 'px';
+ }
+ else
+ {
+ child.style.marginLeft = _gap +
'px';
+ }
+ }*/
+
+ return true;
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
new file mode 100644
index 0000000..627d7b6
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
@@ -0,0 +1,446 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The VerticalCenteredLayout 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.9.3
+ */
+ public class VerticalCenteredLayout extends SimpleVerticalLayout
implements ILayoutStyleProperties
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function VerticalCenteredLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout vertical
centered";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("centered"))
+ hostClassList.remove("centered");
+ hostClassList.add("centered");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ 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.9.3
+ */
+ 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.9.3
+ */
+ 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.9.3
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the
component to retrieve
+ *
+ * @see
org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase,
cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function applyStyleToLayout(component:IUIBase,
cssProperty:String):void
+ {
+ var cssValue:* =
ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in
_layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step
variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x"
+ GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap +
"x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x"
+ GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and
" + GAPS*GAP_STEP);
+ }
+
+ /**
+ * @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
+ {
+ 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 childYpos:Number = ypos; // default
y position
+
+ 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
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(xpos);
+ ilc.setY(childYpos);
+
+ if (!hostWidthSizedToContent &&
!isNaN(ilc.percentWidth)) {
+ var newWidth:Number =
hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
+ }
+
+ } else {
+ child.x = xpos;
+ child.y = childYpos;
+ }
+
+ xpos += child.width + _gap;
+ }
+
+ return true;
+
+ }
+ COMPILE::JS
+ {
+ //applyStyleToLayout(c, "gap");
+
+ /*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.marginRight =
_paddingRight + 'px';
+ }
+ else
+ {
+ child.style.marginRight = '0px';
+ }
+ child.style.marginBottom =
_paddingBottom + 'px';
+ if(i == 0)
+ {
+ child.style.marginLeft =
_paddingLeft + 'px';
+ }
+ else
+ {
+ child.style.marginLeft = _gap +
'px';
+ }
+ }*/
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass
b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 75b6c83..be7f82d 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -24,6 +24,9 @@
* , :after, :before
box-sizing: border-box
+html, body
+ height: 100%
+
// Firefox
// remove dotted outline
::-moz-focus-inner, ::-moz-focus-outer
@@ -46,7 +49,7 @@ j|ApplicationResponsiveView
.applicationResponsiveView
display: inline-flex
width: 100%
- // height: 100%
+ height: 100%
j|ApplicationView
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 8b59ad8..1627270 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -34,35 +34,53 @@ $gap: 0px
display: flex
//position: relative
+
/* Horizontal */
-.layout.horizontal
- flex-flow: row nowrap
- align-items: flex-start
+.layout
+ &.horizontal
+ flex-flow: row nowrap
+ align-items: flex-start
- > *
- flex: 1 0 auto
+ > *
+ flex: 1 0 auto
- @for $i from 1 through $gaps
- &.gap-#{$i}x#{$gap-step}px
- > *:first-child
- margin: 0px
+ &.centered
+ justify-content: center
+ align-items: center
+ align-content: center
+ height: 100%
> *
- margin: 0px 0px 0px ($gap + $i * $gap-step)
+ flex: 0 0 auto
-/* Vertical */
-.layout.vertical
- flex-flow: column nowrap
- align-items: flex-start
-
- > *
- flex: 0 0 auto
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: 0px 0px 0px ($gap + $i *
$gap-step)
- @for $i from 1 through $gaps
- &.gap-#{$i}x#{$gap-step}px
- > *:first-child
- margin: 0px
- > *
- margin: ($gap + $i * $gap-step) 0px 0px
+/* Vertical */
+.layout
+ &.vertical
+ flex-flow: column nowrap
+ align-items: flex-start
+
+ > *
+ flex: 0 0 auto
+
+ &.centered
+ justify-content: center
+ align-items: center
+ align-content: center
+ flex-direction: column
+ height: 100%
+
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: ($gap + $i * $gap-step) 0px 0px
/* Tile */
.layout.tile
