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:33 UTC
[10/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/controls/TextLayout2Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml
new file mode 100644
index 0000000..9254dc0
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout2Example.mxml
@@ -0,0 +1,143 @@
+<?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()">
+
+<!-- This sample is based on this page: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WS0d70b2a8565d75766ba6608d121cc29f375-8000.html -->
+
+ <fx:Script>
+ <![CDATA[
+ import flash.display.StageAlign;
+ import flash.display.StageScaleMode;
+ import flash.events.Event;
+ import flash.geom.Rectangle;
+
+ import flashx.textLayout.compose.StandardFlowComposer;
+ import flashx.textLayout.container.ContainerController;
+ import flashx.textLayout.container.ScrollPolicy;
+ import flashx.textLayout.conversion.TextConverter;
+ import flashx.textLayout.elements.TextFlow;
+ import flashx.textLayout.formats.TextLayoutFormat;
+
+ import spark.core.SpriteVisualElement;
+
+ private var hTextFlow:TextFlow;
+ private var headContainer:SpriteVisualElement;
+ private var headlineController:ContainerController;
+ private var hContainerFormat:TextLayoutFormat;
+
+ private var bTextFlow:TextFlow;
+ private var bodyTextContainer:SpriteVisualElement;
+ private var bodyController:ContainerController;
+ private var bodyTextContainerFormat:TextLayoutFormat;
+
+ private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>";
+
+ private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a
lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole.</flow:span></flow:p></flow:TextFlow>";
+
+ public function init():void
+ {
+ // Headline text flow and flow composer
+ hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT);
+ hTextFlow.flowComposer = new StandardFlowComposer();
+
+ // initialize the headline container and controller objects
+ headContainer = new SpriteVisualElement();
+ headlineController = new ContainerController(headContainer);
+ headlineController.verticalScrollPolicy = ScrollPolicy.OFF;
+ hContainerFormat = new TextLayoutFormat();
+ hContainerFormat.paddingTop = 4;
+ hContainerFormat.paddingRight = 4;
+ hContainerFormat.paddingBottom = 4;
+ hContainerFormat.paddingLeft = 4;
+
+ headlineController.format = hContainerFormat;
+ hTextFlow.flowComposer.addController(headlineController);
+ panel.addElement(headContainer);
+ this.addEventListener(flash.events.Event.RESIZE, resizeHandler);
+
+ // Body text TextFlow and flow composer
+ bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT);
+ bTextFlow.flowComposer = new StandardFlowComposer();
+
+ // The body text container is below, and has three columns
+ bodyTextContainer = new SpriteVisualElement();
+ bodyController = new ContainerController(bodyTextContainer);
+ bodyTextContainerFormat = new TextLayoutFormat();
+ bodyTextContainerFormat.columnCount = 4;
+ bodyTextContainerFormat.columnGap = 30;
+
+ bodyController.format = bodyTextContainerFormat;
+ bTextFlow.flowComposer.addController(bodyController);
+ panel.addElement(bodyTextContainer);
+ resizeHandler(null);
+ }
+
+ private function resizeHandler(event:Event):void
+ {
+ trace("Resizing!");
+ const verticalGap:Number = 25;
+ const stagePadding:Number = 16;
+ var stageWidth:Number = this.width - stagePadding;
+ var stageHeight:Number = this.height - stagePadding;
+ var headlineWidth:Number = stageWidth;
+ var headlineContainerHeight:Number = stageHeight;
+
+ // Initial compose to get height of headline after resize
+ headlineController.setCompositionSize(headlineWidth, headlineContainerHeight);
+ hTextFlow.flowComposer.compose();
+ var rect:Rectangle = headlineController.getContentBounds();
+ headlineContainerHeight = rect.height;
+
+ // Initial compose to get height of headline after resize
+ headlineController.setCompositionSize(headlineWidth, headlineContainerHeight);
+ hTextFlow.flowComposer.compose();
+ rect = headlineController.getContentBounds();
+ headlineContainerHeight = rect.height;
+
+ // Resize and place headline text container
+ // Call setCompositionSize() again with updated headline height
+ headlineController.setCompositionSize(headlineWidth, headlineContainerHeight );
+ headlineController.container.x = stagePadding / 2;
+ headlineController.container.y = stagePadding / 2;
+ hTextFlow.flowComposer.updateAllControllers();
+
+ // Resize and place body text container
+ var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight);
+ bodyController.format = bodyTextContainerFormat;
+ bodyController.setCompositionSize(stageWidth, bodyContainerHeight );
+ bodyController.container.x = (stagePadding/2);
+ bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap;
+ bTextFlow.flowComposer.updateAllControllers();
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="News Layout Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Group id="panel" width="100%" height="100%" />
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml
new file mode 100644
index 0000000..81a8423
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout3Example.mxml
@@ -0,0 +1,91 @@
+<?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.
+
+-->
+<s:Module
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ creationComplete="init()">
+
+ <fx:Declarations>
+ <fx:XML id="textFlowAsXML" source="MyTextFlow.xml" />
+ </fx:Declarations>
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Verdana";
+ fontSize: "12";
+ advancedAntiAliasing: true;
+ }
+
+ </fx:Style>
+ <fx:Script><![CDATA[
+ import flashx.textLayout.conversion.TextConverter;
+ import flashx.textLayout.elements.TextFlow;
+ import spark.components.RichEditableText;
+ import spark.utils.TextFlowUtil;
+
+ XML.ignoreWhitespace = false;
+
+ private function init():void {
+ // Creates a TextFlow by importing a String containing the markup language used by the Text Layout Framework.
+ // If you specify it, don't forget the namespace -> xmlns="http://ns.adobe.com/textLayout/2008"
+ var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is inlcuded.</p></TextFlow>";
+ rt1.textFlow = TextFlowUtil.importFromString(markup);
+
+ // This next string shows that if the root TextFlow tag is omitted, it will be added for you.
+ markup = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>";
+ rt2.textFlow = TextFlowUtil.importFromString(markup);
+
+ // This line shows how you would import plain text with no paragraph spacing
+ var autoMarkup:String = "This is just a plain old string that has no markup within it.";
+ RichEditableText(rt3.textDisplay).textFlow = TextFlowUtil.importFromString(autoMarkup);
+
+ // This example shows how you can use the TextConverter class from TLF to import HTML formatted text
+ // See the docs for the subset of HTML that is supported:
+ // http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/conversion/TextConverter.html#TEXT_FIELD_HTML_FORMAT
+ var myHTML:String = "<p>This is <i>HTML</i> markup.<br><b>Hello Tour de Flex Users!</b></p>";
+ rt4.textFlow = TextConverter.importToFlow(myHTML,TextConverter.TEXT_FIELD_HTML_FORMAT);
+ }
+ ]]></fx:Script>
+
+ <s:Panel title="Importing Text using TLF and Flex 4" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup>
+ <s:RichText id="rt1" width="200"/>
+ <s:TextArea id="rt2" width="300" height="50"/>
+ <s:TextInput id="rt3" width="260"/>
+ <s:RichEditableText id="rt4" width="200"/>
+
+ <s:RichText id="rt5" width="280"
+ textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
+ horizontalCenter="0" verticalCenter="0" />
+ </s:VGroup>
+ <s:Label width="200" verticalAlign="justify" text="This sample shows how you can use different types of text markup within
+the Flex 4 components that are based on TLF through an import. This can be especially useful for dynamically loading text
+that is returned from an HTTPService call at runtime for instance."/>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml b/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml
new file mode 100644
index 0000000..3bf453e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TextLayout4Example.mxml
@@ -0,0 +1,78 @@
+<?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.
+
+-->
+<!-- Sample derived from: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS02f7d8d4857b1677-165a04e1126951a2d98-7ff8.html -->
+<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 flashx.textLayout.conversion.TextConverter;
+
+ XML.ignoreWhitespace = false;
+ ]]>
+ </fx:Script>
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Verdana";
+ fontSize: "12";
+ advancedAntiAliasing: true;
+ }
+ </fx:Style>
+ <fx:Declarations>
+ <!-- Define a String to use with HTML and plain text format. -->
+ <fx:String id="htmlTextAsHTML"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String>
+
+ <!-- Define an XML object to use with TLF format. -->
+ <fx:XML id="tfTextAsTextFlow">
+ <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
+ <p>Text Using <span fontWeight="bold">Text Layout Framework</span> Markup</p>
+ </TextFlow>
+ </fx:XML>
+ </fx:Declarations>
+
+ <s:Panel title="Text Import Format Types Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label verticalAlign="justify" width="200" text="This example shows how you can use different format types for importing text
+and what the result will be in the Flex 4 component shown."/>
+ <s:VGroup>
+ <s:TextArea id="txt1" width="200" height="50"
+ textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
+ horizontalCenter="0" verticalCenter="0" />
+
+ <s:Label text="Same marked up text with plain format specified:"/>
+ <s:TextArea id="txt2" height="50" width="200"
+ textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.PLAIN_TEXT_FORMAT)}"
+ horizontalCenter="0" verticalCenter="0" />
+
+ <s:TextArea id="txt3" width="200" height="50"
+ textFlow="{TextConverter.importToFlow(tfTextAsTextFlow, TextConverter.TEXT_LAYOUT_FORMAT)}"
+ horizontalCenter="0" verticalCenter="0" />
+ </s:VGroup>
+
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml b/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml
new file mode 100644
index 0000000..66a6dfb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TitleWindowExample.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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 flash.geom.Point;
+
+ import mx.containers.TitleWindow;
+ import mx.managers.PopUpManager;
+
+ import spark.components.TitleWindow;
+
+ private var point1:Point = new Point();
+
+ // Open the TitleWindow container.
+ // Cast the return value of the createPopUp() method
+ // to SimpleTitleWindowExample, the name of the
+ // component containing the TitleWindow container.
+ private function showWindow():void {
+ var login:SimpleTitleWindowExample=SimpleTitleWindowExample(PopUpManager.createPopUp(
+ this, SimpleTitleWindowExample , true) as spark.components.TitleWindow);
+
+ // Calculate position of TitleWindow in Application's coordinates.
+ point1.x=myButton.x;
+ point1.y=myButton.y;
+ point1=myButton.localToGlobal(point1);
+ login.x=point1.x+25;
+ login.y=point1.y+25;
+
+ // Pass a reference to the TextInput control
+ // to the TitleWindow container so that the
+ // TitleWindow container can return data to the main application.
+ login.loginName=returnedName;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="TitleWindow Container" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Button id="myButton" height="32" label="Click to open the TitleWindow container"
+ click="showWindow()"/>
+
+ <s:RichText id="returnedName" width="100%" text="Waiting..."/>
+
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml b/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml
new file mode 100644
index 0000000..0f66e4e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButton2Example.mxml
@@ -0,0 +1,144 @@
+<?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"
+ currentState="hide">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ [Bindable]
+ public var items:ArrayCollection = new ArrayCollection([
+ {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"},
+ {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"},
+ {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+ protected function myBtn_clickHandler(event:MouseEvent):void
+ {
+ if (showBtn.selected)
+ this.currentState="show";
+ else this.currentState="hide";
+ }
+ ]]>
+ </fx:Script>
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ ToggleButton:upAndSelected,
+ ToggleButton:overAndSelected {
+ baseColor: #000000;
+ color: #FFFFFF;
+ }
+ ToggleButton:downAndSelected {
+ baseColor: #336699;
+ color: #FFFFFF;
+ }
+ ToggleButton:disabledAndSelected {
+ baseColor: #E2E2E2;
+ color: #212799;
+ }
+ ToggleButton:up {
+ baseColor: #C0C0C0;
+ color: #323232;
+ }
+ ToggleButton:over {
+ baseColor: #FFFFFF;
+ color: #000000;
+ }
+ ToggleButton:down {
+ baseColor: #014f9f;
+ color: #FFFFFF;
+ }
+ </fx:Style>
+
+ <s:states>
+ <s:State name="show"/>
+ <s:State name="hide"/>
+ </s:states>
+
+ <s:Panel title="ToggleButton Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup color="0x000000">
+ <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+ <s:Label text="Order Number: 904234113441-2342"/>
+ <s:VGroup width="80%" horizontalCenter="0">
+ <s:Label text="Purchaser: Anna Thomas"/>
+ <s:Label text="Date: 7/20/2009"/>
+ <s:Label text="Order Total: $114.00"/>
+ <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+ click="myBtn_clickHandler(event)"/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170"
+ color="#FFFFFF" includeIn="show">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+ </s:Panel>
+ </s:HGroup>
+ <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" width="88%">
+ <s:Label verticalAlign="justify" width="100%"
+ text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+ </s:HGroup>
+
+ </s:Panel>
+
+
+ <!--
+ <s:Group width="100%" height="100%">
+ <s:Rect left="0" right="0" bottom="0" top="0">
+ <s:fill>
+ <s:LinearGradient rotation="90" >
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ <s:VGroup left="15" top="5" color="0x000000">
+ <s:Label text="The Outfitters Clothing Store" fontSize="18" color="0x014f9f"/>
+ <s:Label text="Order Number: 904234113441-2342"/>
+ <s:VGroup width="80%" horizontalCenter="0">
+ <s:Label text="Purchaser: Anna Thomas"/>
+ <s:Label text="Date: 7/20/2009"/>
+ <s:Label text="Order Total: $114.00"/>
+ <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+ click="myBtn_clickHandler(event)"/>
+ <mx:Spacer height="40"/>
+ <s:Label color="#FFFFFF" width="199"
+ verticalAlign="justify"
+ text="Clicking the button toggles it between the up and an down states. If you click the button while it is in the up state, it toggles to the down state. You must click the button again to toggle it back to the up state."/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="200"
+ color="#FFFFFF" includeIn="show" baseColor="#000000">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%" color="0x000000"/>
+ </s:Panel>
+ </s:HGroup>
+
+ </s:Group>
+ -->
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml b/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml
new file mode 100644
index 0000000..e02c956
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButtonBarExample.mxml
@@ -0,0 +1,64 @@
+<?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.events.ItemClickEvent;
+
+ // Event handler function to print a message
+ // describing the selected Button control.
+ private function clickHandler(event:ItemClickEvent):void {
+ tgPanel.title = "ToggleButtonBar: " + event.label;
+ myTA.text="Selected button index: " + String(event.index) +
+ "\n" + "Selected button label: " + event.label;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+
+ <fx:Array id="dp">
+ <fx:String>Flex</fx:String>
+ <fx:String>Flex JS</fx:String>
+ <fx:String>Falcon</fx:String>
+ <fx:String>Falcon JX</fx:String>
+ </fx:Array>
+
+ </fx:Declarations>
+
+ <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <mx:ToggleButtonBar horizontalGap="5" itemClick="clickHandler(event)" dataProvider="{dp}" />
+
+ <s:Label width="100%" textAlign="center"
+ text="Select a button in the ToggleButtonBar control."/>
+
+ <s:TextArea id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml b/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml
new file mode 100644
index 0000000..80b98fb
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToggleButtonExample.mxml
@@ -0,0 +1,78 @@
+<?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"
+ currentState="hide">
+
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ [Bindable]
+ public var items:ArrayCollection = new ArrayCollection([
+ {label:"Medium Pink V-Neck T", itemNum:1932823474, price:"$24.00"},
+ {label:"Small Red Polo", itemNum:2022144432, price:"$40.00"},
+ {label:"X-Large Sweatshirt", itemNum:3769034827, price:"$50.00"} ]);
+
+ protected function myBtn_clickHandler(event:MouseEvent):void
+ {
+ if (showBtn.selected)
+ this.currentState="show";
+ else this.currentState="hide";
+ }
+ ]]>
+ </fx:Script>
+
+ <s:states>
+ <s:State name="show"/>
+ <s:State name="hide"/>
+ </s:states>
+
+ <s:Panel title="ToggleButton Sample" width="100%" height="100%">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
+ <s:VGroup>
+ <s:Label text="The Outfitters Clothing Store" fontSize="18" />
+ <s:Label text="Order Number: 904234113441-2342"/>
+ <s:VGroup width="80%" horizontalCenter="0">
+ <s:Label text="Purchaser: Anna Thomas"/>
+ <s:Label text="Date: 7/20/2009"/>
+ <s:Label text="Order Total: $114.00"/>
+ <s:ToggleButton id="showBtn" label.hide="Show Details" label.show="Hide Details"
+ click="myBtn_clickHandler(event)"/>
+ </s:VGroup>
+ </s:VGroup>
+ <s:HGroup right="50" top="5">
+ <s:Panel title="Details" horizontalCenter="0" top="300" width="350" height="170" includeIn="show">
+ <mx:DataGrid dataProvider="{items}" width="100%" height="100%"/>
+ </s:Panel>
+ </s:HGroup>
+ </s:HGroup>
+
+ <s:Label width="100%"
+ text="Clicking the button toggles it between the up and down states. If you click the button while it is in the up state, it toggles to the down state. You must click
+ the button again to toggle it back to the up state."/>
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml b/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml
new file mode 100644
index 0000000..ac5911a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ToolTipExample.mxml
@@ -0,0 +1,38 @@
+<?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 title="ToolTip Samples" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Button label="Roll over me!" toolTip="This button doesn't do anything This tip could provide more instructions" />
+ <s:TextInput toolTip="Enter some data here"/>
+
+ </s:Panel>
+
+</s:Module>
+
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/TreeExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/TreeExample.mxml b/tourdeflexmodules/src/spark/controls/TreeExample.mxml
new file mode 100644
index 0000000..bb6d1bf
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/TreeExample.mxml
@@ -0,0 +1,78 @@
+<?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[
+
+ [Bindable]
+ public var selectedNode:XML;
+
+ // Event handler for the Tree control change event.
+ public function treeChanged(event:Event):void {
+ selectedNode=Tree(event.target).selectedItem as XML;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <fx:XMLList id="treeData">
+ <node label="Mail Box">
+ <node label="Inbox">
+ <node label="Marketing"/>
+ <node label="Product Management"/>
+ <node label="Personal"/>
+ </node>
+ <node label="Outbox">
+ <node label="Professional"/>
+ <node label="Personal"/>
+ </node>
+ <node label="Spam"/>
+ <node label="Sent"/>
+ </node>
+ </fx:XMLList>
+ </fx:Declarations>
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center" />
+ </s:layout>
+
+ <s:Panel title="Tree Control" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingLeft="10" paddingRight="10"
+ paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label width="100%"
+ text="Select a node in the Tree control."/>
+
+ <mx:HDividedBox width="100%" height="100%">
+ <mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
+ showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
+ <s:TextArea height="100%" width="50%"
+ text="Selected Item: {selectedNode.@label}"/>
+ </mx:HDividedBox>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml b/tourdeflexmodules/src/spark/controls/VideoDisplayExample.mxml
new file mode 100644
index 0000000..117365b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/VideoDisplayExample.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"
+ initialize="init(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import flashx.textLayout.conversion.TextConverter;
+
+ import mx.events.FlexEvent;
+
+ import org.osmf.utils.OSMFSettings;
+
+ protected function init(event:FlexEvent):void {
+ OSMFSettings.enableStageVideo = false;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String>
+ </fx:Declarations>
+
+ <s:Panel title="Video Display Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:RichText width="75%" color="0xffffff" textAlign="center"
+ textFlow="{TextConverter.importToFlow(TitleText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
+ horizontalCenter="0" verticalCenter="0" />
+
+ <s:VideoDisplay id="myVid" width="66%" height="66%" source="./spark/controls/assets/FlexInstaller.mp4" autoPlay="false"/>
+
+ <s:HGroup>
+ <s:Button label="Play" color="0x00000" click="myVid.play()"/>
+ <s:Button label="Pause" color="0x00000" click="myVid.pause()"/>
+ <s:Button label="Stop" color="0x00000" click="myVid.stop()"/>
+ </s:HGroup>
+
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml b/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml
new file mode 100644
index 0000000..d3fff02
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/VideoPlayerExample.mxml
@@ -0,0 +1,73 @@
+<?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"
+ initialize="init(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import flashx.textLayout.conversion.TextConverter;
+
+ import mx.events.ItemClickEvent;
+ import mx.events.FlexEvent;
+ import mx.collections.ArrayCollection;
+
+ import org.osmf.utils.OSMFSettings;
+
+ protected function init(event:FlexEvent):void {
+ OSMFSettings.enableStageVideo = false;
+ }
+
+ private function playPauseChange(event:Event):void
+ {
+ videoPlayer.playPauseButton.enabled = checkPlay.selected;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="VideoPlayer Sample" width="100%" height="100%">
+
+ <s:Label top="10" right="10" width="250" verticalAlign="justify"
+ text="The VideoPlayer control lets you play progressively downloaded or streaming
+video, live or recorded video. It supports multi-bit rate streaming when used with a server that supports
+multi-bit rate streaming, such as Flash Media Server 3.5. The VideoPlayer control contains a full UI
+to let users control playback of video. It contains a play/pause toggle button; a scrub bar to let
+users seek through video; a volume bar; a timer; and a button to toggle in and out of fullscreen mode."/>
+
+ <!-- note: source can point to a server location or URL -->
+ <s:VGroup left="10">
+ <s:HGroup width="35%">
+ <s:CheckBox id="checkRewind"
+ label="Auto-Rewind"
+ selected="true" />
+ <s:CheckBox id="checkPlay"
+ label="Play/Pause Button"
+ selected="true"
+ change="playPauseChange(event)" />
+ </s:HGroup>
+ <s:VideoPlayer id="videoPlayer" width="66%" height="66%" y="50"
+ source="./spark/controls/assets/FlexInstaller.mp4"
+ autoPlay="false"
+ autoRewind="{checkRewind.selected}"/>
+ </s:VGroup>
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml b/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml
new file mode 100644
index 0000000..1b5ffed
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/ViewStackExample.mxml
@@ -0,0 +1,103 @@
+<?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 title="ViewStack Container" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label width="100%" textAlign="center"
+ text="Use the Button controls to change panels of the ViewStack container."/>
+
+ <s:BorderContainer borderStyle="solid" width="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Button id="searchButton" label="Search Panel"
+ click="myViewStack.selectedChild=search"/>
+ <s:Button id="cInfoButton" label="Customer Info Panel"
+ click="myViewStack.selectedChild=custInfo"/>
+ <s:Button id="aInfoButton" label="Account Panel"
+ click="myViewStack.selectedChild=accountInfo"/>
+ </s:BorderContainer>
+
+ <!-- Define the ViewStack and the three child containers and have it
+ resize up to the size of the container for the buttons. -->
+ <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
+
+ <s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingTop="5" paddingLeft="5"
+ paddingRight="5" paddingBottom="5" />
+ </s:layout>
+
+ <s:Label text="Search Panel" />
+ <s:HGroup >
+ <s:TextInput id="Searchtxt" width="200" />
+ <mx:Button label="search" click="Searchtxt.text=''" />
+ </s:HGroup>
+ </s:NavigatorContent>
+
+ <s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC"
+ width="100%" height="100%" fontWeight="bold" >
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingTop="5" paddingLeft="5"
+ paddingRight="5" paddingBottom="5" />
+ </s:layout>
+
+ <s:Label text="Customer Info" />
+ <s:HGroup>
+ <s:Label text="Email Address"/>
+ <s:TextInput id="email" width="200"/>
+ <s:Button label="Submit" click="email.text=''" />
+ </s:HGroup>
+ </s:NavigatorContent>
+
+ <s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
+
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingTop="5" paddingLeft="5"
+ paddingRight="5" paddingBottom="5" />
+ </s:layout>
+
+ <s:Label text="Account Info" />
+ <s:HGroup>
+ <s:Button label="Purchases" />
+ <s:Button label="Sales" />
+ <s:Button label="Reports" />
+ </s:HGroup>
+ </s:NavigatorContent>
+
+ </mx:ViewStack>
+
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/ApacheFlexLogo.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4 b/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4
new file mode 100644
index 0000000..8c877c4
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/FlexInstaller.mp4 differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png b/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png
new file mode 100644
index 0000000..9ac6331
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/arrow_icon.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/arrow_icon_sm.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/control_pause_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/control_play_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png b/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png
new file mode 100644
index 0000000..e6f75d2
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/control_stop_blue.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/assets/icon_close.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/assets/icon_close.png b/tourdeflexmodules/src/spark/controls/assets/icon_close.png
new file mode 100644
index 0000000..bf9be79
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/assets/icon_close.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/iconclose.gif
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/iconclose.gif b/tourdeflexmodules/src/spark/controls/iconclose.gif
new file mode 100644
index 0000000..9bcda93
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/iconclose.gif differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/iconinfo.gif
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/iconinfo.gif b/tourdeflexmodules/src/spark/controls/iconinfo.gif
new file mode 100644
index 0000000..fb181ab
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/iconinfo.gif differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png b/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png
new file mode 100644
index 0000000..33debc8
Binary files /dev/null and b/tourdeflexmodules/src/spark/controls/images/arrow_icon_sm.png differ
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml b/tourdeflexmodules/src/spark/controls/skins/CloseButtonSkin.mxml
new file mode 100644
index 0000000..ba2a47a
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/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('../iconclose.gif')"/>
+ </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/controls/skins/MyPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml b/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml
new file mode 100644
index 0000000..edd44e5
--- /dev/null
+++ b/tourdeflexmodules/src/spark/controls/skins/MyPanelSkin.mxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<!--- The default skin class for a Spark Panel container.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" blendMode="normal">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgfill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" stateGroups="withControls" />
+ <s:State name="disabledWithControlBar" stateGroups="withControls" />
+ </s:states>
+
+ <!-- background fill -->
+ <s:Rect left="0" right="0" bottom="0" top="0" >
+ <s:fill>
+ <s:LinearGradient rotation="90" >
+ <s:GradientEntry color="0xFFFFFF" />
+ <s:GradientEntry color="0x1a1919" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+ <!-- title bar fill -->
+ <s:Rect left="0" right="0" top="0" height="30">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0x000000" />
+ <s:GradientEntry color="0xC0C0C0" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+
+ <!-- text layer -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ right="4" top="2" height="30"
+ verticalAlign="middle" fontWeight="bold"
+ color="0xE2E2E2">
+ </s:Label>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"/>
+
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml
new file mode 100644
index 0000000..d3ad013
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSDescendantSelectorExample.mxml
@@ -0,0 +1,79 @@
+<?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:Style>
+ @namespace s "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/mx";
+
+ s|ButtonBar s|ToggleButton:upAndSelected,
+ s|ButtonBar s|ToggleButton:overAndSelected,
+ s|ButtonBar s|ToggleButton:downAndSelected,
+
+ s|ButtonBar s|ToggleButton:disabledAndSelected {
+ baseColor: #FF6633;
+ color: #FFFFCC;
+ }
+
+ s|ButtonBar {
+ baseColor: #FFFFCC;
+ }
+
+ s|Button {
+ baseColor: #000000;
+ color: #269d6c;
+ }
+
+ s|VGroup s|Label {
+ fontWeight: "bold";
+ color: #336699;
+ }
+
+ s|VGroup mx|Text {
+ color: #0A436B;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Group width="50%" height="50%">
+ <s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10">
+ <s:dataProvider>
+ <mx:ArrayCollection source="['Home', 'Events', 'Rooms', 'Dining']" />
+ </s:dataProvider>
+ </s:ButtonBar>
+ <s:Button label="Click Me!" x="12" y="48"/>
+ <s:Label x="10" y="90" text="Only text in the VGroup below has bold content." />
+ <s:VGroup x="10" y="109">
+ <s:Label text="This text component has the style setting referring to the Spark Label component." />
+ <mx:Text text="This text component has a style setting with a reference to a Halo Text component."/>
+ </s:VGroup>
+ </s:Group>
+ <s:Label width="200" text="Descendant selectors can be used to specifically qualify the component you
+want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/>
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml
new file mode 100644
index 0000000..b4d557e
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSIDSelectorExample.mxml
@@ -0,0 +1,72 @@
+<?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.
+
+-->
+<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:Style>
+ #submitButton {
+ baseColor: #1E407E;
+ color: #003399;
+ }
+
+ </fx:Style>
+ <fx:Script>
+ <![CDATA[
+ private function clickHandler():void
+ {
+ text1.text = "Thank you " + firstName.text + " " + lastName.text;
+ }
+ private function resetClickHandler():void
+ {
+ firstName.text = "";
+ lastName.text = "";
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel height="100%" width="100%"
+ horizontalCenter="0" verticalCenter="0"
+ title="Advanced CSS: ID Selector Example">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label verticalAlign="justify"
+ text="Only the Button with the id 'submitButton' will have custom colors."/>
+
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="First Name:"/>
+ <s:TextInput id="firstName" width="100"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Last Name:"/>
+ <s:TextInput id="lastName" width="100"/>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Button id="submitButton" label="Submit Form" click="clickHandler()"/>
+ <s:Button id="resetButton" label="Reset" click="resetClickHandler()"/>
+ </s:HGroup>
+ <s:Label id="text1"/>
+ </s:VGroup>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml b/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml
new file mode 100644
index 0000000..26ac8c6
--- /dev/null
+++ b/tourdeflexmodules/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<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:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ List.blueTheme {
+ selectionColor: #7FACF6;
+ }
+
+ List.greenTheme {
+ selectionColor: #00CF3F;
+ }
+
+ Panel.blueTheme {
+ contentBackgroundColor: #9abbdc;
+
+ }
+
+ .blueTheme {
+ focusColor: #3D73EF;
+ symbolColor: #2A3982;
+
+ }
+ </fx:Style>
+
+ <s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" styleName="blueTheme">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:Label width="270" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
+ <s:ComboBox selectedIndex="0">
+ <s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
+ </s:ComboBox>
+ <s:VGroup horizontalCenter="0" top="8">
+ <s:Label text="Text:"/>
+ <s:TextInput text="some text" styleName="blueTheme"/>
+ <s:Label text="Units:"/>
+ <s:NumericStepper styleName="blueTheme"/>
+ <s:List id="carList" selectedIndex="2" styleName="blueTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
+ </s:dataProvider>
+ </s:List>
+ </s:VGroup>
+ <s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+ </s:dataProvider>
+ </s:List>
+ </s:Panel>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml b/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml
new file mode 100644
index 0000000..9d313a7
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/AnimatePropertiesExample.mxml
@@ -0,0 +1,80 @@
+<?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">
+
+ <!-- NOTE: This sample was compiled with Flex SDK version 4.0.0.13875 -->
+
+ <fx:Declarations>
+ <s:Animate id="a"
+ duration="750"
+ target="{tileGroup}"
+ repeatBehavior="reverse"
+ repeatCount="2">
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="horizontalGap" />
+ <s:SimpleMotionPath valueFrom="1"
+ valueTo="15"
+ property="verticalGap" />
+ <s:SimpleMotionPath valueFrom="0"
+ valueTo="-50"
+ property="z" />
+ </s:Animate>
+ </fx:Declarations>
+
+ <s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" >
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:TileGroup id="tileGroup"
+ horizontalGap="1"
+ verticalGap="1"
+ direction="ltr"
+ columnWidth="50"
+ rowHeight="50"
+ useHandCursor="true"
+ buttonMode="true">
+
+ <mx:Image source="@Embed('assets/images/2.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/3.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/4.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/5.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/6.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/7.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/8.jpg')" click="a.play()" />
+ <mx:Image source="@Embed('assets/images/9.jpg')" click="a.play()" />
+
+ </s:TileGroup>
+
+ <s:VGroup width="100%">
+ <s:Label width="250"
+ verticalAlign="justify"
+ text="With the Spark Animate class, you can animate any arbitrary property of an object by using MotionPaths or SimpleMotionPaths. In this sample, the horizontalGap, verticalGap, and z properties of the TileGroup are being incremented over the course of the animation."/>
+
+ <s:Label text="{'horizontalGap = ' + tileGroup.horizontalGap}"/>
+ <s:Label text="{'verticalGap = ' + tileGroup.verticalGap}" />
+ </s:VGroup>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml b/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml
new file mode 100644
index 0000000..09d32cc
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/AnimateTransformExample.mxml
@@ -0,0 +1,79 @@
+<?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.
+
+-->
+<s:Module 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:Declarations>
+ <s:AnimateTransform id="bounceEffect"
+ target="{myImage}">
+
+ <s:motionPaths>
+ <s:MotionPath property="translationX" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="20"/>
+ <s:Keyframe time="550" value="80"/>
+ <s:Keyframe time="850" value="120"/>
+ <s:Keyframe time="1150" value="160"/>
+ <s:Keyframe time="1450" value="200"/>
+ <s:Keyframe time="1750" value="240"/>
+ <s:Keyframe time="2050" value="160"/>
+ <s:Keyframe time="2350" value="120"/>
+ <s:Keyframe time="2650" value="80"/>
+ <s:Keyframe time="2950" value="20"/>
+ </s:keyframes>
+ </s:MotionPath>
+
+ <s:MotionPath property="translationY" >
+ <s:keyframes>
+ <s:Keyframe time="250" value="160"/>
+ <s:Keyframe time="550" value="60"/>
+ <s:Keyframe time="850" value="160"/>
+ <s:Keyframe time="1150" value="60"/>
+ <s:Keyframe time="1450" value="160"/>
+ <s:Keyframe time="1750" value="60"/>
+ <s:Keyframe time="2050" value="160"/>
+ <s:Keyframe time="2350" value="60"/>
+ <s:Keyframe time="2650" value="160"/>
+ <s:Keyframe time="2950" value="60"/>
+ </s:keyframes>
+ </s:MotionPath>
+ </s:motionPaths>
+ </s:AnimateTransform>
+ </fx:Declarations>
+
+ <s:Panel title="AnimateTransform Effect Sample (Bounce)" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Label text="Click the Apache Flex logo to bounce it!" />
+
+ <s:Label width="250" verticalAlign="justify"
+ text="Unlike the Animate class, which you can use to animate any target property, the AnimateTransform effect only supports the animation of certain properties on the target. To use keyframes and motion paths with the AnimateTransform effect, use the MotionPath class to specify keyframes for one or more of the following properties of the AnimateTransform class:
+ movement (translationX, translationY, and translationZ), rotation (rotationX, rotationY, and rotationZ), scale (scaleX, scaleY, and scaleZ)."/>
+ </s:Panel>
+
+ <mx:Image x="20" y="60" id="myImage"
+ source="@Embed(source='assets/ApacheFlexIcon.png')"
+ click="bounceEffect.end();bounceEffect.play()"/>
+
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml b/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml
new file mode 100644
index 0000000..785d30b
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/CrossFadeExample.mxml
@@ -0,0 +1,66 @@
+<?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.
+
+-->
+
+<s:Module
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <s:states>
+ <s:State name="default"/>
+ <s:State name="flipped"/>
+ </s:states>
+
+ <s:transitions>
+ <s:Transition id="t1" autoReverse="true">
+ <s:CrossFade
+ target="{holder}"
+ duration="1000" />
+ </s:Transition>
+ </s:transitions>
+
+ <s:Panel title="CrossFade Effect Sample with Transition" width="100%" height="100%">
+
+ <s:HGroup verticalCenter="0" horizontalCenter="0">
+ <s:VGroup>
+ <s:Group id="holder">
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="true" visible.flipped="false"/>
+ <s:BitmapImage
+ source="@Embed('assets/ApacheFlexLogo.png')"
+ visible="false" visible.flipped="true"/>
+
+ </s:Group>
+ <s:Button id="playButton" left="264" bottom="174"
+ label="Cross Fade"
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" y.default="-33"/>
+ </s:VGroup>
+ <mx:Spacer width="50"/>
+ <s:VGroup width="100%" >
+ <s:Label text="Cross Fade Sample" fontSize="18"/>
+ <s:Label width="250" verticalAlign="justify"
+ text="The CrossFade effect performs a bitmap transition effect by running a crossfade between the first and second bitmaps.
+ The crossfade blends the two bitmaps over the duration of the animation."/>
+ </s:VGroup>
+ </s:HGroup>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/effects/FadeExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/effects/FadeExample.mxml b/tourdeflexmodules/src/spark/effects/FadeExample.mxml
new file mode 100644
index 0000000..43db833
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/FadeExample.mxml
@@ -0,0 +1,57 @@
+<?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.
+
+-->
+<s:Module
+ 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:Declarations>
+ <s:Fade id="fadeEffect" target="{targetImg}" alphaFrom="{Number(fromVal.text)}" alphaTo="{Number(toVal.text)}"
+ repeatCount="2" repeatBehavior="reverse" effectStart="playButton.enabled=false"
+ effectEnd="playButton.enabled=true"/>
+ </fx:Declarations>
+
+ <s:Panel title="Fade Effect Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:VGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha from:" verticalAlign="bottom"/>
+ <s:TextInput id="fromVal" text="1.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Fade alpha to:" verticalAlign="bottom"/>
+ <s:TextInput id="toVal" text="0.0" widthInChars="3"/>
+ </s:HGroup>
+ <s:Button id="playButton"
+ left="5" bottom="5"
+ label="Fade" click="fadeEffect.play()"/>
+ </s:VGroup>
+
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+
+ <s:Label width="180" verticalAlign="justify"
+ text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/>
+
+ </s:Panel>
+</s:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/effects/Move3DExample.mxml
----------------------------------------------------------------------
diff --git a/tourdeflexmodules/src/spark/effects/Move3DExample.mxml b/tourdeflexmodules/src/spark/effects/Move3DExample.mxml
new file mode 100644
index 0000000..0165704
--- /dev/null
+++ b/tourdeflexmodules/src/spark/effects/Move3DExample.mxml
@@ -0,0 +1,95 @@
+<?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.
+
+-->
+<s:Module
+ 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:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Move3D id="moveEffect" target="{targetImg}"
+ xFrom="{targetImg.x}" xBy="{Number(xVal.text)}"
+ yFrom="{targetImg.y}" yBy="{Number(yVal.text)}"
+ zFrom="{targetImg.z}" zBy="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/>
+ </fx:Declarations>
+
+ <s:Panel title="Move3D Effect Sample" width="100%" height="100%" >
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:VGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move X By" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Z By" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="-150" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" width="35"
+ value="2" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Move Image" click="moveEffect.play()"/>
+ </s:VGroup>
+ <s:HGroup>
+ <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup>
+ <s:Label text="Move3D Effect Sample" fontSize="18"/>
+ <s:Label width="200" verticalAlign="justify"
+ text="The Move3D class moves a target object in three dimensions around the transform center. A scale of
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+ </s:VGroup>
+ </s:Panel>
+</s:Module>