You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/08/01 07:43:54 UTC

[33/51] [partial] this folder was called TourDeFlex_content.com and was hidden by .gitignore

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/sample.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/sample.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/sample.mxml.html
new file mode 100644
index 0000000..a4c1c5a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/sample.mxml.html
@@ -0,0 +1,126 @@
+<!--
+  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>sample.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="MXMLComment">&lt;!--</span><span class="MXMLComment"> http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ </span><span class="MXMLComment">--&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">" 
+               xmlns:local="</span><span class="MXMLString">*</span><span class="MXMLDefault_Text">" viewSourceURL="</span><span class="MXMLString">srcview/index.html</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    <span class="MXMLSpecial_Tag">&lt;fx:Script&gt;</span>
+        &lt;![CDATA[
+            <span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">mx</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">events</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">FlexEvent</span>;
+            
+            <span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">skins</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">TDFPanelSkin</span>;
+            
+            <span class="ActionScriptReserved">protected</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">update</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span>:<span class="ActionScriptDefault_Text">Event</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+            <span class="ActionScriptBracket/Brace">{</span>
+                <span class="ActionScriptDefault_Text">globalBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">top</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">theLayout</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">actualBaseline</span>;
+                <span class="ActionScriptDefault_Text">checkBoxBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">top</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">checkBox</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">y</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">checkBox</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">baselinePosition</span>;
+                <span class="ActionScriptDefault_Text">labelBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">top</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">label</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">y</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">label</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">baselinePosition</span>;
+                <span class="ActionScriptDefault_Text">labelBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">left</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">label</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">x</span>;
+                <span class="ActionScriptDefault_Text">buttonBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">top</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">button</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">y</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">button</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">baselinePosition</span>; 
+                <span class="ActionScriptDefault_Text">buttonBaseline</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">left</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">button</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">x</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"> width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" skinClass="</span><span class="MXMLString">skins.TDFPanelSkin</span><span class="MXMLDefault_Text">" title="</span><span class="MXMLString">CustomLayout with HBaselineLayout</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Controls </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">14</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">5</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:CheckBox</span><span class="MXMLDefault_Text"> label="</span><span class="MXMLString">Checkbox</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">showCheckBox</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> label="</span><span class="MXMLString">Label</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">showLabel</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> label="</span><span class="MXMLString">Button </span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">showButton</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> label="</span><span class="MXMLString">Layout </span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">showLayout</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</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:TileGroup</span><span class="MXMLDefault_Text"> requestedColumnCount="</span><span class="MXMLString">2</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline1Check</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">Offset Checkbox baseline</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline1Slider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">-100</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" enabled="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline1Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">160</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline2Check</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">Offset Label baseline</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline2Slider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">-100</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" enabled="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline2Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">160</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline3Check</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">Offset Button baseline</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline3Slider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">-100</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" enabled="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline3Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">160</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline4Check</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">Offset Layout baseline</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">baseline4Slider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">-100</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">100</span><span class="MXMLDefault_Text">" enabled="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline4Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">160</span><span class="MXMLDefault_Text">" value="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">buttonHeightCheck</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">Override Button height</span><span class="MXMLDefault_Text">" selected="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">buttonHeightSlider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">21</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">150</span><span class="MXMLDefault_Text">" enabled="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">buttonHeightCheck</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">160</span><span class="MXMLDefault_Text">" value="</span><span class="MXMLString">21</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:TileGroup&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+        
+        
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">container</span><span class="MXMLDefault_Text">" updateComplete="</span><span class="ActionScriptDefault_Text">update</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">138</span><span class="MXMLDefault_Text">" horizontalCenter="</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;local:HBaselineLayout</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">theLayout</span><span class="MXMLDefault_Text">" verticalAlign="</span><span class="MXMLString">baseline</span><span class="MXMLDefault_Text">"
+                                       globalBaseline="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline4Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">baseline4Slider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span> : <span class="ActionScriptDefault_Text">NaN</span><span class="MXMLString">}</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:CheckBox</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">checkBox</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">One check box</span><span class="MXMLDefault_Text">" move="</span><span class="ActionScriptDefault_Text">update</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"
+                        baseline="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline1Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">baseline1Slider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span> : 0<span class="MXMLString">}</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">label</span><span class="MXMLDefault_Text">" text="</span><span class="MXMLString">...and some random text...</span><span class="MXMLDefault_Text">" move="</span><span class="ActionScriptDefault_Text">update</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"
+                     baseline="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline2Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">baseline2Slider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span> : 0<span class="MXMLString">}</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Button</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">button</span><span class="MXMLDefault_Text">" label="</span><span class="MXMLString">and a Button!</span><span class="MXMLDefault_Text">" move="</span><span class="ActionScriptDefault_Text">update</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"
+                      height="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">buttonHeightCheck</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">buttonHeightSlider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span> : 21<span class="MXMLString">}</span><span class="MXMLDefault_Text">"
+                      baseline="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">baseline3Check</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">baseline3Slider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span> : 0<span class="MXMLString">}</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> visual guides for the baselines </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> includeInLayout="</span><span class="MXMLString">false</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:Line</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">container</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">width</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">globalBaseline</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">theLayout</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">actualBaseline</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">"
+                        visible="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">showLayout</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</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">0x00FF00</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">2</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:Line&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:Line</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">checkBox</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">width</span><span class="ActionScriptOperator">-</span>1<span class="MXMLString">}</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">checkBoxBaseline</span><span class="MXMLDefault_Text">"
+                        visible="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">showCheckBox</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</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">0xFF0000</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.5</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">2</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:Line&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:Line</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">label</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">width</span><span class="ActionScriptOperator">-</span>1<span class="MXMLString">}</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">labelBaseline</span><span class="MXMLDefault_Text">"
+                        visible="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">showLabel</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</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">0x0000FF</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.5</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">2</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:Line&gt;</span>
+                
+                <span class="MXMLComponent_Tag">&lt;s:Line</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">button</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">width</span><span class="ActionScriptOperator">-</span>1<span class="MXMLString">}</span><span class="MXMLDefault_Text">" id="</span><span class="MXMLString">buttonBaseline</span><span class="MXMLDefault_Text">"
+                        visible="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">showButton</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selected</span><span class="MXMLString">}</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">0xFF00FF</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.5</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">2</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:Line&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:Label</span><span class="MXMLDefault_Text"> right="</span><span class="MXMLString">14</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">7</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">0x323232</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">200</span><span class="MXMLDefault_Text">"
+                 text="</span><span class="MXMLString">This sample shows how you can create a custom layout to extend the HorizontalLayout to provide
+                 baseline alignment functionality.</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&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/CustomLayout-HLayoutBaseline/srcview/source/skins/TDFPanelSkin.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/skins/TDFPanelSkin.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/skins/TDFPanelSkin.mxml.html
new file mode 100644
index 0000000..f690a18
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/source/skins/TDFPanelSkin.mxml.html
@@ -0,0 +1,137 @@
+<!--
+  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="MXMLComponent_Tag">&lt;s:Skin</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">" minWidth="</span><span class="MXMLString">131</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">127</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Metadata&gt;</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="MXMLSpecial_Tag">&lt;/fx:Metadata&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:Rect</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="MXMLComponent_Tag">&lt;s:filters&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:DropShadowFilter</span><span class="MXMLDefault_Text"> blurX="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">" blurY="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.18</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">" knockout="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:filters&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">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:Rect&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="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="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="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">titleDisplay</span><span class="MXMLDefault_Text">" maxDisplayedLines="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">"
+                     left="</span><span class="MXMLString">9</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">3</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</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="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="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">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">0xE2EdF7</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: 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">0xD1E0F2</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">1</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">7</span><span class="MXMLDefault_Text">" paddingBottom="</span><span class="MXMLString">7</span><span class="MXMLDefault_Text">" gap="</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:Skin&gt;</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/HBaselineLayout.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/HBaselineLayout.as b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/HBaselineLayout.as
new file mode 100644
index 0000000..ae4c3db
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/HBaselineLayout.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package {
+
+import mx.core.ILayoutElement;
+import mx.events.PropertyChangeEvent;
+import mx.formatters.NumberBase;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.HorizontalLayout;
+
+public class HBaselineLayout extends HorizontalLayout
+{
+	public function HBaselineLayout()
+	{
+		super();
+	}
+
+	//----------------------------------
+	//  globalBaseline
+	//----------------------------------
+	
+	[Inspectable(category="General")]
+
+	private var _globalBaseline:Number = NaN;
+	public function get globalBaseline():Number
+	{
+		return _globalBaseline;
+	}
+
+	public function set globalBaseline(value:Number):void
+	{
+		_globalBaseline = value;
+		var target:GroupBase = this.target;
+		if (target)
+		{
+			target.invalidateSize();
+			target.invalidateDisplayList();
+		}
+	}
+
+	//----------------------------------
+	//  actualBaseline
+	//----------------------------------
+	
+	private var _actualBaseline:Number;
+	
+	[Bindable("propertyChange")]
+	[Inspectable(category="General")]
+	
+	public function get actualBaseline():Number
+	{
+		return _actualBaseline;
+	}
+	
+	private function setActualBaseline(value:Number):void
+	{
+		if (value == _actualBaseline)
+			return;
+
+		var oldValue:Number = _actualBaseline;
+		_actualBaseline = value;
+		dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "actualBaseline", oldValue, value));
+	}
+	
+	//----------------------------------
+	//  verticalAlign
+	//----------------------------------
+	
+	[Inspectable(category="General", enumeration="top,bottom,middle,justify,contentJustify,baseline", defaultValue="top")]
+	override public function get verticalAlign():String
+	{
+		return super.verticalAlign;		
+	}
+
+	/**
+	 *  @private 
+	 */
+	override public function measure():void
+	{
+		super.measure();
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+		
+		measureBaseline(true /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+		
+		// The measured height is the sum of the space above and below the baseline
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		if (isNaN(paddingBottom))
+			measuredBaselineBottom += paddingBottom;
+		target.measuredHeight = Math.round(measuredBaselineTop + measuredBaselineBottom);
+	}
+	
+	/**
+	 *  @private 
+	 */
+	override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+	{
+		super.updateDisplayList(unscaledWidth, unscaledHeight);
+		
+		var target:GroupBase = this.target;
+		if (!target || verticalAlign != "baseline")
+			return;
+
+		measureBaseline(false /*usePreferredSize*/);
+		if (!isNaN(_globalBaseline))
+			measuredBaselineTop = _globalBaseline;
+
+		if (isNaN(paddingTop))
+			measuredBaselineTop += paddingTop;
+		
+		// Adjust the position of the elements
+		var contentHeight:Number = 0;
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementBaseline:Number = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+
+			var baselinePosition:Number = element.baselinePosition;
+			var y:Number = measuredBaselineTop + (elementBaseline - baselinePosition);
+			element.setLayoutBoundsPosition(element.getLayoutBoundsX(), y);
+			contentHeight = Math.max(contentHeight, element.getLayoutBoundsHeight() + y);
+		}
+
+		// Adjust the content height
+		if (isNaN(paddingBottom))
+			contentHeight += paddingBottom;
+		target.setContentSize(target.contentWidth, contentHeight);
+		
+		// Update the baseline
+		setActualBaseline(measuredBaselineTop);
+	}
+
+	private var measuredBaselineTop:Number = 0;			// How much space is needed above the baseline to fit all the elements
+	private var measuredBaselineBottom:Number = 0;		// How much space is needed below the baseline to fit all the elements
+	
+	/**
+	 *  @private 
+	 */
+	private function measureBaseline(usePreferredSize:Boolean):void
+	{
+		var elementBaseline:Number = 0; 			// The current element's explicit baseline constraint
+		var elementBaselineTop:Number = 0;			// The portiono of the current element that's above the baseline
+		var elementBaselineBottom:Number = 0;		// The portion of the current element that's below the baseline
+
+		measuredBaselineTop = 0;
+		measuredBaselineBottom = 0;
+
+		var count:int = target.numElements;
+		for (var i:int = 0; i < count; i++)
+		{
+			var element:ILayoutElement = target.getElementAt(i);
+			if (!element || !element.includeInLayout)
+				continue;
+			
+			var elementHeight:Number = usePreferredSize ? element.getPreferredBoundsHeight() :
+														  element.getLayoutBoundsHeight();
+			elementBaseline = element.baseline as Number;
+			if (isNaN(elementBaseline))
+				elementBaseline = 0;
+			
+			var baselinePosition:Number = element.baselinePosition;
+			
+			elementBaselineTop = baselinePosition - elementBaseline;
+			elementBaselineBottom = elementHeight - elementBaselineTop;
+			
+			measuredBaselineTop = Math.max(elementBaselineTop, measuredBaselineTop);
+			measuredBaselineBottom = Math.max(elementBaselineBottom, measuredBaselineBottom);
+		}
+	}
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/sample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/sample.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/sample.mxml
new file mode 100644
index 0000000..3224491
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/sample.mxml
@@ -0,0 +1,118 @@
+<?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.
+
+-->
+<!-- http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ -->
+<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" 
+			   xmlns:local="*" viewSourceURL="srcview/index.html">
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			
+			import skins.TDFPanelSkin;
+			
+			protected function update(event:Event):void
+			{
+				globalBaseline.top = theLayout.actualBaseline;
+				checkBoxBaseline.top = checkBox.y + checkBox.baselinePosition;
+				labelBaseline.top = label.y + label.baselinePosition;
+				labelBaseline.left = label.x;
+				buttonBaseline.top = button.y + button.baselinePosition; 
+				buttonBaseline.left = button.x;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout">
+		
+		<!-- Controls -->
+		<s:HGroup left="14" top="5">
+			<s:VGroup>
+				<s:CheckBox label="Checkbox" id="showCheckBox" selected="true"/>
+				<s:CheckBox label="Label" id="showLabel" selected="true"/>
+				<s:CheckBox label="Button " id="showButton" selected="true"/>
+				<s:CheckBox label="Layout " id="showLayout" selected="true"/>
+			</s:VGroup>
+			
+			<s:TileGroup requestedColumnCount="2">
+				<s:CheckBox id="baseline1Check" label="Offset Checkbox baseline" selected="true"/>
+				<s:HSlider id="baseline1Slider" minimum="-100" maximum="100" enabled="{baseline1Check.selected}" width="160"/>
+				<s:CheckBox id="baseline2Check" label="Offset Label baseline" selected="true"/>
+				<s:HSlider id="baseline2Slider" minimum="-100" maximum="100" enabled="{baseline2Check.selected}" width="160"/>
+				<s:CheckBox id="baseline3Check" label="Offset Button baseline" selected="true"/>
+				<s:HSlider id="baseline3Slider" minimum="-100" maximum="100" enabled="{baseline3Check.selected}" width="160"/>
+				<s:CheckBox id="baseline4Check" label="Offset Layout baseline"/>
+				<s:HSlider id="baseline4Slider" minimum="-100" maximum="100" enabled="{baseline4Check.selected}" width="160" value="15"/>
+				<s:CheckBox id="buttonHeightCheck" label="Override Button height" selected="true"/>
+				<s:HSlider id="buttonHeightSlider" minimum="21" maximum="150" enabled="{buttonHeightCheck.selected}" width="160" value="21"/>
+			</s:TileGroup>
+		</s:HGroup>
+		
+		
+		<s:Group id="container" updateComplete="update(event)" top="138" horizontalCenter="0">
+			<s:layout>
+				<local:HBaselineLayout id="theLayout" verticalAlign="baseline"
+									   globalBaseline="{baseline4Check.selected ? baseline4Slider.value : NaN}"/>
+			</s:layout>
+			<s:CheckBox id="checkBox" label="One check box" move="update(event)"
+						baseline="{baseline1Check.selected ? baseline1Slider.value : 0}"/>
+			<s:Label id="label" text="...and some random text..." move="update(event)"
+					 baseline="{baseline2Check.selected ? baseline2Slider.value : 0}"/>
+			<s:Button id="button" label="and a Button!" move="update(event)"
+					  height="{buttonHeightCheck.selected ? buttonHeightSlider.value : 21}"
+					  baseline="{baseline3Check.selected ? baseline3Slider.value : 0}"/>
+			<!-- visual guides for the baselines -->
+			<s:Group includeInLayout="false">
+				<s:Line width="{container.width}" id="globalBaseline" top="{theLayout.actualBaseline}"
+						visible="{showLayout.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x00FF00" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{checkBox.width-1}" id="checkBoxBaseline"
+						visible="{showCheckBox.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF0000" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{label.width-1}" id="labelBaseline"
+						visible="{showLabel.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0x0000FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+				
+				<s:Line width="{button.width-1}" id="buttonBaseline"
+						visible="{showButton.selected}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF00FF" alpha="0.5" weight="2"/>
+					</s:stroke>
+				</s:Line>
+			</s:Group>
+		</s:Group>
+		<s:Label right="14" top="7" color="0x323232" width="200"
+				 text="This sample shows how you can create a custom layout to extend the HorizontalLayout to provide
+				 baseline alignment functionality."/>
+	</s:Panel>
+	
+</s:Application>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..ff46524
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/srcview/src/skins/TDFPanelSkin.mxml
@@ -0,0 +1,130 @@
+<?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:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+		alpha.disabled="0.5" minWidth="131" minHeight="127">
+	
+	<fx:Metadata>
+		[HostComponent("spark.components.Panel")]
+	</fx:Metadata> 
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" />
+		<s:State name="disabledWithControlBar" />
+	</s:states>
+	
+	<!-- drop shadow -->
+	<s:Rect left="0" top="0" right="0" bottom="0">
+		<s:filters>
+			<s:DropShadowFilter blurX="15" blurY="15" alpha="0.18" distance="11" angle="90" knockout="true" />
+		</s:filters>
+		<s:fill>
+			<s:SolidColor color="0" />
+		</s:fill>
+	</s:Rect>
+	
+	<!-- 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 -->
+	<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 -->
+	<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 -->
+			<s:Label id="titleDisplay" maxDisplayedLines="1"
+					 left="9" right="3" top="1" minHeight="30"
+					 verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+			</s:Label>
+			
+		</s:Group>
+		
+		<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 -->
+			<s:Rect left="0" right="0" bottom="0" top="1" >
+				<s:fill>
+					<s:SolidColor color="0xE2EdF7" />
+				</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="0xD1E0F2" />
+				</s:fill>
+			</s:Rect>
+			
+			<!-- layer 2: control bar -->
+			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
+				<s:layout>
+					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
+				</s:layout>
+			</s:Group>
+		</s:Group>
+	</s:Group>
+</s:Skin>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/sample.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/sample.html b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/sample.html
new file mode 100644
index 0000000..8d05dc2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/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: #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">
+            <!-- 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 = "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="#ffffff" />
+                <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="#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/DataGroup/srcview/SourceIndex.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceIndex.xml b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceIndex.xml
new file mode 100644
index 0000000..a2054a3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceIndex.xml
@@ -0,0 +1,46 @@
+<?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-DataGroup</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="packageIcon" label="skins" expanded="true">
+				<node icon="mxmlIcon" label="TDFPanelSkin.mxml" url="source/skins/TDFPanelSkin.mxml.html"/>
+			</node>
+			<node icon="mxmlAppIcon" selected="true" label="sample.mxml" url="source/sample.mxml.html"/>
+		</node>
+	</nodes>
+	<zipfile label="Download source (ZIP, 23K)" url="Sample-Flex4-DataGroup.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/DataGroup/srcview/SourceStyles.css
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceStyles.css b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceStyles.css
new file mode 100644
index 0000000..9d5210f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/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/DataGroup/srcview/SourceTree.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceTree.html b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/SourceTree.html
new file mode 100644
index 0000000..80281a9
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/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/DataGroup/srcview/index.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/index.html b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/srcview/index.html
new file mode 100644
index 0000000..f59b15e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/DataGroup/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-DataGroup</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>