<?xml version="1.0" encoding="utf-8"?> +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"/> + + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin>+ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/sample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/sample.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/sample.mxml new file mode 100644 index 0000000..bb344c7 --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/sample.mxml @@ -0,0 +1,72 @@ + + +
+ To view this page ensure that Adobe Flash Player version + 10.0.0 or greater is installed. +
+ +
+
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceIndex.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceIndex.xml b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceIndex.xml
new file mode 100644
index 0000000..0e67b74
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceIndex.xml
@@ -0,0 +1,46 @@
+
+
++ To view this page ensure that Adobe Flash Player version + 10.0.0 or greater is installed. +
+ +
+
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/index.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/index.html b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/index.html
new file mode 100644
index 0000000..046511f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+<?xml version="1.0" encoding="utf-8"?> +<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" viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + import skins.TDFPanelSkin; + + [Bindable]public var cards:ArrayCollection = new ArrayCollection( + [ {label:"Visa", data:1}, + {label:"MasterCard", data:2}, + {label:"American Express", data:3} ]); + + private function changeHandler(event:Event):void { + + myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label; + myData.text = "Data: " + ComboBox(event.target).selectedItem.data; + } + ]]> + </fx:Script> + + <s:Panel title="ComboBox Sample" skinClass="skins.TDFPanelSkin" + height="100%" width="100%"> + + <s:HGroup top="20" horizontalCenter="0" > + <s:VGroup> + <s:Label width="200" color="0x336699" text="Select credit card type:"/> + <s:ComboBox dataProvider="{cards}" width="150" color="0x000000" + change="changeHandler(event);" selectedIndex="0"/> + + </s:VGroup> + <mx:Spacer width="20"/> + <s:VGroup> + <s:Label id="myLabel" text="You selected:" fontWeight="bold"/> + <s:Label id="myData" text="Data:" fontWeight="bold"/> + </s:VGroup> + + </s:HGroup> + <s:Label color="#323232" width="75%" bottom="20" horizontalCenter="0" + text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match. +Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values. "/> + + </s:Panel> +</s:Application>+