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>