royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: add centered layouts, end list icon example, add material icon list_alt, and make some layout general fixes
Date Fri, 13 Jul 2018 11:24:27 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 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 <carlosrovira@apache.org>
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


Mime
View raw message