http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml new file mode 100755 index 0000000..4b104b6 --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/EmailValidatorExample.mxml @@ -0,0 +1,48 @@ +<?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 EmailValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:EmailValidator source="{email}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')"/> + </fx:Declarations> + + <mx:Panel title="EmailValidator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter an e-mail address: "> + <mx:TextInput id="email" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> + </mx:Module>
http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml new file mode 100755 index 0000000..49a03ac --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/NumberValidatorExample.mxml @@ -0,0 +1,49 @@ +<?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 NumberValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value" + minValue="18" maxValue="50" domain="int" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')"/> + </fx:Declarations> + + <mx:Panel title="NumberValidator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter an age between 18 and 50: "> + <mx:TextInput id="age" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml new file mode 100755 index 0000000..11b3a5c --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/PhoneNumberValidatorExample.mxml @@ -0,0 +1,48 @@ +<?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 PhoneNumberValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:PhoneNumberValidator source="{phone}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')" /> + </fx:Declarations> + + <mx:Panel title="Phone Number Validator Panel" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter 10-digit phone number: "> + <mx:TextInput id="phone" width="100%" /> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml new file mode 100755 index 0000000..c306b27 --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/RegExValidatorExample.mxml @@ -0,0 +1,88 @@ +<?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 RegExpValidator. --> +<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.ValidationResultEvent; + import mx.validators.*; + + // Write the results to the + private function handleResult(eventObj:ValidationResultEvent):void { + if (eventObj.type == ValidationResultEvent.VALID) + { + // For valid events, the results Array contains + // RegExpValidationResult objects. + var xResult:RegExpValidationResult; + reResults.text=""; + for (var i:uint = 0; i < eventObj.results.length; i++) + { + xResult = eventObj.results[i]; + reResults.text=reResults.text + xResult.matchedIndex + " " + + xResult.matchedString + "\n"; + } + } + else + { + reResults.text=""; + } + } + ]]> + </fx:Script> + + <fx:Declarations> + <mx:RegExpValidator id="regExpV" + source="{regex_text}" property="text" + flags="g" expression="{regex.text}" + valid="handleResult(event)" invalid="handleResult(event)" + trigger="{myButton}" triggerEvent="click"/> + </fx:Declarations> + + <mx:Panel title="RegExpValidator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Text width="100%" text="Instructions:"/> + <mx:Text width="100%" text="1. Enter text to search. By default, enter a string containing the letters ABC in sequence followed by any digit."/> + <mx:Text width="100%" text="2. Enter the regular expression. By default, enter ABC\d."/> + <mx:Text width="100%" text="3. Click the Button control to trigger the validation."/> + <mx:Text width="100%" text="4. The results show the index in the text where the matching pattern begins, and the matching pattern. "/> + + <mx:Form> + <mx:FormItem label="Enter text: "> + <mx:TextInput id="regex_text" text="xxxxABC4xxx" width="100%"/> + </mx:FormItem> + + <mx:FormItem label="Enter regular expression: "> + <mx:TextInput id="regex" text="ABC\d" width="100%"/> + </mx:FormItem> + + <mx:FormItem label="Results: "> + <mx:TextInput id="reResults" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate"/> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml new file mode 100755 index 0000000..010bc72 --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/SimpleValidatorExample.mxml @@ -0,0 +1,79 @@ +<?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 Validator 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 necessary classes. + import mx.controls.Alert; + import mx.events.ValidationResultEvent; + + // Event listener for the valid and invalid events. + private function handleValid(eventObj:ValidationResultEvent):void { + if(eventObj.type==ValidationResultEvent.VALID) + // Enable Submit button. + submitButton.enabled = true; + else + submitButton.enabled = false; + } + + // Submit form is everything is valid. + private function submitForm():void { + Alert.show("Form Submitted!"); + } + + ]]> + </fx:Script> + + <!-- The Validator class defines the required property and the validator events + used by all validator subclasses. --> + <fx:Declarations> + <mx:Validator id="reqValid" required="true" + source="{fname}" property="text" + valid="handleValid(event)" invalid="handleValid(event)"/> + </fx:Declarations> + + <mx:Panel title="Validator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:Text width="100%" + text="Enter a value in the Name field before you can submit. The E-mail field is optional."/> + + <mx:FormItem label="Name: " required="true"> + <mx:TextInput id="fname" width="100%"/> + </mx:FormItem> + + <mx:FormItem label="E-mail address: " required="false"> + <mx:TextInput id="email" width="100%"/> + </mx:FormItem> + + <mx:FormItem> + <mx:Button id="submitButton" enabled="false" + label="Submit" click="submitForm()"/> + </mx:FormItem> + </mx:Form> + + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml new file mode 100755 index 0000000..e2f8e8a --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/SocialSecurityValidatorExample.mxml @@ -0,0 +1,48 @@ +<?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 SocialSecurityValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:SocialSecurityValidator source="{ssn}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')"/> + </fx:Declarations> + + <mx:Panel title="Social Security Validator Panel" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter Social Security number: "> + <mx:TextInput id="ssn" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml new file mode 100755 index 0000000..833e00f --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/StringValidatorExample.mxml @@ -0,0 +1,51 @@ +<?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 StringValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:StringValidator source="{fname}" property="text" + tooShortError="This string is shorter than the minimum allowed length of 4. " + tooLongError="This string is longer than the maximum allowed length of 20." + minLength="4" maxLength="20" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')"/> + </fx:Declarations> + + <mx:Panel title="StringValidator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter a name between 4 and 20 characters: "> + <mx:TextInput id="fname" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml b/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml new file mode 100755 index 0000000..af5678a --- /dev/null +++ b/tourdeflexmodules/src/mx/validators/ZipCodeValidatorExample.mxml @@ -0,0 +1,48 @@ +<?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 ZipCodeValidator. --> +<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> + import mx.controls.Alert; + </fx:Script> + + <fx:Declarations> + <mx:ZipCodeValidator source="{zip}" property="text" + trigger="{myButton}" triggerEvent="click" + valid="Alert.show('Validation Succeeded!')"/> + </fx:Declarations> + + <mx:Panel title="ZipcodeValidator Example" + paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" + height="100%" width="100%"> + + <mx:Form> + <mx:FormItem label="Enter a 5 or 9 digit U.S. Zip code: "> + <mx:TextInput id="zip" width="100%"/> + </mx:FormItem> + + <mx:FormItem > + <mx:Button id="myButton" label="Validate" /> + </mx:FormItem> + </mx:Form> + </mx:Panel> +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml b/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml new file mode 100644 index 0000000..017514e --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/AreaChartExample.mxml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var expensesAC:ArrayCollection = new ArrayCollection( [ + { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, + { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, + { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 }, + { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 }, + { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]); + ]]> + </fx:Script> + + <s:Panel title="AreaChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:AreaChart id="Areachart" color="0x323232" height="100%" + showDataTips="true" dataProvider="{expensesAC}"> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Month"/> + </mx:horizontalAxis> + + <mx:series> + <mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/> + <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/> + <mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/> + </mx:series> + </mx:AreaChart> + + <mx:Legend dataProvider="{Areachart}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/BarChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/BarChartExample.mxml b/tourdeflexmodules/src/spark/charts/BarChartExample.mxml new file mode 100644 index 0000000..89e7fef --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/BarChartExample.mxml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var medalsAC:ArrayCollection = new ArrayCollection( [ + { Country: "USA", Gold: 35, Silver:39, Bronze: 29 }, + { Country: "China", Gold: 32, Silver:17, Bronze: 14 }, + { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]); + ]]> + </fx:Script> + + <s:Panel title="BarChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:BarChart id="bar" height="100%" color="0x323232" + showDataTips="true" dataProvider="{medalsAC}"> + + <mx:verticalAxis> + <mx:CategoryAxis categoryField="Country"/> + </mx:verticalAxis> + + <mx:series> + <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/> + <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/> + <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/> + </mx:series> + </mx:BarChart> + + <mx:Legend dataProvider="{bar}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml b/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml new file mode 100644 index 0000000..fad0fd0 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/BubbleChartExample.mxml @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var expensesAC:ArrayCollection = new ArrayCollection( [ + { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, + { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, + { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 }, + { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 }, + { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]); + ]]> + </fx:Script> + + <fx:Style> + @namespace mx "library://ns.adobe.com/flex/mx"; + + mx|BubbleChart { color:#000099; } + </fx:Style> + + <s:Panel title="BubbleChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" maxRadius="20" dataProvider="{expensesAC}"> + + <mx:series> + <mx:BubbleSeries displayName="Profit/Expenses/Amount" + xField="Profit" yField="Expenses" radiusField="Amount"/> + </mx:series> + </mx:BubbleChart> + + <mx:Legend dataProvider="{bubblechart}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml b/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml new file mode 100644 index 0000000..3a0307a --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/CandleStickChartExample.mxml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var expensesAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + ]]> + </fx:Script> + + <s:Panel title="CandlestickChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" + color="0x323232" showDataTips="true" dataProvider="{expensesAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries openField="Open" highField="High" + lowField="Low" closeField="Close"/> + </mx:series> + + </mx:CandlestickChart> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml b/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml new file mode 100644 index 0000000..e9415f8 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/ColumnChartExample.mxml @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var medalsAC:ArrayCollection = new ArrayCollection( [ + { Country: "USA", Gold: 35, Silver:39, Bronze: 29 }, + { Country: "China", Gold: 32, Silver:17, Bronze: 14 }, + { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]); + ]]> + </fx:Script> + + <s:Panel title="ColumnChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:ColumnChart id="column" height="100%" color="0x323232" + showDataTips="true" dataProvider="{medalsAC}"> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Country"/> + </mx:horizontalAxis> + + <mx:series> + <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/> + <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/> + <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/> + </mx:series> + </mx:ColumnChart> + + <mx:Legend dataProvider="{column}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml b/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml new file mode 100644 index 0000000..d67dec7 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/HLOCChartExample.mxml @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var stockDataAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.55, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 40.15, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + ]]> + </fx:Script> + + <s:Panel title="HLOCChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" + color="0x323232" showDataTips="true" dataProvider="{stockDataAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date" /> + </mx:horizontalAxis> + + <mx:series> + <mx:HLOCSeries openField="Open" highField="High" + lowField="Low" closeField="Close"/> + </mx:series> + </mx:HLOCChart> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/LineChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/LineChartExample.mxml b/tourdeflexmodules/src/spark/charts/LineChartExample.mxml new file mode 100644 index 0000000..b6077da --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/LineChartExample.mxml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var expensesAC:ArrayCollection = new ArrayCollection( [ + { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, + { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, + { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 }, + { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 }, + { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]); + ]]> + </fx:Script> + + <s:Panel title="LineChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:LineChart id="linechart" color="0x323232" height="100%" + showDataTips="true" dataProvider="{expensesAC}"> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Month"/> + </mx:horizontalAxis> + + <mx:series> + <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/> + <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/> + <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/> + </mx:series> + </mx:LineChart> + + <mx:Legend dataProvider="{linechart}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/PieChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/PieChartExample.mxml b/tourdeflexmodules/src/spark/charts/PieChartExample.mxml new file mode 100644 index 0000000..df83fc1 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/PieChartExample.mxml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var medalsAC:ArrayCollection = new ArrayCollection( [ + { Country: "USA", Gold: 35, Silver:39, Bronze: 29 }, + { Country: "China", Gold: 32, Silver:17, Bronze: 14 }, + { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]); + + private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String { + var temp:String= (" " + percentValue).substr(0,6); + return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%"; + } + ]]> + </fx:Script> + + <s:Panel title="PieChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{medalsAC}" > + + <mx:series> + <mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold"> + <mx:calloutStroke> + <s:SolidColorStroke weight="0" color="0x888888" alpha="1.0"/> + </mx:calloutStroke> + <mx:radialStroke> + <s:SolidColorStroke weight="0" color="#FFFFFF" alpha="0.20"/> + </mx:radialStroke> + <mx:stroke> + <s:SolidColorStroke color="0" alpha="0.20" weight="2"/> + </mx:stroke> + </mx:PieSeries> + </mx:series> + </mx:PieChart> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml b/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml new file mode 100644 index 0000000..87cc9a8 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/PlotChartExample.mxml @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var expensesAC:ArrayCollection = new ArrayCollection( [ + { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, + { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, + { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]); + ]]> + </fx:Script> + + <s:Panel title="PlotChart Control" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5" color="0x323232" + showDataTips="true" dataProvider="{expensesAC}"> + + <mx:series> + <mx:PlotSeries xField="Expenses" yField="Profit" displayName="Expenses/Profit"/> + <mx:PlotSeries xField="Amount" yField="Expenses" displayName="Amount/Expenses"/> + <mx:PlotSeries xField="Profit" yField="Amount" displayName="Profit/Amount"/> + </mx:series> + </mx:PlotChart> + + <mx:Legend dataProvider="{plot}" color="0x323232"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml new file mode 100644 index 0000000..4a2e059 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/SeriesInterpolateExample.mxml @@ -0,0 +1,105 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <fx:Declarations> + <mx:SeriesInterpolate id="interpolateIn" duration="1000"/> + </fx:Declarations> + + <s:Panel title="Interpolate Effect" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{interpolateIn}"/> + </mx:series> + </mx:CandlestickChart> + + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC"/> + </s:BorderContainer> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml new file mode 100644 index 0000000..d7783e7 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/SeriesSlideExample.mxml @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <fx:Declarations> + <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/> + <mx:SeriesSlide id="slideOut" duration="1000" direction="down"/> + </fx:Declarations> + + + <s:Panel title="Slide Effect" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{slideIn}" + hideDataEffect="{slideOut}"/> + </mx:series> + </mx:CandlestickChart> + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC"/> + </s:BorderContainer> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml b/tourdeflexmodules/src/spark/charts/SeriesZoomExample.mxml new file mode 100644 index 0000000..1be8888 --- /dev/null +++ b/tourdeflexmodules/src/spark/charts/SeriesZoomExample.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:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx"> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + [Bindable] + private var companyAAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31}, + { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34}, + { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63}, + { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98}, + { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95}, + { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, + { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, + { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, + { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, + { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); + + [Bindable] + private var companyBAC:ArrayCollection = new ArrayCollection( [ + { Date: "25-Jul", Open: 18.50, High: 19, Low: 18.48, Close:18.86}, + { Date: "26-Jul", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69}, + { Date: "27-Jul", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12}, + { Date: "28-Jul", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84}, + { Date: "29-Jul", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6}, + { Date: "1-Aug", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95}, + { Date: "2-Aug", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98}, + { Date: "3-Aug", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63}, + { Date: "4-Aug", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34}, + { Date: "5-Aug", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]); + + ]]> + </fx:Script> + + <fx:Declarations> + <mx:SeriesZoom id="zoomIn" duration="1000"/> + <mx:SeriesZoom id="zoomOut" duration="1000"/> + </fx:Declarations> + + + <s:Panel title="Zoom Effect" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <mx:CandlestickChart id="candlestickchart" height="100%" paddingRight="5" paddingLeft="5" color="0x323232" + showDataTips="true" dataProvider="{companyAAC}"> + + <mx:verticalAxis> + <mx:LinearAxis baseAtZero="false" /> + </mx:verticalAxis> + + <mx:horizontalAxis> + <mx:CategoryAxis categoryField="Date" title="Date"/> + </mx:horizontalAxis> + + <mx:series> + <mx:CandlestickSeries + openField="Open" highField="High" + lowField="Low" closeField="Close" + showDataEffect="{zoomIn}" + hideDataEffect="{zoomOut}"/> + </mx:series> + </mx:CandlestickChart> + + <s:BorderContainer color="0x323232" width="30%" borderColor="0xDCDCDC" borderStyle="solid" height="100%"> + <s:layout> + <s:VerticalLayout paddingLeft="5" paddingRight="0" paddingTop="5" /> + </s:layout> + + <s:Label color="0x0050AA" width="100%" + text="Choose a company to view recent stock data."/> + + <s:RadioButton groupName="stocks" label="View Company A" + selected="true" click="candlestickchart.dataProvider=companyAAC"/> + <s:RadioButton groupName="stocks" label="View Company B" + click="candlestickchart.dataProvider=companyBAC"/> + </s:BorderContainer> + + </s:Panel> +</s:Module> + http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/SearchBox.as ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/SearchBox.as b/tourdeflexmodules/src/spark/components/SearchBox.as new file mode 100644 index 0000000..e263c2c --- /dev/null +++ b/tourdeflexmodules/src/spark/components/SearchBox.as @@ -0,0 +1,176 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + import flash.events.Event; + import flash.events.KeyboardEvent; + import flash.events.MouseEvent; + import flash.geom.Point; + import flash.ui.Keyboard; + + import mx.collections.ArrayCollection; + import mx.controls.Button; + import mx.controls.List; + import mx.controls.TextInput; + import mx.core.UIComponent; + import mx.events.FlexEvent; + import mx.events.FlexMouseEvent; + import mx.events.ListEvent; + import mx.managers.PopUpManager; + + [Event(name="textChange", type="flash.events.Event")] + [Event(name="itemSelected", type="SearchBoxEvent")] + + public class SearchBox extends UIComponent + { + [Embed("assets/icon_close.png")] + private var closeIcon:Class; + + private var textInput:TextInput; + private var closeButton:Button; + private var list:List; + + private var isListVisible:Boolean = false; + + public var text:String; + + public function set dataProvider(dp:ArrayCollection):void + { + list.dataProvider = dp; + if (dp != null && dp.length > 0) + { + if (!isListVisible) popup(); + list.selectedIndex = 0; + } + else + { + if (isListVisible) removePopup(); + } + } + + override protected function createChildren():void + { + super.createChildren(); + + textInput = new TextInput(); + textInput.addEventListener(Event.CHANGE, textInput_changeHandler); + textInput.addEventListener(KeyboardEvent.KEY_DOWN, textInput_keyDownHandler); + addChild(textInput); + + closeButton = new Button(); + closeButton.setStyle("icon", closeIcon) + closeButton.setStyle("skin", null) + closeButton.addEventListener(MouseEvent.CLICK, closeHandler); + closeButton.width = 20; + addChild(closeButton); + + list = new List(); + list.setStyle("dropShadowEnabled", true); + list.addEventListener(ListEvent.ITEM_CLICK, selectItem); + systemManager.addEventListener(Event.RESIZE, removePopup, false, 0, true); + } + + override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void + { + super.updateDisplayList(unscaledWidth, unscaledHeight); + + textInput.width = unscaledWidth - closeButton.width; + textInput.height = unscaledHeight; + + closeButton.height = unscaledHeight; + closeButton.move(unscaledWidth - closeButton.width, 0); + } + + override protected function measure():void + { + super.measure(); + this.measuredWidth = 160; + this.measuredHeight = textInput.measuredHeight; + } + + private function textInput_keyDownHandler(event:KeyboardEvent):void + { + switch (event.keyCode) + { + case Keyboard.DOWN: + if (isListVisible) + list.selectedIndex++; + else + popup(); + break; + case Keyboard.UP: + if (isListVisible && list.selectedIndex > 0) + { + list.selectedIndex--; + } + textInput.setSelection(textInput.text.length, textInput.text.length); + break; + case Keyboard.ENTER: + if (isListVisible) selectItem(); + break; + case Keyboard.ESCAPE: + if (isListVisible) removePopup(); + break; + } + } + + private function textInput_changeHandler(event:Event):void + { + text = textInput.text; + dispatchEvent(new Event("textChange")); + } + + private function list_mouseDownOutsideHandler(event:MouseEvent):void + { + removePopup(); + } + + private function selectItem(event:ListEvent = null):void + { + dispatchEvent(new SearchBoxEvent(SearchBoxEvent.ITEM_SELECTED, list.selectedItem)); + removePopup(); + } + + private function popup():void + { + PopUpManager.addPopUp(list, this); + isListVisible = true; + list.width = textInput.width; + var point:Point = new Point(0, unscaledHeight); + point = localToGlobal(point); + point = list.parent.globalToLocal(point); + list.move(point.x, point.y); + list.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler); + } + + private function removePopup(event:Event=null):void + { + PopUpManager.removePopUp(list); + list.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, list_mouseDownOutsideHandler); + isListVisible = false; + } + + private function closeHandler(event:MouseEvent):void + { + textInput.text = ""; + textInput.setFocus(); + } + + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/SearchBoxEvent.as ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/SearchBoxEvent.as b/tourdeflexmodules/src/spark/components/SearchBoxEvent.as new file mode 100644 index 0000000..28e744f --- /dev/null +++ b/tourdeflexmodules/src/spark/components/SearchBoxEvent.as @@ -0,0 +1,35 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package +{ + import flash.events.Event; + + public class SearchBoxEvent extends Event + { + public static const ITEM_SELECTED:String = "itemSelected"; + + public var item:Object; + + public function SearchBoxEvent(type:String, item:Object, bubbles:Boolean = true, cancelable:Boolean = false) + { + this.item = item; + super(type, bubbles, cancelable); + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/SearchExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/SearchExample.mxml b/tourdeflexmodules/src/spark/components/SearchExample.mxml new file mode 100644 index 0000000..f6a8d06 --- /dev/null +++ b/tourdeflexmodules/src/spark/components/SearchExample.mxml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:local="*"> + + <fx:Style> + @namespace s "library://ns.adobe.com/flex/spark"; + @namespace mx "library://ns.adobe.com/flex/mx"; + @namespace local "*"; + + s|Label { + color: #000000; + } + + </fx:Style> + + <fx:Script> + <![CDATA[ + + import mx.collections.ArrayCollection; + + private var names:ArrayCollection = new ArrayCollection( + ["John Smith", "Jane Doe", "Paul Dupont", "Liz Jones", "Marie Taylor"]); + + private function searchName(item:Object):Boolean + { + return item.toLowerCase().search(searchBox.text) != -1; + } + + private function textChangeHandler():void + { + names.filterFunction = searchName; + names.refresh(); + searchBox.dataProvider = names; + } + + private function itemSelectedHandler(event:SearchBoxEvent):void + { + fullName.text = event.item as String; + } + + ]]> + </fx:Script> + + <s:Panel title="Components Samples" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:HGroup > + <s:Label text="Type a few characters to search:" /> + <local:SearchBox id="searchBox" textChange="textChangeHandler()" itemSelected="itemSelectedHandler(event)"/> + </s:HGroup> + + <mx:FormItem label="You selected:" > + <s:TextInput id="fullName"/> + </mx:FormItem> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/VideoPlayer.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/VideoPlayer.mxml b/tourdeflexmodules/src/spark/components/VideoPlayer.mxml new file mode 100644 index 0000000..b4797ff --- /dev/null +++ b/tourdeflexmodules/src/spark/components/VideoPlayer.mxml @@ -0,0 +1,96 @@ +<?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:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + borderStyle="solid" + backgroundColor="#333333" + initialize="init(event)"> + + <fx:Metadata> + [Event(name="complete", type="mx.events.VideoEvent")] + [Event(name="mediaPlayerStateChange", type="org.osmf.events.MediaPlayerStateChangeEvent")] + </fx:Metadata> + + <fx:Script> + <![CDATA[ + import mx.events.ItemClickEvent; + import mx.events.FlexEvent; + import mx.events.VideoEvent; + + import org.osmf.events.MediaPlayerStateChangeEvent; + import org.osmf.events.TimeEvent; + import org.osmf.utils.OSMFSettings; + + [Bindable] public var videoWidth:int = 240; + [Bindable] public var videoHeight:int = 180; + [Bindable] public var source:String; + + protected function init(event:FlexEvent):void { + OSMFSettings.enableStageVideo = false; + } + + private function buttonBarClick(event:ItemClickEvent):void + { + switch (event.index) + { + case 0: + videoDisplay.play(); + break; + case 1: + videoDisplay.pause(); + break; + case 2: + videoDisplay.stop(); + break; + } + } + + private function playHeadUpdateHandler(event:TimeEvent):void + { + progressBar.setProgress(event.time, videoDisplay.duration); + } + + ]]> + </fx:Script> + + <s:layout> + <s:VerticalLayout verticalAlign="middle" horizontalAlign="center" /> + </s:layout> + + <s:VideoDisplay id="videoDisplay" width="{videoWidth}" height="{videoHeight}" autoPlay="false" + currentTimeChange="playHeadUpdateHandler(event)" + source="{source}" + complete="dispatchEvent(event)" + mediaPlayerStateChange="dispatchEvent(event)"/> + + <mx:ProgressBar id="progressBar" mode="manual" minimum="0" maximum="{videoDisplay.duration}" + label="" top="{videoHeight + 8}" left="4" right="4"/> + + <mx:ButtonBar id="bb" itemClick="buttonBarClick(event)" top="{videoHeight + 20}" bottom="4" + horizontalCenter="0" toolTipField="toolTip"> + <mx:dataProvider> + <fx:Object icon="@Embed('assets/control_play_blue.png')" toolTip="Play"/> + <fx:Object icon="@Embed('assets/control_pause_blue.png')" toolTip="Pause"/> + <fx:Object icon="@Embed('assets/control_stop_blue.png')" toolTip="Stop"/> + </mx:dataProvider> + </mx:ButtonBar> + +</s:BorderContainer> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml new file mode 100644 index 0000000..4ecf77b --- /dev/null +++ b/tourdeflexmodules/src/spark/components/VideoPlayerExample.mxml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:local="*"> + + <s:Panel title="Components Samples" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <local:VideoPlayer source="assets/FlexInstaller.mp4" + complete="log.text += 'complete\n'" + mediaPlayerStateChange="log.text += event.state.toString() + '\n'"/> + + <s:TextArea id="log" height="220"/> + + </s:Panel> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerModule.mxml new file mode 100644 index 0000000..6ec18a7 --- /dev/null +++ b/tourdeflexmodules/src/spark/components/VideoPlayerModule.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. + +--> +<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns="*" + layout="horizontal" + paddingTop="8" + initialize="init(event)"> + + <fx:Script> + <![CDATA[ + import mx.events.FlexEvent; + + import org.osmf.utils.OSMFSettings; + + protected function init(event:FlexEvent):void { + OSMFSettings.enableStageVideo = false; + } + ]]> + </fx:Script> + + <VideoPlayer source="assets/FlexInstaller.mp4" + complete="log.text += 'complete\n'" + mediaPlayerStateChange="log.text += event.state + '\n'"/> + + <s:TextArea id="log" height="220"/> + +</mx:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml b/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml new file mode 100644 index 0000000..f52e4e9 --- /dev/null +++ b/tourdeflexmodules/src/spark/components/VideoPlayerModuleLoader.mxml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +--> +<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:s="library://ns.adobe.com/flex/spark" + xmlns:mx="library://ns.adobe.com/flex/mx" + width="100%" height="100%"> + + <fx:Script> + <![CDATA[ + import mx.controls.Alert; + ]]> + </fx:Script> + + <mx:ModuleLoader url="VideoPlayerModule.swf" width="100%" height="100%" error="Alert.show(event.errorText)"/> + + <s:VideoDisplay/> + +</s:Module> http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4 ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4 b/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4 new file mode 100644 index 0000000..8c877c4 Binary files /dev/null and b/tourdeflexmodules/src/spark/components/assets/FlexInstaller.mp4 differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png b/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png new file mode 100644 index 0000000..ec61099 Binary files /dev/null and b/tourdeflexmodules/src/spark/components/assets/control_pause_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/assets/control_play_blue.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/assets/control_play_blue.png b/tourdeflexmodules/src/spark/components/assets/control_play_blue.png new file mode 100644 index 0000000..f8c8ec6 Binary files /dev/null and b/tourdeflexmodules/src/spark/components/assets/control_play_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png b/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png new file mode 100644 index 0000000..e6f75d2 Binary files /dev/null and b/tourdeflexmodules/src/spark/components/assets/control_stop_blue.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/components/assets/icon_close.png ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/components/assets/icon_close.png b/tourdeflexmodules/src/spark/components/assets/icon_close.png new file mode 100644 index 0000000..bf9be79 Binary files /dev/null and b/tourdeflexmodules/src/spark/components/assets/icon_close.png differ http://git-wip-us.apache.org/repos/asf/flex-examples/blob/9343d391/tourdeflexmodules/src/spark/containers/BorderExample.mxml ---------------------------------------------------------------------- diff --git a/tourdeflexmodules/src/spark/containers/BorderExample.mxml b/tourdeflexmodules/src/spark/containers/BorderExample.mxml new file mode 100644 index 0000000..2a4c65c --- /dev/null +++ b/tourdeflexmodules/src/spark/containers/BorderExample.mxml @@ -0,0 +1,74 @@ +<?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://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ --> +<s:Module name="Spark_Border_cornerRadius_test" + xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mx="library://ns.adobe.com/flex/mx" + xmlns:s="library://ns.adobe.com/flex/spark"> + + <s:Panel title="BorderContainer Sample" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:VGroup id="mainGroup" width="100%" + horizontalCenter="50" top="10"> + <s:HGroup gap="50" paddingBottom="15"> + <s:VGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Corner Radius:"/> + <s:HSlider id="slider" + minimum="0" + maximum="100" + value="2" /> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Border Weight:"/> + <s:NumericStepper id="weight" value="3"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Border Color:"/> + <mx:ColorPicker id="color" color="0x000000"/> + </s:HGroup> + <s:HGroup verticalAlign="middle"> + <s:Label text="Drop Shadow:"/> + <s:CheckBox id="chkShadow" selected="true"/> + </s:HGroup> + </s:VGroup> + + <s:BorderContainer id="brdr" width="200" + cornerRadius="{slider.value}" borderWeight="{weight.value}" + borderColor="{color.selectedColor}" dropShadowVisible="{chkShadow.selected}" + backgroundColor="0x3399ff"> + </s:BorderContainer> + </s:HGroup> + + <s:Label bottom="10" horizontalCenter="0" width="95%" verticalAlign="justify" + text="The Border class provides a container class that can be styled with a border and +a background fill or image. It has many of the same styles as HaloBorder and is used in a similar way to the +Halo container classes such as Box and Canvas. Examples of styles that are supported are borderWeight, borderColor, +backgroundColor, backgroundImage, cornerRadius and dropShadowVisible."/> + </s:VGroup> + + </s:Panel> + + +</s:Module>
