Modified: flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TabNavigatorExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,24 +19,18 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> + xmlns:mx="library://ns.adobe.com/flex/mx"> - <s:Panel title="TabNavigator Container" width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <s:Panel title="TabNavigator Container" width="100%" height="100%"> <s:layout> <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> - <s:Label width="100%" color="0x323232" fontWeight="bold" + <s:Label width="100%" fontWeight="bold" text="Select the tabs to change the panel."/> - <mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232" > + <mx:TabNavigator id="tn" width="100%" height="100%"> <!-- Define each panel using a VBox container. --> <s:NavigatorContent label="Panel 1"> @@ -52,7 +46,7 @@ </s:NavigatorContent> </mx:TabNavigator> - <s:Label width="100%" color="0x323232" + <s:Label width="100%" text="Programmatically select the panel using a Button control."/> <s:HGroup>
Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.mxml Sat Nov 29 07:19:59 2014 @@ -22,8 +22,6 @@ xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ - import skins.TDFPanelSkin; - protected function changeHandler():void { txt.maxChars = this.maxChars.value; @@ -34,57 +32,58 @@ ]]> </fx:Script> - <s:Panel title="TextArea Sample" - width="100%" height="100%" skinClass="skins.TDFPanelSkin"> + <s:Panel title="TextArea Sample" width="100%" height="100%"> - <s:HGroup top="8" width="100%" height="100%" left="80"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Max Character Input:"/> + <s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Text Alignment:"/> + <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>left</fx:String> + <fx:String>right</fx:String> + <fx:String>center</fx:String> + <fx:String>justify</fx:String> + <fx:String>start</fx:String> + <fx:String>end</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Direction:"/> + <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>ltr</fx:String> + <fx:String>rtl</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify characters to restrict (use - for range):"/> + <s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> + </s:HGroup> <s:VGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify Max Character Input:"/> - <s:NumericStepper id="maxChars" maximum="200" value="100" stepSize="2" change="this.changeHandler()"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify Text Alignment:"/> - <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler()"> - <s:dataProvider> - <mx:ArrayList> - <fx:String>left</fx:String> - <fx:String>right</fx:String> - <fx:String>center</fx:String> - <fx:String>justify</fx:String> - <fx:String>start</fx:String> - <fx:String>end</fx:String> - </mx:ArrayList> - </s:dataProvider> - </s:DropDownList> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Direction:"/> - <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler()"> - <s:dataProvider> - <mx:ArrayList> - <fx:String>ltr</fx:String> - <fx:String>rtl</fx:String> - </mx:ArrayList> - </s:dataProvider> - </s:DropDownList> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify characters to restrict (use - for range):"/> - <s:TextInput id="restrictStr" change="this.changeHandler()" text="a-z 1-9"/> - </s:HGroup> - <s:VGroup> - <s:Label text="Text:"/> - <s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9" - change="this.changeHandler()"/> - </s:VGroup> - </s:VGroup> - <s:Label width="200" color="#323232" top="20" right="80" - text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. + <s:Label text="Text:"/> + <s:TextArea id="txt" width="300" height="70" color="0x323232" horizontalCenter="0" verticalCenter="0" restrict="a-z 1-9" + change="this.changeHandler()"/> + </s:VGroup> + </s:VGroup> + <s:Label width="200" top="20" right="80" + text="TextArea is a text-entry control that lets users enter and edit multiple lines of richly formatted text. It can display horizontal and vertical scrollbars for scrolling through the text and supports vertical scrolling with the mouse wheel. This sample also shows how you can restrict character input on the text area. The default when this is run will not allow the number 0 or caps based on the restrict range shown. The sample also shows how you can specify a direction on the text."/> - </s:HGroup> </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextAreaExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.mxml Sat Nov 29 07:19:59 2014 @@ -43,56 +43,56 @@ ]]> </fx:Script> - <s:Panel skinClass="skins.TDFPanelSkin" - width="100%" height="100%" - title="TextInput Sample"> + <s:Panel title="TextInput Sample" width="100%" height="100%"> - <s:VGroup top="20" width="100%" height="100%" left="200"> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify Max Character Input:"/> - <s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify Text Alignment:"/> - <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)"> - <s:dataProvider> - <mx:ArrayList> - <fx:String>left</fx:String> - <fx:String>right</fx:String> - <fx:String>center</fx:String> - <fx:String>justify</fx:String> - <fx:String>start</fx:String> - <fx:String>end</fx:String> - </mx:ArrayList> - </s:dataProvider> - </s:DropDownList> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Direction:"/> - <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)"> - <s:dataProvider> - <mx:ArrayList> - <fx:String>rtl</fx:String> - <fx:String>ltr</fx:String> - </mx:ArrayList> - </s:dataProvider> - </s:DropDownList> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Specify characters to restrict (use - for range):"/> - <s:TextInput id="restrictStr" change="this.changeHandler(null)"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Text Input:"/> - <s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" - change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/> - </s:HGroup> - <mx:Spacer height="10"/> - <s:Label width="85%" horizontalCenter="0" color="#323232" - text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text. + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Max Character Input:"/> + <s:NumericStepper id="maxChars" value="30" stepSize="2" change="this.changeHandler(null)"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify Text Alignment:"/> + <s:DropDownList id="alignVal" prompt="left" change="this.changeHandler(null)"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>left</fx:String> + <fx:String>right</fx:String> + <fx:String>center</fx:String> + <fx:String>justify</fx:String> + <fx:String>start</fx:String> + <fx:String>end</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Direction:"/> + <s:DropDownList id="direction" prompt="ltr" change="this.changeHandler(null)"> + <s:dataProvider> + <mx:ArrayList> + <fx:String>rtl</fx:String> + <fx:String>ltr</fx:String> + </mx:ArrayList> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Specify characters to restrict (use - for range):"/> + <s:TextInput id="restrictStr" change="this.changeHandler(null)"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Text Input:"/> + <s:TextInput id="txt" maxChars="{maxChars.value}" maxWidth="150" + change="txtChangeHandler(event)" textAlign="{alignVal.selectedItem}"/> + </s:HGroup> + <mx:Spacer height="10"/> + <s:Label width="85%" horizontalCenter="0" + text="TextInput is a text-entry control that lets users enter and edit a single line of uniformly-formatted text. This Spark version of TextInput makes use of the Text Layout Framework (TLF). Numerous properties are available to be set using the textFlow object from the TLF framework. Uses of some are shown above."/> - </s:VGroup> </s:Panel> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextInputExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.mxml Sat Nov 29 07:19:59 2014 @@ -19,7 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" + xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" creationComplete="init()"> <!-- Based on original code from here and updated and enhanced for Flex 4: @@ -48,8 +48,6 @@ import mx.events.FlexEvent; import mx.events.SliderEvent; - import skins.TDFPanelSkin; - import spark.components.Group; import spark.core.SpriteVisualElement; @@ -141,7 +139,7 @@ ]]> </fx:Script> - <s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%"> + <s:Panel title="Text Layout Framework Sample" width="100%" height="100%"> <s:layout> <s:VerticalLayout paddingTop="8" paddingLeft="8"/> </s:layout> @@ -162,4 +160,4 @@ </s:VGroup> </s:Panel> -</s:Application> \ No newline at end of file +</s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout1Example.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.mxml Sat Nov 29 07:19:59 2014 @@ -19,7 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" maxWidth="690" maxHeight="300" + 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 --> @@ -72,7 +72,7 @@ headlineController.format = hContainerFormat; hTextFlow.flowComposer.addController(headlineController); - addElement(headContainer); + panel.addElement(headContainer); this.addEventListener(flash.events.Event.RESIZE, resizeHandler); // Body text TextFlow and flow composer @@ -88,8 +88,8 @@ bodyController.format = bodyTextContainerFormat; bTextFlow.flowComposer.addController(bodyController); - addElement(bodyTextContainer); - resizeHandler(null); + panel.addElement(bodyTextContainer); + resizeHandler(null); } private function resizeHandler(event:Event):void @@ -131,5 +131,13 @@ } ]]> </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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout2Example.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.mxml Sat Nov 29 07:19:59 2014 @@ -67,9 +67,10 @@ } ]]></fx:Script> - <s:Panel skinClass="skins.TDFPanelSkin" title="Importing Text using TLF and Flex 4" width="100%" height="100%"> + <s:Panel title="Importing Text using TLF and Flex 4" width="100%" height="100%"> + <s:layout> - <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> <s:VGroup> @@ -82,7 +83,7 @@ textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}" horizontalCenter="0" verticalCenter="0" /> </s:VGroup> - <s:Label width="200" color="0x323232" verticalAlign="justify" text="This sample shows how you can use different types of text markup within + <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."/> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout3Example.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.mxml Sat Nov 29 07:19:59 2014 @@ -50,9 +50,10 @@ </fx:XML> </fx:Declarations> - <s:Panel skinClass="skins.TDFPanelSkin" title="Text Import Format Types Sample" width="100%" height="100%"> + <s:Panel title="Text Import Format Types Sample" width="100%" height="100%"> + <s:layout> - <s:HorizontalLayout paddingTop="8" paddingLeft="8" paddingRight="12"/> + <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 Modified: flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TextLayout4Example.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -56,24 +55,16 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout horizontalAlign="center" /> - </s:layout> - - <s:Panel title="TitleWindow Container" color="0x000000" - borderAlpha="0.15" - width="600"> + <s:Panel title="TitleWindow Container" width="100%" height="100%"> <s:layout> - <s:VerticalLayout horizontalAlign="center" - paddingLeft="10" paddingRight="10" - paddingTop="10" paddingBottom="10"/> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> - <s:Button id="myButton" color="0x323232" height="32" label="Click to open the TitleWindow container" - click="showWindow();"/> + <s:Button id="myButton" height="32" label="Click to open the TitleWindow container" + click="showWindow()"/> - <s:RichText id="returnedName" width="100%" color="0x323232" text="Waiting..."/> + <s:RichText id="returnedName" width="100%" text="Waiting..."/> </s:Panel> Modified: flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TitleWindowExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.mxml Sat Nov 29 07:19:59 2014 @@ -22,7 +22,6 @@ xmlns:mx="library://ns.adobe.com/flex/mx" currentState="hide"> - <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -70,42 +69,40 @@ color: #FFFFFF; } </fx:Style> + <s:states> <s:State name="show"/> <s:State name="hide"/> </s:states> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel width="100%" height="100%" - horizontalCenter="0" - title="ToggleButton Sample" - skinClass="skins.TDFPanelSkin"> - - <s:HGroup left="5" top="5" width="100%" height="100%"> - <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> - <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" width="88%"> - <s:Label fontSize="13" color="0x323232" 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: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> @@ -141,6 +138,7 @@ the button again to toggle it back to th </s:Panel> </s:HGroup> - </s:Group>--> + </s:Group> + --> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButton2Example.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -48,24 +47,18 @@ </fx:Declarations> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - - <s:Panel id="tgPanel" title="ToggleButtonBar: Flash" width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <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 color="0x323232" horizontalGap="5" itemClick="clickHandler(event);" dataProvider="{dp}" /> + <mx:ToggleButtonBar horizontalGap="5" itemClick="clickHandler(event)" dataProvider="{dp}" /> - <s:Label width="100%" textAlign="center" color="0x323232" + <s:Label width="100%" textAlign="center" text="Select a button in the ToggleButtonBar control."/> - <s:TextArea color="0x323232" id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/> + <s:TextArea id="myTA" width="100%" height="100%" text="{'Selected button index: 0' + '\n' +'Selected button label: Flash'}"/> </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonBarExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.mxml Sat Nov 29 07:19:59 2014 @@ -41,71 +41,38 @@ } ]]> </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> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel width="100%" height="100%" - horizontalCenter="0" - title="ToggleButton Sample" - skinClass="skins.TDFPanelSkin"> + <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 left="5" top="5" width="100%" height="100%"> - <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> - <s:HGroup horizontalCenter="0" bottom="15" verticalAlign="middle" clipAndEnableScrolling="true" width="88%"> - <s:Label fontSize="13" color="0x323232" 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: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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToggleButtonExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,30 +19,9 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> - - <fx:Style> - @namespace mx "library://ns.adobe.com/flex/mx"; - - mx|ToolTip - { - fontFamily: "Arial"; - fontSize: 12; - fontStyle: "italic"; - color: #000000; - backgroundColor: #FCEA1E; - } - </fx:Style> - - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - - <s:Panel title="ToolTip Samples" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="ToolTip Samples" width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" Modified: flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ToolTipExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -57,20 +56,18 @@ <s:VerticalLayout horizontalAlign="center" /> </s:layout> - <s:Panel title="Tree Control" color="0x000000" - borderAlpha="0.15" - width="600"> - + <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%" color="0x323232" + <s:Label width="100%" text="Select a node in the Tree control."/> - <mx:HDividedBox width="100%" height="100%" color="0x323232"> + <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%" Modified: flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/TreeExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,14 +19,9 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin" + xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init(event)"> - - <s:layout> - <s:HorizontalLayout horizontalAlign="center" /> - </s:layout> - + <fx:Script> <![CDATA[ import flashx.textLayout.conversion.TextConverter; @@ -45,7 +40,11 @@ <fx:String id="TitleText"><![CDATA[<b>VideoDisplay Control:</b><br />Use the buttons to control the video.]]></fx:String> </fx:Declarations> - <s:VGroup width="600" horizontalAlign="center" paddingTop="10"> + <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)}" @@ -54,11 +53,11 @@ <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: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:VGroup> + </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/VideoDisplayExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.mxml Sat Nov 29 07:19:59 2014 @@ -43,12 +43,9 @@ ]]> </fx:Script> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel title="VideoPlayer Sample" - width="100%" height="100%" - skinClass="skins.TDFPanelSkin"> - <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" + <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 Modified: flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/VideoPlayerExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.mxml Sat Nov 29 07:19:59 2014 @@ -19,43 +19,34 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - - <s:Panel title="ViewStack Container" width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <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%" color="0x323232" textAlign="center" + <s:Label width="100%" textAlign="center" text="Use the Button controls to change panels of the ViewStack container."/> - <s:BorderContainer borderStyle="solid" width="100%" color="0x323232"> + <s:BorderContainer borderStyle="solid" width="100%"> <s:layout> - <s:HorizontalLayout horizontalAlign="center" - paddingTop="5" paddingLeft="5" - paddingRight="5" paddingBottom="5" /> + <s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" /> </s:layout> <s:Button id="searchButton" label="Search Panel" - click="myViewStack.selectedChild=search;"/> + click="myViewStack.selectedChild=search"/> <s:Button id="cInfoButton" label="Customer Info Panel" - click="myViewStack.selectedChild=custInfo;"/> + click="myViewStack.selectedChild=custInfo"/> <s:Button id="aInfoButton" label="Account Panel" - click="myViewStack.selectedChild=accountInfo;"/> + 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%" color="0x323232"> + <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%"> <s:NavigatorContent id="search" label="Search" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" > @@ -85,7 +76,7 @@ <s:HGroup> <s:Label text="Email Address"/> <s:TextInput id="email" width="200"/> - <s:Button label="Submit" click="email.text='';" /> + <s:Button label="Submit" click="email.text=''" /> </s:HGroup> </s:NavigatorContent> Modified: flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/controls/ViewStackExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.mxml Sat Nov 29 07:19:59 2014 @@ -54,7 +54,12 @@ } </fx:Style> - <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin"> + <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> @@ -68,7 +73,7 @@ <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" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you + <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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSDescendantSelectorExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.mxml Sat Nov 29 07:19:59 2014 @@ -23,7 +23,7 @@ <fx:Style> #submitButton { baseColor: #1E407E; - color: #FFFFFF; + color: #003399; } </fx:Style> @@ -43,12 +43,16 @@ <s:Panel height="100%" width="100%" horizontalCenter="0" verticalCenter="0" - title="Advanced CSS: ID Selector Example" - skinClass="skins.TDFPanelSkin"> - <s:Label top="20" left="30" width="140" color="0x323232" verticalAlign="justify" + 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 horizontalCenter="0" horizontalAlign="center" verticalCenter="0"> + <s:VGroup> <s:HGroup verticalAlign="middle"> <s:Label text="First Name:"/> <s:TextInput id="firstName" width="100"/> Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSIDSelectorExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.mxml Sat Nov 29 07:19:59 2014 @@ -43,30 +43,32 @@ } </fx:Style> - <s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%" - styleName="blueTheme" skinClass="skins.TDFPanelSkin"> - <s:HGroup horizontalCenter="0" top="15"> - <s:Label width="270" color="0x323232" 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: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="[Apples,Bananas,Grapes]" /> + <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" /> </s:dataProvider> </s:List> - </s:HGroup> + </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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/css/CSSTypeClassSelectorExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.mxml Sat Nov 29 07:19:59 2014 @@ -41,47 +41,40 @@ </s:Animate> </fx:Declarations> - <s:layout> - <s:HorizontalLayout - horizontalAlign="center" - gap="100" - paddingTop="8"/> - </s:layout> - - <s:TileGroup id="tileGroup" - horizontalGap="1" - verticalGap="1" - direction="ltr" - columnWidth="50" - rowHeight="50" - useHandCursor="true" - buttonMode="true"> + <s:Panel title="Animate Properties Effect Sample" width="100%" height="100%" > - <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:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> - </s:TileGroup> - - <s:HGroup top="8" right="8"> - <s:VGroup width="100%" > - <s:Label text="Animate Properties Sample" - fontSize="18" - color="#B7B6B6"/> + <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" - color="#323232" + 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:HGroup> - + + </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/AnimatePropertiesExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.mxml Sat Nov 29 07:19:59 2014 @@ -28,89 +28,52 @@ <s:motionPaths> <s:MotionPath property="translationX" > <s:keyframes> - <s:Keyframe time="250" value="0"/> - <s:Keyframe time="550" value="60"/> - <s:Keyframe time="850" value="100"/> - <s:Keyframe time="1150" value="140"/> - <s:Keyframe time="1450" value="180"/> - <s:Keyframe time="1750" value="220"/> - <s:Keyframe time="2050" value="140"/> - <s:Keyframe time="2350" value="100"/> - <s:Keyframe time="2650" value="60"/> - <s:Keyframe time="2950" value="0"/> + <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="100"/> - <s:Keyframe time="550" value="0"/> - <s:Keyframe time="850" value="100"/> - <s:Keyframe time="1150" value="0"/> - <s:Keyframe time="1450" value="100"/> - <s:Keyframe time="1750" value="0"/> - <s:Keyframe time="2050" value="100"/> - <s:Keyframe time="2350" value="0"/> - <s:Keyframe time="2650" value="100"/> - <s:Keyframe time="2950" value="0"/> + <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> - <fx:Style> - @namespace "library://ns.adobe.com/flex/spark"; + <s:Panel title="AnimateTransform Effect Sample (Bounce)" width="100%" height="100%"> - Button:up{ - baseColor: #000000; - color: #FFFFFF; - fontWeight: "bold"; - } - Button:over{ - baseColor: #878787; - color: #FFFFFF; - fontWeight: "bold"; - } - Button:down{ - baseColor: #878787; - color: #000000; - fontWeight: "bold"; - } - Button:disabled { - baseColor: #FFFFFF; - color: #878787; - fontWeight: "bold"; - } - Label { - fontFamily: "Arial"; - fontWeight: "bold"; - } - </fx:Style> - - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel title="AnimateTransform Effect Sample (Bounce)" - width="100%" height="100%" - skinClass="skins.TDFPanelSkin"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> - <s:Group left="3"> - <mx:Image y="0" id="myImage" - source="@Embed(source='assets/ApacheFlexIcon.png')" - click="bounceEffect.end();bounceEffect.play();"/> - </s:Group> + <s:Label text="Click the Apache Flex logo to bounce it!" /> - <s:HGroup bottom="5" left="3"> - <s:Label text="Click the Apache Flex logo to bounce it!" color="0x000000"/> - </s:HGroup> - <s:HGroup top="5" right="5"> - <s:VGroup width="100%" > - <s:Label text="Cross Fade Sample" fontSize="18" color="#B7B6B6"/> - <s:Label width="250" verticalAlign="justify" color="#323232" - 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:VGroup> - </s:HGroup> + <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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/AnimateTransformExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.mxml Sat Nov 29 07:19:59 2014 @@ -36,9 +36,7 @@ </s:Transition> </s:transitions> - <s:Panel title="CrossFade Effect Sample with Transition" - width="100%" height="100%" - skinClass="skins.TDFPanelSkin"> + <s:Panel title="CrossFade Effect Sample with Transition" width="100%" height="100%"> <s:HGroup verticalCenter="0" horizontalCenter="0"> <s:VGroup> @@ -53,12 +51,12 @@ </s:Group> <s:Button id="playButton" left="264" bottom="174" label="Cross Fade" - click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" y.default="-33"/> + 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" color="#B7B6B6"/> - <s:Label width="250" verticalAlign="justify" color="#323232" + <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> Modified: flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/CrossFadeExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.mxml Sat Nov 29 07:19:59 2014 @@ -25,36 +25,33 @@ <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;"/> + effectEnd="playButton.enabled=true"/> </fx:Declarations> - <s:Panel title="Fade Effect Sample" - width="100%" height="100%" - skinClass="skins.TDFPanelSkin"> + <s:Panel title="Fade Effect Sample" width="100%" height="100%"> - <s:HGroup verticalCenter="0" horizontalCenter="0"> - <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:VGroup width="100%" > - <s:Label text="Fade Sample" fontSize="18" color="#B7B6B6"/> - <s:Label width="180" verticalAlign="justify" color="#323232" - text="The Fade effect changes the alpha of a target using the following parameters: alphaFrom, alphaTo. Click 'Fade' to watch the effect."/> - </s:VGroup> - </s:HGroup> + <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:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/FadeExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.mxml Sat Nov 29 07:19:59 2014 @@ -41,59 +41,55 @@ 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;"/> + effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/> </fx:Declarations> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel width="100%" height="100%" - horizontalCenter="0" - title="Move3D Effect Sample" - skinClass="skins.TDFPanelSkin"> + <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 left="10" top="5" width="100%" height="100%" horizontalCenter="0"> - <s:VGroup width="40%"> - - <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 horizontalCenter="0" height="30%" verticalAlign="middle" width="40%"> - <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + + <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:VGroup top="0" right="5" horizontalAlign="right" width="30%"> - <s:Label text="Move3D Effect Sample" fontSize="18" color="#B7B6B6"/> - <s:Label color="#323232" width="200" verticalAlign="justify" - text="The Move3D class moves a target object in three dimensions around the transform center. A scale of + <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:HGroup> + </s:VGroup> </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Move3DExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.mxml Sat Nov 29 07:19:59 2014 @@ -29,55 +29,48 @@ angleZFrom="0.0" angleZTo="{Number(zVal.text)}" duration="{duration.value}" repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}" - effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0;"/> + effectStart="this.targetImg.alpha=.8" effectEnd="this.targetImg.alpha=1.0"/> </fx:Declarations> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel width="100%" height="100%" - horizontalCenter="0" - title="Rotate3D Effect Sample" - skinClass="skins.TDFPanelSkin"> + <s:Panel title="Rotate3D Effect Sample" width="100%" height="100%"> - <s:HGroup horizontalCenter="0" top="10"> - <s:VGroup > - <s:HGroup verticalAlign="middle"> - <s:Label text="Rotate X To" verticalAlign="bottom"/> - <s:TextInput id="xVal" text="0.0" widthInChars="3"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Rotate Y By" verticalAlign="bottom"/> - <s:TextInput id="yVal" text="360.0" widthInChars="3"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Rotate Z To" verticalAlign="bottom"/> - <s:TextInput id="zVal" text="0.0" widthInChars="3"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Repeat Num" verticalAlign="bottom"/> - <s:NumericStepper id="repeatCnt" value="2" width="35" 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="Rotate Image" click="rotateEffect.play();"/> - </s:VGroup> - <s:HGroup horizontalCenter="0" height="60%" verticalAlign="middle" width="10%"> - <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:VGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Rotate X To" verticalAlign="bottom"/> + <s:TextInput id="xVal" text="0.0" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Rotate Y By" verticalAlign="bottom"/> + <s:TextInput id="yVal" text="360.0" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Rotate Z To" verticalAlign="bottom"/> + <s:TextInput id="zVal" text="0.0" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Repeat Num" verticalAlign="bottom"/> + <s:NumericStepper id="repeatCnt" value="2" width="35" 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:VGroup top="0" right="5" horizontalAlign="right"> - <s:Label text="Rotate3D Effect Sample" fontSize="18" color="#B7B6B6"/> - <s:Label color="#323232" width="200" verticalAlign="justify" - text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z -axes. The rotation occurs around the transform center of the target." textAlign="left"/> - </s:VGroup> - </s:HGroup> + <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/> + <s:Button id="playButton" + label="Rotate Image" click="rotateEffect.play()"/> + </s:VGroup> + <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + + <s:Label width="200" verticalAlign="justify" + text="The Rotate3D class rotates a target object in three dimensions around the x, y, or z +axes. The rotation occurs around the transform center of the target." textAlign="left"/> </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Rotate3DExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.mxml Sat Nov 29 07:19:59 2014 @@ -29,59 +29,51 @@ scaleZFrom="1.0" scaleZTo="{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;"/> + effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0"/> </fx:Declarations> - <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the - source tabs for each sample. --> - <s:Panel width="100%" height="100%" - horizontalCenter="0" - title="Scale3D Effect Sample" - skinClass="skins.TDFPanelSkin"> + <s:Panel title="Scale3D Effect Sample" width="100%" height="100%"> - <s:HGroup left="5" top="5" width="100%" height="100%" horizontalCenter="0"> - <s:VGroup width="40%"> - <s:HGroup verticalAlign="middle"> - <s:Label text="Scale X To" verticalAlign="bottom"/> - <s:TextInput id="xVal" text="0.5" widthInChars="3"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Scale Y To" verticalAlign="bottom"/> - <s:TextInput id="yVal" text="0.5" widthInChars="3"/> - </s:HGroup> - <s:HGroup verticalAlign="middle"> - <s:Label text="Scale Z To" verticalAlign="bottom"/> - <s:TextInput id="zVal" text="1.0" 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="Scale Image" click="scaleEffect.play();"/> - </s:VGroup> - <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%"> - <s:BitmapImage id="targetImg" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:VGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Scale X To" verticalAlign="bottom"/> + <s:TextInput id="xVal" text="0.5" widthInChars="3"/> </s:HGroup> - <s:VGroup top="0" right="5" horizontalAlign="right" width="30%"> - <s:Label text="Scale3D Effect Sample" fontSize="18" color="#B7B6B6"/> - <s:Label color="#323232" width="200" verticalAlign="justify" - text="The Scale3D class scales a target object in three dimensions around the transform center. A scale of + <s:HGroup verticalAlign="middle"> + <s:Label text="Scale Y To" verticalAlign="bottom"/> + <s:TextInput id="yVal" text="0.5" widthInChars="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Scale Z To" verticalAlign="bottom"/> + <s:TextInput id="zVal" text="1.0" 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="Scale Image" click="scaleEffect.play()"/> + </s:VGroup> + + <s:BitmapImage id="targetImg" width="50%" height="50%" source="@Embed(source='assets/ApacheFlexLogo.png')"/> + + <s:Label width="200" verticalAlign="justify" + text="The Scale3D class scales 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:HGroup> - - +reduced by a factor of 2. A scale value of 0.0 is invalid."/> </s:Panel> </s:Application> Modified: flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/Scale3DExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.mxml Sat Nov 29 07:19:59 2014 @@ -36,7 +36,7 @@ </s:Transition> </s:transitions> - <s:Panel title="Wipe Effect Example" skinClass="skins.TDFPanelSkin" + <s:Panel title="Wipe Effect Example" width="100%" height="100%"> <s:HGroup horizontalCenter="0" top="15" > @@ -52,7 +52,7 @@ </s:Group> <s:Button label="Wipe Right" - click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" /> + click="currentState = (currentState == 'flipped') ? 'default' : 'flipped'" /> </s:VGroup> Modified: flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/effects/WipeExample.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample1.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample1.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/events/EventExample1.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/events/EventExample1.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -28,14 +27,8 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - <s:Panel title="Handling Events - Inline property Sample" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample1.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample1.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample2.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample2.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/events/EventExample2.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/events/EventExample2.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -28,14 +27,8 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - <s:Panel title="Handling Events - Inline Block Sample" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample2.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample2.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample3.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample3.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/events/EventExample3.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/events/EventExample3.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -34,14 +33,8 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - <s:Panel title="Handling Events - Function Sample" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample3.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample3.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available. Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample4.mxml URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample4.mxml?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== --- flex/site/trunk/content/tourdeflex/spark/events/EventExample4.mxml (original) +++ flex/site/trunk/content/tourdeflex/spark/events/EventExample4.mxml Sat Nov 29 07:19:59 2014 @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -34,14 +33,8 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - <s:Panel title="Handling Events - Function with addEventListener Sample" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" Modified: flex/site/trunk/content/tourdeflex/spark/events/EventExample4.swf URL: http://svn.apache.org/viewvc/flex/site/trunk/content/tourdeflex/spark/events/EventExample4.swf?rev=1642397&r1=1642396&r2=1642397&view=diff ============================================================================== Binary files - no diff available.
