http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/source/skins/TDFPanelSkin.mxml.html ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/source/skins/TDFPanelSkin.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/source/skins/TDFPanelSkin.mxml.html new file mode 100644 index 0000000..2935bb4 --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/source/skins/TDFPanelSkin.mxml.html @@ -0,0 +1,177 @@ + + + + + + +TDFPanelSkin.mxml + + + +
<?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 @@ + + + + + @namespace "library://ns.adobe.com/flex/spark"; + + List.blueTheme { + selectionColor: #7FACF6; + } + + List.greenTheme { + selectionColor: #00CF3F; + } + + Panel.blueTheme { + contentBackgroundColor: #9abbdc; + + } + + .blueTheme { + focusColor: #3D73EF; + symbolColor: #2A3982; + + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..539c4fb --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CSSTypeClassSelector/srcview/src/skins/TDFPanelSkin.mxml @@ -0,0 +1,171 @@ + + + + + + + + + + + + + /* 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}; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/sample.html ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/sample.html b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/sample.html new file mode 100644 index 0000000..8d05dc2 --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/sample.html @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + +
+

+ 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 @@ + + + + Source of Sample-Flex4-ComboBox + + + + + + + + + + + + + + + + + + + + + + + + + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceStyles.css ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceStyles.css b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceStyles.css new file mode 100644 index 0000000..9d5210f --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/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/ComboBox/srcview/SourceTree.html ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceTree.html b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceTree.html new file mode 100644 index 0000000..80281a9 --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/SourceTree.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + +
+

+ 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 @@ + + + + + + +Source of Sample-Flex4-ComboBox + + + + + + + <body> + </body> + + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/source/sample.mxml.html ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/source/sample.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/source/sample.mxml.html new file mode 100644 index 0000000..1ec5258 --- /dev/null +++ b/TourDeFlex/TourDeFlex_content/flex4.0/ComboBox/srcview/source/sample.mxml.html @@ -0,0 +1,73 @@ + + + + + + +sample.mxml + + + +
<?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>
+