<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:toolbar="ardisia.components.toolbar.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Menu;
import ardisia.themes.london.skins.ColorTransformButtonSkin;
import ardisia.themes.london.skins.TabBarSimpleSkin;
import ardisia.themes.stockholm.skins.ColorTransformButtonSkin;
[Bindable]private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000},
{Region:"NorthEast", Territory:"New York",
Territory_Rep:"Jose Rodriguez", Actual:26992, Estimate:30000},
{Region:"NorthEast", Territory:"New York",
Territory_Rep:"Lisa Sims", Actual:47885, Estimate:50000},
{Region:"NorthEast", Territory:"Massachusetts",
Territory_Rep:"Kelly O'Connell", Actual:172911, Estimate:20000},
{Region:"NorthEast", Territory:"Pennsylvania",
Territory_Rep:"John Barnes", Actual:32105, Estimate:30000},
{Region:"MidWest", Territory:"Illinois",
Territory_Rep:"Seth Brown", Actual:42511, Estimate:40000}
]);
public function creationComplete():void
{
}
protected function menuHandler(event:MouseEvent):void
{
var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
myMenu.variableRowHeight = true;
myMenu.minWidth = 190;
myMenu.labelField="@label";
myMenu.show(event.stageX, event.stageY);
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XMLList id="myMenuData">
<root>
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem A-1" enabled="false"/>
<menuitem label="SubMenuItem A-2"/>
</menuitem>
<menuitem label="MenuItem B" type="check" toggled="true"/>
<menuitem label="MenuItem C" type="check" toggled="false"/>
<menuitem type="separator"/>
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem D-1" type="radio"
groupName="one"/>
<menuitem label="SubMenuItem D-2" type="radio"
groupName="one" toggled="true"/>
<menuitem label="SubMenuItem D-3" type="radio"
groupName="one"/>
</menuitem>
</root>
</fx:XMLList>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
top="0" right="0" bottom="0" left="0"
top.london="0" right.london="4" bottom.london="4" left.london="4"
westRegionTitle="Theme Demos"
description="The Stockholm and London themes are high quality set of styles and skins for existing Spark and Halo UI controls. Both themes are included with the Ardisia Component Set Library."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelect"
selectedColor="#FFFFFF"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Theme Examples</data:tabLabel>
<data:exampleDescription>Change the theme using the dropdown in the upper-right to see Flex SDK UI controls for each theme.</data:exampleDescription>
<data:primaryContent>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="{backgroundColorSelect.selectedColor}" />
</s:fill>
</s:Rect>
<scroller:Scroller width="100%" height="100%"
mouseWheelStepSize="120">
<s:Group>
<s:VGroup top="20" right="20" bottom="20" left="20"
horizontalAlign="justify"
gap="20">
<s:Form>
<s:layout>
<s:FormLayout gap="13"/>
</s:layout>
<s:FormHeading label="Spark"/>
<separators:HSeparator width="100%"
paddingTop="-5" paddingBottom="5"/>
<s:FormHeading label="Buttons"/>
<s:FormItem label="Default:">
<s:Button label="Find Replace with:"/>
</s:FormItem>
<s:FormItem label="Emphasized:">
<s:Button label="Click Me"
styleName="emphasized"/>
</s:FormItem>
<s:FormItem label="Toggle:">
<s:ToggleButton label="Click Me"/>
</s:FormItem>
<s:FormItem visible="true" visible.spark="false"
includeInLayout="true" includeInLayout.spark="false"
label="Color Transform:">
<s:Button label="Click Me"
icon="@Embed(source='icons/folder-open.png')"
skinClass="ardisia.themes.stockholm.skins.ColorTransformButtonSkin"
skinClass.london="ardisia.themes.london.skins.ColorTransformButtonSkin" />
</s:FormItem>
<s:FormItem label="ButtonBar:">
<s:ButtonBar>
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Button A</fx:String>
<fx:String>Button BBB BBB</fx:String>
<fx:String>Button C C C</fx:String>
<fx:String>Button DD DD DD</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:ButtonBar>
</s:FormItem>
<s:FormItem label="TabBar:">
<s:VGroup gap="-1"
horizontalAlign="contentJustify">
<s:TabBar depth="2">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Tab A</fx:String>
<fx:String>Tab BBB BBB</fx:String>
<fx:String>Tab CC CC</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:TabBar>
<s:BorderContainer height="50" backgroundColor="#FFFFFF" depth="1"/>
</s:VGroup>
</s:FormItem>
<s:FormItem visible="false" visible.london="true"
includeInLayout="false" includeInLayout.london="true"
label="Simple TabBar:">
<s:VGroup gap="-1"
horizontalAlign="contentJustify">
<s:TabBar skinClass="ardisia.themes.london.skins.TabBarSimpleSkin"
depth="2">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Tab A AA</fx:String>
<fx:String>Tab BBB BBB</fx:String>
<fx:String>Tab CC CC</fx:String>
<fx:String>Tab D</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:TabBar>
<s:BorderContainer height="50" backgroundColor="#FFFFFF" depth="1"/>
</s:VGroup>
</s:FormItem>
<s:FormHeading label="Toolbar, Toolbar Buttons"/>
<s:FormItem label="Toolbar:">
<toolbar:Toolbar width="300" height="39" />
</s:FormItem>
<s:FormItem label="Toolbar Buttons:">
<toolbar:Toolbar width="300">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="justify"/>
</toolbar:layout>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarButton label="Close"/>
<toolbar:ToolbarButton label="Open"/>
</toolbar:Toolbar>
</s:FormItem>
<s:FormItem label="Toolbar Color Transform Buttons:">
<toolbar:Toolbar width="300">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="justify"/>
</toolbar:layout>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/folder-open.png')"
label="Click Me"/>
</toolbar:Toolbar>
</s:FormItem>
<s:FormItem label="Toolbar Toggle Buttons:">
<toolbar:Toolbar width="300">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="justify"/>
</toolbar:layout>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/folder-open.png')"
label="Click Me"/>
</toolbar:Toolbar>
</s:FormItem>
<s:FormItem label="Toolbar TabBar:">
<s:VGroup width="300"
horizontalAlign="justify"
gap="-1">
<toolbar:ToolbarTabBar depth="2">
<s:ArrayCollection>
<fx:String>Tab A</fx:String>
<fx:String>Tab B</fx:String>
<fx:String>Tab C</fx:String>
<fx:String>Tab D</fx:String>
</s:ArrayCollection>
</toolbar:ToolbarTabBar>
<toolbar:Toolbar height="39"
depth="1"/>
</s:VGroup>
</s:FormItem>
<s:FormHeading label="Form Controls"/>
<s:FormItem label="Checkbox:">
<s:CheckBox label="Label"/>
</s:FormItem>
<s:FormItem label="RadioButton:">
<s:VGroup>
<s:RadioButton label="Radio A" groupName="radioGroup"/>
<s:RadioButton label="Radio B" groupName="radioGroup"/>
<s:RadioButton label="Radio C" groupName="radioGroup"/>
</s:VGroup>
</s:FormItem>
<s:FormItem label="TextInput:">
<s:TextInput />
</s:FormItem>
<s:FormItem label="TextArea:">
<s:TextArea width="200" height="100"/>
</s:FormItem>
<s:FormItem label="HSlider:">
<s:HSlider />
</s:FormItem>
<s:FormItem label="VSlider:">
<s:VSlider />
</s:FormItem>
<s:FormItem label="NumericStepper:">
<s:NumericStepper />
</s:FormItem>
<s:FormItem label="Spinner:">
<s:Spinner />
</s:FormItem>
<s:FormHeading label="Lists"/>
<s:FormItem label="List:">
<s:List borderVisible="true">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
</s:FormItem>
<s:FormItem label="DropDownList:">
<s:DropDownList requireSelection="true">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="ComboBox:">
<s:ComboBox cornerRadius="10">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:ComboBox>
</s:FormItem>
<s:FormItem label="DataGrid:">
<s:DataGrid id="dataGrid"
width="400" height="200"
borderVisible="true"
requestedRowCount="5" verticalCenter="0" horizontalCenter="0">
<s:ArrayCollection>
<s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
<s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
<s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
<s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
<s:DataItem key="1005" name="File" price="150.05" call="true"/>
<s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
<s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
<s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
</s:ArrayCollection>
</s:DataGrid>
</s:FormItem>
<s:FormHeading label="Containers"/>
<s:FormItem label="Panel:">
<s:Panel width="400" height="200"
title="Testing Title Bar Here">
<s:controlBarContent>
<s:Button label="test" right="0"/>
<s:Button label="test2" left="0"/>
</s:controlBarContent>
<s:VGroup top="-1" right="-1" bottom="0" left="-1"
gap="-1"
horizontalAlign="contentJustify">
<s:TabBar depth="2">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB Basd asd as ddsd B B</fx:String>
<fx:String>CCCC CC C</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:TabBar>
<s:Group />
</s:VGroup>
</s:Panel>
</s:FormItem>
<s:FormItem label="Embedded Scroller:">
<s:Panel width="400" height="200"
title="Testing Title Bar Here">
<s:controlBarContent>
<s:Button label="test" right="0"/>
<s:Button label="test2" left="0"/>
</s:controlBarContent>
<s:Scroller top="0" right="0" bottom="0" left="0">
<s:Group>
<s:Image width="15000" height="500" />
</s:Group>
</s:Scroller>
</s:Panel>
</s:FormItem>
<s:FormItem label="TitleWindow:">
<s:TitleWindow id="titleWindow"
width="400" height="300"
title="London Theme">
<s:controlBarContent>
<s:Button label="London" right="0"/>
</s:controlBarContent>
<s:Scroller top="20" left="20" right="20" depth="20">
<s:VGroup>
<s:TabBar width="100%">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB Basd asd as ddsd B B</fx:String>
<fx:String>CCCC CC C</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:TabBar>
<s:HGroup>
<s:List>
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AAAA AA A</fx:String>
<fx:String>BBBB BB B</fx:String>
<fx:String>CCCC CC C</fx:String>
<fx:String>DDDD DD D</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
<s:DataGrid borderVisible="true"
width="210" height="130"
requestedRowCount="5">
<s:ArrayCollection>
<s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
<s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
<s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
<s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
<s:DataItem key="1005" name="File" price="150.05" call="true"/>
<s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
<s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
<s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
</s:ArrayCollection>
</s:DataGrid>
</s:HGroup>
</s:VGroup>
</s:Scroller>
</s:TitleWindow>
</s:FormItem>
<s:FormHeading label="Halo"
fontSize="14"/>
<separators:HSeparator width="100%"
paddingTop="-5" paddingBottom="5"/>
<s:FormItem label="MX ColorPicker:">
<mx:ColorPicker />
</s:FormItem>
<s:FormItem label="MX Scrollbars">
<mx:Canvas width="200" height="200">
<mx:UIComponent width="5000" height="500" />
</mx:Canvas>
</s:FormItem>
<s:FormItem label="MX Tree:">
<mx:Tree width="200"
labelField="@label"
showRoot="false">
<mx:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management "/>
<node label="Personal"/>
<node label="Marketing"/>
<node label="Product Management "/>
<node label="Personal"/>
<node label="Marketing"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
<node label="Spam"/>
<node label="Sent"/>
</node>
</fx:XMLList>
</s:XMLListCollection>
</mx:dataProvider>
</mx:Tree>
</s:FormItem>
<s:FormItem label="MX AdvancedDataGrid:">
<mx:AdvancedDataGrid id="myADG"
width="100%" height="260"
color="#323232"
dataProvider="{dpFlat}">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region" />
<mx:AdvancedDataGridColumn dataField="Territory" />
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumnGroup headerText="Revenues">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</s:FormItem>
<s:FormItem label="MX DateChooser:">
<mx:DateChooser width="200" height="200"/>
</s:FormItem>
<s:FormItem label="MX DateField:">
<mx:DateField editable="true"
width="100"/>
</s:FormItem>
<s:FormItem label="MX ToolTip:">
<mx:ToolTip text="Flex Is Fun!"/>
</s:FormItem>
</s:Form>
<mx:Spacer height="100" />
</s:VGroup>
</s:Group>
</scroller:Scroller>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>