http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SimpleList.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SimpleList.mxml b/tourdeflexmodules/src/mx/controls/SimpleList.mxml new file mode 100755 index 0000000..558bbb5 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SimpleList.mxml @@ -0,0 +1,62 @@ +<?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 List Control --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + [Bindable] + public var selectedItem:Object; + ]]> + </fx:Script> + + + <fx:Declarations> + <fx:Model id="mystates"> + <states> + <state label="Alabama" data="AL"/> + <state label="Alaska" data="AK"/> + <state label="Arizona" data="AZ"/> + <state label="Arkansas" data="AR"/> + <state label="California" data="CA"/> + <state label="Colorado" data="CO"/> + <state label="Connecticut" data="CT"/> + </states> + </fx:Model> + </fx:Declarations> + + <mx:Panel title="List Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label text="Select a state to see its abbreviation."/> + + <mx:List id="source" width="100%" + dataProvider="{mystates.state}" + change="this.selectedItem=List(event.target).selectedItem"/> + + <mx:VBox width="100%"> + <mx:Label text="Selected State: {selectedItem.label}"/> + <mx:Label text="State abbreviation: {selectedItem.data}"/> + </mx:VBox> + + </mx:Panel> +</mx:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml b/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml new file mode 100755 index 0000000..6d3b740 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SimpleLoader.mxml @@ -0,0 +1,34 @@ +<?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 SWFLoader control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="SWFLoader Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label text="The Label control of the outer application."/> + + <mx:SWFLoader id="Load" source="@Embed(source='Local.swf')" /> + + </mx:Panel> +</mx:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml b/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml new file mode 100755 index 0000000..4a8836b --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SimpleMenuExample.mxml @@ -0,0 +1,75 @@ +<?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 Menu control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.controls.Menu; + import mx.events.MenuEvent; + import mx.controls.Alert; + import flash.geom.Point; + + private var point1:Point = new Point(); + private var myMenu:Menu; + + // Create and display the Menu control. + private function showMenu():void { + myMenu= Menu.createMenu(panel, myMenuData, false); + myMenu.labelField="@label" + myMenu.addEventListener("itemClick", menuHandler); + + // Calculate position of Menu in Application's coordinates. + point1.x=mybutton.x; + point1.y=mybutton.y; + point1=mybutton.localToGlobal(point1); + + myMenu.show(point1.x + 25, point1.y + 25); + } + + // Event handler for the Menu control's change event. + private function menuHandler(event:MenuEvent):void { + Alert.show("Label: " + event.item.@label, "Clicked menu item"); + } + ]]> + </fx:Script> + + <fx:Declarations> + <fx:XML id="myMenuData"> + <root> + <menuitem label="MenuItem 1" eventName="copy"/> + <menuitem label="MenuItem 2" eventName="paste"/> + </root> + </fx:XML> + </fx:Declarations> + + <mx:Panel id="panel" title="Menu Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Click the button to open the Menu control."/> + + <mx:Button id="mybutton" label="Open Menu" click="showMenu()"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml b/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml new file mode 100755 index 0000000..b43a8db --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SimpleProgressBar.mxml @@ -0,0 +1,60 @@ +<?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 ProgressBar control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + private var j:uint=10; + + // Event handler function to set the value of the + // ProgressBar control. + private function runit():void + { + if(j<=100) + { + bar.setProgress(j,100); + bar.label= "CurrentProgress" + " " + j + "%"; + j+=10; + } + if(j>100) + { + j=0; + } + } + ]]> + </fx:Script> + + <mx:Panel title="ProgressBar Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Click the button to increment the progress bar." /> + <mx:Button id="Speed" label="Run" click="runit()"/> + + <mx:ProgressBar id="bar" labelPlacement="bottom" + minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" + direction="right" mode="manual" width="100%"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml b/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml new file mode 100755 index 0000000..14ef18d --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SimpleVRule.mxml @@ -0,0 +1,34 @@ +<?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 VRule control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="VRule Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/> + <mx:Label width="100%" + text="Move mouse over VRule control to redraw it."/> + + </mx:Panel> +</mx:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/SpacerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/SpacerExample.mxml b/tourdeflexmodules/src/mx/controls/SpacerExample.mxml new file mode 100755 index 0000000..b9324b5 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/SpacerExample.mxml @@ -0,0 +1,39 @@ +<?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 Spacer control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel id="panel" title="Spacer Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="The Spacer control pushes the second image to the right edge of the HBox container." /> + + <mx:HBox width="100%"> + <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" /> + <mx:Spacer width="100%"/> + <mx:Image source="@Embed('assets/ApacheFlexLogo.png')" width="50%" height="50%" /> + </mx:HBox> + + </mx:Panel> +</mx:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TabBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TabBarExample.mxml b/tourdeflexmodules/src/mx/controls/TabBarExample.mxml new file mode 100755 index 0000000..7387eee --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TabBarExample.mxml @@ -0,0 +1,60 @@ +<?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 TabBar control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.events.ItemClickEvent; + import mx.controls.TabBar; + + [Bindable] + public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"}, + {label:"Alaska", data:"Juneau"}, + {label:"Arkansas", data:"LittleRock"} + ]; + + private function clickEvt(event:ItemClickEvent):void { + // Access target TabBar control. + var targetComp:TabBar = TabBar(event.currentTarget); + forClick.text="label is: " + event.label + ", index is: " + + event.index + ", capital is: " + + targetComp.dataProvider[event.index].data; + } + ]]> + </fx:Script> + + <mx:Panel title="TabBar Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Select a tab to change the current panel."/> + + <mx:TabBar itemClick="clickEvt(event)"> + <mx:dataProvider>{STATE_ARRAY}</mx:dataProvider> + </mx:TabBar> + + <mx:TextArea id="forClick" height="100%" width="100%"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml b/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml new file mode 100755 index 0000000..ddac800 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TextAreaExample.mxml @@ -0,0 +1,40 @@ +<?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 TextArea control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="TextArea Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:TextArea width="400" height="100"> + <mx:text> + This is a multiline, editable TextArea control. If you need + a non-editable multiline control, use the Text control. + </mx:text> + </mx:TextArea> + + <mx:TextArea width="400" height="100"> + <mx:htmlText><![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>TextArea control</b>. Use the <u>htmlText property</u> of the <font color="#008800">TextArea control</font> to include basic HTML markup in your text.]]></mx:htmlText> + </mx:TextArea> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TextExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TextExample.mxml b/tourdeflexmodules/src/mx/controls/TextExample.mxml new file mode 100755 index 0000000..73cd268 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TextExample.mxml @@ -0,0 +1,42 @@ +<?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 Text control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="Text Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%"> + <mx:text> + This is a multiline, non-editable text component. + If you need an editable multiline component, use TextArea. + </mx:text> + </mx:Text> + + <mx:Text width="100%"> + <mx:htmlText> + <![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]> + </mx:htmlText> + </mx:Text> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TextInputExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TextInputExample.mxml b/tourdeflexmodules/src/mx/controls/TextInputExample.mxml new file mode 100755 index 0000000..d78b043 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TextInputExample.mxml @@ -0,0 +1,35 @@ +<?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 TextInput control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="TextInput Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:TextInput id="src" text="Hello World!"/> + + <mx:Button label="Copy Text" click="dest.text = src.text"/> + + <mx:TextInput id="dest"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TileListExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TileListExample.mxml b/tourdeflexmodules/src/mx/controls/TileListExample.mxml new file mode 100755 index 0000000..ca4ad09 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TileListExample.mxml @@ -0,0 +1,71 @@ +<?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 TileList Control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + [Bindable] + [Embed(source="assets/ApacheFlexLogo.png")] + public var logo1:Class; + + [Bindable] + [Embed(source="assets/ApacheFlexLogo.png")] + public var logo2:Class; + + [Bindable] + [Embed(source="assets/ApacheFlexLogo.png")] + public var logo3:Class; + + [Bindable] + [Embed(source="assets/ApacheFlexLogo.png")] + public var logo4:Class; + + [Bindable] + [Embed(source="assets/ApacheFlexLogo.png")] + public var logo5:Class; + ]]> + </fx:Script> + + <mx:Panel title="TileList Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="A TileList control displays items in rows and columns."/> + + <mx:TileList id="CameraSelection" height="250" width="300" + maxColumns="2" rowHeight="225" columnWidth="125"> + <mx:dataProvider> + <fx:Array> + <fx:Object label="Logo 1" icon="{logo1}"/> + <fx:Object label="Logo 2" icon="{logo2}"/> + <fx:Object label="Logo 3" icon="{logo3}"/> + <fx:Object label="Logo 4" icon="{logo4}"/> + <fx:Object label="Logo 5" icon="{logo5}"/> + </fx:Array> + </mx:dataProvider> + </mx:TileList> + + </mx:Panel> +</mx:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml b/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml new file mode 100755 index 0000000..981848f --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/ToggleButtonBarExample.mxml @@ -0,0 +1,58 @@ +<?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 ToggleButtonBar control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.events.ItemClickEvent; + + // Event handler function to print a message + // describing the selected Button control. + private function clickHandler(event:ItemClickEvent):void { + myTA.text="Selected button index: " + String(event.index) + + "\n" + "Selected button label: " + event.label; + } + ]]> + </fx:Script> + + <mx:Panel title="ToggleButtonBar Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Select a button in the ToggleButtonBar control."/> + + <mx:TextArea id="myTA" width="100%" height="100%"/> + + <mx:ToggleButtonBar itemClick="clickHandler(event)"> + <mx:dataProvider> + <fx:Array> + <fx:String>Flex SDK</fx:String> + <fx:String>Flex JS</fx:String> + <fx:String>Falcon</fx:String> + <fx:String>Falcon JX</fx:String> + </fx:Array> + </mx:dataProvider> + </mx:ToggleButtonBar> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/TreeExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/TreeExample.mxml b/tourdeflexmodules/src/mx/controls/TreeExample.mxml new file mode 100755 index 0000000..4ac2f7b --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/TreeExample.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. + --> + +<!-- Tree control example. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + [Bindable] + public var selectedNode:XML; + + // Event handler for the Tree control change event. + public function treeChanged(event:Event):void { + selectedNode=Tree(event.target).selectedItem as XML; + } + ]]> + </fx:Script> + + <fx:Declarations> + <fx:XMLList id="treeData"> + <node label="Mail Box"> + <node label="Inbox"> + <node label="Marketing"/> + <node label="Product Management"/> + <node label="Personal"/> + </node> + <node label="Outbox"> + <node label="Professional"/> + <node label="Personal"/> + </node> + <node label="Spam"/> + <node label="Sent"/> + </node> + </fx:XMLList> + </fx:Declarations> + + <mx:Panel title="Tree Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Select a node in the Tree control."/> + + <mx:HDividedBox width="100%" height="100%"> + <mx:Tree id="myTree" width="50%" height="100%" labelField="@label" + showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/> + <mx:TextArea height="100%" width="50%" + text="Selected Item: {selectedNode.@label}"/> + </mx:HDividedBox> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml b/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml new file mode 100755 index 0000000..288dab9 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/VScrollBarExample.mxml @@ -0,0 +1,58 @@ +<?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. + --> + +<!-- Simple example to demonstrate the VScrollBar control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.events.ScrollEvent; + + // Event handler function to display the scroll location + // as you move the scroll thumb. + private function myScroll(event:ScrollEvent):void + { + showPosition.text = "VScrollBar properties summary:" + '\n' + + "------------------------------------" + '\n' + + "Current scroll position: " + event.currentTarget.scrollPosition + '\n' + + "The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' + + "The minimum scroll position: " + event.currentTarget.minScrollPosition ; + } + ]]> + </fx:Script> + + <mx:Panel id="panel" title="VScrollBar Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Label width="100%" + text="Click on the scroll bar to view its properties."/> + + <mx:VScrollBar id="bar" height="100%" + minScrollPosition="0" maxScrollPosition="{panel.width - 20}" + lineScrollSize="50" pageScrollSize="100" + repeatDelay="1000" repeatInterval="500" + scroll="myScroll(event)"/> + + <mx:TextArea height="100%" width="100%" id="showPosition"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml b/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml new file mode 100755 index 0000000..4db2057 --- /dev/null +++ b/tourdeflexmodules/src/mx/controls/VideoDisplayExample.mxml @@ -0,0 +1,40 @@ +<?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 VideoDisplay control. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <mx:Panel title="VideoDisplay Control Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="75%" + text="Use the buttons to control the video. The Stop button resets the video to the beginning."/> + + <mx:VideoDisplay id="myVid" height="158" width="211" source="assets/FlexInstaller.mp4" autoPlay="false"/> + + <mx:HBox> + <mx:Button label="Play" click="myVid.play()"/> + <mx:Button label="Pause" click="myVid.pause()"/> + <mx:Button label="Stop" click="myVid.stop()"/> + </mx:HBox> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png new file mode 100644 index 0000000..e68d831 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexIcon.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png new file mode 100644 index 0000000..4ff037f Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/ApacheFlexLogo.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif b/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif new file mode 100755 index 0000000..9a19d26 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/buttonDisabled.gif differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif b/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif new file mode 100755 index 0000000..18c0ea4 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/buttonDown.gif differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif b/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif new file mode 100755 index 0000000..9c66b81 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/buttonOver.gif differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif b/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif new file mode 100755 index 0000000..36dfb34 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/buttonUp.gif differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4 ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4 b/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4 new file mode 100644 index 0000000..8c877c4 Binary files /dev/null and b/tourdeflexmodules/src/mx/controls/assets/flexinstaller.mp4 differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/core/RepeaterExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/core/RepeaterExample.mxml b/tourdeflexmodules/src/mx/core/RepeaterExample.mxml new file mode 100755 index 0000000..aec6605 --- /dev/null +++ b/tourdeflexmodules/src/mx/core/RepeaterExample.mxml @@ -0,0 +1,54 @@ +<?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 Repeater class. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.controls.Alert; + + [Bindable] + private var dp:Array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + + ]]> + </fx:Script> + + <mx:Panel title="Repeater Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Use the Repeater class to create 9 Button controls in a 3 by 3 Tile container."/> + + <mx:Tile direction="horizontal" borderStyle="inset" + horizontalGap="10" verticalGap="15" + paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10"> + + <mx:Repeater id="rp" dataProvider="{dp}"> + <mx:Button height="49" width="50" + label="{String(rp.currentItem)}" + click="Alert.show(String(event.currentTarget.getRepeaterItem()) + ' pressed')"/> + </mx:Repeater> + </mx:Tile> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml b/tourdeflexmodules/src/mx/core/SimpleApplicationExample.mxml new file mode 100755 index 0000000..8585317 --- /dev/null +++ b/tourdeflexmodules/src/mx/core/SimpleApplicationExample.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. + --> + +<!-- Simple example to demonstrate the Application container. --> + +<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + backgroundColor="0xCCCCCC" borderStyle="solid" + horizontalAlign="center" verticalAlign="middle" + applicationComplete="appComplete()"> + + <fx:Script> + <![CDATA[ + + // Event handlers for the components. + private function appComplete():void { + myTA.text+="Application creation complete" + "\n"; + } + + private function panelCreationComplete():void { + myTA.text+="Panel creation complete" + "\n"; + } + + private function textAreaCreationComplete():void { + myTA.text+="\n" + "TextArea creation complete" + "\n"; + } + ]]> + </fx:Script> + + <mx:ApplicationControlBar dock="true"> + <mx:Button label="Set Grey Solid Fill" + click="this.setStyle('backgroundColor', 0xCCCCCC)"/> + <mx:Button label="Set Blue Solid Fill" + click="this.setStyle('backgroundColor', 0x66CCFF)"/> + </mx:ApplicationControlBar> + + <mx:Panel title="Application Container Example" backgroundColor="0x9CB0BA" + width="75%" height="75%" + creationComplete="panelCreationComplete()"> + + <mx:TextArea id="myTA" height="100%" width="100%" + text="Event order: " + creationComplete="textAreaCreationComplete()"/> + + </mx:Panel> +</mx:Application> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml b/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml new file mode 100755 index 0000000..c1cbee2 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/AddItemActionEffectExample.mxml @@ -0,0 +1,103 @@ +<?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. + --> + +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + import mx.effects.easing.Elastic; + import mx.collections.ArrayCollection; + + [Bindable] + private var myDP:ArrayCollection = new ArrayCollection( + ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']); + + private function deleteItem():void { + // As each item is removed, the index of the other items changes. + // So first get the items to delete, then determine their indices + // as you remove them. + var toRemove:Array = []; + for (var i:int = 0; i < tlist0.selectedItems.length; i++) + toRemove.push(tlist0.selectedItems[i]); + for (i = 0; i < toRemove.length; i++) + myDP.removeItemAt(myDP.getItemIndex(toRemove[i])); + } + + private var zcount:int = 0; + private function addItem():void { + // Always add the new item after the third item, + // or after the last item if the length is less than 3. + myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length)); + } + ]]> + </fx:Script> + + <fx:Declarations> + <!-- Define a custom data effect as a Sequence effect. --> + <mx:Sequence id="itemsChangeEffect1"> + <mx:Blur + blurYTo="12" blurXTo="12" + duration="300" + perElementOffset="150" + filter="removeItem"/> + <mx:Parallel> + <mx:Move + duration="750" + easingFunction="{Elastic.easeOut}" + perElementOffset="20"/> + <mx:RemoveItemAction + startDelay="400" + filter="removeItem"/> + <mx:AddItemAction + startDelay="400" + filter="addItem"/> + <mx:Blur + startDelay="410" + blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" + duration="300" + filter="addItem"/> + </mx:Parallel> + </mx:Sequence> + </fx:Declarations> + + <mx:Panel title="AddItemEffect/RemoveItemEffect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <!-- This TileList uses a custom data change effect --> + <mx:TileList id="tlist0" + height="100%" width="100%" + fontSize="18" fontWeight="bold" + columnCount="4" rowCount="4" + direction="horizontal" + dataProvider="{myDP}" + allowMultipleSelection="true" + offscreenExtraRowsOrColumns="4" + itemsChangeEffect="{itemsChangeEffect1}"/> + + <mx:Button + label="Delete selected item(s)" + click="deleteItem()"/> + <mx:Button + label="Add item" + click="addItem()"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml b/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml new file mode 100755 index 0000000..abc7fd2 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/AnimatePropertyEffectExample.mxml @@ -0,0 +1,42 @@ +<?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 AnimateProperty effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Declarations> + <mx:Sequence id="animateScaleXUpDown" > + <mx:AnimateProperty property="scaleX" fromValue="1" toValue="1.5" duration="1000" /> + <mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1" duration="1000" /> + </mx:Sequence> + </fx:Declarations> + + <mx:Panel title="AnimateProperty Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Click on the image to use the AnimateProperty effect with the scaleX property."/> + + <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')" + mouseDownEffect="{animateScaleXUpDown}" width="50%" height="50%" /> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml b/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml new file mode 100755 index 0000000..9fd88bb --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/BlurEffectExample.mxml @@ -0,0 +1,46 @@ +<?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. + --> + +<!-- Simple example to demonstrate the Blur effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Declarations> + <mx:Blur id="blurImage" duration="1000" + blurXFrom="0.0" blurXTo="10.0" + blurYFrom="0.0" blurYTo="10.0"/> + <mx:Blur id="unblurImage" duration="1000" + blurXFrom="10.0" blurXTo="0.0" + blurYFrom="10.0" blurYTo="0.0"/> + </fx:Declarations> + + <mx:Panel title="Blur Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Click and hold the mouse on the image to see blurImage effect. Release the mouse to see the unblurImage effect."/> + + <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + mouseDownEffect="{blurImage}" + mouseUpEffect="{unblurImage}"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml b/tourdeflexmodules/src/mx/effects/CompositeEffectExample.mxml new file mode 100755 index 0000000..a20205a --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/CompositeEffectExample.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. + --> + +<!-- Simple example to demonstrate the Composite effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + import mx.effects.Move; + import mx.effects.Sequence; + import mx.effects.Parallel; + + private var movesequenceA:Move; + private var movesequenceB:Move; + private var moveparallelbutton:Move; + private var sequenceAB:Sequence; + private var parallelAB:Parallel; + + private function startEffect(ax:Number, ay:Number, bx:Number, by:Number):void + { + movesequenceA= new Move(a); + movesequenceB= new Move(b); + moveparallelbutton= new Move(button); + sequenceAB= new Sequence(); + parallelAB= new Parallel(); + + sequenceAB.addChild(movesequenceA); + sequenceAB.addChild(movesequenceB); + + parallelAB.addChild(moveparallelbutton); + + moveparallelbutton.xTo=0; + moveparallelbutton.xFrom= 245; + moveparallelbutton.yFrom=85; + moveparallelbutton.duration= 4000; + + movesequenceA.xTo= ax; + movesequenceA.xBy= 200; + movesequenceA.yTo= ay; + movesequenceA.yBy= 175; + movesequenceA.duration= 2000; + movesequenceB.yFrom =175; + movesequenceB.xTo= bx; + movesequenceB.xBy= 200; + movesequenceB.yTo= by; + movesequenceB.yBy= 200; + movesequenceB.duration= 2000; + + sequenceAB.play(); + parallelAB.play(); + } + ]]> + </fx:Script> + + <mx:Panel title="Composite Effect" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Canvas id="canvas" width="100%" height="100%"> + + <mx:Label id="a" color="#009966" text="Sequence 1" + height="{(canvas.height-20)/2}" + width="{(canvas.width-20)/2}" + effectStart=" a.text= 'sequence 1 Running'" + effectEnd="a.text='sequence 1 ended!!!' "/> + + <mx:Label id="b" x="0" y="175" color="#00CCFF" + text="Sequence 2" + height="{(canvas.height-20)/2}" + width="{(canvas.width-20)/2}" + effectStart=" b.text= 'sequence 2 Running'" + effectEnd="b.text='sequence 2 ended!!'" /> + + <mx:Button id="button" x="245" y="85" + label="Start effect" + click="startEffect(200,175,200,0)" + effectStart="button.label='parallel effect running'" + effectEnd="button.label='parallel effect ended!!'"/> + + </mx:Canvas> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml new file mode 100755 index 0000000..b147c00 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/DefaultListEffectExample.mxml @@ -0,0 +1,80 @@ +<?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. + --> + +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + import mx.effects.DefaultListEffect; + import mx.collections.ArrayCollection; + + [Bindable] + private var myDP:ArrayCollection = new ArrayCollection( + ['A','B','C','D','E','F','G','H']); + + private function deleteItem():void { + // As each item is removed, the index of the other items changes. + // So first get the items to delete, then determine their indices + // as you remove them. + var toRemove:Array = []; + for (var i:int = 0; i < list0.selectedItems.length; i++) + toRemove.push(list0.selectedItems[i]); + for (i = 0; i < toRemove.length; i++) + myDP.removeItemAt(myDP.getItemIndex(toRemove[i])); + } + + private var zcount:int = 0; + private function addItem():void { + // Always add the new item after the third item, + // or after the last item if the length is less than 3. + myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length)); + } + ]]> + </fx:Script> + + <fx:Declarations> + <!-- Define an instance of the DefaultListEffect effect, + and set its fadeOutDuration and color properties. --> + <mx:DefaultListEffect id="myDLE" + fadeOutDuration="1000" + color="0x0000ff"/> + </fx:Declarations> + + <mx:Panel title="DefaultListEffect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:List id="list0" + width="150" + dataProvider="{myDP}" + variableRowHeight="true" + fontSize="18" + allowMultipleSelection="true" + itemsChangeEffect="{myDLE}"/> + + <mx:Button + label="Delete item" + click="deleteItem()"/> + <mx:Button + label="Add item" + click="addItem()"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml new file mode 100755 index 0000000..e75b4be --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/DefaultTileListEffectExample.mxml @@ -0,0 +1,82 @@ +<?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. + --> + +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + import mx.effects.DefaultTileListEffect; + import mx.effects.easing.Elastic; + import mx.collections.ArrayCollection; + import mx.effects.Move; + + [Bindable] + private var myDP:ArrayCollection = new ArrayCollection( + ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']); + + private function deleteItems():void { + // As each item is removed, the index of the other items changes. + // So first get the items to delete, then determine their indices + // as you remove them. + var toRemove:Array = []; + for (var i:int = 0; i < tlist0.selectedItems.length; i++) + toRemove.push(tlist0.selectedItems[i]); + for (i = 0; i < toRemove.length; i++) + myDP.removeItemAt(myDP.getItemIndex(toRemove[i])); + } + + private var zcount:int = 0; + private function addItems():void { + myDP.addItemAt("Z"+zcount++,Math.min(2,myDP.length)); + } + ]]> + </fx:Script> + + <fx:Declarations> + <!-- Define an instance of the DefaultTileListEffect effect, + and set its moveDuration and color properties. --> + <mx:DefaultTileListEffect id="myDTLE" + moveDuration="100" + color="0x0000ff"/> + </fx:Declarations> + + <mx:Panel title="DefaultTileListEffect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:TileList id="tlist0" + height="100%" width="100%" + columnCount="4" rowCount="4" + fontSize="18" fontWeight="bold" + direction="horizontal" + dataProvider="{myDP}" + allowMultipleSelection="true" + offscreenExtraRowsOrColumns="2" + itemsChangeEffect="{myDTLE}" /> + + <mx:Button + label="Delete selected item(s)" + click="deleteItems()"/> + <mx:Button + label="Add item" + click="addItems()"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml b/tourdeflexmodules/src/mx/effects/DissolveEffectExample.mxml new file mode 100755 index 0000000..aaeb4eb --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/DissolveEffectExample.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. + --> + +<!-- Simple example to demonstrate the Dissolve effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + + <fx:Declarations> + <mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> + <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> + </fx:Declarations> + + <mx:Panel title="Dissolve Effect Example" layout="horizontal" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:VBox height="100%"> + <mx:Label text="Apache Flex" + fontSize="14" + visible="{cb1.selected}" + hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/> + + <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + visible="{cb1.selected}" + hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/> + </mx:VBox> + + <mx:VBox height="100%" width="100%"> + <mx:Text width="100%" + text="Use the Dissolve effect to show or hide the text, image, and button."/> + + <mx:Spacer height="100%"/> + + <mx:Button label="Purchase" + visible="{cb1.selected}" + hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/> + </mx:VBox> + + <mx:ControlBar> + <mx:CheckBox id="cb1" label="visible" selected="true"/> + </mx:ControlBar> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml b/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml new file mode 100755 index 0000000..3604688 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/FadeEffectExample.mxml @@ -0,0 +1,57 @@ +<?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 Fade effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Style> + @font-face { + src:url("./assets/OpenSans-Regular.ttf"); + fontFamily: OpenSans; + embedAsCFF: false; + } + </fx:Style> + + <fx:Declarations> + <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> + <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> + </fx:Declarations> + + <mx:Panel title="Fade Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Use the Fade effect to show or hide the text and image. Use an embedded font when applying the Fade effect to text."/> + + <mx:Label text="Apache Flex" + fontFamily="OpenSans" fontSize="14" + visible="{cb1.selected}" + hideEffect="{fadeOut}" showEffect="{fadeIn}"/> + + <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + visible="{cb1.selected}" + hideEffect="{fadeOut}" showEffect="{fadeIn}"/> + + <mx:CheckBox id="cb1" label="visible" selected="true"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml b/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml new file mode 100755 index 0000000..8c2b308 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/GlowEffectExample.mxml @@ -0,0 +1,50 @@ +<?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. + --> + +<!-- Simple example to demonstrate the Glow effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Declarations> + <mx:Glow id="glowImage" duration="1000" + alphaFrom="1.0" alphaTo="0.3" + blurXFrom="0.0" blurXTo="50.0" + blurYFrom="0.0" blurYTo="50.0" + color="0x00FF00"/> + <mx:Glow id="unglowImage" duration="1000" + alphaFrom="0.3" alphaTo="1.0" + blurXFrom="50.0" blurXTo="0.0" + blurYFrom="50.0" blurYTo="0.0" + color="0x0000FF"/> + </fx:Declarations> + + <mx:Panel title="Glow Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/> + + <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + mouseDownEffect="{glowImage}" + mouseUpEffect="{unglowImage}"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml b/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml new file mode 100755 index 0000000..e29ef27 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/IrisEffectExample.mxml @@ -0,0 +1,44 @@ +<?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 Iris effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Declarations> + <mx:Iris id="irisOut" duration="1000" showTarget="true"/> + <mx:Iris id="irisIn" duration="1000" showTarget="false"/> + </fx:Declarations> + + <mx:Panel title="Iris Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Use the Iris effect to show or hide the logo."/> + + <mx:Image id="flex" source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + visible="{cb1.selected}" + showEffect="{irisIn}" hideEffect="{irisOut}"/> + + <mx:CheckBox id="cb1" label="visible" selected="true"/> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml b/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml new file mode 100755 index 0000000..ede9fa3 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/MoveEffectExample.mxml @@ -0,0 +1,54 @@ +<?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 Move effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + + private function moveImage():void { + myMove.end(); + myMove.xTo=mouseX-60; + myMove.play(); + } + ]]> + </fx:Script> + + <fx:Declarations> + <mx:Move id="myMove" target="{img}"/> + </fx:Declarations> + + <mx:Panel title="Move Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Click anywhere on the canvas to move the logo horizontally to that position"/> + + <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage()"> + + <mx:Image id="img" source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%"/> + + </mx:Canvas> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml b/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml new file mode 100755 index 0000000..3456ce4 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/ParallelEffectExample.mxml @@ -0,0 +1,54 @@ +<?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 Parallel effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Declarations> + <mx:Parallel id="expand" target="{img}"> + <mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2 - 100}"/> + <mx:Resize widthTo="100" heightTo="200"/> + </mx:Parallel> + + <mx:Parallel id="contract" target="{img}"> + <mx:Move xTo="20" yTo="20"/> + <mx:Resize widthTo="30" heightTo="60"/> + </mx:Parallel> + </fx:Declarations> + + <mx:Panel title="Parallel Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Use the Button controls to move and resize the logo in parallel."/> + + <mx:Canvas id="canvas" width="100%" height="100%"> + <mx:Image id="img" x="20" y="20" width="30" height="60" + source="@Embed(source='assets/ApacheFlexLogo.png')"/> + </mx:Canvas> + + <mx:ControlBar> + <mx:Button label="Expand" click="expand.end(); expand.play()"/> + <mx:Button label="Contract" click="contract.end(); contract.play()"/> + </mx:ControlBar> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml b/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml new file mode 100755 index 0000000..8b12112 --- /dev/null +++ b/tourdeflexmodules/src/mx/effects/PauseEffectExample.mxml @@ -0,0 +1,50 @@ +<?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. + --> + +<!-- Simple example to demonstrate the Pause effect. --> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:mx="library://ns.adobe.com/flex/mx" + paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" + height="100%" width="100%"> + + <fx:Script> + <![CDATA[ + import mx.effects.easing.*; + ]]> + </fx:Script> + + <fx:Declarations> + <mx:Sequence id="movePauseMove"> + <mx:Move xBy="150" duration="2000" easingFunction="Bounce.easeOut"/> + <mx:Pause duration="2000"/> + <mx:Move xBy="-150" duration="2000" easingFunction="Bounce.easeIn"/> + </mx:Sequence> + </fx:Declarations> + + <mx:Panel title="Pause Effect Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" + text="Click the logo to start the Sequence effect. The effect pauses for 2 seconds between moves."/> + + <mx:Image source="@Embed(source='assets/ApacheFlexLogo.png')" + width="50%" height="50%" + mouseDownEffect="{movePauseMove}"/> + + </mx:Panel> +</mx:Module>
