You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2018/07/31 17:13:29 UTC
[06/21] git commit: [flex-examples] [refs/heads/develop] - TDF with
modules where possible
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>