http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/Contact.as ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/Contact.as b/tourdeflexmodules/src/spark/other/Contact.as new file mode 100644 index 0000000..2cc13c9 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/Contact.as @@ -0,0 +1,37 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + [Bindable] + public class Contact + { + public var name:String; + public var phone:String; + public var email:String; + public var address:String; + public var city:String; + public var state:String; + public var zip:String; + + + public function Contact() + { + } + } +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml b/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml new file mode 100644 index 0000000..f6205b3 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/ControllingViewportExample.mxml @@ -0,0 +1,49 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <!-- To show only a certain area of a viewport, you can control it by setting the size of the viewport container + to be less than the size of the item you want to clip, and set the following parameters, where the scroll + positions specify which part of the viewport to show (from container location 0,0)--> + + <s:Panel title="Controlling Viewport Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Label text="This image is clipped with the viewport position set:"/> + <s:Group width="100" height="100" + horizontalScrollPosition="20" verticalScrollPosition="30" + clipAndEnableScrolling="true"> + <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </s:Group> + <s:Label text="This image is scrollable with the viewport position set:"/> + <s:Scroller hasFocusableChildren="true" tabEnabled="false"> + <s:VGroup paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" + width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30"> + <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </s:VGroup> + </s:Scroller> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/Cursor1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/Cursor1Example.mxml b/tourdeflexmodules/src/spark/other/Cursor1Example.mxml new file mode 100644 index 0000000..9bffb02 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/Cursor1Example.mxml @@ -0,0 +1,49 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.managers.CursorManager; + + private function switchCursor():void + { + if (toggle.selected) CursorManager.setBusyCursor(); + else CursorManager.removeBusyCursor(); + } + ]]> + </fx:Script> + + <s:Panel title="Cursor Management Samples" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor()"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/Cursor2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/Cursor2Example.mxml b/tourdeflexmodules/src/spark/other/Cursor2Example.mxml new file mode 100644 index 0000000..f333987 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/Cursor2Example.mxml @@ -0,0 +1,63 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.controls.Button; + import mx.managers.CursorManager; + import flash.events.*; + + private var cursorID:Number = 0; + // Embed the cursor symbol. + [Embed(source="assets/ApacheFlexIcon.png")] + private var waitCursorSymbol:Class; + + private function setCursor(cursorType:String):void + { + if (cursorType == "normal") { + CursorManager.removeAllCursors(); + CursorManager.removeBusyCursor(); + } else if (cursorType == "busy") { + CursorManager.removeAllCursors(); + CursorManager.setBusyCursor(); + } else if (cursorType == "custom") { + CursorManager.removeAllCursors(); + cursorID = CursorManager.setCursor(waitCursorSymbol); + } + } + ]]> + </fx:Script> + + <s:Panel title="Cursor Management Samples" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/> + <s:Button label="Default Busy Cursor" color="0x000000" click="setCursor('busy')"/> + <s:Button label="Custom Busy Cursor" color="0x000000" click="setCursor('custom')"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml b/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml new file mode 100644 index 0000000..826b35b --- /dev/null +++ b/tourdeflexmodules/src/spark/other/DragAndDrop1Example.mxml @@ -0,0 +1,51 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Declarations> + <s:ArrayList id="arr1"> + <fx:String>Orange</fx:String> + <fx:String>Apple</fx:String> + <fx:String>Pear</fx:String> + </s:ArrayList> + + <s:ArrayList id="arr2"> + <fx:String>Banana</fx:String> + </s:ArrayList> + </fx:Declarations> + + <s:Panel title="Drag and Drop Samples" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" + dataProvider="{arr1}"/> + + <s:Label text="Drag Items between lists" color="0x000000"/> + + <s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" + dataProvider="{arr2}"/> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml b/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml new file mode 100644 index 0000000..6a3ce88 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/DragAndDrop2Example.mxml @@ -0,0 +1,82 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.managers.DragManager; + ]]> + </fx:Script> + + <fx:Declarations> + <s:ArrayList id="arr1"> + <fx:String>Orange</fx:String> + <fx:String>Apple</fx:String> + <fx:String>Pear</fx:String> + <fx:String>Banana</fx:String> + </s:ArrayList> + </fx:Declarations> + + <s:Panel title="Drag and Drop Samples" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Panel title="Fruit" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:List height="100%" dragEnabled="true" color="0x000000" dataProvider="{arr1}" /> + + </s:Panel> + + <s:Panel id="fruitDetails" title="drag fruit here" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:dragEnter> + if (event.dragSource.hasFormat('itemsByIndex')) + { + var dropTarget:Panel = event.currentTarget as Panel; + DragManager.acceptDragDrop(dropTarget); + } + </s:dragEnter> + + <s:dragDrop> + var data:Object = event.dragSource.dataForFormat('itemsByIndex'); + var p:Panel = new Panel(); + p.title = new String(data); + p.percentWidth = 100; + p.percentHeight = 25; + p.setStyle("color","black"); + fruitDetails.addElement(p); + </s:dragDrop> + + </s:Panel> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/FilterExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/FilterExample.mxml b/tourdeflexmodules/src/spark/other/FilterExample.mxml new file mode 100644 index 0000000..9cb1a4a --- /dev/null +++ b/tourdeflexmodules/src/spark/other/FilterExample.mxml @@ -0,0 +1,88 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + creationComplete="init()"> + + <fx:Script> + <![CDATA[ + + private var time:Timer; + private var count:int = 0; + + private function init():void{ + time = new Timer(1000,0); + time.addEventListener(TimerEvent.TIMER,timeHandler); + time.start(); + + } + + private function timeHandler(ev:TimerEvent):void{ + count ++; + dynamicText.text = String(count); + } + + private function filterHandler(ev:MouseEvent):void{ + var filterArr:Array = []; + + blurBox.selected ? filterArr.push(blur): null; + glowBox.selected ? filterArr.push(glow): null; + shadowBox.selected? filterArr.push(dropShadow): null; + bevelBox.selected ? filterArr.push(bevel): null; + + textSample.filters = filterArr; + dynamicText.filters = filterArr; + } + ]]> + </fx:Script> + + <fx:Declarations> + <!--filters--> + <s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/> + <s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" /> + <s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" /> + <s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7" /> + </fx:Declarations> + + <s:Panel title="Filters Samples" + width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout horizontalAlign="center" + paddingLeft="10" paddingRight="10" + paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label id="textSample" text="SAMPLE TEXT" color="0x000000" + fontWeight="bold" fontSize="40" filters="{[bevel]}" /> + + <s:HGroup width="100%" horizontalAlign="center"> + <s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" /> + <s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" /> + <s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" /> + <s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" /> + </s:HGroup> + + <s:Label id="dynamicText" text="0" fontSize="18" filters="{[bevel]}" /> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/RepeaterExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/RepeaterExample.mxml b/tourdeflexmodules/src/spark/other/RepeaterExample.mxml new file mode 100644 index 0000000..46aa704 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/RepeaterExample.mxml @@ -0,0 +1,56 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.controls.Alert; + + [Bindable] + private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + + ]]> + </fx:Script> + + <s:Panel title="Repeater Example" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Label width="100%" + text="Use the Repeater class to create multi-Button controls in a Tile container."/> + + <mx:Tile direction="horizontal" borderStyle="inset" horizontalGap="10" verticalGap="10" color="0x323232" + paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10"> + + <mx:Repeater id="rp" dataProvider="{dp}"> + <s:Button height="24" width="50" + label="{String(rp.currentItem)}" + click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/> + </mx:Repeater> + </mx:Tile> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml b/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml new file mode 100644 index 0000000..31f81fb --- /dev/null +++ b/tourdeflexmodules/src/spark/other/ScrollBarsExample.mxml @@ -0,0 +1,98 @@ +<?xml version="1.0"?> +<!-- + + 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. + +--> +<!-- controls\bar\SBarSimple.mxml --> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.events.ScrollEvent; + + private function vbarScroll():void { + log.text = "VScrollBar properties summary:" + '\n' + + "------------------------------------" + '\n' + + "Current scroll position: " + + bar.value + '\n' + + "The maximum scroll position: " + + bar.maximum + '\n' + + "The minimum scroll position: " + + bar.minimum; + + rect.height = bar.value; + } + private function hbarScroll():void { + log.text = "HScrollBar properties summary:" + '\n' + + "------------------------------------" + '\n' + + "Current scroll position: " + + hbar.value + '\n' + + "The maximum scroll position: " + + hbar.maximum + '\n' + + "The minimum scroll position: " + + hbar.minimum; + + rect.width = hbar.value; + } + ]]> + </fx:Script> + + <s:Panel title="VScrollBar and HScrollBar Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:VGroup> + <s:Label + width="100%" + text="Drag the ScrollBar controls to change the size of the Rectangle graphic."/> + + <s:HGroup> + <s:VScrollBar id="bar" + height="180" + minimum="0" + maximum="{bar.height}" + stepSize="10" + pageSize="10" + value="{rect.height}" + change="vbarScroll()"/> + <s:Rect id="rect" width="50" height="20"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="#6191c3"/> + <s:GradientEntry color="#6191c3"/> + <s:GradientEntry alpha=".3"/> + </s:LinearGradient> + </s:fill> + </s:Rect> + </s:HGroup> + <s:HScrollBar id="hbar" width="180" value="{rect.width}" + minimum="0" maximum="{hbar.width}" stepSize="10" pageSize="10" change="hbarScroll()"/> + </s:VGroup> + <s:VGroup width="200"> + <s:TextArea id="log" editable="false" height="88"/> + + <s:Label text="The ScrollBar controls (HScrollBar and VScrollBar) can be used stand-alone, but typically you would combine it as part of +another group of components to provide scrolling functionality. "/> + </s:VGroup> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml b/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml new file mode 100644 index 0000000..fe2a943 --- /dev/null +++ b/tourdeflexmodules/src/spark/other/TDFGradientBackgroundSkin.mxml @@ -0,0 +1,49 @@ +<?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> + + <s:layout> + <s:BasicLayout /> + </s:layout> + + <s:Rect id="bg" width="100%" height="100%"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0x000000" ratio="0.00" /> + <s:GradientEntry color="0x323232" ratio="1.0" /> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png new file mode 100644 index 0000000..e68d831 Binary files /dev/null and b/tourdeflexmodules/src/spark/other/assets/ApacheFlexIcon.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png new file mode 100644 index 0000000..4ff037f Binary files /dev/null and b/tourdeflexmodules/src/spark/other/assets/ApacheFlexLogo.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml b/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml new file mode 100644 index 0000000..90afd3c --- /dev/null +++ b/tourdeflexmodules/src/spark/other/skins/CustomTabBarButtonSkin.mxml @@ -0,0 +1,262 @@ +<?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 TabBar buttons. + +@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="21" minHeight="21" alpha.disabledStates="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.ButtonBarButton")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + + import spark.components.TabBar; + + static private const exclusions:Array = ["labelDisplay"]; + + /** + * @private + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /** + * @private + */ + override protected function initializationComplete():void + { + super.initializationComplete(); + } + + private var cornerRadius:Number = 4 + + /** + * @private + * The borderTop s:Path is just a s:Rect with the bottom edge left out. + * Given the rounded corners per the cornerRadius style, the result is + * roughly an inverted U with the specified width, height, and cornerRadius. + * + * Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil. + */ + private function updateBorderTop(width:Number, height:Number):void + { + var left:Number = -0.5; + var right:Number = width - 0.5; + var top:Number = 0.5; + var bottom:Number = height; + + var a:Number = cornerRadius * 0.292893218813453; + var s:Number = cornerRadius * 0.585786437626905; + + var path:String = ""; + path += "M " + left + " " + bottom; + path += " L " + left + " " + (top + cornerRadius); + path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a); + path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top; + path += " L " + (right - cornerRadius) + " " + top; + path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a); + path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius); + path += " L " + right + " " + bottom; + borderTop.data = path; + } + + /** + * @private + * The cornerRadius style is specified by the TabBar, not the button itself. + * + * Rather than bind the corner radius properties of the s:Rect's in the markup + * below to hostComponent.owner.getStyle("cornerRadius"), we reset them here, + * each time a change in the value of the style is detected. Note that each + * corner radius property is explicitly initialized to the default value of + * the style; the initial value of the private cornerRadius property. + */ + private function updateCornerRadius():void + { + var cr:Number = getStyle("cornerRadius"); + if (cornerRadius != cr) + { + cornerRadius = cr; + fill.topLeftRadiusX = cornerRadius; + fill.topRightRadiusX = cornerRadius; + lowlight.radiusX = cornerRadius; + highlight.radiusX = cornerRadius; + highlightStroke.topLeftRadiusX = cornerRadius; + highlightStroke.topRightRadiusX = cornerRadius; + } + } + + /** + * @private + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + updateCornerRadius(); + updateBorderTop(unscaledWidth, unscaledHeight); + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + </fx:Script> + + <!-- states --> + <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, selectedUpStates" /> + <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> + <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> + <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> + </s:states> + + <s:Group left="-1" right="0" top="-1" bottom="-1"> + + <!-- layer 2: fill --> + <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xCC0000" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + <s:GradientEntry color="0xCCCCCC" + color.selectedUpStates="0x9FA0A1" + color.over="0xCC0000" + color.overAndSelected="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: fill lowlight --> + <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xCC0000" alpha="0.0099" /> + <s:GradientEntry color="0xCC0000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4"> + <s:fill> + <s:SolidColor color="0xCC0000" + alpha="0.33" + alpha.selectedUpStates="0.22" + alpha.overStates="0.22" + alpha.downStates="0.12" /> + </s:fill> + </s:Rect> + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.25" /> + </s:fill> + </s:Rect> + <s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" 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:Line id="borderBottom" left="1" right="0" bottom="1"> + <s:stroke> + <s:SolidColorStroke weight="1" + color="0xCC0000" + color.selectedStates="0x434343" + alpha="0.75" + alpha.down="0.85" + alpha.selectedStates="0.5" /> + </s:stroke> + </s:Line> + <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" + alpha="0.5625" + /> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Path> + </s:Group> + + <!-- layer 8: text --> + <!--- The defines the appearance of the label for the first button in the ButtonBar component. --> + <s:Group left="2" top="2"> + + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="7" verticalCenter="1" + left="10" right="10" top="2" bottom="2" color.down="#FFFFFF"> + </s:Label> + </s:Group> + +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml b/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml new file mode 100644 index 0000000..e81ff4d --- /dev/null +++ b/tourdeflexmodules/src/spark/other/skins/CustomTabBarSkin.mxml @@ -0,0 +1,97 @@ +<?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 TabBar component. The ButtonBarButtons +created by the TabBar component use the TabBarButtonSkin class. + +@see spark.components.TabBar +@see spark.components.ButtonBarButton + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 + +--> + +<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[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.TabBar")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + <![CDATA[ + + import mx.core.UIComponent; + + /** + * @private + * Push the cornerRadius style to the item renderers. + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + const numElements:int = dataGroup.numElements; + const cornerRadius:int = hostComponent.getStyle("cornerRadius"); + for (var i:int = 0; i < numElements; i++) + { + var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent; + if (elt) + elt.setStyle("cornerRadius", cornerRadius); + } + + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + + ]]> + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <!--- + @copy spark.components.SkinnableDataContainer#dataGroup + --> + <s:DataGroup id="dataGroup" width="100%" height="100%"> + <s:layout> + <s:ButtonBarHorizontalLayout gap="-1"/> + </s:layout> + <s:itemRenderer> + <fx:Component> + <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" /> + </fx:Component> + </s:itemRenderer> + </s:DataGroup> + +</s:Skin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml b/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml new file mode 100644 index 0000000..43dc390 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/ButtonWithIconExample.mxml @@ -0,0 +1,48 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <!-- Custom skins used for this example are shown in the source tabs for reference --> + <s:Panel width="100%" height="100%" title="Button Skinned With Icon" + > + <s:HGroup width="100%" left="35" top="15"> + <s:VGroup width="50%"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Button with Icon Only Skin"/> + <s:Button skinClass="skins.CloseButtonSkin" width="16" height="16"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Button with Icon And Drop Shadow Skin"/> + <s:Button skinClass="skins.AddButtonSkin" width="20" height="20"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Rounded Corner Button with Icon And Text Skin"/> + <s:Button skinClass="skins.IconTextButtonSkin" label="Add" width="53" /> + </s:HGroup> + </s:VGroup> + <s:Label width="50%" text="Buttons can be skinned to contain an icon and to include or not include the text label. Check the source for the 3 skin classes that handle the different combinations." + verticalAlign="middle"/> + + </s:HGroup> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml new file mode 100644 index 0000000..608c270 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication1Example.mxml @@ -0,0 +1,44 @@ +<?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:Module 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="skins.GradientBackgroundAppSkin" + backgroundColor="0x000000"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml new file mode 100644 index 0000000..ed75ddd --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication2Example.mxml @@ -0,0 +1,43 @@ +<?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:Module 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="skins.BackgroundImageAppSkin"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml b/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml new file mode 100644 index 0000000..e578cd1 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/SkinningApplication3Example.mxml @@ -0,0 +1,48 @@ +<?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: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="skins.CustomControlBarAppSkin" + controlBarVisible="true"> + <s:controlBarContent> + <s:TextInput id="textInput"/> + <s:Button id="searchBtn" label="Search"/> + </s:controlBarContent> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:Label text="Wood Sales Int'l" fontSize="42" /> + <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0"> + <s:VGroup> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:BorderContainer> + </s:VGroup> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml b/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml new file mode 100644 index 0000000..2708429 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/SkinningContainerExample.mxml @@ -0,0 +1,49 @@ +<?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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel id="myPanel" title="SkinnableContainer sample" + width="100%" height="100%" > + + <!-- Set a custom skin for the container to show a gradient background and border --> + <s:SkinnableContainer skinClass="skins.CustomSkinnableContainerSkin" + width="50%" height="50%" + horizontalCenter="0" + verticalCenter="0"> + + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <mx:Form fontSize="16"> + <mx:FormItem label="Userid:"> + <s:TextInput id="userid"/> + </mx:FormItem> + <mx:FormItem label="Password:"> + <s:TextInput id="pw"/> + </mx:FormItem> + <mx:FormItem> + <s:Button label="Login"/> + </mx:FormItem> + </mx:Form> + </s:VGroup> + </s:SkinnableContainer> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/icon_add.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_add.png b/tourdeflexmodules/src/spark/skinning/assets/icon_add.png new file mode 100644 index 0000000..4382d33 Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/icon_add.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/icon_check.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_check.png b/tourdeflexmodules/src/spark/skinning/assets/icon_check.png new file mode 100644 index 0000000..1c122a4 Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/icon_check.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png b/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png new file mode 100644 index 0000000..e972065 Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/icon_close16.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png b/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png new file mode 100644 index 0000000..b4ecdba Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/icon_plus.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png b/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png new file mode 100644 index 0000000..24089c5 Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/icon_remove.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png b/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png new file mode 100644 index 0000000..6b9403f Binary files /dev/null and b/tourdeflexmodules/src/spark/skinning/assets/wood-bg.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml new file mode 100644 index 0000000..33db62d --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/skins/AddButtonSkin.mxml @@ -0,0 +1,183 @@ +<?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> + + + <!-- icon symbol with drop shadow --> + <s:Group id="symbol" left="3" top="3" 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_check.png')"/> + </s:Group> + + +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml new file mode 100644 index 0000000..64907a0 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/skins/BackgroundImageAppSkin.mxml @@ -0,0 +1,41 @@ +<?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/halo" + 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> + + <!-- This image fill also specifies padding around it --> + <s:Rect id="backgroundRect" left="100" right="100" top="20" bottom="20"> + <s:fill> + <s:BitmapFill source="@Embed('../assets/wood-bg.png')"/> + </s:fill> + </s:Rect> + + <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" /> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml new file mode 100644 index 0000000..c2ee2f5 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/skins/CloseButtonSkin.mxml @@ -0,0 +1,184 @@ +<?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="0" top="0" right="0" bottom="0" > + <s:fill> + <s:BitmapFill source="@Embed('../assets/icon_close16.png')"/> + </s:fill> + </s:Rect> + + <s:Label id="labelDisplay" + textAlign="center" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="0" verticalCenter="1" + left="10" right="10" top="2" bottom="2"> + </s:Label> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.mxml new file mode 100644 index 0000000..4138d79 --- /dev/null +++ b/tourdeflexmodules/src/spark/skinning/skins/CustomControlBarAppSkin.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. + +--> + + +<!--- The default skin class for the Spark Application component. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" + alpha.disabled="0.5" > + + <fx:Metadata> + <![CDATA[ + /** + * A strongly typed property that references the component to which this skin is applied. + */ + [HostComponent("spark.components.Application")] + ]]> + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- fill --> + <!--- + A rectangle with a solid color fill that forms the background of the application. + The color of the fill is set to the Application's backgroundColor property. + --> + <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" > + <s:fill> + <s:SolidColor color="0xFFFFFF" alpha="0" /> + </s:fill> + </s:Rect> + + <s:Group left="0" right="0" top="0" bottom="0"> + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <!--- + Application Control Bar + --> + <s:Group id="topGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar"> + + <!-- layer 0: control bar background --> + <s:Rect left="0" right="0" bottom="0" top="1" > + <s:fill> + <!-- ADDED CUSTOM GRADIENT FILL ON THE CONTROL BAR FOR SAMPLE --> + <s:LinearGradient rotation="90"> + <s:entries> + <s:GradientEntry color="0x000000" ratio="0.00" alpha="0.8"/> + <s:GradientEntry color="0xCCCCCC" ratio="0.5" alpha="0.8"/> + </s:entries> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" bottom="0" height="1" > + <s:fill> + <s:SolidColor color="0xD1E0F2" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <!-- Modified the group constraints to set the content 5 pixels from the right for this sample --> + <s:Group id="controlBarGroup" right="5"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" /> + </s:layout> + </s:Group> + </s:Group> + + <!--- + @copy spark.components.SkinnableContainer#contentGroup + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" /> + + </s:Group> + +</s:Skin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/CustomSkinnableContainerSkin.mxml new file mode 100644 index 0000000..421f82a --- /dev/null +++ b/tourdeflexmodules/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-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/FancyButtonSkin.mxml new file mode 100644 index 0000000..c528200 --- /dev/null +++ b/tourdeflexmodules/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> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml b/tourdeflexmodules/src/spark/skinning/skins/GradientBackgroundAppSkin.mxml new file mode 100644 index 0000000..8186b51 --- /dev/null +++ b/tourdeflexmodules/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>
