http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml new file mode 100644 index 0000000..421f82a --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml @@ -0,0 +1,55 @@ +<?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" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; alpha.disabled="0.5"> + + <fx:Metadata> + <![CDATA[ + [HostComponent("spark.components.SkinnableContainer")] + ]]> + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"> + <s:stroke> + <s:LinearGradientStroke weight="2"/> + </s:stroke> + <s:fill> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0xCCCCCC"/> + <s:GradientEntry color="0x323232" alpha=".8" /> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:BasicLayout/> + </s:layout> + </s:Group> + +</s:Skin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml new file mode 100644 index 0000000..f961641 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/FancyButtonSkin.mxml @@ -0,0 +1,271 @@ +<?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. + +--> +<!-- +@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" + minWidth="21" minHeight="21" + alpha.disabled="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Button")] + ]]> + </fx:Metadata> + + <fx:Script> + <![CDATA[ + /* 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"]; + + + + /** + + * @copy spark.skins.SparkSkin#colorizeExclusions + + */ + + override public function get colorizeExclusions():Array {return exclusions;} + + ]]> + + </fx:Script> + + + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" /> + <s:State name="down" /> + <s:State name="disabled" /> + </s:states> + + + + <!-- layer 1: shadow --> + <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.01" + alpha.down="0" /> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.07" + alpha.down="0.5" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + + <!-- layer 2: fill --> + + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.over="0xBBBDBD" + color.down="0xAAAAAA" + alpha="0.85" /> + <s:GradientEntry color="0xD8D8D8" + color.over="0x9FA0A1" + color.down="0x929496" + alpha="0.85" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- layer 3: fill lowlight --> + + <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2"> + + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" alpha="0.0099" /> + <s:GradientEntry color="0x000000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + + <!-- layer 4: fill highlight --> + + <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2"> + <s:fill> + <s:SolidColor color="0xFFFFFF" + alpha="0.33" + alpha.over="0.22" + alpha.down="0.12" /> + </s:fill> + </s:Rect> + + + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> + <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- layer 6: highlight stroke (down state only) --> + + <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect left="2" top="1" right="2" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.25" /> + </s:fill> + </s:Rect> + + <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> + + <s:fill> + + <s:SolidColor color="0x000000" alpha="0.09" /> + + </s:fill> + + </s:Rect> + + + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + + <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2"> + + <s:stroke> + + <s:LinearGradientStroke rotation="90" weight="1"> + + <s:GradientEntry color="0x000000" + + alpha="0.5625" + + alpha.down="0.6375" /> + + <s:GradientEntry color="0x000000" + + alpha="0.75" + + alpha.down="0.85" /> + + </s:LinearGradientStroke> + + </s:stroke> + + </s:Rect> + + + + <!-- layer 8: text --> + + <!--- + + @copy spark.components.supportClasses.ButtonBase#labelDisplay + + --> + <!--<s:Rect left="1" top="1" width="36" height="16" > + <s:fill> + <s:BitmapFill source="@Embed('assets/icon_remove.png')"> + </s:BitmapFill> + </s:fill> + </s:Rect>--> + <!-- The divider between symbol and text --> + <!--<s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27"> + <s:stroke> + <s:SolidColorStroke color="#3d3d3d" weight=".25" /> + </s:stroke> + </s:Line> + <s:Group id="textGroup" verticalCenter="1" left="33"> + <s:filters> + <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" /> + </s:filters> + <s:SimpleText id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="0" verticalCenter="1" + left="10" right="10" top="2" bottom="2"> + </s:SimpleText> + </s:Group>--> + <!-- The divider between symbol and text --> + <s:Line blendMode="overlay" verticalCenter="0" height="90%" left="27"> + <s:stroke> + <s:SolidColorStroke color="#3d3d3d" weight=".25" /> + </s:stroke> + </s:Line> + + <!-- Label with a shadow applied to it. In a group for colorization exclusion --> + <s:Group id="textGroup" verticalCenter="1" left="33"> + <s:filters> + <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" /> + </s:filters> + <s:SimpleText id="labelDisplay" + textAlign="center" + verticalAlign="middle" + lineBreak="toFit" + right="10"> + </s:SimpleText> + </s:Group> + + <!-- The group with the symbol with a shadow applied to. In a group for colorization exclusion --> + <s:Group id="symbol" verticalCenter="0" left="7" top="9" right="7" bottom="7"> + <s:filters> + <s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1" strength="1" strength.down="0"/> + </s:filters> + <s:Path winding="nonZero" data="M12.6924 0L5.76855 6.92383 2.30762 3.46191 0 5.76855 3.46191 9.23145 5.76855 11.5391 8.07617 9.23145 15 2.30762 12.6924 0Z" > + <s:fill> + <s:SolidColor color="#ffffff"/> + </s:fill> + </s:Path> + </s:Group> + +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml new file mode 100644 index 0000000..faf0c68 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml @@ -0,0 +1,53 @@ +<?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:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <fx:Metadata> + [HostComponent("spark.components.Application")] + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <!-- border --> + <s:Rect left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9"> + <s:stroke> + <mx:SolidColorStroke color="0xCCCCCC" alpha=".5" weight="4"/> + </s:stroke> + </s:Rect> + + <s:Rect id="backgroundRect" left="10" right="10" top="10" bottom="10" radiusX="9" radiusY="9"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0x0000FF" ratio="0.00" alpha="0.8"/> + <s:GradientEntry color="0x336699" ratio="1.0" alpha="0.5"/> + <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml new file mode 100644 index 0000000..27d4a38 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/IconTextButtonSkin.mxml @@ -0,0 +1,195 @@ +<?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. + +--> +<!-- +@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" + minWidth="21" minHeight="21" + alpha.disabled="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Button")] + ]]> + </fx:Metadata> + + <fx:Script> + <![CDATA[ + /* 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"]; + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + ]]> + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" /> + <s:State name="down" /> + <s:State name="disabled" /> + </s:states> + + <!-- layer 1: shadow --> + <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="7" radiusY="7"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.01" + alpha.down="0" /> + <s:GradientEntry color="0x000000" + color.down="0xFFFFFF" + alpha="0.07" + alpha.down="0.5" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- layer 2: fill --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.over="0xBBBDBD" + color.down="0xAAAAAA" + alpha="0.85" /> + <s:GradientEntry color="0xD8D8D8" + color.over="0x9FA0A1" + color.down="0x929496" + alpha="0.85" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- layer 3: fill lowlight --> + <s:Rect left="1" right="1" bottom="1" height="9" radiusX="7" radiusY="7"> + + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" alpha="0.0099" /> + <s:GradientEntry color="0x000000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect left="1" right="1" top="1" height="9" radiusX="7" radiusY="7"> + <s:fill> + <s:SolidColor color="0xFFFFFF" + alpha="0.33" + alpha.over="0.22" + alpha.down="0.12" /> + </s:fill> + </s:Rect> + + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect left="1" right="1" top="1" bottom="1" radiusX="7" radiusY="7" excludeFrom="down"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> + <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.07" /> + </s:fill> + </s:Rect> + + <s:Rect left="2" top="1" right="2" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.25" /> + </s:fill> + </s:Rect> + + <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> + <s:fill> + <s:SolidColor color="0x000000" alpha="0.09" /> + </s:fill> + </s:Rect> + + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="7" radiusY="7"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0x000000" + alpha="0.5625" + alpha.down="0.6375" /> + <s:GradientEntry color="0x000000" + alpha="0.75" + alpha.down="0.85" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- icon/symbol layer --> + <s:Group id="symbol" left="7" top="7" right="3" bottom="3"> + <s:filters> + <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" /> + </s:filters> + <s:BitmapImage source="@Embed('../assets/icon_plus.png')"/> + + </s:Group> + + <!-- The divider between symbol and text --> + <s:Line blendMode="overlay" verticalCenter="0" height="90%" left="20"> + <s:stroke> + <s:SolidColorStroke color="#3d3d3d" weight=".25" /> + </s:stroke> + </s:Line> + + <!-- layer 8: text --> + <s:Group id="textGroup" verticalCenter="1" left="25"> + <s:filters> + <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" /> + </s:filters> + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1"> + </s:Label> + </s:Group> +</s:SparkSkin> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml new file mode 100644 index 0000000..300af66 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/MyPanelSkin.mxml @@ -0,0 +1,101 @@ +<?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. + +@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="normal"> + + <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:states> + + <!-- background fill --> + <s:Rect left="0" right="0" bottom="0" top="0" > + <s:fill> + <s:LinearGradient rotation="90" > + <s:GradientEntry color="0xFFFFFF" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- title bar fill --> + <s:Rect left="0" right="0" top="0" height="30"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0x000000" /> + <s:GradientEntry color="0xC0C0C0" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + + <!-- text layer --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <s:SimpleText id="titleDisplay" lineBreak="explicit" + right="4" top="2" height="30" + verticalAlign="middle" fontWeight="bold" + color="0xE2E2E2"> + </s:SimpleText> + + <!-- + 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" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"> + </s:Group> + +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..f9151dc --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/skinning/skins/TDFPanelSkin.mxml @@ -0,0 +1,171 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"> + </s:Label> + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml b/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml index efe13ca..5ba3f7a 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/tlf/TextLayoutEditorSample.mxml @@ -21,7 +21,7 @@ -<s:Application xmlns="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*" viewSourceURL="srcview/index.html"> +<s:Application xmlns="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:local="*"> <local:TextLayoutEditorCanvas width="100%" height="100%"/> <Style source="/flashx/textLayout/ui/VellumGUIStyles.css"/> <!--<Style source="VellumGUIStyles.css"/>--> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml index 8d13797..12145af 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/CurrencyValidatorExample.mxml @@ -20,8 +20,7 @@ <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" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> import mx.controls.Alert; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d4e368dc/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml index 6bce0e6..93724c5 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/validators/DateValidatorExample.mxml @@ -20,8 +20,7 @@ <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" - skinClass="TDFGradientBackgroundSkin" - viewSourceURL="srcview/index.html"> + skinClass="TDFGradientBackgroundSkin"> <fx:Script> <