You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ak...@apache.org on 2014/10/07 04:18:27 UTC

[2/3] Added FlatSpark project

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/PanelSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/PanelSkin.mxml b/frameworks/projects/flatspark/src/skins/PanelSkin.mxml
new file mode 100644
index 0000000..3304b48
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/PanelSkin.mxml
@@ -0,0 +1,253 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.  
+
+    @see spark.components.Panel
+
+    @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" 
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
+    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
+    
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Panel")]
+        ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[
+			import mx.core.FlexVersion;
+			
+			import flatSpark.utils.ColorUtils;
+		
+		/* Define the skin elements that should not be colorized. 
+        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
+        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];
+			
+		/* exclusions before Flex 4.5 for backwards-compatibility purposes */
+		static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
+		
+		/**
+		 * @private
+		 */
+		override public function get colorizeExclusions():Array 
+		{
+			// Since border is styleable via borderColor, no need to allow chromeColor to affect
+			// the border.  This is wrapped in a compatibility flag since this change was added  
+			// in Flex 4.5
+			if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
+			{
+				return exclusions_4_0;
+			}
+			
+			return exclusions;
+		}
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {            
+			dropShadow.tlRadius = cornerRadius;
+			dropShadow.trRadius = cornerRadius;
+			dropShadow.blRadius = cornerRadius;
+			dropShadow.brRadius = cornerRadius;
+			
+			setPartCornerRadii(topMaskRect);  
+			setPartCornerRadii(background);  
+            
+			if (bottomMaskRect != null)
+			{
+				setPartCornerRadii(bottomMaskRect);
+			}
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+        
+        /**
+         * @private
+         */  
+        private function setPartCornerRadii(target:Rect):void
+        {            
+            target.topLeftRadiusX = cornerRadius;
+            target.topRightRadiusX = cornerRadius;
+            target.bottomLeftRadiusX = cornerRadius;
+            target.bottomRightRadiusX = cornerRadius;
+        }
+        
+		private var cornerRadius:Number=4;
+		]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+        <s:State name="normalWithControlBar" stateGroups="withControls" />
+        <s:State name="disabledWithControlBar" stateGroups="withControls" />
+    </s:states>
+    
+    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
+    <!--- @private -->
+    <s:RectangularDropShadow id="dropShadow" blurX="4" distance="0" angle="90" alpha="1"
+                          color="{ColorUtils.Silver}" left="0" top="0" right="0" bottom="0"/>
+    
+    <!-- drop shadow can't be hittable so all other graphics go in this group -->
+    <s:Group left="0" right="0" top="0" bottom="0">
+        
+        <!-- top group mask -->
+        <!--- @private -->
+        <s:Group left="0" top="0" right="0" bottom="0" id="topGroupMask" >
+            <!--- @private -->
+            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        <!-- bottom group mask -->
+        <!--- @private -->
+        <s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask" 
+                 includeIn="normalWithControlBar, disabledWithControlBar">
+            <!--- @private -->
+            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        <!-- layer 2: background fill -->
+        <!--- Defines the appearance of the PanelSkin class's background. -->
+        <s:Rect id="background" left="0" top="0" right="0" bottom="0">
+            <s:fill>
+                <!--- @private
+                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
+                <s:SolidColor id="backgroundFill" color="0xFFFFFF"/>
+            </s:fill>
+        </s:Rect>
+        
+        <!-- layer 3: contents -->
+        <!--- Contains the vertical stack of titlebar content and controlbar. -->
+        <s:Group left="0" top="0" right="0" bottom="0" id="contents">
+            <s:layout>
+                <s:VerticalLayout gap="0" horizontalAlign="justify" />
+            </s:layout>
+            
+            <!--- @private -->
+            <s:Group id="topGroup" mask="{topGroupMask}">
+                
+                <!-- layer 0: title bar fill -->
+                <!--- @private -->
+                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="0">
+                    <s:fill>
+						<s:SolidColor color="{ColorUtils.PeterRiver}"/>
+                    </s:fill>
+                </s:Rect>
+                
+                <!-- layer 1: title bar highlight -->
+                <!--- @private -->
+                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
+                    <s:fill>
+						<s:SolidColor color="{ColorUtils.PeterRiver}"/>
+                    </s:fill>
+                </s:Rect>
+                
+                <!-- layer 2: title bar divider -->
+                <!--- @private -->
+                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+                    <s:fill>
+						<s:SolidColor color="{ColorUtils.BelizeHole}"/>
+                    </s:fill>
+                </s:Rect>
+                
+                <!-- layer 3: text -->
+                <!--- @copy spark.components.Panel#titleDisplay -->
+				<s:Label id="titleDisplay" maxDisplayedLines="1"  fontFamily="Lato" fontSize="15" fontStyle="normal" color="#FFFFFF"
+						 left="15" right="5" top="2" bottom="0" minHeight="36" height="36"
+						 verticalAlign="middle" fontWeight="bold" />
+            </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
+            -->
+            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+            </s:Group>
+            
+            <!--- @private -->
+            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+                     includeIn="normalWithControlBar, disabledWithControlBar" >
+                
+                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
+
+                    <!-- layer 0: control bar divider line -->
+                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.5">
+                        <s:fill>
+							<s:SolidColor color="{ColorUtils.Silver}" />
+                        </s:fill>
+                    </s:Rect>
+                    
+                    <!-- layer 1: control bar highlight -->
+                    <s:Rect left="0" right="0" top="1" bottom="0">
+						<s:fill>
+							<s:SolidColor color="{ColorUtils.Clouds}" />
+						</s:fill>
+                    </s:Rect>
+                    
+                    <!-- layer 2: control bar fill -->
+                    <s:Rect left="0" right="0" top="1" bottom="0">
+						<s:fill>
+							<s:SolidColor color="{ColorUtils.Clouds}" />
+						</s:fill>
+                    </s:Rect>
+                </s:Group>
+                <!-- layer 3: control bar -->
+                <!--- @copy spark.components.Panel#controlBarGroup -->
+                <s:Group id="controlBarGroup" left="0" right="0" top="0" bottom="0" 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:Group>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ProgressBarSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ProgressBarSkin.mxml b/frameworks/projects/flatspark/src/skins/ProgressBarSkin.mxml
new file mode 100644
index 0000000..3a0ad79
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ProgressBarSkin.mxml
@@ -0,0 +1,54 @@
+<?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">
+	<fx:Metadata>
+		[HostComponent("spark.components.ProgressBar")]
+	</fx:Metadata>
+	
+	<fx:Script>
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+		]]>
+	</fx:Script>
+	<s:Rect left="0" minHeight="14" top="0" bottom="0" right="0" radiusX="4">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.Clouds}" />
+		</s:fill>
+	</s:Rect>
+	<s:Group id="progressGroup" top="0" bottom="0"
+			 left="{hostComponent.direction=='left' ? 0 : NaN}"
+			 right="{hostComponent.direction=='right' ? 0 : NaN}">
+		<s:Rect left="0" top="0" bottom="0" right="0" radiusX="4">
+			<s:fill>
+				<s:SolidColor color="{ColorUtils.Turquoise}" />
+			</s:fill>
+		</s:Rect>
+		<!--
+		Variant #2 (looks nicer) - uncomment this and remove last Label declaration
+		<s:Label id="percentDisplay"
+		right="2" verticalCenter="0" verticalAlign="middle"
+		visible="{progressBox.width > percentDisplay.width + 4}"
+		includeInLayout="{progressBox.width > percentDisplay.width + 4}"/>
+		-->
+	</s:Group>
+	<s:Label id="percentDisplay" left="2" right="2" verticalCenter="0" verticalAlign="middle" color="{ColorUtils.WetAsphalt}" fontFamily="Lato" fontWeight="bold" fontSize="13" textAlign="center" />
+
+</s:Skin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/RadioButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/RadioButtonSkin.mxml b/frameworks/projects/flatspark/src/skins/RadioButtonSkin.mxml
new file mode 100644
index 0000000..0f7a11f
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/RadioButtonSkin.mxml
@@ -0,0 +1,129 @@
+<?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.
+
+-->
+
+<!--- The default skin class for a Spark RadioButton component.  
+
+       @see spark.components.RadioButton
+       @see spark.components.RadioButtonGroup
+        
+      @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"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5">
+	<fx:Metadata>[HostComponent("spark.components.RadioButton")]</fx:Metadata>
+
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For button, the graphics are colorized but the label is not. */
+        static private const exclusions:Array = ["labelDisplay", "dot"];
+
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
+        static private const symbols:Array = [];
+        
+        /**
+         * @private
+         */
+        override public function get symbolItems():Array {return symbols};
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+    </fx:Script>
+    
+    <fx:Script>
+        <![CDATA[
+			import flatSpark.utils.ColorUtils;
+        /** 
+         * @private 
+         */     
+        private static const focusExclusions:Array = ["labelDisplay"];
+
+        /**
+         *  @private
+         */
+        override public function get focusSkinExclusions():Array { return focusExclusions;};
+        ]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" stateGroups="overStates" />
+        <s:State name="down" stateGroups="downStates" />
+        <s:State name="disabled" stateGroups="disabledStates" />
+        <s:State name="upAndSelected" stateGroups="selectedStates" />
+        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
+    </s:states>
+    
+	<s:Group verticalCenter="0" width="22" height="22">
+		<!-- fill -->
+		<s:Ellipse left="1" top="1" right="1" bottom="1">
+			<s:fill>
+				<s:SolidColor color="#FFFFFF" />
+			</s:fill>
+			<s:stroke>
+				<s:SolidColorStroke color="{ColorUtils.Silver}" weight="4"/>
+			</s:stroke>
+		</s:Ellipse>
+		
+		<s:Ellipse left="1" top="1" right="1" bottom="1" includeIn="overStates">
+			<s:stroke>
+				<s:SolidColorStroke color="{ColorUtils.Asbestos}" weight="4"/>
+			</s:stroke>
+		</s:Ellipse>
+		
+		<s:Ellipse left="1" top="1" right="1" bottom="1" includeIn="selectedStates">
+			<s:stroke>
+				<s:SolidColorStroke color="{ColorUtils.Turquoise}" weight="4"/>
+			</s:stroke>
+		</s:Ellipse>
+		
+		<s:Ellipse left="8" top="8" right="8" bottom="8" includeIn="selectedStates">
+			<s:fill>
+				<s:SolidColor color="{ColorUtils.Turquoise}" />
+			</s:fill>			
+		</s:Ellipse>
+		
+		
+	</s:Group>
+	
+	<!-- Label -->
+	<!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
+	<s:Label id="labelDisplay"
+			 textAlign="start" color="{ColorUtils.WetAsphalt}"
+			 verticalAlign="middle" fontSize="14"
+			 maxDisplayedLines="1" fontFamily="Lato" paddingLeft="30"
+			 left="0" right="0" top="3" bottom="3"/>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ScrollerSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ScrollerSkin.mxml b/frameworks/projects/flatspark/src/skins/ScrollerSkin.mxml
new file mode 100644
index 0000000..4729d05
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ScrollerSkin.mxml
@@ -0,0 +1,106 @@
+<?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.
+
+-->
+
+
+<!--
+
+Scroller unconditionally sets its skin's layout to private layout
+implementation that handles the scroll policies.  Scroller skins can
+only provide replacement scrollbars.  The skin's layout and
+constraints or dimensions set on skin parts will not be honored.  To
+gain more control over the layout of a viewport and its scrollbars,
+instead of using Scroller, add them to a Group and use the ScrollBar component's
+viewport property to link them together.
+ 
+-->
+
+<!--- The default skin class for the Spark Scroller component. 
+
+     @see spark.components.Scroller
+    
+      @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">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.Scroller")]
+    ]]>
+    </fx:Metadata> 
+
+    <fx:Script>
+    <![CDATA[    
+        /**
+         *  @private
+         */
+        override public function beginHighlightBitmapCapture() : Boolean
+        {
+            var needUpdate:Boolean = super.beginHighlightBitmapCapture();
+            
+            // Draw an opaque rect that fill our entire skin. Our background
+            // is transparent, but we don't want focus/error skins to
+            // poke through.  This is safe to do since we don't have any 
+            // graphic elements as direct children.
+            graphics.beginFill(0);
+            graphics.drawRect(0, 0, width, height);
+            graphics.endFill();
+
+            return needUpdate;
+        }
+        
+        /**
+         *  @private
+         */
+        override public function endHighlightBitmapCapture() : Boolean
+        {
+            var needUpdate:Boolean = super.endHighlightBitmapCapture();
+            
+            // Clear the rect we drew in beginBitmapCapture();
+            graphics.clear();
+
+            return needUpdate;
+        }
+    ]]>
+    </fx:Script>
+    
+    <fx:Declarations>
+        <!---  A vertical scrollbar that lets you control the portion of data that is displayed 
+        when there is too much data to fit vertically in a display area.
+        The Scroller determines whether the vertical ScrollBar is visible. -->
+        <fx:Component id="verticalScrollBarFactory">
+            <s:VScrollBar visible="false" skinClass="flatSpark.skins.VScrollBarSkin" />
+        </fx:Component>
+        
+        <!---  A horizontal scrollbar that lets you control the portion of data that is displayed 
+        when there is too much data to fit horizontally in a display area.
+        The Scroller determines whether the horizontal ScrollBar is visible. -->
+        <fx:Component  id="horizontalScrollBarFactory">
+            <s:HScrollBar visible="false" skinClass="flatSpark.skins.HScrollBarSkin" />
+        </fx:Component> 
+
+    </fx:Declarations>
+
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/TextInputIconSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/TextInputIconSkin.mxml b/frameworks/projects/flatspark/src/skins/TextInputIconSkin.mxml
new file mode 100644
index 0000000..8578223
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/TextInputIconSkin.mxml
@@ -0,0 +1,338 @@
+<?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.
+
+-->
+<!--- The default skin class for Spark TextInput component.  
+
+     @see spark.components.TextInput
+        
+      @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"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" height="{TextInputSizeEnum.Normal}"
+    alpha.disabledStates="0.5" blendMode="normal">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("flatSpark.components.TextInputIcon")]
+    ]]>
+    </fx:Metadata> 
+	
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace fb "http://ns.adobe.com/flashbuilder/2009";
+		@namespace spark "spark.skins.spark.*";
+		
+		*
+		{
+			/*focusColor: #FFFFFF;
+			focusThickness: 1px;
+			focusAlpha: 1;*/
+			/*focusAlpha: 0;*/
+			errorColor: #E74C3C;
+		}
+	</fx:Style>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[
+			import mx.core.FlexVersion;
+			
+			import flatSpark.enums.ButtonSizeEnum;
+			import flatSpark.enums.TextInputSizeEnum;
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+        private var paddingChanged:Boolean;
+        
+        /* Define the skin elements that should not be colorized. */
+        static private const exclusions:Array = ["background", "background_disabled", "textDisplay", "promptDisplay", "border", "border_disabled"];
+        
+        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
+        static private const exclusions_4_0:Array = ["background", "background_disabled", "textDisplay", "promptDisplay"];
+        
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array 
+        {
+            // Since border is styleable via borderColor, no need to allow chromeColor to affect
+            // the border.  This is wrapped in a compatibility flag since this change was added  
+            // in Flex 4.5
+            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
+            {
+                return exclusions_4_0;
+            }
+            
+            return exclusions;
+        }
+        
+        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+        static private const contentFill:Array = ["bgFill"];
+
+        /**
+         *  @private
+         */
+        override public function get contentItems():Array {return contentFill};
+        
+        /**
+         *  @private
+         */
+        override protected function commitProperties():void
+        {
+            super.commitProperties();
+            
+            if (paddingChanged)
+            {
+                updatePadding();
+                paddingChanged = false;
+            }
+        }
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         *  @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+            if (getStyle("borderVisible") == true)
+            {
+                border.visible = true;
+                background.left = background.top = background.right = background.bottom = 2;
+                textDisplay.left = textDisplay.top = textDisplay.bottom = 8;
+				textDisplay.right = 30;
+                if (promptDisplay)
+                {
+                    promptDisplay.setLayoutBoundsSize(unscaledWidth - 8, unscaledHeight - 8);
+                    promptDisplay.setLayoutBoundsPosition(5, 5);
+                }
+            }
+            else
+            {
+                border.visible = false;
+                background.left = background.top = background.right = background.bottom = 0;
+                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
+                if (promptDisplay)
+                {
+                    promptDisplay.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
+                    promptDisplay.setLayoutBoundsPosition(0, 0);
+                }
+            }
+            
+            /*borderStroke.color = getStyle("borderColor");
+            borderStroke.alpha = getStyle("borderAlpha");*/
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+
+        /**
+         *  @private
+         */
+        private function updatePadding():void
+        {
+            if (!textDisplay)
+                return;
+            
+            // Push padding styles into the textDisplay
+            var padding:Number;
+            
+            padding = getStyle("paddingLeft");
+            if (textDisplay.getStyle("paddingLeft") != padding)
+                textDisplay.setStyle("paddingLeft", padding);
+            
+            padding = getStyle("paddingTop");
+            if (textDisplay.getStyle("paddingTop") != padding)
+                textDisplay.setStyle("paddingTop", padding);
+            
+            padding = getStyle("paddingRight");
+            if (textDisplay.getStyle("paddingRight") != padding)
+                textDisplay.setStyle("paddingRight", padding);
+            
+            padding = getStyle("paddingBottom");
+            if (textDisplay.getStyle("paddingBottom") != padding)
+                textDisplay.setStyle("paddingBottom", padding);
+            
+            if (!promptDisplay)
+                return;
+            
+            padding = getStyle("paddingLeft");
+            if (promptDisplay.getStyle("paddingLeft") != padding)
+                promptDisplay.setStyle("paddingLeft", padding);
+            
+            padding = getStyle("paddingTop");
+            if (promptDisplay.getStyle("paddingTop") != padding)
+                promptDisplay.setStyle("paddingTop", padding);
+            
+            padding = getStyle("paddingRight");
+            if (promptDisplay.getStyle("paddingRight") != padding)
+                promptDisplay.setStyle("paddingRight", padding);
+            
+            padding = getStyle("paddingBottom");
+            if (promptDisplay.getStyle("paddingBottom") != padding)
+                promptDisplay.setStyle("paddingBottom", padding);
+        }
+        
+        /**
+         *  @private
+         */
+        override public function styleChanged(styleProp:String):void
+        {
+            var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+            super.styleChanged(styleProp);
+            
+            if (allStyles || styleProp.indexOf("padding") == 0)
+            {
+                paddingChanged = true;
+                invalidateProperties();
+            }
+        }
+			
+			protected function textDisplay_focusInHandler(event:FocusEvent):void
+			{
+				borderStroke.color = ColorUtils.Asbestos;
+				iconFont.setStyle("color", ColorUtils.Asbestos);
+			}
+			
+			protected function textDisplay_focusOutHandler(event:FocusEvent):void
+			{
+				borderStroke.color = ColorUtils.Silver;
+				iconFont.setStyle("color", ColorUtils.Silver);
+			}
+			
+			private static function getFontSize(height:int):int
+			{
+				var altura:int = 15;
+				
+				switch (height)
+				{
+					case TextInputSizeEnum.Large:
+						altura = 17;
+						break;
+					case TextInputSizeEnum.Normal:
+						altura = 15;
+						break;
+					case TextInputSizeEnum.Small:
+						altura = 13;
+						break;
+				}
+				
+				return altura;
+			}
+			
+			private static function getIconSize(height:int):int
+			{
+				var altura:int = 17;
+				
+				switch (height)
+				{
+					case TextInputSizeEnum.Large:
+						altura = 19;
+						break;
+					case TextInputSizeEnum.Normal:
+						altura = 17;
+						break;
+					case TextInputSizeEnum.Small:
+						altura = 15;
+						break;
+				}
+				
+				return altura;
+			}
+			
+		]]>
+    </fx:Script>
+    
+    <fx:Script>
+        <![CDATA[
+        /** 
+         * @private 
+         */     
+        private static const focusExclusions:Array = ["textDisplay"];
+
+        /**
+         *  @private
+         */
+        override public function get focusSkinExclusions():Array { return focusExclusions;};
+        ]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal"/>
+        <s:State name="disabled" stateGroups="disabledStates"/>
+        <s:State name="normalWithPrompt"/>
+        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
+    </s:states>
+    
+    <!-- border --> 
+    <!--- @private -->
+    <s:Rect left="0" right="0" top="0" bottom="0" id="border" radiusX="6">
+        <s:stroke>     
+            <!--- @private -->
+            <s:SolidColorStroke id="borderStroke" weight="2" color="{ColorUtils.Silver}"/>
+        </s:stroke>
+    </s:Rect>
+
+    <!-- fill -->
+    <!--- Defines the appearance of the TextInput component's background. -->
+    <s:Rect id="background" left="2" right="2" top="2" bottom="2" radiusX="6">
+        <s:fill>
+            <!--- @private Defines the background fill color. -->
+            <s:SolidColor id="bgFill" color="0xFFFFFF" />
+        </s:fill>
+    </s:Rect>
+	
+	<s:Rect id="background_disabled" left="2" right="2" top="2" bottom="2" radiusX="6" includeIn="disabledStates">
+		<s:fill>
+			<s:SolidColor color="0xf4f6f6"/>
+		</s:fill>
+	</s:Rect>
+    
+    <!-- text -->
+	<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
+    <s:RichEditableText id="textDisplay"
+              verticalAlign="middle" focusIn="textDisplay_focusInHandler(event)" focusOut="textDisplay_focusOutHandler(event)"
+              widthInChars="10" fontFamily="Lato" fontWeight="normal" color="{ColorUtils.WetAsphalt}"
+              left="8" right="30" top="8" bottom="8" fontSize="{getFontSize(hostComponent.height)}"/>
+    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
+    <s:Label id="promptDisplay" maxDisplayedLines="1" fontSize="{getFontSize(hostComponent.height)}"
+                verticalAlign="middle" fontFamily="Lato" fontWeight="normal" fontStyle="normal" color="{ColorUtils.Silver}"
+                mouseEnabled="false" mouseChildren="false"
+                includeIn="normalWithPrompt,disabledWithPrompt" 
+                includeInLayout="false"
+                />
+	<s:Label id="iconFont" color="{ColorUtils.Silver}" color.disabledStates="{ColorUtils.Silver}" text="{hostComponent.iconFont}"
+			 textAlign="right" fontSize="{getIconSize(hostComponent.height)}" fontFamily="FontAwesome" fontStyle="normal"
+			 maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
+			 horizontalCenter="0" verticalCenter="0" verticalAlign="middle"
+			 left="8" right="8" top="2" bottom="2" includeInLayout="{iconFont != null}">
+	</s:Label>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/TextInputSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/TextInputSkin.mxml b/frameworks/projects/flatspark/src/skins/TextInputSkin.mxml
new file mode 100644
index 0000000..9c1facb
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/TextInputSkin.mxml
@@ -0,0 +1,330 @@
+<?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.
+
+-->
+<!--- The default skin class for Spark TextInput component.  
+
+     @see spark.components.TextInput
+        
+      @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"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" height="{TextInputSizeEnum.Normal}"
+    alpha.disabledStates="0.5" blendMode="normal">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.TextInput")]
+    ]]>
+    </fx:Metadata> 
+	
+	<fx:Style>
+		@namespace s "library://ns.adobe.com/flex/spark";
+		@namespace fb "http://ns.adobe.com/flashbuilder/2009";
+		@namespace spark "spark.skins.spark.*";
+		
+		*
+		{
+			/*focusColor: #FFFFFF;
+			focusThickness: 1px;
+			focusAlpha: 1;*/
+			/*focusAlpha: 0;*/
+			errorColor: #E74C3C;
+		}
+	</fx:Style>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[
+			import mx.core.FlexVersion;
+			
+			import flatSpark.enums.ButtonSizeEnum;
+			import flatSpark.enums.TextInputSizeEnum;
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+        private var paddingChanged:Boolean;
+        
+        /* Define the skin elements that should not be colorized. */
+        static private const exclusions:Array = ["background", "background_disabled", "textDisplay", "promptDisplay", "border", "border_disabled"];
+        
+        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
+        static private const exclusions_4_0:Array = ["background", "background_disabled", "textDisplay", "promptDisplay"];
+        
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array 
+        {
+            // Since border is styleable via borderColor, no need to allow chromeColor to affect
+            // the border.  This is wrapped in a compatibility flag since this change was added  
+            // in Flex 4.5
+            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
+            {
+                return exclusions_4_0;
+            }
+            
+            return exclusions;
+        }
+        
+        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+        static private const contentFill:Array = ["bgFill"];
+
+        /**
+         *  @private
+         */
+        override public function get contentItems():Array {return contentFill};
+        
+        /**
+         *  @private
+         */
+        override protected function commitProperties():void
+        {
+            super.commitProperties();
+            
+            if (paddingChanged)
+            {
+                updatePadding();
+                paddingChanged = false;
+            }
+        }
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         *  @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+            if (getStyle("borderVisible") == true)
+            {
+                border.visible = true;
+                background.left = background.top = background.right = background.bottom = 2;
+                textDisplay.left = textDisplay.top = textDisplay.bottom = 8;
+				textDisplay.right = 30;
+                if (promptDisplay)
+                {
+                    promptDisplay.setLayoutBoundsSize(unscaledWidth - 8, unscaledHeight - 8);
+                    promptDisplay.setLayoutBoundsPosition(5, 5);
+                }
+            }
+            else
+            {
+                border.visible = false;
+                background.left = background.top = background.right = background.bottom = 0;
+                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
+                if (promptDisplay)
+                {
+                    promptDisplay.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
+                    promptDisplay.setLayoutBoundsPosition(0, 0);
+                }
+            }
+            
+            /*borderStroke.color = getStyle("borderColor");
+            borderStroke.alpha = getStyle("borderAlpha");*/
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+
+        /**
+         *  @private
+         */
+        private function updatePadding():void
+        {
+            if (!textDisplay)
+                return;
+            
+            // Push padding styles into the textDisplay
+            var padding:Number;
+            
+            padding = getStyle("paddingLeft");
+            if (textDisplay.getStyle("paddingLeft") != padding)
+                textDisplay.setStyle("paddingLeft", padding);
+            
+            padding = getStyle("paddingTop");
+            if (textDisplay.getStyle("paddingTop") != padding)
+                textDisplay.setStyle("paddingTop", padding);
+            
+            padding = getStyle("paddingRight");
+            if (textDisplay.getStyle("paddingRight") != padding)
+                textDisplay.setStyle("paddingRight", padding);
+            
+            padding = getStyle("paddingBottom");
+            if (textDisplay.getStyle("paddingBottom") != padding)
+                textDisplay.setStyle("paddingBottom", padding);
+            
+            if (!promptDisplay)
+                return;
+            
+            padding = getStyle("paddingLeft");
+            if (promptDisplay.getStyle("paddingLeft") != padding)
+                promptDisplay.setStyle("paddingLeft", padding);
+            
+            padding = getStyle("paddingTop");
+            if (promptDisplay.getStyle("paddingTop") != padding)
+                promptDisplay.setStyle("paddingTop", padding);
+            
+            padding = getStyle("paddingRight");
+            if (promptDisplay.getStyle("paddingRight") != padding)
+                promptDisplay.setStyle("paddingRight", padding);
+            
+            padding = getStyle("paddingBottom");
+            if (promptDisplay.getStyle("paddingBottom") != padding)
+                promptDisplay.setStyle("paddingBottom", padding);
+        }
+        
+        /**
+         *  @private
+         */
+        override public function styleChanged(styleProp:String):void
+        {
+            var allStyles:Boolean = !styleProp || styleProp == "styleName";
+
+            super.styleChanged(styleProp);
+            
+            if (allStyles || styleProp.indexOf("padding") == 0)
+            {
+                paddingChanged = true;
+                invalidateProperties();
+            }
+        }
+			
+			protected function textDisplay_focusInHandler(event:FocusEvent):void
+			{
+				borderStroke.color = ColorUtils.Asbestos;
+			}
+			
+			protected function textDisplay_focusOutHandler(event:FocusEvent):void
+			{
+				borderStroke.color = ColorUtils.Silver;
+			}
+			
+			private static function getFontSize(height:int):int
+			{
+				var altura:int = 15;
+				
+				switch (height)
+				{
+					case TextInputSizeEnum.Large:
+						altura = 17;
+						break;
+					case TextInputSizeEnum.Normal:
+						altura = 15;
+						break;
+					case TextInputSizeEnum.Small:
+						altura = 13;
+						break;
+				}
+				
+				return altura;
+			}
+			
+			private static function getIconSize(height:int):int
+			{
+				var altura:int = 17;
+				
+				switch (height)
+				{
+					case TextInputSizeEnum.Large:
+						altura = 19;
+						break;
+					case TextInputSizeEnum.Normal:
+						altura = 17;
+						break;
+					case TextInputSizeEnum.Small:
+						altura = 15;
+						break;
+				}
+				
+				return altura;
+			}
+			
+		]]>
+    </fx:Script>
+    
+    <fx:Script>
+        <![CDATA[
+        /** 
+         * @private 
+         */     
+        private static const focusExclusions:Array = ["textDisplay"];
+
+        /**
+         *  @private
+         */
+        override public function get focusSkinExclusions():Array { return focusExclusions;};
+        ]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal"/>
+        <s:State name="disabled" stateGroups="disabledStates"/>
+        <s:State name="normalWithPrompt"/>
+        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
+    </s:states>
+    
+    <!-- border --> 
+    <!--- @private -->
+    <s:Rect left="0" right="0" top="0" bottom="0" id="border" radiusX="6">
+        <s:stroke>     
+            <!--- @private -->
+            <s:SolidColorStroke id="borderStroke" weight="2" color="{ColorUtils.Silver}"/>
+        </s:stroke>
+    </s:Rect>
+
+    <!-- fill -->
+    <!--- Defines the appearance of the TextInput component's background. -->
+    <s:Rect id="background" left="2" right="2" top="2" bottom="2" radiusX="6">
+        <s:fill>
+            <!--- @private Defines the background fill color. -->
+            <s:SolidColor id="bgFill" color="0xFFFFFF" />
+        </s:fill>
+    </s:Rect>
+	
+	<s:Rect id="background_disabled" left="2" right="2" top="2" bottom="2" radiusX="6" includeIn="disabledStates">
+		<s:fill>
+			<s:SolidColor color="0xf4f6f6"/>
+		</s:fill>
+	</s:Rect>
+    
+    <!-- text -->
+	<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
+    <s:RichEditableText id="textDisplay"
+              verticalAlign="middle" focusIn="textDisplay_focusInHandler(event)" focusOut="textDisplay_focusOutHandler(event)"
+              widthInChars="10" fontFamily="Lato" fontWeight="normal" color="{ColorUtils.WetAsphalt}"
+              left="8" right="30" top="8" bottom="8" fontSize="{getFontSize(hostComponent.height)}"/>
+    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
+    <s:Label id="promptDisplay" maxDisplayedLines="1" fontSize="{getFontSize(hostComponent.height)}"
+                verticalAlign="middle" fontFamily="Lato" fontWeight="normal" fontStyle="normal" color="{ColorUtils.Silver}"
+                mouseEnabled="false" mouseChildren="false"
+                includeIn="normalWithPrompt,disabledWithPrompt" 
+                includeInLayout="false"
+                />
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/TitleWindowCloseButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/TitleWindowCloseButtonSkin.mxml b/frameworks/projects/flatspark/src/skins/TitleWindowCloseButtonSkin.mxml
new file mode 100644
index 0000000..635b924
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/TitleWindowCloseButtonSkin.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.
+
+-->
+
+
+<!--- The default skin class for the close button of the Spark TitleWindow component.  
+
+@see spark.skins.spark.TitleWindowSkin     
+@see spark.components.TitleWindow
+
+@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"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" initialize="initializeHandler(event)">
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	<fx:Script>
+		<![CDATA[
+			import mx.events.FlexEvent;
+			
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+			protected function initializeHandler(event:FlexEvent):void
+			{
+				// TODO Auto-generated method stub
+				hostComponent.useHandCursor=true;
+				hostComponent.buttonMode=true;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<!--		<fx:Script fb:purpose="styling">
+	<![CDATA[
+	import flatSpark.utils.AwesomeUtils;
+	]]>
+	/* Define the skin elements that should not be colorized. 
+	For closeButton, the graphics are colorized but the x is not. */
+	static private const exclusions:Array = ["xSymbol"];
+	
+	/** 
+	* @private
+	*/     
+	override public function get colorizeExclusions():Array {return exclusions;}
+	
+	/* Define the symbol fill items that should be colored by the "symbolColor" style. */
+	static private const symbols:Array = ["xFill1", "xFill2"];
+	
+	/**
+	* @private
+	*/
+	override public function get symbolItems():Array {return symbols};
+	</fx:Script>-->
+	
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over"/>
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<s:Rect left="0" top="0" right="0" bottom="0" radiusX="6" width="26" height="26" includeIn="up">
+		<s:fill>
+			<s:SolidColor alpha="0" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="0" top="0" right="0" bottom="0" radiusX="6" width="26" height="26" includeIn="over">
+		<s:fill>
+			<s:SolidColor alpha="1" color="{ColorUtils.BelizeHole}" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="0" top="0" right="0" bottom="0" radiusX="6" width="26" height="26" includeIn="down">
+		<s:fill>
+			<s:SolidColor alpha="1" color="{ColorUtils.BelizeHole}" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect left="0" top="0" right="0" bottom="0" radiusX="6" width="26" height="26" includeIn="disabled">
+		<s:fill>
+			<s:SolidColor alpha="1" color="{ColorUtils.Clouds}" />
+		</s:fill>
+	</s:Rect>
+	
+	<s:Label fontFamily="FontAwesome" fontSize="18" color="#FFFFFF" text="{AwesomeUtils.fa_times}" includeIn="up, down, over, disabled"
+			 itemCreationPolicy="immediate" verticalAlign="middle" horizontalCenter="0" verticalCenter="0" />
+	
+
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/TitleWindowSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/TitleWindowSkin.mxml b/frameworks/projects/flatspark/src/skins/TitleWindowSkin.mxml
new file mode 100644
index 0000000..5180756
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/TitleWindowSkin.mxml
@@ -0,0 +1,256 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for a Spark TitleWindow container.  
+
+     @see spark.skins.spark.TitleWindowCloseButtonSkin
+     @see spark.components.TitleWindow
+
+     @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" 
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
+    minWidth="76" minHeight="76" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
+    
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.TitleWindow")]
+        ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[
+			import mx.core.FlexVersion;
+			
+			import flatSpark.utils.ColorUtils;
+		
+		/* Define the skin elements that should not be colorized. 
+        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
+        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "border"];
+		
+		/* exclusions before Flex 4.5 for backwards-compatibility purposes */
+		static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup"];
+		
+		/**
+		 * @private
+		 */
+		override public function get colorizeExclusions():Array 
+		{
+			// Since border is styleable via borderColor, no need to allow chromeColor to affect
+			// the border.  This is wrapped in a compatibility flag since this change was added  
+			// in Flex 4.5
+			if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
+			{
+				return exclusions_4_0;
+			}
+			
+			return exclusions;
+		}
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+			var withControls:Boolean = 
+				(currentState == "disabledWithControlBar" || 
+					currentState == "normalWithControlBar" ||
+					currentState == "inactiveWithControlBar");
+			
+			setPartCornerRadii(topMaskRect, withControls);  
+			setPartCornerRadii(background, withControls);
+			if (bottomMaskRect != null)
+			{
+				setPartCornerRadii(bottomMaskRect, withControls);
+			}
+			
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+        
+        /**
+         * @private
+         */  
+        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
+        {            
+            target.topLeftRadiusX = cornerRadius;
+            target.topRightRadiusX = cornerRadius;
+            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
+            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
+        }
+        
+        private var cornerRadius:Number=4;
+		]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="inactive" stateGroups="inactiveGroup" />
+        <s:State name="disabled" />
+        <s:State name="normalWithControlBar" stateGroups="withControls" />
+        <s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" />
+        <s:State name="disabledWithControlBar" stateGroups="withControls" />
+    </s:states>
+    
+    <!--- drop shadow can't be hittable so all other graphics go in this group -->
+    <s:Group left="0" right="0" top="0" bottom="0">
+        
+        <!--- top group mask @private-->
+        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask">
+            <!--- @private-->
+            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        <!--- bottom group mask @private-->
+        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
+                 includeIn="withControls">
+            <!--- @private-->
+            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        
+        <!-- layer 2: background fill -->
+        <!--- Defines the appearance of the TitleWindowSkin class's background. -->
+        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
+            <s:fill>
+                <!--- Defines the TitleWindowSkin class's background fill. The default color is 0xFFFFFF. -->
+                <s:SolidColor id="backgroundFill" color="{ColorUtils.Clouds}"/>
+            </s:fill>
+        </s:Rect>
+        
+        <!-- layer 3: contents -->
+        <!--- Contains the vertical stack of title bar content and control bar. -->
+        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
+            <s:layout>
+                <s:VerticalLayout gap="0" horizontalAlign="justify" />
+            </s:layout>
+            <!--- @private -->
+            <s:Group id="topGroup" mask="{topGroupMask}" height="56">
+                
+                <!--- layer 0: title bar fill @private -->
+                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.PeterRiver}"/>
+					</s:fill>
+                </s:Rect>
+                
+                <!--- layer 1: title bar highlight @private -->
+                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.PeterRiver}"/>
+					</s:fill>
+                </s:Rect>
+                
+                <!--- layer 2: title bar divider @private -->
+                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.BelizeHole}"/>
+					</s:fill>
+					
+					<s:filters>
+						<s:DropShadowFilter distance="1" angle="90" color="{ColorUtils.Silver}"/>
+					</s:filters>
+                </s:Rect>
+                
+                <!-- layer 3: text -->
+                <!--- @copy spark.components.Panel#titleDisplay -->
+                <s:Label id="titleDisplay" maxDisplayedLines="1"  fontFamily="Lato" fontSize="21" fontStyle="normal" color="#FFFFFF"
+                         left="15" right="36" top="1" bottom="0" minHeight="56" height="56"
+                         verticalAlign="middle" fontWeight="bold" />
+                
+                <!-- layer 4: moveArea -->
+                <!--- @copy spark.components.TitleWindow#moveArea -->
+                <s:Group id="moveArea" left="0" right="0" top="0" bottom="0" />
+                
+                <!--- @copy spark.components.TitleWindow#closeButton -->
+                <s:Button id="closeButton" skinClass="flatSpark.skins.TitleWindowCloseButtonSkin" 
+                         right="15" top="15" />
+            </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
+            -->
+            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+            </s:Group>
+            
+            <!--- @private -->
+            <s:Group id="bottomGroup" minWidth="0" minHeight="0" 
+                     includeIn="withControls">  
+                
+                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}" height="65">
+
+                    <!-- layer 0: control bar divider line -->
+                    <s:Rect left="0" right="0" top="0" height="1">
+                        <s:fill>
+                            <s:SolidColor color="{ColorUtils.Silver}" />
+                        </s:fill>
+                    </s:Rect>
+                    
+                    <!-- layer 1: control bar highlight -->
+                    <s:Rect left="0" right="0" top="1" bottom="0">
+						<s:fill>
+							<s:SolidColor color="0xFFFFFF" />
+						</s:fill>
+                    </s:Rect>
+                    
+                    <!-- layer 2: control bar fill -->
+                    <s:Rect left="1" right="1" top="2" bottom="1">
+						<s:fill>
+							<s:SolidColor color="0xFFFFFF" />
+						</s:fill>
+                    </s:Rect>
+                </s:Group>
+                
+                <!--- @copy spark.components.Panel#controlBarGroup -->
+                <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:Group>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/VScrollBarSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/VScrollBarSkin.mxml b/frameworks/projects/flatspark/src/skins/VScrollBarSkin.mxml
new file mode 100644
index 0000000..82e8d14
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/VScrollBarSkin.mxml
@@ -0,0 +1,87 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for the Spark VScrollBar component. The thumb and track skins are defined by the
+VScrollBarThumbSkin and VScrollBarTrackSkin classes, respectively.  
+
+       @see spark.components.VScrollBar
+       @see spark.skins.spark.VScrollBarThumbSkin
+       @see spark.skins.spark.VScrollBarTrackSkin
+        
+      @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"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="8" minHeight="35" 
+    alpha.disabled="0.5" alpha.inactive="0.5" >
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.VScrollBar")]
+    ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For scroll bar, the skin itself is colorized but the individual parts are not. */
+        static private const exclusions:Array = ["track", "thumb"];
+
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+    </fx:Script>
+     
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+        <s:State name="inactive" />
+    </s:states>
+   
+    <!---  The default skin class is VScrollBarTrackSkin.  
+            @copy spark.components.supportClasses.TrackBase#track 
+            @see spark.skins.spark.VScrollBarTrackSkin -->
+    <s:Button id="track" top="0" bottom="0" height="54"
+              focusEnabled="false" tabEnabled="false"
+              skinClass="flatSpark.skins.VScrollBarTrackSkin" />
+    
+    <!--- The default skin class is VScrollBarThumbSkin.
+            @copy spark.components.supportClasses.TrackBase#thumb 
+            @see spark.skins.spark.VScrollBarThumbSkin -->
+    <s:Button id="thumb" 
+              focusEnabled="false" visible.inactive="false" tabEnabled="false"
+              skinClass="flatSpark.skins.VScrollBarThumbSkin" />
+
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/VScrollBarThumbSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/VScrollBarThumbSkin.mxml b/frameworks/projects/flatspark/src/skins/VScrollBarThumbSkin.mxml
new file mode 100644
index 0000000..24fc159
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/VScrollBarThumbSkin.mxml
@@ -0,0 +1,74 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for the thumb of a Spark VScrollBar component.  
+
+@see spark.components.VScrollBar
+
+@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"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- background -->
+	<s:Rect left="0" top="0" right="0" bottom="0" minWidth="8" minHeight="8" radiusX="2" alpha="0.5">
+		<s:stroke>
+			<s:SolidColorStroke color="{ColorUtils.MidnightBlue}" weight="1"/>
+		</s:stroke>
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.Silver}" />
+		</s:fill>
+	</s:Rect>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/VScrollBarTrackSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/VScrollBarTrackSkin.mxml b/frameworks/projects/flatspark/src/skins/VScrollBarTrackSkin.mxml
new file mode 100644
index 0000000..1f1fc08
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/VScrollBarTrackSkin.mxml
@@ -0,0 +1,71 @@
+<?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.
+
+-->
+
+
+<!--- The default skin class for the track of a Spark VScrollBar component.  
+
+@see spark.components.VScrollBar
+
+@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"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="up" />
+		<s:State name="down" />
+		<s:State name="over" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- border/fill -->
+	<s:Rect top="0" bottom="0" left="0" right="0" minWidth="8" minHeight="8" radiusX="2">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.MidnightBlue}" />
+		</s:fill>
+	</s:Rect>
+</s:SparkSkin>