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>

Reply via email to