You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/10/18 09:29:06 UTC
[8/9] FLEX-34485 make examples consistent
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
index d94429f..7227822 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DropdownExample.mxml
@@ -66,13 +66,10 @@
]]>
</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="DropDownList Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="DropDownList Sample" width="100%" height="100%">
+
<s:VGroup width="100%" height="100%" left="120" top="5">
- <s:Label text="RJ's Warehouse Price Checker" fontSize="18" color="0x014f9f"/>
+ <s:Label text="RJ's Warehouse Price Checker" fontSize="18" />
<s:DropDownList id="list1" width="50%" dataProvider="{depts}" labelField="label"
prompt="Select Category"
change="handleDepartmentSelected(event)"/>
@@ -81,7 +78,7 @@
<mx:Spacer height="10"/>
<s:Label fontSize="14" color="0x336699" text="The price of item: {list2.selectedItem.label} is: ${list1.selectedItem.data}" verticalAlign="bottom"/>
</s:VGroup>
- <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232"
+ <s:Label top="10" right="10" width="250" verticalAlign="justify"
text="The DropDownList control contains a drop-down list from which the user can select a single value. Its functionality is very similar to that of the SELECT form element in HTML.
The DropDownList control consists of the anchor button, prompt area, and drop-down-list, Use the anchor button to open and close the drop-down-list. The prompt area displays a prompt String, or the selected item in the drop-down-list."/>
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
index 79af492..3895ae7 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/FormExample.mxml
@@ -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:Declarations>
<fx:Model id="checkModel">
@@ -43,23 +42,14 @@
<mx:ZipCodeValidator source="{zip}" property="text"/>
</fx:Declarations>
-
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
- <s:Panel title="Form Container: Moving from one form field to another triggers the validator" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="Form Container: Moving from one form field to another triggers the validator" 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>
- <mx:Form width="100%" color="0x323232" paddingTop="0">
+ <mx:Form width="100%" paddingTop="0">
<mx:FormHeading fontSize="10" label="Enter values into the form." paddingTop="0" />
<mx:FormItem label="First name">
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
index f3473b7..35379c4 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ImageExample.mxml
@@ -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[
@@ -32,38 +31,26 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="Image Samples" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="Image Samples" width="100%" height="100%">
+
<s:layout>
- <s:HorizontalLayout horizontalAlign="center"
- paddingLeft="10" paddingRight="10"
- paddingTop="10" paddingBottom="10"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
- <!--<mx:VBox width="100%" borderColor="0xACACAC" borderThickness="1" borderStyle="solid" horizontalAlign="center"
- paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" >-->
- <s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-
+ <s:BorderContainer width="50%" height="100%">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label color="0x323232" text="Sample of image embeded at compile time." />
- <mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event);"/>
+ <s:Label text="Sample of image embeded at compile time." />
+ <mx:Image id="embededImage" width="50%" height="50%" source="@Embed('assets/ApacheFlexLogo.png')" creationComplete="smoothImage(event)"/>
</s:BorderContainer>
- <s:BorderContainer width="50%" borderColor="0xACACAC" height="100%" borderStyle="solid">
-
+ <s:BorderContainer width="50%" height="100%">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
- <s:Label color="0x323232" text="Sample of image loaded at run-time." />
- <mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event);"/>
+ <s:Label text="Sample of image loaded at run-time." />
+ <mx:Image id="loadedImage" width="50%" height="50%" source="assets/ApacheFlexLogo.png" creationComplete="smoothImage(event)"/>
</s:BorderContainer>
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
index eff7901..2af6b20 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkBarExample.mxml
@@ -19,28 +19,21 @@
-->
<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="LinkBar Control" width="600" height="100%"
- color="0x000000"
- borderAlpha="0.15">
+ <s:Panel title="LinkBar Control" 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="Select a link in the LinkBar control to set the active child of the ViewStack container."/>
<mx:LinkBar color="0x0050AA" horizontalAlign="center" width="100%" fontWeight="bold" dataProvider="{myViewStack}" borderColor="0xACACAC" borderStyle="solid"/>
<!-- Define the ViewStack and the three child containers -->
- <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="Customer Info" backgroundColor="0xDCDCDC" fontWeight="bold">
<s:layout>
@@ -64,7 +57,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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
index 02aaaf8..bcec4d0 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/LinkButtonExample.mxml
@@ -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,21 +27,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="LinkButton Sample" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="LinkButton Sample" 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:Label color="0x323232" text="Sample of image embeded at compile time." />
+ <s:Label text="Sample of image embeded at compile time." />
<mx:LinkButton label="LinkButton Control" color="0x3380DD" click="{Alert.show('LinkButton Pressed');}"
textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon.png')" />
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
index 75aeb35..619845a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListDataPagingExample.mxml
@@ -20,7 +20,7 @@
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*"
- initialize="loadSecurity();">
+ initialize="loadSecurity()">
<fx:Script>
<![CDATA[
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
index 4a405f9..b83173c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ListExample.mxml
@@ -56,42 +56,43 @@
}
</fx:Style>
- <s:Panel title="List Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
- <s:VGroup id="vGrp" horizontalCenter="0" top="3"
- width="80%" height="75%">
- <s:HGroup verticalAlign="middle">
- <s:Label text="Select items to add, price will be shown when added:"
- verticalAlign="bottom"/>
- </s:HGroup>
- <s:HGroup >
- <s:List id="myList" height="157" width="160"
- itemRenderer="MyListItemRenderer"
- change="itemIndexChangeHandler(event)">
- <s:dataProvider>
- <s:ArrayCollection>
- <local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
- <local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
- <local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
- <local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
- <local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
- </s:ArrayCollection>
- </s:dataProvider>
- </s:List>
- <s:TextArea id="ta" width="{myList.width}" height="{myList.height}"
- color="0xAE0A0A" fontWeight="bold"/>
- <s:VGroup>
- <mx:Spacer height="10"/>
- <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/>
- <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!"
- fontWeight="bold"
- click="buyBtn_clickHandler(event)"/>
- <s:Label id="txtResponse"/>
- </s:VGroup>
- </s:HGroup>
- </s:VGroup>
- <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232"
+ <s:Panel title="List Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Select items to add, price will be shown when added:"
+ verticalAlign="bottom"/>
+ </s:HGroup>
+ <s:HGroup>
+ <s:List id="myList" height="157" width="160"
+ itemRenderer="MyListItemRenderer"
+ change="itemIndexChangeHandler(event)">
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/>
+ <local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/>
+ <local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/>
+ <local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/>
+ <local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:List>
+ <s:TextArea id="ta" width="{myList.width}" height="{myList.height}"
+ color="0xAE0A0A" fontWeight="bold"/>
+ <s:VGroup>
+ <mx:Spacer height="10"/>
+ <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/>
+ <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!"
+ fontWeight="bold"
+ click="buyBtn_clickHandler(event)"/>
+ <s:Label id="txtResponse"/>
+ </s:VGroup>
+ </s:HGroup>
+
+ <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify"
text="The Spark List control displays a list of data items. Its functionality is
very similar to that of the SELECT form element in HTML. The user can select one or more items from the list.
The List control automatically displays horizontal and vertical scroll bar when the list items do not fit
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
index d2e6d08..303a239 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
@@ -26,8 +26,6 @@
import mx.events.FlexEvent;
import mx.events.MenuEvent;
- import skins.TDFPanelSkin;
-
protected var myMenu:Menu;
protected function showHandler(event:MouseEvent):void
@@ -74,14 +72,19 @@
</fx:XML>
</fx:Declarations>
- <s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Panel title="Menu Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
<s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
<s:Button label="Show Menu" click="showHandler(event)" />
<s:Button label="Hide Menu" click="hideHandler(event)" />
- <s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/>
+ <s:Label text="Menu Item Selected:" fontWeight="bold" />
<s:Label id="lblSelected" />
</s:HGroup>
- <s:Label width="220" color="#323232" top="15" right="50"
+ <s:Label width="220" top="15" right="50"
text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript
to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
index 65ca477..9a845ee 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/NumericStepperExample.mxml
@@ -46,46 +46,42 @@
</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="NumericStepper Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="NumericStepper Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
- <s:HGroup left="15" top="10">
- <s:Label width="250" verticalAlign="justify" color="#323232"
- text="The NumericStepper control allows you to select a number from an
+ <s:Label width="250" verticalAlign="justify"
+ text="The NumericStepper control allows you to select a number from an
ordered set. The NumericStepper control consists of a single-line input text field and a pair of arrow buttons
for stepping through the valid values. You can use the Up Arrow and Down arrow keys to cycle through the values."/>
-
- <mx:Form >
- <mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
- <mx:FormItem label="Name:">
- <s:TextInput id="nameTxt" widthInChars="20"/>
- </mx:FormItem>
- <mx:FormItem label="Address:">
- <s:TextArea widthInChars="20" heightInLines="2"/>
- </mx:FormItem>
- <mx:FormItem label="Phone:">
- <s:TextInput id="phoneTxt" widthInChars="20"/>
- </mx:FormItem>
- <mx:FormItem label="Select # of tickets:">
- <s:NumericStepper id="numStepper" width="55"
- value="0" snapInterval="2"/>
- </mx:FormItem>
- <mx:FormItem>
- <s:Button label="Buy Now!" click="clickHandler(event)"/>
- </mx:FormItem>
- <mx:FormItem>
- <s:Group>
- <s:Label id="responseText"/>
- </s:Group>
- </mx:FormItem>
- </mx:Form>
- </s:HGroup>
+ <mx:Form>
+ <mx:FormHeading id="formHead" label="Welcome to Ticket Grabber!"/>
+ <mx:FormItem label="Name:">
+ <s:TextInput id="nameTxt" widthInChars="20"/>
+ </mx:FormItem>
+ <mx:FormItem label="Address:">
+ <s:TextArea widthInChars="20" heightInLines="2"/>
+ </mx:FormItem>
+ <mx:FormItem label="Phone:">
+ <s:TextInput id="phoneTxt" widthInChars="20"/>
+ </mx:FormItem>
+ <mx:FormItem label="Select # of tickets:">
+ <s:NumericStepper id="numStepper" width="55"
+ value="0" snapInterval="2"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Button label="Buy Now!" click="clickHandler(event)"/>
+ </mx:FormItem>
+ <mx:FormItem>
+ <s:Group>
+ <s:Label id="responseText"/>
+ </s:Group>
+ </mx:FormItem>
+ </mx:Form>
- </s:Panel>
-
+ </s:Panel>
</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
index d176fc8..083a41b 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/OLAPDataGridExample.mxml
@@ -19,9 +19,8 @@
-->
<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"
- creationComplete="creationCompleteHandler();">
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ creationComplete="creationCompleteHandler()">
<fx:Script>
<![CDATA[
@@ -178,12 +177,8 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
<fx:Declarations>
- <mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event);">
+ <mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event)">
<mx:OLAPDimension name="CustomerDim">
<mx:OLAPAttribute name="Customer" dataField="customer"/>
<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
@@ -213,17 +208,15 @@
- <s:Panel title="OLAPDataGrid Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="OLAPDataGrid Control" width="100%" height="100%">
+
<s:layout>
<s:HorizontalLayout horizontalAlign="center"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <mx:OLAPDataGrid id="myOLAPDG" color="0x323232" width="100%" height="100%"/>
+ <mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
index 600aae0..d59b25e 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor1Example.mxml
@@ -53,29 +53,33 @@
</s:LinearGradient>
</fx:Declarations>
- <s:Panel width="100%" height="100%" title="PopUpAnchor Sample" skinClass="skins.TDFPanelSkin">
- <s:HGroup horizontalCenter="0" top="5">
- <s:VGroup top="0">
- <s:Label width="200" height="200" color="0x323232"
- text="The PopUpAnchor control displays a pop-up component in a layout. It has
- no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
- <s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
- <mx:Spacer width="60"/>
- </s:VGroup>
- <s:VGroup>
- <mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
- <s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"
- includeIn="infoOpen" displayPopUp.normal="false"
- displayPopUp.infoOpen="true">
- <s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180"
- dropShadowVisible="true">
- <s:Label horizontalCenter="0" top="20" width="170" height="155" color="0x323232"
- text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
-
- <s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
- </s:BorderContainer>
- </s:PopUpAnchor>
- </s:VGroup>
- </s:HGroup>
+ <s:Panel title="PopUpAnchor Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:VGroup top="0">
+ <s:Label width="200" height="200"
+ text="The PopUpAnchor control displays a pop-up component in a layout. It has
+ no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
+ <s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
+ <mx:Spacer width="60"/>
+ </s:VGroup>
+ <s:VGroup>
+ <mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
+ <s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"
+ includeIn="infoOpen" displayPopUp.normal="false"
+ displayPopUp.infoOpen="true">
+ <s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180"
+ dropShadowVisible="true">
+ <s:Label horizontalCenter="0" top="20" width="170" height="155"
+ text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
+
+ <s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
+ </s:BorderContainer>
+ </s:PopUpAnchor>
+ </s:VGroup>
+
</s:Panel>
</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
index 0bde928..cce939c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopUpAnchor2Example.mxml
@@ -36,45 +36,45 @@
</mx:Transition>
</s:transitions>
- <s:Panel width="100%" height="100%"
- title="PopUpAnchor with Form"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="PopUpAnchor with Form" width="100%" height="100%">
- <s:VGroup horizontalCenter="0" top="20">
- <s:HGroup>
- <mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
- <mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
- <mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
- <mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
- </s:HGroup>
- <s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200"
- backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
- <s:Label width="200" height="200" top="20" left="5"
- text.normal="Welcome to Tour de Flex!"
- text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!"
- text.infoOpen="Check back for more Flex 4 samples weekly!"/>
- </s:BorderContainer>
- <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"
- includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
- <mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
- <mx:FormItem label="From :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="To :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="Subject :">
- <s:TextInput/>
- </mx:FormItem>
- <mx:FormItem label="Message :">
- <s:TextArea width="100%" height="60" maxChars="60"/>
- </mx:FormItem>
- <mx:FormItem direction="horizontal">
- <s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>
- <s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
- </mx:FormItem>
- </mx:Form>
- </s:PopUpAnchor>
- </s:VGroup>
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
+ <mx:LinkButton label="Home" color="0x336699" click="currentState = 'normal'"/>
+ <mx:LinkButton label="About" color="0x336699" click="currentState = 'aboutOpen'"/>
+ <mx:LinkButton label="Information" color="0x336699" click="currentState = 'infoOpen'"/>
+ <mx:LinkButton label="Contact Us" color="0x336699" click="currentState = 'emailOpen'"/>
+ </s:HGroup>
+ <s:BorderContainer id="border1" excludeFrom="emailOpen" width="290" height="200"
+ backgroundColor="0x000000" color="0xFFFFFF" cornerRadius="7">
+ <s:Label width="200" height="200" top="20" left="5"
+ text.normal="Welcome to Tour de Flex!"
+ text.aboutOpen="Tour de Flex is constantly being updated with more cool samples!"
+ text.infoOpen="Check back for more Flex 4 samples weekly!"/>
+ </s:BorderContainer>
+ <s:PopUpAnchor id="emailPopUp" left="0" bottom="0" popUpPosition="below"
+ includeIn="emailOpen" displayPopUp.normal="false" displayPopUp.emailOpen="true">
+ <mx:Form id="form1" backgroundColor="0x000000" color="0xFFFFFF">
+ <mx:FormItem label="From :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="To :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="Subject :">
+ <s:TextInput/>
+ </mx:FormItem>
+ <mx:FormItem label="Message :">
+ <s:TextArea width="100%" height="60" maxChars="60"/>
+ </mx:FormItem>
+ <mx:FormItem direction="horizontal">
+ <s:Button label="Send" click="currentState = 'normal'" color="0x000000"/>
+ <s:Button label="Cancel" click="currentState = 'normal'" color="0x000000"/>
+ </mx:FormItem>
+ </mx:Form>
+ </s:PopUpAnchor>
</s:Panel>
</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
index 79de243..3c6803c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/PopupButtonExample.mxml
@@ -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[
@@ -55,13 +54,7 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="PopUpButton Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="PopUpButton Control" width="100%" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
@@ -69,13 +62,13 @@
paddingTop="10" paddingBottom="10"/>
</s:layout>
- <s:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Button label contains the name of the last selected menu item." />
- <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu();" width="140" color="0x323232" click="{Alert.show('Action: ' + popB.label);}" />
+ <mx:PopUpButton id="popB" label="Edit" creationComplete="initMenu()" width="140" click="{Alert.show('Action: ' + popB.label);}" />
<mx:Spacer height="65" />
- <s:TextInput id="popTypeB" color="0x323232" text="...waiting" />
+ <s:TextInput id="popTypeB" text="...waiting" />
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
index 76318e7..deccfaa 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ProgressBarExample.mxml
@@ -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[
@@ -44,27 +43,19 @@
}
]]>
</fx:Script>
-
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
- <s:Panel title="ProgressBar Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
+ <s:Panel title="ProgressBar Control" 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:Label width="100%" color="0x323232"
+ <s:Label width="100%"
text="Click the button to increment the progress bar." />
- <s:Button id="Speed" label="Run" click="runit();" color="0x323232"/>
+ <s:Button id="Speed" label="Run" click="runit()"/>
<mx:ProgressBar id="bar" labelPlacement="bottom" minimum="0" visible="true" maximum="100"
- color="0x323232" label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
+ label="CurrentProgress 0%" direction="right" mode="manual" width="100%"/>
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
index dc049db..2e1022a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RadioButtonExample.mxml
@@ -54,13 +54,13 @@
</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="RadioButton Sample"
- width="100%" height="100%"
- skinClass="skins.TDFPanelSkin">
+ <s:Panel title="RadioButton Sample" width="100%" height="100%">
- <s:HGroup horizontalCenter="0" top="10">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
<s:VGroup>
<s:Label text="1) The sky is blue:"/>
<s:RadioButton id="trueRadioBtn" label="True" groupName="group1"/>
@@ -84,8 +84,8 @@
</s:VGroup>
</s:HGroup>
- <s:Label bottom="20" left="5" width="100%" verticalAlign="justify" color="#323232"
- text="The RadioButton control is a single choice in a set of mutually
+ <s:Label width="100%" verticalAlign="justify"
+ text="The RadioButton control is a single choice in a set of mutually
exclusive choices. A RadioButton group is composed of two or more RadioButton controls with
the same group name. Only one member of the group can be selected at any given time." />
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
index 6af67cc..a29337f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
@@ -20,7 +20,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"
- preinitialize="init();">
+ preinitialize="init()">
<!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ -->
@@ -59,17 +59,12 @@
TextFlow.defaultConfiguration = cfg;
}
</fx:Script>
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
+
+ <s:Panel title="RichEditableText Sample" width="100%" height="100%">
- s|VGroup s|Label {
- fontWeight: "bold";
- }
- </fx:Style>
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="RichEditableText Sample">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
<s:HGroup>
@@ -83,7 +78,7 @@
<s:HGroup>
<s:Label text="Editable text:"/>
<s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10"
- change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!">
+ change="richEdTxt_changeHandler(event)" backgroundColor="0xCCCCCC" text="Hello world!">
</s:RichEditableText>
</s:HGroup>
<s:HGroup>
@@ -92,7 +87,7 @@
</s:HGroup>
</s:VGroup>
- <s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+ <s:Label width="266" height="180" right="10" top="38" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements
the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
index 2e3dcf8..9deee58 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SWFLoaderExample.mxml
@@ -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"
creationComplete="init()">
<fx:Script>
@@ -34,21 +33,13 @@
]]>
</fx:Script>
- <s:layout>
- <s:HorizontalLayout horizontalAlign="center" />
- </s:layout>
-
- <s:Panel title="SWFLoader Control" color="0x000000"
- borderAlpha="0.15"
- width="600">
-
+ <s:Panel title="SWFLoader Control" 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:Label id="txt" color="0x323232" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
+ <s:Label id="txt" fontWeight="bold" text="Flash content embedded at compile time | 10 gumballs left" />
<mx:SWFLoader id="swfObj" source="@Embed('assets/swf_sample.swf')" />
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
index 979187f..aed6329 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleHelpFormExample.mxml
@@ -19,26 +19,33 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
-
- <s:Form horizontalCenter="0">
- <s:FormItem label="Enter some text">
- <s:TextInput/>
- <s:helpContent>
- <s:Label text="I've fallen and I can't get up!"/>
- </s:helpContent>
- </s:FormItem>
- <s:FormItem label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- <s:helpContent>
- <s:Label text="What does it mean?"/>
- <s:Button label="?" width="30" x="120"/>
- </s:helpContent>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit!"/>
- </s:FormItem>
- </s:Form>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+ <s:Panel title="Form Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem label="Enter some text">
+ <s:TextInput/>
+ <s:helpContent>
+ <s:Label text="I've fallen and I can't get up!"/>
+ </s:helpContent>
+ </s:FormItem>
+ <s:FormItem label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ <s:helpContent>
+ <s:Label text="What does it mean?"/>
+ <s:Button label="?" width="30" x="120"/>
+ </s:helpContent>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
index eeb27f2..cb48de8 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSequenceFormExample.mxml
@@ -19,19 +19,26 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
-
- <s:Form horizontalCenter="0">
- <s:FormItem sequenceLabel="1." label="Enter some text">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem sequenceLabel="2." label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="Form Sequence Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem sequenceLabel="1." label="Enter some text">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem sequenceLabel="2." label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
index 4d5887c..fd703ed 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleSimpleFormExample.mxml
@@ -19,20 +19,26 @@
-->
<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"
- backgroundColor="haloSilver" fontSize="14">
-
- <s:Form horizontalCenter="0">
- <s:FormItem label="Enter some text">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem label="Check a box">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem>
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+ <s:Panel title="Form Simple Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form>
+ <s:FormItem label="Enter some text">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem label="Check a box">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem>
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
index 0203cf9..e9c2f7d 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SampleStackedFormExample.mxml
@@ -19,20 +19,27 @@
-->
<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" backgroundColor="haloSilver" fontSize="14">
-
- <s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
- <s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
- <s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:TextInput/>
- </s:FormItem>
- <s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:CheckBox label="option 1"/>
- <s:CheckBox label="option 2"/>
- </s:FormItem>
- <s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
- <s:Button label="Submit it!"/>
- </s:FormItem>
- </s:Form>
-
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="Form Stacked Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+
+ <s:Form skinClass="spark.skins.spark.StackedFormSkin" horizontalCenter="0">
+ <s:FormHeading label="Do some data entry" skinClass="spark.skins.spark.StackedFormHeadingSkin"/>
+ <s:FormItem label="Enter some text" skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:TextInput/>
+ </s:FormItem>
+ <s:FormItem label="Check a box" skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:CheckBox label="option 1"/>
+ <s:CheckBox label="option 2"/>
+ </s:FormItem>
+ <s:FormItem skinClass="spark.skins.spark.StackedFormItemSkin">
+ <s:Button label="Submit it!"/>
+ </s:FormItem>
+ </s:Form>
+
+ </s:Panel>
</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
index bed0582..f68b237 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ScrollBarExample.mxml
@@ -23,13 +23,12 @@
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="ScrollBar Sample">
+ <s:Panel title="ScrollBar Sample" width="100%" height="100%">
<s:layout>
- <s:HorizontalLayout paddingLeft="80" paddingTop="15"/>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
</s:layout>
+
<mx:Box borderStyle="solid">
<s:HGroup>
<s:DataGroup id="vertView" left="10" top="20"
@@ -75,7 +74,7 @@
<s:HScrollBar viewport="{horizView}" width ="{horizView.width}"/>
</mx:Box>
- <s:Label paddingLeft="15" width="199" verticalAlign="justify" color="0x323232"
+ <s:Label paddingLeft="15" width="199" verticalAlign="justify"
text="You can add scrollbars to any component to give scrolling capability. This sample shows
how you can use both a vertical and horizontal ScrollBar. Also see the Scroller sample for more information."/>
</s:Panel>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
index 05eeaf3..003776f 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller1Example.mxml
@@ -22,9 +22,12 @@
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel width="100%" height="100%"
- skinClass="skins.MyPanelSkin"
- title="Scroller Sample">
+ <s:Panel title="Scroller Sample" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
<s:VGroup horizontalCenter="0">
<s:HGroup>
<s:Label text="Min Viewport Inset:"/>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
index c6768bc..1ae35dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/Scroller2Example.mxml
@@ -41,43 +41,43 @@
<!-- you want to mark the children of the viewport as focusable so you're able to tab to them,
but if you don't want the container itself to be focusable then you must turn tabEnabled off on it -->
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="Scrollers and Tabbing">
+ <s:Panel title="Scrollers and Tabbing" width="100%" height="100%">
+
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
<!-- The fields are tab-able within the VGroup container -->
- <s:HGroup horizontalCenter="0" top="10">
- <s:VGroup left="0" horizontalAlign="center" width="20%">
- <s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
- <s:Label text="Item For Sale"/>
+ <s:VGroup left="0" horizontalAlign="center" width="20%">
+ <s:BitmapImage id="img" width="200" height="200" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ <s:Label text="Item For Sale"/>
+ </s:VGroup>
+ <s:Scroller tabEnabled="true" hasFocusableChildren="true">
+ <s:VGroup>
+ <s:Label text="First Name:"/>
+ <s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Last Name:"/>
+ <s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Email:"/>
+ <s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
</s:VGroup>
- <s:Scroller tabEnabled="true" hasFocusableChildren="true">
- <s:VGroup>
- <s:Label text="First Name:"/>
- <s:TextInput id="firstName" text="firstname" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Last Name:"/>
- <s:TextInput id="lastName" text="lastname" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Email:"/>
- <s:TextInput id="emailAdd" text="email" color="#959494" change="txtChangeHandler(event)"/>
- </s:VGroup>
- </s:Scroller>
-
- <!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
- containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' -->
-
- <s:Scroller hasFocusableChildren="true" tabEnabled="false">
- <s:VGroup width="200" height="200">
- <s:Label text="Enter item name:"/>
- <s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
- <s:Label text="Enter description of your item:"/>
- <s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
- </s:VGroup>
- </s:Scroller>
- <s:Label right="10" width="180" verticalAlign="justify"
- text="If you have items within a Scroller that need to be tabbed to, you can
+ </s:Scroller>
+
+ <!-- Note: The scroller container automatically sets the clipAndEnableScrolling to false for
+ containers within it. See 'Controlling Viewport' sample under 'Coding Techniques' -->
+
+ <s:Scroller hasFocusableChildren="true" tabEnabled="false">
+ <s:VGroup width="200" height="200">
+ <s:Label text="Enter item name:"/>
+ <s:TextInput id="itemNameTxt" text="image-name" width="100%" color="#959494" change="txtChangeHandler(event)"/>
+ <s:Label text="Enter description of your item:"/>
+ <s:TextArea id="itemDescTxt" text="title" color="#959494" change="txtChangeHandler(event)"/>
+ </s:VGroup>
+ </s:Scroller>
+ <s:Label right="10" width="180" verticalAlign="justify"
+ text="If you have items within a Scroller that need to be tabbed to, you can
need to set hasFocusableChildren to true. If you do not want the container itself to be tab enabled,
then you must set tabEnabled to false, such as shown here."/>
- </s:HGroup>
</s:Panel>
</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
index 204daab..b36ff70 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SimpleTitleWindowExample.mxml
@@ -25,9 +25,9 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Title Window"
- close="PopUpManager.removePopUp(this);" >
+ close="PopUpManager.removePopUp(this)" >
- <fx:Script>
+ <fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
@@ -55,8 +55,8 @@
</s:HGroup>
<s:HGroup>
- <s:Button label="OK" click="returnName();"/>
- <s:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
+ <s:Button label="OK" click="returnName()"/>
+ <s:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
</s:HGroup>
</s:TitleWindow>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
index da1407e..1e699dc 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SliderExample.mxml
@@ -21,33 +21,14 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel width="100%" height="100%"
- skinClass="skins.TDFPanelSkin"
- title="HSlider/VSlider Sample">
+ <s:Panel title="HSlider/VSlider Sample" width="100%" height="100%">
- <s:VGroup left="10" top="10">
- <s:Label text="Height:"/>
- <s:VSlider id="slider3"
- minimum="50"
- maximum="180"
- value="160"
- liveDragging="true"/>
- </s:VGroup>
- <s:Group left="40" top="25">
- <s:Ellipse id="rect"
- width="{slider2.value}"
- height="{slider3.value}">
- <s:fill>
- <s:LinearGradient rotation="45">
- <s:GradientEntry color="0x5008f3" />
- <s:GradientEntry color="0x7a2a84" />
- <s:GradientEntry color="0xfe08a4" />
- </s:LinearGradient>
- </s:fill>
- </s:Ellipse>
- </s:Group>
-
- <s:HGroup right="315" top="10" verticalAlign="middle">
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+
+ <s:HGroup>
<s:Label text="Width:"/>
<s:HSlider id="slider2"
minimum="50"
@@ -57,7 +38,32 @@
</s:HGroup>
- <s:Label right="40" top="10" width="200" verticalAlign="justify" color="0x323232"
+ <s:HGroup>
+ <s:VGroup>
+ <s:Label text="Height:"/>
+ <s:VSlider id="slider3"
+ minimum="50"
+ maximum="180"
+ value="160"
+ liveDragging="true"/>
+ </s:VGroup>
+
+ <s:Group width="200">
+ <s:Ellipse id="rect"
+ width="{slider2.value}"
+ height="{slider3.value}">
+ <s:fill>
+ <s:LinearGradient rotation="45">
+ <s:GradientEntry color="0x5008f3" />
+ <s:GradientEntry color="0x7a2a84" />
+ <s:GradientEntry color="0xfe08a4" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Ellipse>
+ </s:Group>
+ </s:HGroup>
+
+ <s:Label verticalAlign="justify"
text="The slider controls can be used to select a value by moving a slider thumb between
the end points of the slider track. The current value of the slider is determined by the relative location
of the thumb between the end points of the slider. The slider end points correspond to the slider’s minimum and maximum values."/>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
index 2548ce9..7cb7f11 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/SpinnerExample.mxml
@@ -21,30 +21,32 @@
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
- <s:Panel title="Spinner Control Example" height="100%" width="100%"
- skinClass="skins.TDFPanelSkin">
- <s:VGroup width="100%" height="100%" left="10" top="10">
- <s:HGroup>
- <mx:Text text="Use the arrows to change tabs:"/>
- <s:Spinner id="mySpinner" maximum="3"/>
- </s:HGroup>
-
- <!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
- <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
- <mx:HBox label="Tab 1">
- <mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
- </mx:HBox>
- <mx:HBox label="Tab 2">
- <mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
- </mx:HBox>
- <mx:HBox label="Tab 3">
- <mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
- </mx:HBox>
- <mx:HBox label="Tab 4">
- <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
- </mx:HBox>
- </mx:TabNavigator>
- </s:VGroup>
+ <s:Panel title="Spinner Control Example" width="100%" height="100%">
+
+ <s:layout>
+ <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup>
+ <mx:Text text="Use the arrows to change tabs:"/>
+ <s:Spinner id="mySpinner" maximum="3"/>
+ </s:HGroup>
+
+ <!-- Two way binding is being used so that changes to the tab navigator remain synced with Spinner value -->
+ <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}">
+ <mx:HBox label="Tab 1">
+ <mx:Text text="Text on Tab 1 " fontSize="14" color="red"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 2">
+ <mx:Text text="Text on Tab 2" fontSize="16"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 3">
+ <mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
+ </mx:HBox>
+ <mx:HBox label="Tab 4">
+ <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
+ </mx:HBox>
+ </mx:TabNavigator>
</s:Panel>
</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
index 06e629a..59410df 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TabNavigatorExample.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
index c8892bd..a0d9827 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextAreaExample.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
index c5f8b5a..1cb0137 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextInputExample.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
index 77c1737..9cf53f2 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout1Example.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
index a5ccfd4..c799992 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout2Example.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
index 09f544b..cebcc9a 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout3Example.mxml
@@ -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."/>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
index 50af0d4..48a8db1 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TextLayout4Example.mxml
@@ -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
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
index 0877ab6..af5700c 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/TitleWindowExample.mxml
@@ -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>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
index 721d16b..d001231 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButton2Example.mxml
@@ -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 the up state."/>
</s:Panel>
</s:HGroup>
- </s:Group>-->
+ </s:Group>
+ -->
</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
index 422a185..6405900 100644
--- a/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ToggleButtonBarExample.mxml
@@ -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>