flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [26/51] [partial] this folder was called TourDeFlex_content.com and was hidden by .gitignore
Date Fri, 01 Aug 2014 05:43:47 GMT
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/SampleVGroup.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/SampleVGroup.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/SampleVGroup.mxml.html
new file mode 100644
index 0000000..3753c33
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/SampleVGroup.mxml.html
@@ -0,0 +1,105 @@
+<!--
+  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.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>SampleVGroup.mxml</title>
+<link rel="stylesheet" type="text/css" href="../SourceStyles.css"/>
+</head>
+
+<body><pre><span class="MXMLProcessing_Instruction">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
+<span class="MXMLComponent_Tag">&lt;s:Application</span><span class="MXMLDefault_Text"> xmlns:fx="</span><span class="MXMLString">http://ns.adobe.com/mxml/2009</span><span class="MXMLDefault_Text">" 
+               xmlns:s="</span><span class="MXMLString">library://ns.adobe.com/flex/spark</span><span class="MXMLDefault_Text">" 
+               xmlns:mx="</span><span class="MXMLString">library://ns.adobe.com/flex/mx</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">955</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">600</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Declarations&gt;</span>
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Place non-visual elements (e.g., services, value objects) here </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLSpecial_Tag">&lt;/fx:Declarations&gt;</span>
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Script&gt;</span>
+        &lt;![CDATA[
+            <span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">skins</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">TDFPanelSkin</span>;
+            
+            <span class="ActionScriptReserved">private</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">applyProperties</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+            <span class="ActionScriptBracket/Brace">{</span>
+                <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">mainVGroup</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">paddingTop</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">padTop</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span>;
+                <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">mainVGroup</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">paddingLeft</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">padLeft</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span>;
+                <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">mainVGroup</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">paddingRight</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">padRight</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span>;
+                <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">mainVGroup</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">paddingBottom</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">padBottom</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span>;
+                <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">mainVGroup</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">gap</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">gap</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span>;
+            <span class="ActionScriptBracket/Brace">}</span>
+        <span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptOperator">&gt;</span>
+    <span class="MXMLSpecial_Tag">&lt;/fx:Script&gt;</span>
+    
+    <span class="MXMLComponent_Tag">&lt;s:Panel</span><span class="MXMLDefault_Text"> skinClass="</span><span class="MXMLString">skins.TDFPanelSkin</span><span class="MXMLDefault_Text">" title="</span><span class="MXMLString">VGroup Sample</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:VGroup</span><span class="MXMLDefault_Text"> top="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">172</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Gap:</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:NumericStepper</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">gap</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>    
+                
+                <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Padding Top:</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:NumericStepper</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">padTop</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Padding Left:</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:NumericStepper</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">padLeft</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Padding Right:</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:NumericStepper</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">padRight</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Padding Bottom:</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:NumericStepper</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">padBottom</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>    
+                
+                <span class="MXMLComponent_Tag">&lt;s:Button</span><span class="MXMLDefault_Text"> label="</span><span class="MXMLString">Apply Properties</span><span class="MXMLDefault_Text">" click="</span><span class="ActionScriptReserved">this</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">applyProperties</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:VGroup&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:VGroup</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">300</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">mainVGroup</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">75</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xd54f4f</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">75</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x2f977d</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">75</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xfffca2</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:VGroup&gt;</span>    
+            <span class="MXMLComponent_Tag">&lt;mx:Spacer</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">40%</span><span class="MXMLDefault_Text">" horizontalCenter="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">#323232</span><span class="MXMLDefault_Text">" 
+                     text="</span><span class="MXMLString">The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class.</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Panel&gt;</span>
+    
+<span class="MXMLComponent_Tag">&lt;/s:Application&gt;</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/skins/TDFPanelSkin.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/skins/TDFPanelSkin.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/skins/TDFPanelSkin.mxml.html
new file mode 100644
index 0000000..3c4d872
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/source/skins/TDFPanelSkin.mxml.html
@@ -0,0 +1,178 @@
+<!--
+  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.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>TDFPanelSkin.mxml</title>
+<link rel="stylesheet" type="text/css" href="../../SourceStyles.css"/>
+</head>
+
+<body><pre><span class="MXMLProcessing_Instruction">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
+
+<span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> Custom Spark Panel Skin created for Tour de Flex.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+</span><span class="MXMLASDoc">--&gt;</span>
+<span class="MXMLComponent_Tag">&lt;s:SparkSkin</span><span class="MXMLDefault_Text"> xmlns:fx="</span><span class="MXMLString">http://ns.adobe.com/mxml/2009</span><span class="MXMLDefault_Text">" xmlns:s="</span><span class="MXMLString">library://ns.adobe.com/flex/spark</span><span class="MXMLDefault_Text">" alpha.disabled="</span><span class="MXMLString">0.5</span><span class="MXMLDefault_Text">"
+             blendMode.disabled="</span><span class="MXMLString">layer</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Metadata&gt;</span>
+        &lt;![CDATA[ 
+        <span class="ActionScriptASDoc">/** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+        */</span>
+        <span class="ActionScriptBracket/Brace">[</span><span class="ActionScriptMetadata">HostComponent</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptString">"spark.components.Panel"</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">]</span>
+        <span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptOperator">&gt;</span>
+    <span class="MXMLSpecial_Tag">&lt;/fx:Metadata&gt;</span> 
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Script&gt;</span>
+        <span class="ActionScriptComment">/* Define the skin elements that should not be colorized. 
+        For panel, border and title backround are skinned, but the content area and title text are not. */</span>
+        <span class="ActionScriptReserved">static</span> <span class="ActionScriptReserved">private</span> <span class="ActionScriptReserved">const</span> <span class="ActionScriptDefault_Text">exclusions</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptBracket/Brace">[</span><span class="ActionScriptString">"background"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"titleDisplay"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"contentGroup"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"bgFill"</span><span class="ActionScriptBracket/Brace">]</span>;
+        
+        <span class="ActionScriptASDoc">/** 
+         * @copy spark.skins.SparkSkin#colorizeExclusions
+         */</span>     
+        <span class="ActionScriptReserved">override</span> <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">get</span> <span class="ActionScriptDefault_Text">colorizeExclusions</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptBracket/Brace">{</span><span class="ActionScriptReserved">return</span> <span class="ActionScriptDefault_Text">exclusions</span>;<span class="ActionScriptBracket/Brace">}</span>
+        
+        <span class="ActionScriptComment">/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */</span>
+        <span class="ActionScriptReserved">static</span> <span class="ActionScriptReserved">private</span> <span class="ActionScriptReserved">const</span> <span class="ActionScriptDefault_Text">contentFill</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptOperator">=</span> [];
+        
+        <span class="ActionScriptASDoc">/**
+         * @inheritDoc
+         */</span>
+        <span class="ActionScriptReserved">override</span> <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">get</span> <span class="ActionScriptDefault_Text">contentItems</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptBracket/Brace">{</span><span class="ActionScriptReserved">return</span> <span class="ActionScriptDefault_Text">contentFill</span><span class="ActionScriptBracket/Brace">}</span>;
+    <span class="MXMLSpecial_Tag">&lt;/fx:Script&gt;</span>
+    
+    <span class="MXMLComponent_Tag">&lt;s:states&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normal</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabled</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normalWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabledWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:states&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> drop shadow </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:RectangularDropShadow</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">shadow</span><span class="MXMLDefault_Text">" blurX="</span><span class="MXMLString">20</span><span class="MXMLDefault_Text">" blurY="</span><span class="MXMLString">20</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.32</span><span class="MXMLDefault_Text">" distance="</span><span class="MXMLString">11</span><span class="MXMLDefault_Text">" 
+                             angle="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">#000000</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: border </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:stroke&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:SolidColorStroke</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.50</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:stroke&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+    
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: background fill </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> This layer was modified for Tour de Flex samples to have a gradient border at the bottom. </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:LinearGradient&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 3: contents </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> contains the vertical stack of titlebar content and controlbar </span><span class="MXMLASDoc">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:VerticalLayout</span><span class="MXMLDefault_Text"> gap="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" horizontalAlign="</span><span class="MXMLString">justify</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+        
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">topGroup</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 0: title bar fill </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: We have custom skinned the title bar to be solid black for Tour de Flex </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbFill</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: title bar highlight </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbHilite</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:stroke&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:LinearGradientStroke</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xEAEAEA</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xD9D9D9</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:LinearGradientStroke&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:stroke&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: title bar divider </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbDiv</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xC0C0C0</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 3: text </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> Defines the appearance of the PanelSkin class's title bar. </span><span class="MXMLASDoc">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: The title text display has been slightly modified for Tour de Flex. </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">titleDisplay</span><span class="MXMLDefault_Text">" lineBreak="</span><span class="MXMLString">explicit</span><span class="MXMLDefault_Text">"
+                          left="</span><span class="MXMLString">9</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">30</span><span class="MXMLDefault_Text">"
+                          verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">" fontWeight="</span><span class="MXMLString">bold</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">#E2E2E2</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Label&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment">
+        Note: setting the minimum size to 0 here so that changes to the host component's
+        size will not be thwarted by this skin part's minimum size.   This is a compromise,
+        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+        </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">contentGroup</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">bottomGroup</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"
+                 includeIn="</span><span class="MXMLString">normalWithControlBar, disabledWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 0: control bar background </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: We are skinning this to be the gradient in case we do specify control
+            bar content, but it will only display if there's a controlBarContent
+            property specified.</span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:LinearGradient&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: control bar divider line </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xCDCDCD</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: control bar </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">controlBarGroup</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:HorizontalLayout</span><span class="MXMLDefault_Text"> paddingLeft="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingRight="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingTop="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingBottom="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+<span class="MXMLComponent_Tag">&lt;/s:SparkSkin&gt;</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleHGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleHGroup.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleHGroup.mxml
new file mode 100644
index 0000000..543bd1d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleHGroup.mxml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" viewSourceURL="srcview/index.html">
+	
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+	</fx:Declarations>
+	
+	<fx:Script>
+		<![CDATA[
+			import skins.TDFPanelSkin;
+			
+			private function applyProperties():void
+			{
+				this.mainHGroup.paddingTop = this.padTop.value;
+				this.mainHGroup.paddingLeft = this.padLeft.value;
+				this.mainHGroup.paddingRight = this.padRight.value;
+				this.mainHGroup.paddingBottom = this.padBottom.value;
+				this.mainHGroup.gap = this.gap.value;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel skinClass="skins.TDFPanelSkin" title="HGroup" width="100%" height="100%">
+		
+		<s:HGroup left="300" top="25" id="mainHGroup">
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xd54f4f"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0x2f977d"/>
+				</s:fill>
+			</s:Rect>
+			<s:Rect width="100" height="75">
+				<s:fill>
+					<s:SolidColor color="0xfffca2"/>
+				</s:fill>
+			</s:Rect>
+		</s:HGroup>    
+		
+		<s:VGroup top="10" left="15">
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Gap:"/>
+				<s:NumericStepper id="gap" maximum="400"/>
+			</s:HGroup>    
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Top:"/>
+				<s:NumericStepper id="padTop" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Left:"/>
+				<s:NumericStepper id="padLeft" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Right:"/>
+				<s:NumericStepper id="padRight" maximum="400"/>
+			</s:HGroup>
+			
+			<s:HGroup verticalAlign="middle">
+				<s:Label text="Padding Bottom:"/>
+				<s:NumericStepper id="padBottom" maximum="400"/>
+			</s:HGroup>    
+			
+			<s:Button label="Apply Properties" click="this.applyProperties()"/>
+			<s:Label width="75%" horizontalCenter="0" color="#323232"
+					 text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use
+					 the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/>
+		</s:VGroup>
+		
+		
+	</s:Panel>
+	
+</s:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleVGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleVGroup.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleVGroup.mxml
new file mode 100644
index 0000000..4ebd23d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/SampleVGroup.mxml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
+			   xmlns:s="library://ns.adobe.com/flex/spark" 
+			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+	
+	<fx:Declarations>
+		<!-- Place non-visual elements (e.g., services, value objects) here -->
+	</fx:Declarations>
+	
+	<fx:Script>
+		<![CDATA[
+			import skins.TDFPanelSkin;
+			
+			private function applyProperties():void
+			{
+				this.mainVGroup.paddingTop = this.padTop.value;
+				this.mainVGroup.paddingLeft = this.padLeft.value;
+				this.mainVGroup.paddingRight = this.padRight.value;
+				this.mainVGroup.paddingBottom = this.padBottom.value;
+				this.mainVGroup.gap = this.gap.value;
+			}
+		]]>
+	</fx:Script>
+	
+	<s:Panel skinClass="skins.TDFPanelSkin" title="VGroup Sample" width="100%" height="100%">
+		<s:HGroup width="100%" height="100%" top="10" left="10">
+			<s:VGroup top="10" left="10" width="172">
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Gap:"/>
+					<s:NumericStepper id="gap" maximum="400"/>
+				</s:HGroup>	
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Top:"/>
+					<s:NumericStepper id="padTop" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Left:"/>
+					<s:NumericStepper id="padLeft" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Right:"/>
+					<s:NumericStepper id="padRight" maximum="400"/>
+				</s:HGroup>
+				
+				<s:HGroup verticalAlign="middle">
+					<s:Label text="Padding Bottom:"/>
+					<s:NumericStepper id="padBottom" maximum="400"/>
+				</s:HGroup>	
+				
+				<s:Button label="Apply Properties" click="this.applyProperties()"/>
+			</s:VGroup>
+			<s:VGroup left="300" top="10" id="mainVGroup">
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0xd54f4f"/>
+					</s:fill>
+				</s:Rect>
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0x2f977d"/>
+					</s:fill>
+				</s:Rect>
+				<s:Rect width="100" height="75">
+					<s:fill>
+						<s:SolidColor color="0xfffca2"/>
+					</s:fill>
+				</s:Rect>
+			</s:VGroup>	
+			<mx:Spacer width="10"/>
+			<s:Label width="40%" horizontalCenter="0" color="#323232" 
+					 text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/>
+				
+		</s:HGroup>
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..f9151dc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Group-HGroup-VGroup/srcview/src/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+			 blendMode.disabled="layer">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Panel")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script>
+		/* Define the skin elements that should not be colorized. 
+		For panel, border and title backround are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+		
+		/** 
+		 * @copy spark.skins.SparkSkin#colorizeExclusions
+		 */     
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+		static private const contentFill:Array = [];
+		
+		/**
+		 * @inheritDoc
+		 */
+		override public function get contentItems():Array {return contentFill};
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabledWithControlBar" />
+	</s:states>
+	
+	<!-- drop shadow -->
+	<s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
+							 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+	
+	<!-- layer 1: border -->
+	<s:Rect left="0" right="0" top="0" bottom="0">
+		<s:stroke>
+			<s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+		</s:stroke>
+	</s:Rect>
+	
+	
+	<!-- layer 2: background fill -->
+	<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+	<s:Rect left="0" right="0" bottom="0" height="15">
+		<s:fill>
+			<s:LinearGradient rotation="90">
+				<s:GradientEntry color="0xE2E2E2" />
+				<s:GradientEntry color="0x000000" />
+			</s:LinearGradient>
+		</s:fill>
+	</s:Rect>
+	
+	<!-- layer 3: contents -->
+	<!--- contains the vertical stack of titlebar content and controlbar -->
+	<s:Group left="1" right="1" top="1" bottom="1" >
+		<s:layout>
+			<s:VerticalLayout gap="0" horizontalAlign="justify" />
+		</s:layout>
+		
+		<s:Group id="topGroup" >
+			<!-- layer 0: title bar fill -->
+			<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+			<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+				<s:fill>
+					<s:SolidColor color="0x000000" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: title bar highlight -->
+			<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+				<s:stroke>
+					<s:LinearGradientStroke rotation="90" weight="1">
+						<s:GradientEntry color="0xEAEAEA" />
+						<s:GradientEntry color="0xD9D9D9" />
+					</s:LinearGradientStroke>
+				</s:stroke>
+			</s:Rect>
+			
+			<!-- layer 2: title bar divider -->
+			<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+				<s:fill>
+					<s:SolidColor color="0xC0C0C0" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 3: text -->
+			<!--- Defines the appearance of the PanelSkin class's title bar. -->
+			<!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+			<s:Label id="titleDisplay" lineBreak="explicit"
+						  left="9" top="1" bottom="0" minHeight="30"
+						  verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+			</s:Label>
+		</s:Group>
+		
+		<!--
+		Note: setting the minimum size to 0 here so that changes to the host component's
+		size will not be thwarted by this skin part's minimum size.   This is a compromise,
+		more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+		-->
+		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+		</s:Group>
+		
+		<s:Group id="bottomGroup" minWidth="0" minHeight="0"
+				 includeIn="normalWithControlBar, disabledWithControlBar" >
+			
+			<!-- layer 0: control bar background -->
+			<!-- Note: We are skinning this to be the gradient in case we do specify control
+			bar content, but it will only display if there's a controlBarContent
+			property specified.-->
+			<s:Rect left="0" right="0" bottom="0" top="0" height="15">
+				<s:fill>
+					<s:LinearGradient rotation="90">
+						<s:GradientEntry color="0xE2E2E2" />
+						<s:GradientEntry color="0x000000" />
+					</s:LinearGradient>
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 1: control bar divider line -->
+			<s:Rect left="0" right="0" top="0" height="1" >
+				<s:fill>
+					<s:SolidColor color="0xCDCDCD" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 2: control bar -->
+			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+				<s:layout>
+					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+				</s:layout>
+			</s:Group>
+		</s:Group>
+	</s:Group>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/sample.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/sample.html b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/sample.html
new file mode 100644
index 0000000..4da4b4d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/sample.html
@@ -0,0 +1,121 @@
+<!--
+  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.
+-->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!-- saved from url=(0014)about:internet -->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">	
+    <!-- 
+    Smart developers always View Source. 
+    
+    This application was built using Adobe Flex, an open source framework
+    for building rich Internet applications that get delivered via the
+    Flash Player or to desktops via Adobe AIR. 
+    
+    Learn more about Flex at http://flex.org 
+    // -->
+    <head>
+        <title></title>         
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
+		     the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
+			 the percentage of the height of its parent container, which has to be set explicitly.  Initially, 
+			 don't display flashContent div so it won't show if JavaScript disabled.
+		-->
+        <style type="text/css" media="screen"> 
+			html, body	{ height:100%; }
+			body { margin:0; padding:0; overflow:auto; text-align:center; 
+			       background-color: #323232; }   
+			#flashContent { display:none; }
+        </style>
+		
+		<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
+        <!-- BEGIN Browser History required section -->
+        <link rel="stylesheet" type="text/css" href="history/history.css" />
+        <script type="text/javascript" src="history/history.js"></script>
+        <!-- END Browser History required section -->  
+		    
+        <script type="text/javascript" src="swfobject.js"></script>
+        <script type="text/javascript">
+            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
+            var swfVersionStr = "10.0.0";
+            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
+            var xiSwfUrlStr = "playerProductInstall.swf";
+            var flashvars = {};
+            var params = {};
+            params.quality = "high";
+            params.bgcolor = "#323232";
+            params.allowscriptaccess = "sameDomain";
+            params.allowfullscreen = "true";
+            var attributes = {};
+            attributes.id = "sample";
+            attributes.name = "sample";
+            attributes.align = "middle";
+            swfobject.embedSWF(
+                "sample.swf", "flashContent", 
+                "100%", "100%", 
+                swfVersionStr, xiSwfUrlStr, 
+                flashvars, params, attributes);
+			<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
+			swfobject.createCSS("#flashContent", "display:block;text-align:left;");
+        </script>
+    </head>
+    <body>
+        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
+			 JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
+			 when JavaScript is disabled.
+		-->
+        <div id="flashContent">
+        	<p>
+	        	To view this page ensure that Adobe Flash Player version 
+				10.0.0 or greater is installed. 
+			</p>
+			<script type="text/javascript"> 
+				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
+				document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+								+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
+			</script> 
+        </div>
+	   	
+       	<noscript>
+            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="sample">
+                <param name="movie" value="sample.swf" />
+                <param name="quality" value="high" />
+                <param name="bgcolor" value="#323232" />
+                <param name="allowScriptAccess" value="sameDomain" />
+                <param name="allowFullScreen" value="true" />
+                <!--[if !IE]>-->
+                <object type="application/x-shockwave-flash" data="sample.swf" width="100%" height="100%">
+                    <param name="quality" value="high" />
+                    <param name="bgcolor" value="#323232" />
+                    <param name="allowScriptAccess" value="sameDomain" />
+                    <param name="allowFullScreen" value="true" />
+                <!--<![endif]-->
+                <!--[if gte IE 6]>-->
+                	<p> 
+                		Either scripts and active content are not permitted to run or Adobe Flash Player version
+                		10.0.0 or greater is not installed.
+                	</p>
+                <!--<![endif]-->
+                    <a href="http://www.adobe.com/go/getflashplayer">
+                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
+                    </a>
+                <!--[if !IE]>-->
+                </object>
+                <!--<![endif]-->
+            </object>
+	    </noscript>		
+   </body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceIndex.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceIndex.xml b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceIndex.xml
new file mode 100644
index 0000000..a6d74f6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceIndex.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  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.
+
+-->
+<index>
+	<title>Source of Sample-Flex4-Groups-MajorAxisAlignment</title>
+	<nodes>
+		<node label="html-template">
+			<node label="history">
+				<node icon="cssIcon" label="history.css" url="source/html-template/history/history.css.html"/>
+				<node label="history.js" url="source/html-template/history/history.js.txt"/>
+				<node icon="htmlIcon" label="historyFrame.html" url="source/html-template/history/historyFrame.html"/>
+			</node>
+			<node icon="htmlIcon" label="index.template.html" url="source/html-template/index.template.html"/>
+			<node icon="swfIcon" label="playerProductInstall.swf" url="source/html-template/playerProductInstall.swf"/>
+			<node label="swfobject.js" url="source/html-template/swfobject.js.txt"/>
+		</node>
+		<node label="libs">
+		</node>
+		<node label="src">
+			<node icon="mxmlAppIcon" selected="true" label="sample.mxml" url="source/sample.mxml.html"/>
+		</node>
+	</nodes>
+	<zipfile label="Download source (ZIP, 21K)" url="Sample-Flex4-Groups-MajorAxisAlignment.zip">
+	</zipfile>
+	<sdklink label="Download Flex SDK" url="http://www.adobe.com/go/flex4_sdk_download">
+	</sdklink>
+</index>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceStyles.css
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceStyles.css b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceStyles.css
new file mode 100644
index 0000000..9d5210f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceStyles.css
@@ -0,0 +1,155 @@
+/*
+ * 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.
+ */
+body {
+	font-family: Courier New, Courier, monospace;
+	font-size: medium;
+}
+
+.ActionScriptASDoc {
+	color: #3f5fbf;
+}
+
+.ActionScriptBracket/Brace {
+}
+
+.ActionScriptComment {
+	color: #009900;
+	font-style: italic;
+}
+
+.ActionScriptDefault_Text {
+}
+
+.ActionScriptMetadata {
+	color: #0033ff;
+	font-weight: bold;
+}
+
+.ActionScriptOperator {
+}
+
+.ActionScriptReserved {
+	color: #0033ff;
+	font-weight: bold;
+}
+
+.ActionScriptString {
+	color: #990000;
+	font-weight: bold;
+}
+
+.ActionScriptclass {
+	color: #9900cc;
+	font-weight: bold;
+}
+
+.ActionScriptfunction {
+	color: #339966;
+	font-weight: bold;
+}
+
+.ActionScriptinterface {
+	color: #9900cc;
+	font-weight: bold;
+}
+
+.ActionScriptpackage {
+	color: #9900cc;
+	font-weight: bold;
+}
+
+.ActionScripttrace {
+	color: #cc6666;
+	font-weight: bold;
+}
+
+.ActionScriptvar {
+	color: #6699cc;
+	font-weight: bold;
+}
+
+.MXMLASDoc {
+	color: #3f5fbf;
+}
+
+.MXMLComment {
+	color: #800000;
+}
+
+.MXMLComponent_Tag {
+	color: #0000ff;
+}
+
+.MXMLDefault_Text {
+}
+
+.MXMLProcessing_Instruction {
+}
+
+.MXMLSpecial_Tag {
+	color: #006633;
+}
+
+.MXMLString {
+	color: #990000;
+}
+
+.CSS@font-face {
+	color: #990000;
+	font-weight: bold;
+}
+
+.CSS@import {
+	color: #006666;
+	font-weight: bold;
+}
+
+.CSS@media {
+	color: #663333;
+	font-weight: bold;
+}
+
+.CSS@namespace {
+	color: #923196;
+}
+
+.CSSComment {
+	color: #999999;
+}
+
+.CSSDefault_Text {
+}
+
+.CSSDelimiters {
+}
+
+.CSSProperty_Name {
+	color: #330099;
+}
+
+.CSSProperty_Value {
+	color: #3333cc;
+}
+
+.CSSSelector {
+	color: #ff00ff;
+}
+
+.CSSString {
+	color: #990000;
+}
+

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceTree.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceTree.html b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceTree.html
new file mode 100644
index 0000000..80281a9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/SourceTree.html
@@ -0,0 +1,129 @@
+<!--
+  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.
+-->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!-- saved from url=(0014)about:internet -->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">	
+    <!-- 
+    Smart developers always View Source. 
+    
+    This application was built using Adobe Flex, an open source framework
+    for building rich Internet applications that get delivered via the
+    Flash Player or to desktops via Adobe AIR. 
+    
+    Learn more about Flex at http://flex.org 
+    // -->
+    <head>
+        <title></title>         
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
+		     the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
+			 the percentage of the height of its parent container, which has to be set explicitly.  Initially, 
+			 don't display flashContent div so it won't show if JavaScript disabled.
+		-->
+        <style type="text/css" media="screen"> 
+			html, body	{ height:100%; }
+			body { margin:0; padding:0; overflow:auto; text-align:center; 
+			       background-color: #ffffff; }   
+			#flashContent { display:none; }
+        </style>
+		
+		<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
+        <!-- BEGIN Browser History required section >
+        <link rel="stylesheet" type="text/css" href="history/history.css" />
+        <script type="text/javascript" src="history/history.js"></script>
+        <! END Browser History required section -->  
+		    
+        <script type="text/javascript" src="swfobject.js"></script>
+        <script type="text/javascript">
+  	        function loadIntoMain(url) {
+				parent.mainFrame.location.href = url;
+			}
+			
+			function openUrlWindow(url) {
+				window.top.location = url;
+			}
+			
+            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
+            var swfVersionStr = "10.0.0";
+            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
+            var xiSwfUrlStr = "playerProductInstall.swf";
+            var flashvars = {};
+            var params = {};
+            params.quality = "high";
+            params.bgcolor = "#ffffff";
+            params.allowscriptaccess = "sameDomain";
+            params.allowfullscreen = "true";
+            var attributes = {};
+            attributes.id = "SourceTree";
+            attributes.name = "SourceTree";
+            attributes.align = "middle";
+            swfobject.embedSWF(
+                "SourceTree.swf", "flashContent", 
+                "100%", "100%", 
+                swfVersionStr, xiSwfUrlStr, 
+                flashvars, params, attributes);
+			<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
+			swfobject.createCSS("#flashContent", "display:block;text-align:left;");
+        </script>
+    </head>
+    <body>
+        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
+			 JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
+			 when JavaScript is disabled.
+		-->
+        <div id="flashContent">
+        	<p>
+	        	To view this page ensure that Adobe Flash Player version 
+				10.0.0 or greater is installed. 
+			</p>
+			<script type="text/javascript"> 
+				var pageHost = ((document.location.protocol == "https:") ? "https://" :	"http://"); 
+				document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
+								+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
+			</script> 
+        </div>
+	   	
+       	<noscript>
+            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="SourceTree">
+                <param name="movie" value="SourceTree.swf" />
+                <param name="quality" value="high" />
+                <param name="bgcolor" value="#ffffff" />
+                <param name="allowScriptAccess" value="sameDomain" />
+                <param name="allowFullScreen" value="true" />
+                <!--[if !IE]>-->
+                <object type="application/x-shockwave-flash" data="SourceTree.swf" width="100%" height="100%">
+                    <param name="quality" value="high" />
+                    <param name="bgcolor" value="#ffffff" />
+                    <param name="allowScriptAccess" value="sameDomain" />
+                    <param name="allowFullScreen" value="true" />
+                <!--<![endif]-->
+                <!--[if gte IE 6]>-->
+                	<p> 
+                		Either scripts and active content are not permitted to run or Adobe Flash Player version
+                		10.0.0 or greater is not installed.
+                	</p>
+                <!--<![endif]-->
+                    <a href="http://www.adobe.com/go/getflashplayer">
+                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
+                    </a>
+                <!--[if !IE]>-->
+                </object>
+                <!--<![endif]-->
+            </object>
+	    </noscript>		
+   </body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/index.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/index.html b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/index.html
new file mode 100644
index 0000000..feb303a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/Groups-verticalAlign-horizontalAlign-forLayout/srcview/index.html
@@ -0,0 +1,32 @@
+<!--
+  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.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Source of Sample-Flex4-Groups-MajorAxisAlignment</title>
+</head>
+<frameset cols="235,*" border="2" framespacing="1">
+    <frame src="SourceTree.html" name="leftFrame" scrolling="NO">
+    <frame src="source/sample.mxml.html" name="mainFrame">
+</frameset>
+<noframes>
+	<body>		
+	</body>
+</noframes>
+</html>


Mime
View raw message