http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml new file mode 100644 index 0000000..52a579d --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/GroupExample.mxml @@ -0,0 +1,75 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html"> + + <s:layout> + <s:BasicLayout id="bl"/> + </s:layout> + + <!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be + arranged according to their individual constraint settings, independent of each-other --> + <s:Panel id="mainPanel" width="100%" height="100%" top="0" left="5" + title="Panel Sample" + skinClass="skins.TDFPanelSkin"> + + <!-- Note: main panel is BasicLayout by default. So each inner panel will be layed out + according to it's constraints specified individually. --> + <s:Panel title="Basic Layout Panel" top="0" left="5"> + <!-- 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" + top="0" left="250"> + <s:layout> + <s:HorizontalLayout/> + </s:layout> + <!-- Note: constraints to top left on items here, but will not matter because we + specified a HorizontalLayout --> + <s:Label text="Apples" top="0"/> + <s:Label text="Oranges" top="13"/> + <s:Label text="Bananas" top="26"/> + </s:Panel> + <s:Panel id="vericalPanel" title="Vertical Layout Panel" + top="0" right="5"> + <s:layout> + <s:VerticalLayout/> + </s:layout> + <!-- Note: constraints to top left on items here, but will not matter because we + specified a VerticalLayout --> + <s:Label text="Apples" top="0"/> + <s:Label text="Oranges" top="13"/> + <s:Label text="Bananas" top="26"/> + </s:Panel> + <s:Label color="0x323232" verticalAlign="justify" + left="3" bottom="30" width="100%" + 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. In that case the +individual constraints on the Text items are ignored, as shown here."/> + + </s:Panel> + +</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml new file mode 100644 index 0000000..76369f5 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/PanelExample.mxml @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> + + <!-- Note: Panel has a BasicLayout by default. The BasicLayout means that components will be + arranged according to their individual constraint settings, independent of each-other --> + <s:Panel id="mainPanel" width="100%" height="100%" + title="Panel Sample" + skinClass="skins.TDFPanelSkin"> + + + <s:HGroup horizontalCenter="0"> + + <!-- Note: main panel is BasicLayout by default, so each inner panel will be layed out + according to it's constraints specified individually. --> + <s:Panel title="Basic Layout Panel" top="0" left="5"> + <!-- Default layout is basic, therefore constraints are used for placement --> + <mx:Text text="Apples" top="0"/> + <mx:Text text="Oranges" top="15"/> + <mx:Text text="Bananas" top="30"/> + </s:Panel> + + <s:Panel title="Horizontal Layout Panel" + top="0" left="250"> + <s:layout> + <s:HorizontalLayout/> + </s:layout> + <!-- Note: constraints to top left on items here, but will not matter because we + specified a HorizontalLayout --> + <mx:Text text="Apples" top="0"/> + <mx:Text text="Oranges" top="15"/> + <mx:Text text="Bananas" top="30"/> + </s:Panel> + + <s:Panel title="Vertical Layout Panel" + top="0" right="5"> + <s:layout> + <s:VerticalLayout/> + </s:layout> + + <!-- Note: constraints to top left on items here, but will not matter because we + specified a VeritcalLayout --> + <mx:Text text="Apples" top="0"/> + <mx:Text text="Oranges" top="15"/> + <mx:Text text="Bananas" top="30"/> + </s:Panel> + </s:HGroup> + <s:Group bottom="5" width="100%"> + + <s:Label color="0x323232" 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. In that case the individual constraints on the Text items are ignored, as shown here."/> + </s:Group> + + + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml new file mode 100644 index 0000000..1e76815 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml @@ -0,0 +1,98 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> + + <fx:Declarations> + <!-- Place non-visual elements (e.g., services, value objects) here --> + </fx:Declarations> + + <fx:Script> + <![CDATA[ + import skins.TDFPanelSkin; + + 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 skinClass="skins.TDFPanelSkin" 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" color="#323232" + 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:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml new file mode 100644 index 0000000..4ebd23d --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.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. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> + + <fx:Declarations> + <!-- Place non-visual elements (e.g., services, value objects) here --> + </fx:Declarations> + + <fx:Script> + <![CDATA[ + import skins.TDFPanelSkin; + + 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 skinClass="skins.TDFPanelSkin" 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" color="#323232" + 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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml new file mode 100644 index 0000000..abfb346 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml @@ -0,0 +1,83 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x323232" color="0xFFFFFF"> + + <s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10"> + <s:HGroup verticalAlign="middle" height="100%" color="0x000000"> + <s:Label text="VGroup" rotation="-90" color="0xFF0000"/> + <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" color="0xFF0000"/> + <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" color="0xFF0000"/> + + <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:VGroup> + + <s:HGroup horizontalAlign="center" 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 right="7" top="26" width="200" + text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and +HGroup accordingly."/> +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml new file mode 100644 index 0000000..09fb38c --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SkinableDataContainerExample.mxml @@ -0,0 +1,62 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <s:Panel width="100%" height="100%" title="SkinnableDataContainer" skinClass="skins.TDFPanelSkin"> + <s:layout><s:HorizontalLayout paddingLeft="8" paddingTop="8" paddingRight="12"/></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 color="0x323232" 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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml new file mode 100644 index 0000000..e23b033 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator1Example.mxml @@ -0,0 +1,116 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" viewSourceURL="srcview/index.html"> + + <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 width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample" > + <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%" borderWeight="2" cornerRadius="3" dropShadowVisible="true"> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x323232" /> + </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 width="100%" height="100%" borderWeight="2" + cornerRadius="3" dropShadowVisible="true"> + <s:backgroundFill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x323232" /> + </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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TabNavigator2Example.mxml new file mode 100644 index 0000000..7bc0b35 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" 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 width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" > + <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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml new file mode 100644 index 0000000..c68120f --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/TileGroupExample.mxml @@ -0,0 +1,101 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> + + <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; + import skins.TDFPanelSkin; + + 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 skinClass="skins.TDFPanelSkin" 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" color="#323232" + 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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/assets/arrow_icon_sm.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/assets/arrow_icon_sm.png b/TourDeFlex/TourDeFlex3/src/spark/containers/assets/arrow_icon_sm.png new file mode 100644 index 0000000..33debc8 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/containers/assets/arrow_icon_sm.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png b/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png new file mode 100644 index 0000000..f9d76c6 Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/containers/personIcon.png differ http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarButtonSkin.mxml new file mode 100644 index 0000000..3bbff44 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/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> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/CustomTabBarSkin.mxml new file mode 100644 index 0000000..3621cac --- /dev/null +++ b/TourDeFlex/TourDeFlex3/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> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml new file mode 100644 index 0000000..f9151dc --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml @@ -0,0 +1,171 @@ +<?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. + +--> + + +<!--- Custom Spark Panel Skin created for Tour de Flex. + +@langversion 3.0 +@playerversion Flash 10 +@playerversion AIR 1.5 +@productversion Flex 4 +--> +<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5" + blendMode.disabled="layer"> + + <fx:Metadata> + <![CDATA[ + /** + * @copy spark.skins.spark.ApplicationSkin#hostComponent + */ + [HostComponent("spark.components.Panel")] + ]]> + </fx:Metadata> + + <fx:Script> + /* Define the skin elements that should not be colorized. + For panel, border and title backround are skinned, but the content area and title text are not. */ + static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"]; + + /** + * @copy spark.skins.SparkSkin#colorizeExclusions + */ + override public function get colorizeExclusions():Array {return exclusions;} + + /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ + static private const contentFill:Array = []; + + /** + * @inheritDoc + */ + override public function get contentItems():Array {return contentFill}; + </fx:Script> + + <s:states> + <s:State name="normal" /> + <s:State name="disabled" /> + <s:State name="normalWithControlBar" /> + <s:State name="disabledWithControlBar" /> + </s:states> + + <!-- drop shadow --> + <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" + angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> + + <!-- layer 1: border --> + <s:Rect left="0" right="0" top="0" bottom="0"> + <s:stroke> + <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> + </s:stroke> + </s:Rect> + + + <!-- layer 2: background fill --> + <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. --> + <s:Rect left="0" right="0" bottom="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 3: contents --> + <!--- contains the vertical stack of titlebar content and controlbar --> + <s:Group left="1" right="1" top="1" bottom="1" > + <s:layout> + <s:VerticalLayout gap="0" horizontalAlign="justify" /> + </s:layout> + + <s:Group id="topGroup" > + <!-- layer 0: title bar fill --> + <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex --> + <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" > + <s:fill> + <s:SolidColor color="0x000000" /> + </s:fill> + </s:Rect> + + <!-- layer 1: title bar highlight --> + <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" > + <s:stroke> + <s:LinearGradientStroke rotation="90" weight="1"> + <s:GradientEntry color="0xEAEAEA" /> + <s:GradientEntry color="0xD9D9D9" /> + </s:LinearGradientStroke> + </s:stroke> + </s:Rect> + + <!-- layer 2: title bar divider --> + <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"> + <s:fill> + <s:SolidColor color="0xC0C0C0" /> + </s:fill> + </s:Rect> + + <!-- layer 3: text --> + <!--- Defines the appearance of the PanelSkin class's title bar. --> + <!-- Note: The title text display has been slightly modified for Tour de Flex. --> + <s:Label id="titleDisplay" lineBreak="explicit" + left="9" top="1" bottom="0" minHeight="30" + verticalAlign="middle" fontWeight="bold" color="#E2E2E2"> + </s:Label> + </s:Group> + + <!-- + Note: setting the minimum size to 0 here so that changes to the host component's + size will not be thwarted by this skin part's minimum size. This is a compromise, + more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 + --> + <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"> + </s:Group> + + <s:Group id="bottomGroup" minWidth="0" minHeight="0" + includeIn="normalWithControlBar, disabledWithControlBar" > + + <!-- layer 0: control bar background --> + <!-- Note: We are skinning this to be the gradient in case we do specify control + bar content, but it will only display if there's a controlBarContent + property specified.--> + <s:Rect left="0" right="0" bottom="0" top="0" height="15"> + <s:fill> + <s:LinearGradient rotation="90"> + <s:GradientEntry color="0xE2E2E2" /> + <s:GradientEntry color="0x000000" /> + </s:LinearGradient> + </s:fill> + </s:Rect> + + <!-- layer 1: control bar divider line --> + <s:Rect left="0" right="0" top="0" height="1" > + <s:fill> + <s:SolidColor color="0xCDCDCD" /> + </s:fill> + </s:Rect> + + <!-- layer 2: control bar --> + <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0"> + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + </s:Group> + </s:Group> + </s:Group> +</s:SparkSkin> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml new file mode 100644 index 0000000..128ee33 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AccordionExample.mxml @@ -0,0 +1,66 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin"> + + <s:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="Accordion Container" width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:Label width="100%" color="0x323232" + text="Select an Accordion navigator button to change the panel."/> + + <mx:Accordion id="accordion" color="0x323232" 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:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.mxml new file mode 100644 index 0000000..fe662fa --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/AdvancedDatagridExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin"> + + <fx: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:layout> + <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:Panel title="AdvancedDataGrid Control" + color="0x000000" + borderAlpha="0.15" + width="600"> + + <mx:AdvancedDataGrid id="myADG" + width="100%" height="100%" + color="0x323232" + 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:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml new file mode 100644 index 0000000..928fe77 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonBarExample.mxml @@ -0,0 +1,106 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> + + <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> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel title="ButtonBar Sample" + width="100%" height="100%" + horizontalCenter="0" + skinClass="skins.TDFPanelSkin"> + + <s:HGroup left="5" top="5" width="100%" height="100%"> + <s:Label width="50%" fontSize="13" color="0x323232" 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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.mxml new file mode 100644 index 0000000..838c419 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ButtonExample.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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + viewSourceURL="srcview/index.html"> + + <fx:Script> + <![CDATA[ + import flash.events.Event; + + protected function buttonClickHandler(event:Event):void + { + repeatText.text += event.target.label + " pressed!" + "\n"; + } + ]]> + </fx:Script> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel width="100%" height="100%" + horizontalCenter="0" + title="Button Sample" + skinClass="skins.TDFPanelSkin"> + + <s:HGroup left="5" top="5" width="100%" height="100%"> + <s:Label width="50%" fontSize="13" color="0x323232" 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:HGroup> + </s:Panel> + +</s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml new file mode 100644 index 0000000..77de6bb --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/CheckboxExample.mxml @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + viewSourceURL="srcview/index.html"> + + <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> + + <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the + source tabs for each sample. --> + <s:Panel title="CheckBox Sample" + width="100%" height="100%" + skinClass="skins.TDFPanelSkin"> + <s:VGroup left="10" right="10" top="10" bottom="10"> + <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:VGroup> + <s:Label top="10" right="10" width="250" verticalAlign="justify" color="#323232" + 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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml new file mode 100644 index 0000000..57a268c --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ColorPickerExample.mxml @@ -0,0 +1,49 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + skinClass="TDFGradientBackgroundSkin"> + + <s:layout> + <s:HorizontalLayout horizontalAlign="center" /> + </s:layout> + + <s:Panel title="ColorPicker Control Example" + width="600" height="100%" + color="0x000000" + borderAlpha="0.15"> + + <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:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/e1f9d1df/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml new file mode 100644 index 0000000..7276b06 --- /dev/null +++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml @@ -0,0 +1,66 @@ +<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + import mx.collections.ArrayCollection; + + import skins.TDFPanelSkin; + + [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" skinClass="skins.TDFPanelSkin" + height="100%" width="100%"> + + <s:HGroup top="20" horizontalCenter="0" > + <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:VGroup> + <mx:Spacer width="20"/> + <s:VGroup> + <s:Label id="myLabel" text="You selected:" fontWeight="bold"/> + <s:Label id="myData" text="Data:" fontWeight="bold"/> + </s:VGroup> + + </s:HGroup> + <s:Label color="#323232" 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:Application>