http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/Contact.as ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/Contact.as b/tourdeflexmodules/src/spark/containers/Contact.as new file mode 100644 index 0000000..838a300 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/Contact.as @@ -0,0 +1,34 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + [Bindable] + public class Contact + { + public var name:String; + public var address:String; + public var city:String; + public var state:String; + public var zip:String; + + public function Contact() + { + } + } +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/GroupExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/GroupExample.mxml b/tourdeflexmodules/src/spark/containers/GroupExample.mxml new file mode 100644 index 0000000..abe90d5 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/GroupExample.mxml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/halo"> + + <s:layout> + <s:BasicLayout id="bl"/> + </s:layout> + + <s:Panel id="mainPanel" title="Group Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:HGroup> + <s:Group> + <!-- Default layout is basic, therefore constraints are used for placement --> + <s:Label text="Apples" top="0"/> + <s:Label text="Oranges" top="13"/> + <s:Label text="Bananas" top="26"/> + </s:Group> + + <s:Group id="horizontalPanel"> + <s:layout> + <s:HorizontalLayout/> + </s:layout> + <s:Label text="Apples" /> + <s:Label text="Oranges" /> + <s:Label text="Bananas" /> + </s:Group> + + <s:Group id="vericalPanel"> + <s:layout> + <s:VerticalLayout/> + </s:layout> + <s:Label text="Apples" /> + <s:Label text="Oranges" /> + <s:Label text="Bananas" /> + </s:Group> + </s:HGroup> + + <s:Label verticalAlign="justify" + left="3" bottom="30" width="100%" + text="The Group class defines a container that includes a content area for its children. +The Group has a basic layout by default, which means it lays out elements within the group by +their individual constraints. You can specify a different layout to use within the group such +as shown in the inner groups (basic, horizontal and vertical layout groups)."/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/PanelExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/PanelExample.mxml b/tourdeflexmodules/src/spark/containers/PanelExample.mxml new file mode 100644 index 0000000..f712fc0 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/PanelExample.mxml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:HGroup> + <s:Panel title="Basic Layout Panel"> + <!-- Default layout is basic, therefore constraints are used for placement --> + <s:Label text="Apples" top="0"/> + <s:Label text="Oranges" top="13"/> + <s:Label text="Bananas" top="26"/> + </s:Panel> + + <s:Panel id="horizontalPanel" title="Horizontal Layout Panel"> + <s:layout> + <s:HorizontalLayout/> + </s:layout> + <s:Label text="Apples" /> + <s:Label text="Oranges" /> + <s:Label text="Bananas" /> + </s:Panel> + + <s:Panel id="vericalPanel" title="Vertical Layout Panel"> + <s:layout> + <s:VerticalLayout/> + </s:layout> + <s:Label text="Apples" /> + <s:Label text="Oranges" /> + <s:Label text="Bananas" /> + </s:Panel> + </s:HGroup> + + <s:Label verticalAlign="justify" + left="5" bottom="15" width="95%" + text="The Panel class defines a container that includes a title bar, a caption, a border, and a content area for its children. +The Panel has a basic layout by default, which means it lays out elements within the panel by their individual constraints. You can specify a different layout to use within the panel such +as shown in the inner panels (basic, horizontal and vertical layout) panels." /> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml b/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml new file mode 100644 index 0000000..8f9ae0d --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/SampleHGroup.mxml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + private function applyProperties():void + { + this.mainHGroup.paddingTop = this.padTop.value; + this.mainHGroup.paddingLeft = this.padLeft.value; + this.mainHGroup.paddingRight = this.padRight.value; + this.mainHGroup.paddingBottom = this.padBottom.value; + this.mainHGroup.gap = this.gap.value; + } + ]]> + </fx:Script> + + <s:Panel title="HGroup" width="100%" height="100%"> + + <s:HGroup left="300" top="25" id="mainHGroup"> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xd54f4f"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0x2f977d"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xfffca2"/> + </s:fill> + </s:Rect> + </s:HGroup> + + <s:VGroup top="10" left="15"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Gap:"/> + <s:NumericStepper id="gap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Top:"/> + <s:NumericStepper id="padTop" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Left:"/> + <s:NumericStepper id="padLeft" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Right:"/> + <s:NumericStepper id="padRight" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Bottom:"/> + <s:NumericStepper id="padBottom" maximum="400"/> + </s:HGroup> + + <s:Button label="Apply Properties" click="this.applyProperties()"/> + <s:Label width="75%" horizontalCenter="0" + text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use + the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/> + </s:VGroup> + + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml b/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml new file mode 100644 index 0000000..5831423 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/SampleVGroup.mxml @@ -0,0 +1,92 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + private function applyProperties():void + { + this.mainVGroup.paddingTop = this.padTop.value; + this.mainVGroup.paddingLeft = this.padLeft.value; + this.mainVGroup.paddingRight = this.padRight.value; + this.mainVGroup.paddingBottom = this.padBottom.value; + this.mainVGroup.gap = this.gap.value; + } + ]]> + </fx:Script> + + <s:Panel title="VGroup Sample" width="100%" height="100%"> + + <s:HGroup width="100%" height="100%" top="10" left="10"> + <s:VGroup top="10" left="10" width="172"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Gap:"/> + <s:NumericStepper id="gap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Top:"/> + <s:NumericStepper id="padTop" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Left:"/> + <s:NumericStepper id="padLeft" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Right:"/> + <s:NumericStepper id="padRight" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Padding Bottom:"/> + <s:NumericStepper id="padBottom" maximum="400"/> + </s:HGroup> + + <s:Button label="Apply Properties" click="this.applyProperties()"/> + </s:VGroup> + <s:VGroup left="300" top="10" id="mainVGroup"> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xd54f4f"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0x2f977d"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xfffca2"/> + </s:fill> + </s:Rect> + </s:VGroup> + <mx:Spacer width="10"/> + <s:Label width="40%" horizontalCenter="0" + text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/> + + </s:HGroup> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml new file mode 100644 index 0000000..06512e3 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/SampleVerticalHorizontalAlign.mxml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- http://evtimmy.com/2010/01/verticalalign-for-vgroup-and-horizontalalign-for-hgroup/ --> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel id="mainPanel" title="Panel Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:HGroup verticalAlign="middle" height="100%" > + <s:Label text="VGroup" rotation="-90" /> + <s:BorderContainer minWidth="0" minHeight="0"> + <s:VGroup height="{heightSlider.value}" + verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"> + <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/> + <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/> + </s:VGroup> + </s:BorderContainer> + + <s:Label text="VGroup in Scroller" rotation="-90" /> + <s:BorderContainer minWidth="0" minHeight="0"> + <s:Scroller height="{heightSlider.value}"> + <s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"> + <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/> + <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/> + </s:VGroup> + </s:Scroller> + </s:BorderContainer> + + <s:Label text="List" rotation="-90" /> + + <s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}"> + <s:layout> + <s:VerticalLayout requestedMinRowCount="0" + verticalAlign="{verticalAlignChoice.selectedItem}" + gap="0"/> + </s:layout> + <s:ArrayCollection> + <fx:String>Lorem ipsum dolor sit amet, </fx:String> + <fx:String>consectetur adipiscing elit.</fx:String> + </s:ArrayCollection> + </s:List> + </s:HGroup> + + <s:HGroup paddingTop="10" paddingLeft="10"> + <s:HGroup> + <s:Label text="VerticalAlign:"/> + <s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000"> + <s:dataProvider> + <s:ArrayCollection source="{'top bottom middle'.split(' ')}"/> + </s:dataProvider> + </s:DropDownList> + </s:HGroup> + <s:HGroup> + <s:Label text="Height:"/> + <s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/> + </s:HGroup> + </s:HGroup> + + <s:Label text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and + HGroup accordingly."/> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml b/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml new file mode 100644 index 0000000..1fc5aec --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/SkinnableDataContainerExample.mxml @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="SkinnableDataContainer" width="100%" height="100%" > + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup> + <s:Label text="Famous Astronauts" fontWeight="bold" fontSize="14"/> + <s:SkinnableDataContainer horizontalCenter="-66" verticalCenter="0" width="301"> + <s:layout> + <s:VerticalLayout/> + </s:layout> + <s:itemRenderer> + <fx:Component> + <s:ItemRenderer> + <s:VGroup horizontalCenter="0" verticalCenter="0"> + <s:HGroup verticalAlign="middle"> + <s:Label text="{data.firstName}"/> + <s:Label text="{data.lastName}"/> + <s:Label text="{data.phoneNumber}"/> + <mx:LinkButton label="{data.college}" color="0x3380DD" click="navigateToURL(new URLRequest(data.url), '_blank')" + textDecoration="underline" fontWeight="normal" icon="@Embed('assets/arrow_icon_sm.png')" /> + </s:HGroup> + </s:VGroup> + </s:ItemRenderer> + </fx:Component> + </s:itemRenderer> + + <s:ArrayCollection> + <fx:Object firstName="John" lastName="Glenn" phoneNumber="888-555-1111" college="West Point" url="http://www.usma.edu/"/> + <fx:Object firstName="Neil" lastName="Armstrong" phoneNumber="888-555-2222" college="Purdue" url="http://www.purdue.edu/"/> + <fx:Object firstName="Buzz" lastName="Aldrin" phoneNumber="888-555-3333" college="Muskingum" url="http://www.muskingum.edu/"/> + <fx:Object firstName="James" lastName="Lovell" phoneNumber="888-555-4444" college="US Naval Academy" url="http://www.usna.edu/"/> + </s:ArrayCollection> + </s:SkinnableDataContainer> + </s:VGroup> + <s:Label width="200" text="The SkinnableDataContainer is the skinnable version of the DataGroup and +while it can hold visual elements, they are often used only to hold data items as children. Data items can be simple data items +such String and Number objects, and more complicated data items such as Object and XMLNode objects."/> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml b/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml new file mode 100644 index 0000000..782b243 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/TabNavigator1Example.mxml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> + + <fx:Script> + <![CDATA[ + import mx.events.ListEvent; + + [Bindable] + private var contact:Contact = new Contact(); + + protected function submitBtn_clickHandler(event:MouseEvent):void + { + contact.name = nameTxt.text; + contact.address = address.text; + contact.city = city.text; + contact.state = state.text; + contact.zip = zip.text; + trace(contacts.contains(contact)); + + if (!contacts.contains(contact)) + contacts.addItem(contact); + contact = new Contact(); + } + + protected function dg_itemClickHandler(event:ListEvent):void + { + contact = dg.selectedItem as Contact; + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:ArrayCollection id="contacts"/> + </fx:Declarations> + + <s:Panel title="TabBar Sample" width="100%" height="100%"> + <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}"/> + <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23"> + <s:NavigatorContent label="Contact Info" width="100%" height="100%"> + <s:BorderContainer width="100%" height="100%" dropShadowVisible="false"> + <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%"> + <mx:FormItem label="Name:"> + <s:TextInput id="nameTxt" text="{contact.name}"/> + </mx:FormItem> + <mx:FormItem label="Address:"> + <s:TextInput id="address" text="{contact.address}"/> + </mx:FormItem> + <mx:FormItem label="City:"> + <s:TextInput id="city" text="{contact.city}"/> + </mx:FormItem> + <mx:FormItem label="State:"> + <s:TextInput id="state" text="{contact.state}"/> + </mx:FormItem> + <mx:FormItem label="Zip:"> + <s:TextInput id="zip" text="{contact.zip}" maxChars="5"/> + </mx:FormItem> + <mx:FormItem> + <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/> + </mx:FormItem> + </mx:Form> + </s:BorderContainer> + </s:NavigatorContent> + <s:NavigatorContent label="Contact List" width="100%" height="100%" > + <s:BorderContainer width="100%" height="100%" dropShadowVisible="false"> + <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true" + doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)"> + <mx:columns> + <mx:DataGridColumn headerText="Name" dataField="name"/> + <mx:DataGridColumn headerText="Address" dataField="address"/> + <mx:DataGridColumn headerText="City" dataField="city"/> + <mx:DataGridColumn headerText="State" dataField="state"/> + <mx:DataGridColumn headerText="Zip" dataField="zip"/> + </mx:columns> + </mx:DataGrid> + </s:BorderContainer> + + </s:NavigatorContent> + + </mx:ViewStack> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml b/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml new file mode 100644 index 0000000..d6413f6 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/TabNavigator2Example.mxml @@ -0,0 +1,110 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"> + + <fx:Script> + <![CDATA[ + import mx.events.ListEvent; + + [Bindable] + private var contact:Contact = new Contact(); + + protected function submitBtn_clickHandler(event:MouseEvent):void + { + // Note: this sample uses bidirectional data binding, so we do not have to + // explicitly set the contact fields to save them! + if (!contacts.contains(contact)) + contacts.addItem(contact); + contact = new Contact(); + } + + protected function dg_itemClickHandler(event:ListEvent):void + { + contact = dg.selectedItem as Contact; + } + + ]]> + </fx:Script> + + <fx:Declarations> + <s:ArrayCollection id="contacts"/> + </fx:Declarations> + + <s:Panel title="TabBar Sample with Custom Skin and Bidirectional Binding" width="100%" height="100%"> + <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/> + <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23"> + <s:NavigatorContent label="Contact Info" width="100%" height="100%"> + <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" + dropShadowVisible="true"> + <!-- This background fill could also be specified in a custom skin to apply to other containers as well --> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2"/> + <s:GradientEntry color="0xCC0000" alpha=".5" /> + </s:LinearGradient> + </s:backgroundFill> + <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%"> + <mx:FormItem label="Name:"> + <s:TextInput id="nameTxt" text="@{contact.name}"/> + </mx:FormItem> + <mx:FormItem label="Address:"> + <s:TextInput id="address" text="@{contact.address}"/> + </mx:FormItem> + <mx:FormItem label="City:"> + <s:TextInput id="city" text="@{contact.city}"/> + </mx:FormItem> + <mx:FormItem label="State:"> + <s:TextInput id="state" text="@{contact.state}"/> + </mx:FormItem> + <mx:FormItem label="Zip:"> + <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/> + </mx:FormItem> + <mx:FormItem> + <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/> + </mx:FormItem> + </mx:Form> + </s:BorderContainer> + </s:NavigatorContent> + <s:NavigatorContent label="Contact List" width="100%" height="100%" > + <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" + dropShadowVisible="true"> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xCC0000" /> + <s:GradientEntry color="0xE2E2E2" /> + </s:LinearGradient> + </s:backgroundFill> + <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true" + doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)"> + <mx:columns> + <mx:DataGridColumn headerText="Name" dataField="name"/> + <mx:DataGridColumn headerText="Address" dataField="address"/> + <mx:DataGridColumn headerText="City" dataField="city"/> + <mx:DataGridColumn headerText="State" dataField="state"/> + <mx:DataGridColumn headerText="Zip" dataField="zip"/> + </mx:columns> + </mx:DataGrid> + </s:BorderContainer> + </s:NavigatorContent> + </mx:ViewStack> + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml b/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml new file mode 100644 index 0000000..7b4fc45 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/TileGroupExample.mxml @@ -0,0 +1,100 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Declarations> + <fx:Array id="orientArray"> + <fx:String>Rows</fx:String> + <fx:String>Columns</fx:String> + </fx:Array> + </fx:Declarations> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayList; + + private function applyProperties():void + { + this.mainGroup.orientation = this.orientation.selectedItem; + this.mainGroup.horizontalGap = this.hgap.value; + this.mainGroup.verticalGap = this.vgap.value; + this.mainGroup.requestedColumnCount = this.colCount.value; + this.mainGroup.requestedRowCount = this.rowCount.value; + } + ]]> + </fx:Script> + + <s:Panel title="TileGroup Sample" width="100%" height="100%"> + <s:TileGroup left="300" top="10" id="mainGroup"> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xd54f4f"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0x2f977d"/> + </s:fill> + </s:Rect> + <s:Rect width="100" height="75"> + <s:fill> + <s:SolidColor color="0xfffca2"/> + </s:fill> + </s:Rect> + </s:TileGroup> + + <s:VGroup top="10" left="10"> + <s:HGroup verticalAlign="middle"> + <s:Label text="Orientation:"/> + <s:DropDownList id="orientation" dataProvider="{new ArrayList(orientArray)}" prompt="columns"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Horizontal Gap:"/> + <s:NumericStepper id="hgap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Vertical Gap:"/> + <s:NumericStepper id="vgap" maximum="400"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Requested Column Count:"/> + <s:NumericStepper id="colCount"/> + </s:HGroup> + + <s:HGroup verticalAlign="middle"> + <s:Label text="Requested Row Count:"/> + <s:NumericStepper id="rowCount"/> + </s:HGroup> + <s:Button label="Apply Properties" click="this.applyProperties()"/> + <mx:Spacer height="10"/> + <s:Label width="85%" horizontalCenter="0" + text="The TileGroup container is an instance of the Group container that uses the TileLayout class. You can use the properties of the + TileGroup class to modify the characteristics of the TileLayout class."/> + + </s:VGroup> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png b/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/tourdeflexmodules/src/spark/containers/assets/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/personIcon.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/personIcon.png b/tourdeflexmodules/src/spark/containers/personIcon.png new file mode 100644 index 0000000..f9d76c6 Binary files /dev/null and b/tourdeflexmodules/src/spark/containers/personIcon.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml new file mode 100644 index 0000000..b226383 --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarButtonSkin.mxml @@ -0,0 +1,264 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- +The default skin class for Spark TabBar buttons. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> + +<s:SparkSkin + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; + minWidth="21" minHeight="21" alpha.disabledStates="0.5"> + + <!-- host component --> + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.ButtonBarButton")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + + import spark.components.TabBar; + + static private const exclusions:Array = ["labelDisplay"]; + + /** + * @private + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /** + * @private + */ + override protected function initializationComplete():void + { + //useBaseColor = true; + super.initializationComplete(); + } + + private var cornerRadius:Number = 4 + + /** + * @private + * The borderTop s:Path is just a s:Rect with the bottom edge left out. + * Given the rounded corners per the cornerRadius style, the result is + * roughly an inverted U with the specified width, height, and cornerRadius. + * + * Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil. + */ + private function updateBorderTop(width:Number, height:Number):void + { + var left:Number = -0.5; + var right:Number = width - 0.5; + var top:Number = 0.5; + var bottom:Number = height; + + var a:Number = cornerRadius * 0.292893218813453; + var s:Number = cornerRadius * 0.585786437626905; + + var path:String = ""; + path += "M " + left + " " + bottom; + path += " L " + left + " " + (top + cornerRadius); + path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a); + path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top; + path += " L " + (right - cornerRadius) + " " + top; + path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a); + path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius); + path += " L " + right + " " + bottom; + borderTop.data = path; + } + + /** + * @private + * The cornerRadius style is specified by the TabBar, not the button itself. + * + * Rather than bind the corner radius properties of the s:Rect's in the markup + * below to hostComponent.owner.getStyle("cornerRadius"), we reset them here, + * each time a change in the value of the style is detected. Note that each + * corner radius property is explicitly initialized to the default value of + * the style; the initial value of the private cornerRadius property. + */ + private function updateCornerRadius():void + { + var cr:Number = getStyle("cornerRadius"); + if (cornerRadius != cr) + { + cornerRadius = cr; + fill.topLeftRadiusX = cornerRadius; + fill.topRightRadiusX = cornerRadius; + lowlight.radiusX = cornerRadius; + highlight.radiusX = cornerRadius; + highlightStroke.topLeftRadiusX = cornerRadius; + highlightStroke.topRightRadiusX = cornerRadius; + } + } + + /** + * @private + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + updateCornerRadius(); + updateBorderTop(unscaledWidth, unscaledHeight); + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + </fx:Script> + + <!-- states --> + <s:states> + <s:State name="up" /> + <s:State name="over" stateGroups="overStates" /> + <s:State name="down" stateGroups="downStates" /> + <s:State name="disabled" stateGroups="disabledStates" /> + <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> + <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> + <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> + <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> + </s:states> + + <s:Group left="-1" right="0" top="-1" bottom="-1"> + + <!-- layer 2: fill --> + <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xCC0000" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + <s:GradientEntry color="0xCCCCCC" + color.selectedUpStates="0x9FA0A1" + color.over="0xCC0000" + color.overAndSelected="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: fill lowlight --> + <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xCC0000" alpha="0.0099" /> + <s:GradientEntry color="0xCC0000" alpha="0.0627" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 4: fill highlight --> + <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4"> + <s:fill> + <s:SolidColor color="0xCC0000" + alpha="0.33" + alpha.selectedUpStates="0.22" + alpha.overStates="0.22" + alpha.downStates="0.12" /> + </s:fill> + </s:Rect> + + <!-- layer 5: highlight stroke (all states except down) --> + <s:Rect id="highlightStroke" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 6: highlight stroke (down state only) --> + <s:Rect left="2" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect right="1" top="2" bottom="2" width="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.07" /> + </s:fill> + </s:Rect> + <s:Rect left="3" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.25" /> + </s:fill> + </s:Rect> + <s:Rect left="2" top="3" right="1" height="1" includeIn="downStates, selectedUpStates, overAndSelected"> + <s:fill> + <s:SolidColor color="0xCC0000" alpha="0.09" /> + </s:fill> + </s:Rect> + + <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> + <s:Line id="borderBottom" left="1" right="0" bottom="1"> + <s:stroke> + <s:SolidColorStroke weight="1" + color="0xCC0000" + color.selectedStates="0x434343" + alpha="0.75" + alpha.down="0.85" + alpha.selectedStates="0.5" /> + </s:stroke> + </s:Line> + <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21"> + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xCC0000" + alpha="0.5625" + /> + <s:GradientEntry color="0xFFFFFF" + color.selectedUpStates="0xFFFFFF" + color.overStates="0xFFFFFF" + color.downStates="0xCC0000" + alpha="0.85" + alpha.overAndSelected="1" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Path> + </s:Group> + + <!-- layer 8: text --> + <!--- The defines the appearance of the label for the first button in the ButtonBar component. --> + <s:Group left="2" top="2"> + <s:BitmapImage source="@Embed('../personIcon.png')" width="16" height="16"/> + + <s:Label id="labelDisplay" + textAlign="right" + verticalAlign="middle" + maxDisplayedLines="1" + horizontalCenter="7" verticalCenter="1" + left="10" right="10" top="2" bottom="2" color.down="#FFFFFF"> + </s:Label> + </s:Group> + +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml new file mode 100644 index 0000000..e81ff4d --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/skins/CustomTabBarSkin.mxml @@ -0,0 +1,97 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + + +<!--- + +The default skin class for the Spark TabBar component. The ButtonBarButtons +created by the TabBar component use the TabBarButtonSkin class. + +@see spark.components.TabBar +@see spark.components.ButtonBarButton + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 + +--> + +<s:Skin + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; + alpha.disabled="0.5"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.TabBar")] + ]]> + </fx:Metadata> + + <fx:Script fb:purpose="styling" > + <![CDATA[ + + import mx.core.UIComponent; + + /** + * @private + * Push the cornerRadius style to the item renderers. + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void + { + const numElements:int = dataGroup.numElements; + const cornerRadius:int = hostComponent.getStyle("cornerRadius"); + for (var i:int = 0; i < numElements; i++) + { + var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent; + if (elt) + elt.setStyle("cornerRadius", cornerRadius); + } + + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + + ]]> + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <!--- + @copy spark.components.SkinnableDataContainer#dataGroup + --> + <s:DataGroup id="dataGroup" width="100%" height="100%"> + <s:layout> + <s:ButtonBarHorizontalLayout gap="-1"/> + </s:layout> + <s:itemRenderer> + <fx:Component> + <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin" /> + </fx:Component> + </s:itemRenderer> + </s:DataGroup> + +</s:Skin> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/AccordionExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/AccordionExample.mxml b/tourdeflexmodules/src/spark/controls/AccordionExample.mxml new file mode 100644 index 0000000..449ce58 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/AccordionExample.mxml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="Accordion Container" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" + text="Select an Accordion navigator button to change the panel."/> + + <mx:Accordion id="accordion" width="100%" height="100%"> + <!-- Define each panel using a VBox container. --> + <s:NavigatorContent label="Accordion Button for Panel 1"> + <mx:Label text="Accordion container panel 1"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Accordion Button for Panel 2"> + <mx:Label text="Accordion container panel 2"/> + </s:NavigatorContent> + + <s:NavigatorContent label="Accordion Button for Panel 3"> + <mx:Label text="Accordion container panel 3"/> + </s:NavigatorContent> + </mx:Accordion> + + <s:Label width="100%" color="0x323232" + text="Programmatically select the panel using a Button control."/> + + <s:HGroup color="0x323232"> + <s:Button label="Select Panel 1" click="accordion.selectedIndex=0"/> + <s:Button label="Select Panel 2" click="accordion.selectedIndex=1"/> + <s:Button label="Select Panel 3" click="accordion.selectedIndex=2"/> + </s:HGroup> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml b/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml new file mode 100644 index 0000000..0d7ab9e --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/AdvancedDatagridExample.mxml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + [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} + ]); + ]]> + </fx:Script> + + <s:Panel title="AdvancedDataGrid Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:AdvancedDataGrid id="myADG" + width="100%" height="100%" + 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:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml b/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml new file mode 100644 index 0000000..a70dde1 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ButtonBarExample.mxml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Style> + @namespace "library://ns.adobe.com/flex/spark"; + + ButtonBar ToggleButton:upAndSelected, + ButtonBar ToggleButton:overAndSelected, + ButtonBar ToggleButton:downAndSelected, + ButtonBar ToggleButton:disabledAndSelected { + baseColor: #FFFFFF; + color: #323232; + } + ButtonBar { + baseColor: #000000; + color: #FFFFFF; + } + </fx:Style> + + <fx:Script> + <![CDATA[ + import spark.events.IndexChangeEvent; + + /** + * Index change handler will be called each time a button is clicked + * and the event will provide information needed such as the previous + * index clicked. + **/ + protected function indexChangeHandler(event:IndexChangeEvent):void + { + myTextArea.text = "Button Bar index clicked = " + event.newIndex + myTextArea.text = myTextArea.text + "\nButton Bar previous index = " + event.oldIndex; + myTextArea.text = myTextArea.text + "\nButton Bar label clicked = " + myButtonBar.selectedItem; + if (myButtonBar.selectedItem=="Red") { + txtColor.setStyle("color","red"); + txtColor.text="Red selected!"; + } + else if (myButtonBar.selectedItem=="Green") { + txtColor.setStyle("color","green"); + txtColor.text="Green selected!"; + } + else if (myButtonBar.selectedItem=="Blue") { + txtColor.setStyle("color","blue"); + txtColor.text="Blue selected!"; + } + else { + txtColor.setStyle("color","yellow"); + txtColor.text="Yellow selected!"; + } + } + protected function resetButtonBar(event:MouseEvent):void + { + myButtonBar.selectedIndex = -1; + myTextArea.text = ""; + } + ]]> + </fx:Script> + + <s:Panel title="ButtonBar Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup width="100%" height="100%"> + <s:Label width="50%" verticalAlign="justify" + text="The ButtonBar component behaves like a series of toggle buttons, where one button remains selected +and only one button in the ButtonBar control can be in the selected state. That means when you select a button in a ButtonBar +control, the button stays in the selected state until you select a different button."/> + <s:VGroup left="10" top="5" color="0x000000" horizontalAlign="center"> + <s:ButtonBar id="myButtonBar" change="indexChangeHandler(event)"> + <mx:ArrayCollection> + <fx:String>Red</fx:String> + <fx:String>Green</fx:String> + <fx:String>Blue</fx:String> + <fx:String>Yellow</fx:String> + </mx:ArrayCollection> + </s:ButtonBar> + <s:TextArea id="myTextArea" width="{myButtonBar.width}" height="150"/> + <s:Button id="myButton" label="Reset Selection" click="resetButtonBar(event)"/> + <s:Label id="txtColor" fontSize="16"/> + </s:VGroup> + </s:HGroup> + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ButtonExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ButtonExample.mxml b/tourdeflexmodules/src/spark/controls/ButtonExample.mxml new file mode 100644 index 0000000..615aa88 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ButtonExample.mxml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import flash.events.Event; + + protected function buttonClickHandler(event:Event):void + { + repeatText.text += event.target.label + " pressed!" + "\n"; + } + ]]> + </fx:Script> + + <s:Panel title="Button Sample" height="100%" width="100%"> + + <s:layout> + <s:HorizontalLayout paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" /> + </s:layout> + + <s:Label width="50%" verticalAlign="justify" + text="The Button component is a commonly used rectangular button. The Button +component looks like it can be pressed. The default skin has a text label."/> + + <s:VGroup right="10" bottom="5" color="0x000000" horizontalAlign="center"> + <s:Label text="Output"/> + <s:TextArea id="repeatText" top="5" right="50" width="180" height="100"/> + <s:Button id="standardBtn" label="Standard Button" + click="buttonClickHandler(event)" + fontWeight="normal"/> + <s:Button id="disabledBtn" label="Disabled Button" enabled="false"/> + <s:Button id="repeatBtn" label="Repeat Button" + buttonDown="buttonClickHandler(event)" + autoRepeat="true"/> + <s:Label verticalAlign="justify" + text="Hold down on repeat button to see autoRepeat behavior."/> + + </s:VGroup> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml b/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml new file mode 100644 index 0000000..5cea28c --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/CheckboxExample.mxml @@ -0,0 +1,76 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + [Bindable] + public var totalCost:Number = 4.50; + + // This event handler adds/removes the cost of condiments to/from the total cost. + private function modifyBurger(evt:MouseEvent):void { + // Add 0.25 to the total cost for every condiment. Delete 0.25 for + // every condiment removed. + if(CheckBox(evt.target).selected) { + totalCost += 0.25; + } else { + totalCost -= 0.25; + } + // Format the totalCost and then display it in a label. + totalString.text = usdFormatter.format(totalCost); + } + ]]> + </fx:Script> + <fx:Declarations> + <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" + decimalSeparatorFrom="." decimalSeparatorTo="." + useNegativeSign="true" + useThousandsSeparator="true" alignSymbol="left"/> + </fx:Declarations> + + <s:Panel title="CheckBox Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label text="Hamburger Base Price: $4.50" /> + <s:Label text="Select condiments for your hamburger (0.25 each):" /> + + <s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event)"/> + <s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event)"/> + <s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event)"/> + <s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event)"/> + + <mx:Spacer height="10" /> + <s:HGroup> + <s:Label text="Total Price: " color="0x336699" fontWeight="bold"/> + <s:Label id="totalString" text="$4.50" color="0x336699" fontWeight="bold"/> + </s:HGroup> + <s:Label top="10" right="10" width="250" verticalAlign="justify" + text="The CheckBox control is a commonly used graphical control that can +contain a check mark or not. You can use CheckBox controls to gather a +set of true or false values that arenât mutually exclusive."/> + </s:Panel> + + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml b/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml new file mode 100644 index 0000000..eb1318d --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ColorPickerExample.mxml @@ -0,0 +1,41 @@ +<?xml version="1.0"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<!-- Simple example to demonstrate the ColorPicker control. --> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel title="ColorPicker Control Example" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x000000" + text="Select the background color of the Skinnable container."/> + + <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/> + + <s:SkinnableContainer width="100%" height="100%" backgroundColor="{cp.selectedColor}" /> + + <s:Label color="0x000000" text="selectedColor: 0x{cp.selectedColor.toString(16)}"/> + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml b/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml new file mode 100644 index 0000000..bcfa757 --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/ComboBoxExample.mxml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + [Bindable] + public var cards:ArrayCollection = new ArrayCollection( + [ {label:"Visa", data:1}, + {label:"MasterCard", data:2}, + {label:"American Express", data:3} ]); + + private function changeHandler(event:Event):void { + + myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label; + myData.text = "Data: " + ComboBox(event.target).selectedItem.data; + } + ]]> + </fx:Script> + + <s:Panel title="ComboBox Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup> + <s:Label width="200" color="0x336699" text="Select credit card type:"/> + <s:ComboBox dataProvider="{cards}" width="150" color="0x000000" + change="changeHandler(event)" selectedIndex="0"/> + <s:Label id="myLabel" text="You selected:" fontWeight="bold"/> + <s:Label id="myData" text="Data:" fontWeight="bold"/> + </s:VGroup> + + <s:Label width="75%" bottom="20" horizontalCenter="0" + text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match. +Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values. "/> + + </s:Panel> +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml b/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml new file mode 100644 index 0000000..10402da --- /dev/null +++ b/tourdeflexmodules/src/spark/controls/CustomDataGridSkin.mxml @@ -0,0 +1,375 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> + +<s:SparkSkin + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; + alpha.disabled="0.5" minWidth="89" minHeight="84"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + @langversion 3.0 + @playerversion Flash 10 + @playerversion AIR 1.5 + @productversion Flex 4 + */ + [HostComponent("spark.components.DataGrid")] + ]]> + </fx:Metadata> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + </s:states> + + <fx:Declarations> + <!--- @private --> + <fx:Component id="alternatingRowColorsBackground"> + <s:Rect implements="spark.components.gridClasses.IGridVisualElement"> + <fx:Script> + <![CDATA[ + import spark.components.DataGrid; + import spark.components.Grid; + + /** + * @private + */ + public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void + { + const dataGrid:DataGrid = grid.dataGrid; + if (!dataGrid) + return; + + const colors:Array = dataGrid.getStyle("alternatingRowColors"); + if (colors && (colors.length > 0)) + { + dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints + rowBackgroundFillColor.color = colors[rowIndex % colors.length]; + } + else + { + // This should be the same as bgFill.color. + rowBackgroundFillColor.color = 0xFFFFFF; + } + } + ]]> + </fx:Script> + <s:fill> + <!--- @private --> + <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/> + </s:fill> + </s:Rect> + </fx:Component> + + <!--- @private --> + <fx:Component id="caretIndicator"> + <s:Rect implements="spark.components.gridClasses.IGridVisualElement"> + <fx:Script> + <![CDATA[ + import spark.components.DataGrid; + import spark.components.Grid; + + /** + * @private + */ + public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void + { + const dataGrid:DataGrid = grid.dataGrid; + if (!dataGrid) + return; + + const color:uint = dataGrid.getStyle("caretColor"); + caretIndicatorFill.color = color; + } + ]]> + </fx:Script> + + <s:stroke> + <!--- @private --> + <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/> + </s:stroke> + </s:Rect> + </fx:Component> + + <!--- @private --> + <fx:Component id="columnSeparator"> + <s:Line> + <s:stroke> + <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/> + </s:stroke> + </s:Line> + </fx:Component> + + <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. --> + <fx:Component id="headerColumnSeparator"> + <s:Line> + <s:stroke> + <s:SolidColorStroke color="0x696969" weight="1" caps="square"/> + </s:stroke> + </s:Line> + </fx:Component> + + <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. + The default is spark.skins.spark.DefaultGridHeaderRenderer --> + <fx:Component id="headerRenderer"> + <s:DefaultGridHeaderRenderer /> + </fx:Component> + + <!--- @private --> + <fx:Component id="hoverIndicator"> + <s:Rect implements="spark.components.gridClasses.IGridVisualElement"> + <fx:Script> + <![CDATA[ + import spark.components.DataGrid; + import spark.components.Grid; + + /** + * @private + */ + public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void + { + const dataGrid:DataGrid = grid.dataGrid; + if (!dataGrid) + return; + + const color:uint = dataGrid.getStyle("rollOverColor"); + hoverIndicatorFill.color = color; + } + ]]> + </fx:Script> + + <s:fill> + <!--- @private --> + <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/> + </s:fill> + </s:Rect> + </fx:Component> + + <!--- @private --> + <fx:Component id="rowSeparator"> + <s:Line> + <s:stroke> + <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/> + </s:stroke> + </s:Line> + </fx:Component> + + <!--- @private --> + <fx:Component id="selectionIndicator"> + <s:Rect implements="spark.components.gridClasses.IGridVisualElement"> + <fx:Script> + <![CDATA[ + import spark.components.DataGrid; + import spark.components.Grid; + + /** + * @private + */ + public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void + { + const dataGrid:DataGrid = grid.dataGrid; + if (!dataGrid) + return; + + const color:uint = dataGrid.getStyle("selectionColor"); + selectionIndicatorFill.color = color; + } + ]]> + </fx:Script> + + <s:fill> + <!--- @private --> + <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/> + </s:fill> + </s:Rect> + </fx:Component> + + <!--- @private --> + <fx:Component id="editorIndicator"> + <s:Rect> + <s:fill> + <s:SolidColor color="0xFFFFFF"/> + </s:fill> + </s:Rect> + </fx:Component> + + </fx:Declarations> + + <fx:Script fb:purpose="styling"> + <![CDATA[ + static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"]; + static private const contentFill:Array = ["bgFill"]; + + /** + * @private + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /** + * @private + */ + override public function get contentItems():Array {return contentFill}; + + /** + * @private + */ + override protected function initializationComplete():void + { + useChromeColor = true; + super.initializationComplete(); + } + + /** + * @private + */ + override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void + { + if (getStyle("borderVisible") == true) + { + border.visible = true; + background.left = background.top = background.right = background.bottom = 1; + scroller.minViewportInset = 1; + } + else + { + border.visible = false; + background.left = background.top = background.right = background.bottom = 0; + scroller.minViewportInset = 0; + } + + borderStroke.color = getStyle("borderColor"); + borderStroke.alpha = getStyle("borderAlpha"); + + super.updateDisplayList(unscaledWidth, unscaledHeight); + } + ]]> + </fx:Script> + + <!-- column header, content --> + <s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0"> + + <!--- @private --> + <s:GridColumnHeaderGroup id="columnHeaderGroup" + paddingLeft="1" paddingTop="1" paddingRight="1" minHeight="21" + columnSeparator="{headerColumnSeparator}" + headerRenderer="{headerRenderer}"/> + + <s:Group height="100%"> + + <!--- @private --> + <s:Rect id="background" left="1" right="1" top="1" bottom="1" > + <s:fill> + <!--- Defines the color of the background. The default color is 0xFFFFFF. --> + <s:SolidColor id="bgFill" color="0xFFFFFF" /> + </s:fill> + </s:Rect> + + <!-- header separator, scroller and grid --> + <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1"> + <!--- @private --> + <s:Line id="headerSeparator"> + <s:stroke> + <s:SolidColorStroke color="0x696969" weight="1" caps="square"/> + </s:stroke> + </s:Line> + + <!--- @private --> + <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%"> + <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer"> + <!-- + <s:itemRenderer> + <fx:Component> + <s:GridItemRenderer> + <s:Label id="labelDisplay" paddingLeft="7" paddingRight="7" paddingBottom="5" paddingTop="9" width="100%" height="100%"/> + </s:GridItemRenderer> + </fx:Component> + </s:itemRenderer> + --> + + <s:caretIndicator> + <fx:Component> + <s:Rect> + <s:stroke> + <s:SolidColorStroke color="0xff0000" weight="1"/> + </s:stroke> + </s:Rect> + </fx:Component> + </s:caretIndicator> + + <s:selectionIndicator> + <fx:Component> + <s:Rect> + <s:fill> + <s:SolidColor color="0x00ff00"/> + </s:fill> + </s:Rect> + </fx:Component> + </s:selectionIndicator> + + <s:columnSeparator> + <fx:Component> + <s:Line> + <s:stroke> + <s:SolidColorStroke color="0xE6E6E6" weight="1"/> + </s:stroke> + </s:Line> + </fx:Component> + </s:columnSeparator> + <s:rowSeparator> + <fx:Component> + <s:Line> + <s:stroke> + <s:SolidColorStroke color="0xE6E6E6" weight="1"/> + </s:stroke> + </s:Line> + </fx:Component> + </s:rowSeparator> + + <s:hoverIndicator> + <fx:Component> + <s:Rect> + <s:fill> + <s:SolidColor color="0x0000ff"/> + </s:fill> + </s:Rect> + </fx:Component> + </s:hoverIndicator> + </s:Grid> + </s:Scroller> + </s:VGroup> + + </s:Group> + + </s:VGroup> + + <!-- border --> + <!--- @private --> + <s:Rect left="0" right="0" top="0" bottom="0" id="border"> + <s:stroke> + <!--- @private --> + <s:SolidColorStroke id="borderStroke" weight="1"/> + </s:stroke> + </s:Rect> + +</s:SparkSkin>
