http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml index 96af06a..fd132c9 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCollatorExample.mxml @@ -21,28 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="matchRB_clickHandler()"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - - s|List { - alternating-item-colors: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -114,52 +92,51 @@ } ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:SortingCollator id="sortingCollator"/> <s:MatchingCollator id="matchingCollator"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group id="myGroup"> - <s:Form id="myForm"> - <s:Label id="titleL" text="Spark Collator"/> - <s:Label text="Customize Collator options and find out the string sorting results: "/> - <s:Spacer height="15"/> - - <s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!"> - <s:HGroup> - <s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/> - <s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/> - </s:HGroup> - </s:FormItem> - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" - change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/> - </s:FormItem> - <s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result."> - <s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}" - change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/> - <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}" - change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/> - <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}" - change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/> - <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}" - change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/> - <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}" - change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/> - </s:FormItem> - <s:Label text="============================================================================"/> + <s:Panel title="Spark Collator" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form id="myForm" height="100%" width="100%"> + <s:Label text="Customize Collator options and find out the string sorting results: "/> + <s:Spacer height="15"/> + + <s:FormItem label="Collator Type:" toolTip="Please select a Collator type first!"> <s:HGroup> - <s:FormItem label="Sorting Result:"> - <s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/> - </s:FormItem> + <s:RadioButton id="sortRB" groupName="collatorType" label="SortingCollator" click="sortRB_clickHandler()"/> + <s:RadioButton id="matchRB" groupName="collatorType" label="MatchingCollator" selected="true" click="matchRB_clickHandler()"/> </s:HGroup> - </s:Form> - </s:Group> - </s:Scroller> - + </s:FormItem> + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" + change="_collatorInstance.setStyle('locale',localeCB.selectedItem); sortStr()"/> + </s:FormItem> + <s:FormItem label="Collator Options:" toolTip="Customize below options to see the sorting result."> + <s:CheckBox id="ignCaseCB" label="ignoreCase" selected="{_collatorInstance.ignoreCase}" + change="_collatorInstance.ignoreCase = ignCaseCB.selected; sortStr()"/> + <s:CheckBox id="ignDiacriticsCB" label="ignoreDiacritics" selected="{_collatorInstance.ignoreDiacritics}" + change="_collatorInstance.ignoreDiacritics = ignDiacriticsCB.selected; sortStr()"/> + <s:CheckBox id="ignSymbolsCB" label="ignoreSymbols" selected="{_collatorInstance.ignoreSymbols}" + change="_collatorInstance.ignoreSymbols = ignSymbolsCB.selected; sortStr()"/> + <s:CheckBox id="ignKanaTypeCB" label="ignoreKanaType" selected="{_collatorInstance.ignoreKanaType}" + change="_collatorInstance.ignoreKanaType = ignKanaTypeCB.selected; sortStr()"/> + <s:CheckBox id="ignCharacterWidthCB" label="ignoreCharacterWidth" selected="{_collatorInstance.ignoreCharacterWidth}" + change="_collatorInstance.ignoreCharacterWidth = ignCharacterWidthCB.selected; sortStr()"/> + </s:FormItem> + <s:Label text="============================================================================"/> + <s:HGroup> + <s:FormItem label="Sorting Result:"> + <s:List id="sCltResult" dataProvider="{_resultArrColl}" toolTip="Strings that are equal will show within one line."/> + </s:FormItem> + </s:HGroup> + </s:Form> + + </s:Panel> </s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml index 1c24727..58395c8 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatter2Example.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -46,26 +28,30 @@ private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:CurrencyFormatter id="cf"/> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark CurrencyFormatter"/> - <s:Label text="Format a currency number by using spark CurrencyFormatter"/> - <s:Spacer height="15"/> - <s:FormItem label="Locales"> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/> - </s:FormItem> - <s:FormItem label="Please enter a currency number: "> - <s:TextInput id="inputTI" text="12345"/> - </s:FormItem> - <s:FormItem label="Format result: "> - <s:Label id="resultL" text="{cf.format(inputTI.text)}"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Format a currency number by using spark CurrencyFormatter"/> + <s:Spacer height="15"/> + <s:FormItem label="Locales"> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="cf.setStyle('locale',localeCB.selectedItem)"/> + </s:FormItem> + <s:FormItem label="Please enter a currency number: "> + <s:TextInput id="inputTI" text="12345"/> + </s:FormItem> + <s:FormItem label="Format result: "> + <s:Label id="resultL" text="{cf.format(inputTI.text)}"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml index b198370..b46ba3b 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyFormatterExample.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -59,54 +41,54 @@ ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:CurrencyFormatter id="cf" locale="{localeCB.selectedItem}"/> <s:CurrencyFormatter id="cf_default" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark CurrencyFormatter"/> - <s:Label text="Select a locale to see the property value and formatted currency: "/> - <s:Spacer height="15"/> - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/> - </s:FormItem> - <s:FormItem label="Input a number to format:"> - <s:TextInput id="inputTI" text="12345" change="formatCurr()"/> - </s:FormItem> - <s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})"> - <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/> - </s:FormItem> - <s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})"> - <s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/> - </s:FormItem> - <s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})"> - <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/> - </s:FormItem> - <s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})"> - <s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/> - </s:FormItem> - <s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})"> - <s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/> - </s:FormItem> - <s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})"> - <s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/> - </s:FormItem> - <s:Label text="==================================================================="/> - <s:FormItem label="Formatted Currency with ISO code is:"> - <s:Label id="resultL"/> - </s:FormItem> - <s:FormItem label="Formatted Currency with currency symbol is:"> - <s:Label id="resultSymbolL"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> - - + + + <s:Panel title="Spark CurrencyFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Select a locale to see the property value and formatted currency: "/> + <s:Spacer height="15"/> + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="formatCurr()"/> + </s:FormItem> + <s:FormItem label="Input a number to format:"> + <s:TextInput id="inputTI" text="12345" change="formatCurr()"/> + </s:FormItem> + <s:FormItem label="Fraction Digits: (default: {cf_default.fractionalDigits})"> + <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="cf.fractionalDigits = fdNS.value;formatCurr()"/> + </s:FormItem> + <s:FormItem label="Decimal Separator: (default: {cf_default.decimalSeparator})"> + <s:TextInput id="dsTI" change="cf.decimalSeparator = dsTI.text;formatCurr()"/> + </s:FormItem> + <s:FormItem label="Grouping Pattern: (default: {cf_default.groupingPattern})"> + <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="cf.groupingPattern = gpCB.selectedItem;formatCurr()"/> + </s:FormItem> + <s:FormItem label="Grouping Separator: (default: {cf_default.groupingSeparator})"> + <s:TextInput id="gsTI" change="cf.groupingSeparator = gsTI.text;formatCurr()"/> + </s:FormItem> + <s:FormItem label="Negative Currency Format: (default: {cf_default.negativeCurrencyFormat})"> + <s:NumericStepper id="ncfNS" minimum="0" maximum="15" change="cf.negativeCurrencyFormat = ncfNS.value;formatCurr()"/> + </s:FormItem> + <s:FormItem label="Positive Currency Format: (default: {cf_default.positiveCurrencyFormat})"> + <s:NumericStepper id="pcfNS" middleClick="0" maximum="3" change="cf.positiveCurrencyFormat = pcfNS.value;formatCurr()"/> + </s:FormItem> + <s:Label text="==================================================================="/> + <s:FormItem label="Formatted Currency with ISO code is:"> + <s:Label id="resultL"/> + </s:FormItem> + <s:FormItem label="Formatted Currency with currency symbol is:"> + <s:Label id="resultSymbolL"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml index 05f17de..28a20a3 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidator2Example.mxml @@ -21,23 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -45,27 +28,31 @@ private var _locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','zh-CN','fr-FR']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:CurrencyValidator id="cv" source="{inputTI}" property="text" maxValue="100" domain="int" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark CurrencyValidator"/> - <s:Label text="Validate a currency number by using Spark CurrencyValidator"/> - <s:Spacer height="15"/> - <s:FormItem label="Locales:"> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="Enter a currency number to validate: " - toolTip="The number should be an integer and less than 100"> - <s:TextInput id="inputTI" text="{cv.currencySymbol}" - toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate. - Make focus out of the text input to validate the number."/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark CurrencyValidator" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Validate a currency number by using Spark CurrencyValidator"/> + <s:Spacer height="15"/> + <s:FormItem label="Locales:"> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="Enter a currency number to validate: " + toolTip="The number should be an integer and less than 100"> + <s:TextInput id="inputTI" text="{cv.currencySymbol}" + toolTip="It shows the currency symbol of current locale already, please continue enter numbers to validate. + Make focus out of the text input to validate the number."/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml index c988d93..734c8fa 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkCurrencyValidatorExample.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -64,9 +46,8 @@ ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> - <!--Click Tab key to validate the number--> <s:CurrencyValidator id="cv1" source="{currTI1}" property="text"/> <s:CurrencyValidator id="cv2" source="{currTI2}" property="text"/> @@ -74,52 +55,51 @@ <s:CurrencyValidator id="cv4" source="{currTI4}" property="text" minValue="20" maxValue="200"/> <s:CurrencyValidator id="cv5" source="{currTI5}" property="text" domain="int"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark CurrencyValidator"/> - <s:Label text="Create some criterions and validate the input number: "/> - <s:Spacer height="15"/> - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/> - </s:FormItem> - <s:Label text="============================================================================"/> - <s:FormItem label="Currency symbol and ISO code based on current locale are:"> - <s:HGroup> - <s:Label id="symbolL" text="Currency symbol: {cv1.currencySymbol}"/> - <s:Label id="isoL" text="Currency ISO code: {cv1.currencyISOCode}"/> - </s:HGroup> - </s:FormItem> - <s:FormItem label="Please enter an integer currency number with currency symbol:"> - <s:TextInput id="currTI1" text="{cv1.currencySymbol}" - toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/> - </s:FormItem> - <s:FormItem label="Please enter an integer currency number with currency ISO code:"> - <s:TextInput id="currTI2" text="{cv1.currencyISOCode}" - toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/> - </s:FormItem> - <s:FormItem label="Please enter a currency number with at most two fractional digits:"> - <s:TextInput id="currTI3" - toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/> - </s:FormItem> - <s:FormItem label="Please enter a currency number between 20 and 200:"> - <s:TextInput id="currTI4"/> - </s:FormItem> - <s:FormItem label="Please enter an integer currency number:"> - <s:TextInput id="currTI5"/> - </s:FormItem> - <s:FormItem label="Click the button to validate all inputted currency number:"> - <s:HGroup> - <s:Button label="Validate All" click="button1_clickHandler(event)"/> - <s:Label id="resultL"/> - </s:HGroup> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> - + <s:Panel title="Spark CurrencyValidator" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Create some criterions and validate the input number: "/> + <s:Spacer height="15"/> + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0" updateComplete="localeCB_updateCompleteHandler(event)"/> + </s:FormItem> + <s:Label text="============================================================================"/> + <s:FormItem label="Currency symbol and ISO code based on current locale are:"> + <s:HGroup> + <s:Label id="symbolL" text="Currency symbol: {cv1.currencySymbol}"/> + <s:Label id="isoL" text="Currency ISO code: {cv1.currencyISOCode}"/> + </s:HGroup> + </s:FormItem> + <s:FormItem label="Please enter an integer currency number with currency symbol:"> + <s:TextInput id="currTI1" text="{cv1.currencySymbol}" + toolTip="Here is the correct currency symbol of current locale, please continue enter numbers to validate"/> + </s:FormItem> + <s:FormItem label="Please enter an integer currency number with currency ISO code:"> + <s:TextInput id="currTI2" text="{cv1.currencyISOCode}" + toolTip="Here is the correct currency ISO code of current locale, please continue enter numbers to validate"/> + </s:FormItem> + <s:FormItem label="Please enter a currency number with at most two fractional digits:"> + <s:TextInput id="currTI3" + toolTip="decimal separator of current locale is {cv3.decimalSeparator}"/> + </s:FormItem> + <s:FormItem label="Please enter a currency number between 20 and 200:"> + <s:TextInput id="currTI4"/> + </s:FormItem> + <s:FormItem label="Please enter an integer currency number:"> + <s:TextInput id="currTI5"/> + </s:FormItem> + <s:FormItem label="Click the button to validate all inputted currency number:"> + <s:HGroup> + <s:Button label="Validate All" click="button1_clickHandler(event)"/> + <s:Label id="resultL"/> + </s:HGroup> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml index 4761dd1..a00b586 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatter2Example.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -47,27 +29,31 @@ private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:DateTimeFormatter id="dtf" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark DateTimeFormatter"/> - <s:Label text="Format a date by using Spark DateTimeFormatter: "/> - <s:Spacer height="15"/> - - <s:FormItem label="Locales:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="Choose a date:"> - <mx:DateChooser id="dateC" showToday="false"/> - </s:FormItem> - <s:FormItem label="Format result is:"> - <s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Format a date by using Spark DateTimeFormatter: "/> + <s:Spacer height="15"/> + + <s:FormItem label="Locales:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="Choose a date:"> + <mx:DateChooser id="dateC" showToday="false"/> + </s:FormItem> + <s:FormItem label="Format result is:"> + <s:Label id="resultL" text="{dtf.format(dateC.selectedDate)}"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml index 15733c4..c205ce2 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkDateTimeFormatterExample.mxml @@ -21,25 +21,7 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> - + <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -57,45 +39,48 @@ } ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:DateTimeFormatter id="dtf"/> </fx:Declarations> + <s:layout> <s:VerticalLayout/> </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark DateTimeFormatter"/> - <s:Label text="Select a locale to see the formatted date, weekday names and month names: "/> - <s:Spacer height="15"/> - - <s:FormItem label="Locale: "> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/> - </s:FormItem> - <s:FormItem label="Please select the format of date:"> - <s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/> - </s:FormItem> - <s:FormItem label="Please select a date to format:"> - <mx:DateField id="dateField"/> - </s:FormItem> - <s:FormItem label="The Weekday Names are:"> - <s:Label text="{dtf.getWeekdayNames()}"/> - </s:FormItem> - <s:FormItem label="The Month Names are:"> - <s:Label text="{dtf.getMonthNames()}"/> - </s:FormItem> - <s:Label text=" ==========================================================================="/> - <s:FormItem label="The formatted result is:"> - <s:Label id="resultL"/> - </s:FormItem> - <s:FormItem> - <s:Button id="bt" label="Format Date" click="formatDate()"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> - - + + <s:Panel title="Spark DateTimeFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Select a locale to see the formatted date, weekday names and month names: "/> + <s:Spacer height="15"/> + + <s:FormItem label="Locale: "> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="dtf.setStyle('locale',localeCB.selectedItem)"/> + </s:FormItem> + <s:FormItem label="Please select the format of date:"> + <s:ComboBox id="dtpCB" dataProvider="{dateTimePatternAryColl}" selectedIndex="0" updateComplete="dtf.dateTimePattern=dtpCB.selectedItem"/> + </s:FormItem> + <s:FormItem label="Please select a date to format:"> + <mx:DateField id="dateField"/> + </s:FormItem> + <s:FormItem label="The Weekday Names are:"> + <s:Label text="{dtf.getWeekdayNames()}"/> + </s:FormItem> + <s:FormItem label="The Month Names are:"> + <s:Label text="{dtf.getMonthNames()}"/> + </s:FormItem> + <s:Label text=" ==========================================================================="/> + <s:FormItem label="The formatted result is:"> + <s:Label id="resultL"/> + </s:FormItem> + <s:FormItem> + <s:Button id="bt" label="Format Date" click="formatDate()"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml index 7b92c15..6f40ffd 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkFormatterExample.mxml @@ -20,39 +20,41 @@ <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" - backgroundColor="haloSilver" fontSize="18" locale="{c.selectedItem}"> - - <s:layout> - <s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" - gap="8"/> - </s:layout> - + locale="{c.selectedItem}"> + <fx:Declarations> <s:CurrencyFormatter id="cf" useCurrencySymbol="true"/> <s:DateTimeFormatter id="df"/> </fx:Declarations> - <s:Label text="Select a locale to see the formatted currency and date:"/> - <s:ComboBox id="c" selectedItem="en-US..."> - <s:dataProvider> - <s:ArrayList> - <fx:String>de-DE</fx:String> - <fx:String>en-US</fx:String> - <fx:String>es-ES</fx:String> - <fx:String>fi-FI</fx:String> - <fx:String>fr-FR</fx:String> - <fx:String>it-IT</fx:String> - <fx:String>ja-JP</fx:String> - <fx:String>ko-KR</fx:String> - <fx:String>nb-NO</fx:String> - <fx:String>pt-PT</fx:String> - <fx:String>ru-RU</fx:String> - <fx:String>zh-CN</fx:String> - </s:ArrayList> - </s:dataProvider> - </s:ComboBox> - - <s:Label text="{cf.format(12.3)}"/> - <s:Label text="{df.format(new Date())}"/> + <s:Panel title="Spark Locale Formatter" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Label text="Select a locale to see the formatted currency and date:"/> + <s:ComboBox id="c" selectedItem="en-US..."> + <s:dataProvider> + <s:ArrayList> + <fx:String>de-DE</fx:String> + <fx:String>en-US</fx:String> + <fx:String>es-ES</fx:String> + <fx:String>fi-FI</fx:String> + <fx:String>fr-FR</fx:String> + <fx:String>it-IT</fx:String> + <fx:String>ja-JP</fx:String> + <fx:String>ko-KR</fx:String> + <fx:String>nb-NO</fx:String> + <fx:String>pt-PT</fx:String> + <fx:String>ru-RU</fx:String> + <fx:String>zh-CN</fx:String> + </s:ArrayList> + </s:dataProvider> + </s:ComboBox> + <s:Label text="{cf.format(12.3)}"/> + <s:Label text="{df.format(new Date())}"/> + + </s:Panel> </s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml index fcb52d1..ca6a7d3 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatter2Example.mxml @@ -19,24 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - s|Form { - background-color: #424242; - } - </fx:Style> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -44,26 +27,30 @@ private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark NumberFormatter"/> - <s:Label text="Format a number by using spark NumberFormatter"/> - <s:Spacer height="15"/> - <s:FormItem label="Locales:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="Please enter a number:"> - <s:TextInput id="inputTI" text="12345"/> - </s:FormItem> - <s:FormItem label="Format result:"> - <s:Label text="{nf.format(inputTI.text)}"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark NumberFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Format a number by using spark NumberFormatter"/> + <s:Spacer height="15"/> + <s:FormItem label="Locales:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="Please enter a number:"> + <s:TextInput id="inputTI" text="12345"/> + </s:FormItem> + <s:FormItem label="Format result:"> + <s:Label text="{nf.format(inputTI.text)}"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml index ac05b0c..598a532 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberFormatterExample.mxml @@ -21,23 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -49,49 +32,48 @@ private var groupPatternArrColl:ArrayCollection = new ArrayCollection(['3;*', '1;*', '3;2;*', '3;2;1;*','2;1']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:NumberFormatter id="nf" locale="{localeCB.selectedItem}"/> <s:NumberFormatter id="nf_default" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark NumberFormatter"/> - <s:Label text="Select a locale to see the property value and formatted Number: "/> - <s:Spacer height="15"/> - - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="Input a number to format:"> - <s:TextInput id="inputTI" text="12345"/> - </s:FormItem> - <s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})"> - <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/> - </s:FormItem> - <s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})"> - <s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/> - </s:FormItem> - <s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})"> - <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/> - </s:FormItem> - <s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})"> - <s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/> - </s:FormItem> - <s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})"> - <s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/> - </s:FormItem> - <s:Label text="==================================================================="/> - <s:FormItem label="Formatted Number is:"> - <s:Label id="resultL" text="{nf.format(inputTI.text)}"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> - - + + <s:Panel title="Spark NumberFormatter" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Select a locale to see the property value and formatted Number: "/> + <s:Spacer height="15"/> + + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="Input a number to format:"> + <s:TextInput id="inputTI" text="12345"/> + </s:FormItem> + <s:FormItem label="Fraction Digits: (default: {nf_default.fractionalDigits})"> + <s:NumericStepper id="fdNS" maximum="10" minimum="0" change="nf.fractionalDigits = fdNS.value"/> + </s:FormItem> + <s:FormItem label="Decimal Separator: (default: {nf_default.decimalSeparator})"> + <s:TextInput id="dsTI" change="nf.decimalSeparator = dsTI.text"/> + </s:FormItem> + <s:FormItem label="Grouping Pattern: (default: {nf_default.groupingPattern})"> + <s:ComboBox id="gpCB" dataProvider="{groupPatternArrColl}" change="nf.groupingPattern = gpCB.selectedItem"/> + </s:FormItem> + <s:FormItem label="Grouping Separator: (default: {nf_default.groupingSeparator})"> + <s:TextInput id="gsTI" change="nf.groupingSeparator = gsTI.text"/> + </s:FormItem> + <s:FormItem label="Negative Number Format: (default: {nf_default.negativeNumberFormat})"> + <s:NumericStepper id="ncfNS" minimum="0" maximum="4" change="nf.negativeNumberFormat = ncfNS.value"/> + </s:FormItem> + <s:Label text="==================================================================="/> + <s:FormItem label="Formatted Number is:"> + <s:Label id="resultL" text="{nf.format(inputTI.text)}"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml index f48f021..9457ebe 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidator2Example.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -47,24 +29,28 @@ private var locales:ArrayCollection = new ArrayCollection(['en-US','de-DE','ja-JP','ru-RU','ar-SA','zh-CN','fr-FR']); ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:NumberValidator id="nv" source="{inputTI}" property="text" minValue="100" domain="int" locale="{localeCB.selectedItem}"/> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark NumberValidator"/> - <s:Label text="Validate a number by using Spark NumberValidator"/> - <s:Spacer height="15"/> - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="Enter a number to validate:"> - <s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark NumberValidator" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Validate a number by using Spark NumberValidator"/> + <s:Spacer height="15"/> + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="Enter a number to validate:"> + <s:TextInput id="inputTI" toolTip="The number should be an integer which greater than 100."/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml index 4372338..aa30ea6 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkNumberValidatorExample.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -51,54 +33,51 @@ ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> - - <!--Click Tab key to validate the number--> <s:NumberValidator id="nv" source="{inputTI}" property="text"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark NumberValidator"/> - <s:Label text="Create some criterions and validate the input number: "/> - <s:Spacer height="15"/> - - <s:FormItem label="Locale:"> - <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem);"/> - </s:FormItem> - <s:Label text="==================================================================="/> - <s:Label text=" Create some criterions to validate number:" color="#DEB887"/> - <s:FormItem label="Max Value:"> - <s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/> - </s:FormItem> - <s:FormItem label="Min Value:"> - <s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/> - </s:FormItem> - <s:FormItem label="Fraction Digits:"> - <s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/> - </s:FormItem> - <s:FormItem label="Decimal Separator:"> - <s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/> - </s:FormItem> - <s:FormItem label="Grouping Separator:"> - <s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/> - </s:FormItem> - <s:Label text=" Customize error messages:" color="#DEB887" - toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/> - <s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value."> - <s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/> - </s:FormItem> - <s:Label text="==================================================================="/> - <s:FormItem label="Input a number and press TAB key to validate:"> - <s:TextInput id="inputTI"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> - - + + <s:Panel title="Spark NumberValidator" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Create some criterions and validate the input number: "/> + <s:Spacer height="15"/> + + <s:FormItem label="Locale:"> + <s:ComboBox id="localeCB" dataProvider="{locales}" selectedIndex="0" updateComplete="nv.setStyle('locale',localeCB.selectedItem)"/> + </s:FormItem> + <s:Label text="==================================================================="/> + <s:Label text=" Create some criterions to validate number:" /> + <s:FormItem label="Max Value:"> + <s:TextInput id="maxTI" change="nv.maxValue = Number(maxTI.text)"/> + </s:FormItem> + <s:FormItem label="Min Value:"> + <s:TextInput id="minTI" change="nv.minValue = Number(minTI.text)"/> + </s:FormItem> + <s:FormItem label="Fraction Digits:"> + <s:NumericStepper id="fdNS" maximum="5" minimum="0" change="nv.fractionalDigits = fdNS.value"/> + </s:FormItem> + <s:FormItem label="Decimal Separator:"> + <s:TextInput id="dsTI" change="nv.decimalSeparator = dsTI.text"/> + </s:FormItem> + <s:FormItem label="Grouping Separator:"> + <s:TextInput id="gsTI" change="nv.groupingSeparator = gsTI.text"/> + </s:FormItem> + <s:Label text=" Customize error messages:" + toolTip="Spark NumberValidator provide the ability to let user customize all the error messages."/> + <s:FormItem label="Greater Than Max Error:" toolTip="Error message when the value exceeds the max value."> + <s:TextInput id="gtmTI" change="nv.greaterThanMaxError = gtmTI.text"/> + </s:FormItem> + <s:Label text="==================================================================="/> + <s:FormItem label="Input a number and press TAB key to validate:"> + <s:TextInput id="inputTI"/> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml index f35634e..c8d1044 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortField2Example.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox, s|List { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -56,27 +38,30 @@ ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:Sort id="mySort" locale="{localeCB.selectedItem}"/> <s:SortField id="sortField" /> </fx:Declarations> - <s:Scroller width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark Sort and SortField"/> - <s:Label text="Sort strings in List by using Spark Sort and SortField"/> - <s:Spacer height="15"/> - <s:FormItem label="Locale: "> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> - </s:FormItem> - <s:FormItem label="List: "> - <s:List dataProvider="{employeeArrColl}"/> - </s:FormItem> - <s:FormItem> - <s:Button label="Click to sort" click="button1_clickHandler(event)"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark Sort and SortField" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Sort strings in List by using Spark Sort and SortField"/> + <s:Spacer height="15"/> + <s:FormItem label="Locale: "> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> + </s:FormItem> + <s:FormItem label="List: "> + <s:List dataProvider="{employeeArrColl}"/> + </s:FormItem> + <s:FormItem> + <s:Button label="Click to sort" click="button1_clickHandler(event)"/> + </s:FormItem> + </s:Form> + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml index 3fcd65c..eddd88d 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkSortandSortFieldExample.mxml @@ -21,24 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ @@ -69,8 +51,8 @@ } ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:Sort id="mySort" locale="{localeCB.selectedItem}"/> <s:SortField id="firstField" name="first"/> @@ -87,36 +69,39 @@ <fx:Object first="Torolf" last="Aaron" age="40"/> </s:ArrayCollection> </fx:Declarations> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark Sort and SortField"/> - <s:Label text="Select a locale to see the strings sorting result:"/> - <s:Spacer height="15"/> - - <s:FormItem label="Locale: "> - <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> - </s:FormItem> - <s:Label text=" ==========================================================================="/> - <s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns"> - <s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/> - <s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/> - <s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/> - <s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/> - </s:FormItem> - <s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column"> - <s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%"> - <s:columns> - <s:ArrayList> - <s:GridColumn dataField="first" headerText="First Name"/> - <s:GridColumn dataField="last" headerText="Last Name"/> - <s:GridColumn dataField="age" headerText="Age"/> - </s:ArrayList> - </s:columns> - </s:DataGrid> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + <s:Panel title="Spark Sort and SortField" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Select a locale to see the strings sorting result:"/> + <s:Spacer height="15"/> + + <s:FormItem label="Locale: "> + <s:ComboBox id="localeCB" dataProvider="{_locales}" selectedIndex="0"/> + </s:FormItem> + <s:Label text=" ==========================================================================="/> + <s:FormItem label="Sorting Priority:" toolTip="Click priority radio button to sort multiple columns"> + <s:RadioButton id="flaRB" groupName="priority" label="first name > last name > age" click="sortInOrder(1)"/> + <s:RadioButton id="lfaRB" groupName="priority" label="last name > first name > age" click="sortInOrder(2)"/> + <s:RadioButton id="alfRB" groupName="priority" label="age > first name > last name" click="sortInOrder(3)"/> + <s:RadioButton id="falRB" groupName="priority" label="first name > age > last name" click="sortInOrder(4)"/> + </s:FormItem> + <s:FormItem label="Employee Table:" toolTip="Click data grid column header to sort single one column"> + <s:DataGrid id="dg" dataProvider="{employeeArrColl}" width="100%"> + <s:columns> + <s:ArrayList> + <s:GridColumn dataField="first" headerText="First Name"/> + <s:GridColumn dataField="last" headerText="Last Name"/> + <s:GridColumn dataField="age" headerText="Age"/> + </s:ArrayList> + </s:columns> + </s:DataGrid> + </s:FormItem> + </s:Form> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml index fad6eb8..e583183 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/i18n/SparkStringToolsExample.mxml @@ -21,28 +21,6 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> - <fx:Style> - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - s|Label { - color: #FFFFFF; - font-weight: bold; - } - #titleL { - font-size: 20; - } - s|ComboBox { - alternating-item-colors: #424242; - } - - s|Form { - background-color: #424242; - } - - s|List { - alternating-item-colors: #424242; - } - </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -92,33 +70,33 @@ } ]]> </fx:Script> + <fx:Declarations> - <!-- Place non-visual elements (e.g., services, value objects) here --> <s:StringTools id="st"/> </fx:Declarations> - <s:layout> - <s:VerticalLayout/> - </s:layout> - <s:Scroller id="scroller" width="100%" height="100%"> - <s:Group> - <s:Form> - <s:Label id="titleL" text="Spark StringTools"/> - <s:Label text="Enter strings and find the case conversion result"/> - <s:Spacer height="15"/> - <s:FormItem label="Locales:"> - <s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/> - </s:FormItem> - <s:FormItem label="Please enter a string:"> - <s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/> - </s:FormItem> - <s:FormItem label="ToLowerCase:"> - <s:Label id="lowerL"/> - </s:FormItem> - <s:FormItem label="ToUpperCase:"> - <s:Label id="upperL"/> - </s:FormItem> - </s:Form> - </s:Group> - </s:Scroller> + + <s:Panel title="Spark StringTools" width="100%" height="100%"> + + <s:layout> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + + <s:Form height="100%" width="100%"> + <s:Label text="Enter strings and find the case conversion result"/> + <s:Spacer height="15"/> + <s:FormItem label="Locales:"> + <s:ComboBox id="localesCB" dataProvider="{_locales}" selectedIndex="0" change="localesCB_changeHandler()"/> + </s:FormItem> + <s:FormItem label="Please enter a string:"> + <s:TextInput id="inputTI" width="380" text="{_initStr}" change="converString()"/> + </s:FormItem> + <s:FormItem label="ToLowerCase:"> + <s:Label id="lowerL"/> + </s:FormItem> + <s:FormItem label="ToUpperCase:"> + <s:Label id="upperL"/> + </s:FormItem> + </s:Form> + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml index 3c21155..eede007 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml @@ -27,8 +27,6 @@ <![CDATA[ import mx.collections.XMLListCollection; - import skins.TDFPanelSkin; - [Bindable] private var employees:XMLListCollection; @@ -44,16 +42,16 @@ ]]> </fx:Script> - <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin"> + <s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%"> <s:layout> - <s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> </s:layout> <s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1"> <s:layout> <s:TileLayout horizontalGap="0" verticalGap="0"/> </s:layout> </s:DataGroup> - <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image + <s:Label width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image when hovered over each item. See the ImageRenderer1.mxml source for more information."/> </s:Panel> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml index 29ab4ca..96f565f 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml @@ -52,9 +52,9 @@ ]]> </fx:Script> - <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin"> + <s:Panel title="Custom Item Renderer with Animation" width="100%" height="100%"> <s:layout> - <s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> </s:layout> <s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0"> @@ -62,7 +62,7 @@ <s:TileLayout /> </s:layout> </s:DataGroup> - <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a + <s:Label width="200" text="The item renderer on this DataGroup uses effects to provide a Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also shows the use of a special font for the text."/> </s:Panel> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml index 8ac0f7a..04b9dbe 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ListItemRendererExample.mxml @@ -58,7 +58,7 @@ <s:Panel title="List Sample" width="100%" height="100%" - skinClass="skins.TDFPanelSkin"> + > <s:VGroup id="vGrp" horizontalCenter="0" top="3" width="80%" height="75%"> <s:HGroup verticalAlign="middle"> @@ -91,7 +91,7 @@ </s:VGroup> </s:HGroup> </s:VGroup> - <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" color="#323232" + <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" text="The Spark List control displays a list of data items. Its functionality is very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. The List control automatically displays horizontal and vertical scroll bar when the list items do not fit http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml index c8964a0..a09fc74 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml @@ -21,22 +21,8 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" xmlns:layouts="layouts.*" - backgroundColor="0x323232" color="0xFFFFFF" initialize="init()"> - <fx:Style> - - @namespace s "library://ns.adobe.com/flex/spark"; - @namespace mx "library://ns.adobe.com/flex/mx"; - - - s|Application { - font-family: main; - font-size: 14; - } - - </fx:Style> - <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; @@ -94,19 +80,26 @@ ]]> </fx:Script> - <s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5"> - <s:Label text="Max Price:"/> - <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/> - <mx:Spacer width="20"/> - <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/> - <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/> - <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/> - </s:HGroup> - - <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0"> + <s:Panel title="Custom Layout Sample" width="100%" height="100%"> + <s:layout> - <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" /> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> - </s:DataGroup> - + + <s:HGroup> + <s:Label text="Max Price:"/> + <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/> + <mx:Spacer width="20"/> + <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/> + <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/> + <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/> + </s:HGroup> + + <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" width="100%" height="100%"> + <s:layout> + <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" /> + </s:layout> + </s:DataGroup> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml index 5a0895e..9726467 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml @@ -23,7 +23,7 @@ xmlns:my="*" minWidth="600" minHeight="350" applicationComplete="requestPhotos()" backgroundColor="0x323232"> - <fx:Script> + <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; @@ -54,30 +54,31 @@ result="photoHandler(event)" /> </fx:Declarations> - <s:layout> - <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/> - </s:layout> - - <s:HGroup verticalAlign="middle"> - <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/> - <s:TextInput id="searchTerms" - enter="requestPhotos()" text="bugs" /> - <s:Button label="Search" - click="requestPhotos()" /> - <!-- The slider to control the axis angle --> - <s:HSlider id="axisSlider" minimum="-90" maximum="90" - value="10" liveDragging="true" width="300"/> - </s:HGroup> - - <s:List width="700" height="225" - dataProvider="{photoFeed}" - itemRenderer="FlickrThumbnail" - id="theList"> + <s:Panel title="Image Wheel Sample" width="100%" height="100%"> + <s:layout> + <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/> + </s:layout> - <s:layout> - <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/> - </s:layout> - </s:List> - + <s:HGroup verticalAlign="middle"> + <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/> + <s:TextInput id="searchTerms" + enter="requestPhotos()" text="bugs" /> + <s:Button label="Search" + click="requestPhotos()" /> + <!-- The slider to control the axis angle --> + <s:HSlider id="axisSlider" minimum="-90" maximum="90" + value="10" liveDragging="true" width="300"/> + </s:HGroup> + + <s:List width="100%" height="100%" + dataProvider="{photoFeed}" + itemRenderer="FlickrThumbnail" + id="theList"> + + <s:layout> + <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/> + </s:layout> + </s:List> + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml index a3a6dab..4f282aa 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml @@ -22,7 +22,7 @@ xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:my="*"> - <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin"> + <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="10" gap="10"/> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml index 23ec216..19d74e8 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml @@ -26,8 +26,6 @@ <![CDATA[ import mx.events.FlexEvent; - import skins.TDFPanelSkin; - protected function update(event:Event):void { globalBaseline.top = theLayout.actualBaseline; @@ -41,7 +39,7 @@ ]]> </fx:Script> - <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout"> + <s:Panel width="100%" height="100%" title="CustomLayout with HBaselineLayout"> <!-- Controls --> <s:HGroup left="14" top="5"> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml index 8667a8f..91c690d 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml @@ -21,7 +21,7 @@ xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" click="itemrenderer1_clickHandler(event)"> - <fx:Script> + <fx:Script> <![CDATA[ import spark.components.supportClasses.GroupBase; import spark.effects.Animate; http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml index 95dd359..54722a1 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/modules/ModuleExample.mxml @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -69,11 +68,16 @@ <s:VerticalLayout horizontalAlign="center"/> </s:layout> - <mx:ApplicationControlBar dock="true" fillColors="[0x000000,0x323232]" fillAlphas="[1,1]" horizontalAlign="center"> + <s:Panel title="Module Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + <s:Button label="Load Module 1" click="loadModule('module 1', './spark/modules/Module1.swf')"/> <s:Button label="Load Module 2" click="loadModule('module 2', './spark/modules/Module2.swf')"/> - </mx:ApplicationControlBar> - - <mx:HBox id="hBox" /> + <mx:HBox id="hBox" /> + + </s:Panel> </s:Application> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml index a30b544..1080681 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding1Example.mxml @@ -25,8 +25,8 @@ <s:Panel width="100%" height="100%" title="Bidirectional Binding 1" horizontalCenter="0" - skinClass="skins.TDFPanelSkin"> - <s:Label top="10" left="15" verticalAlign="justify" color="#323232" width="200" + > + <s:Label top="10" left="15" verticalAlign="justify" width="200" text="Flex 4 interprets the @ binding syntax differently than Flex 3 in that it will now represent a two-way binding. In this example, the text2 TextInput is bound to text1 bidirectionally, so any change to the text2 value will also update the text1 value. "/> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml index 37b1b61..076f80c 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/BidirectionalBinding2Example.mxml @@ -50,19 +50,16 @@ <local:Contact id="contact"/> </fx:Declarations> - <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" > - <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin" cornerRadius="4"/> + <s:Panel width="100%" height="100%" title="TabBar Sample with Bidirectional Binding"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> + </s:layout> + + <s:TabBar id="tabs" dataProvider="{vs}" cornerRadius="4"/> <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23"> <s:NavigatorContent label="Contact Info" width="100%" height="100%"> - <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" - dropShadowVisible="true"> - <!-- This background fill could also be specified in a custom skin to apply to other containers as well --> - <s:backgroundFill> - <s:LinearGradient rotation="90"> - <s:GradientEntry color="0xE2E2E2"/> - <s:GradientEntry color="0xCC0000" alpha=".5" /> - </s:LinearGradient> - </s:backgroundFill> + <s:BorderContainer width="100%" height="100%" dropShadowVisible="false"> <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%"> <mx:FormItem label="Name:"> <s:TextInput id="nameTxt" text="@{contact.name}"/> @@ -86,14 +83,7 @@ </s:BorderContainer> </s:NavigatorContent> <s:NavigatorContent label="Contact List" width="100%" height="100%" > - <s:BorderContainer borderColor="0xCC0000" width="100%" height="100%" borderWeight="2" cornerRadius="3" - dropShadowVisible="true"> - <s:backgroundFill> - <s:LinearGradient rotation="90"> - <s:GradientEntry color="0xCC0000" /> - <s:GradientEntry color="0xE2E2E2" /> - </s:LinearGradient> - </s:backgroundFill> + <s:BorderContainer width="100%" height="100%" dropShadowVisible="false"> <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5" doubleClickEnabled="true" doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)"> <mx:columns> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml index 659174d..e53a5dc 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/ControllingViewportExample.mxml @@ -25,7 +25,12 @@ to be less than the size of the item you want to clip, and set the following parameters, where the scroll positions specify which part of the viewport to show (from container location 0,0)--> - <s:VGroup top="10" left="10"> + <s:Panel title="Controlling Viewport Sample" width="100%" height="100%"> + + <s:layout> + <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" /> + </s:layout> + <s:Label text="This image is clipped with the viewport position set:"/> <s:Group width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30" @@ -38,7 +43,7 @@ width="100" height="100" horizontalScrollPosition="20" verticalScrollPosition="30"> <s:BitmapImage source="@Embed(source='assets/ApacheFlexLogo.png')"/> </s:VGroup> - </s:Scroller> - </s:VGroup> - + </s:Scroller> + + </s:Panel> </s:Application> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml index 8a10492..92d945a 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor1Example.mxml @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -35,14 +34,7 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - - <s:Panel title="Cursor Management Samples" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <s:Panel title="Cursor Management Samples" width="100%" height="100%"> <s:layout> <s:VerticalLayout horizontalAlign="center" @@ -50,7 +42,7 @@ paddingTop="10" paddingBottom="10"/> </s:layout> - <s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor();"/> + <s:CheckBox id="toggle" label="Toggle Cursor" selected="false" color="0x000000" click="switchCursor()"/> </s:Panel> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml index 88f0d1b..befeb36 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/Cursor2Example.mxml @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ @@ -49,19 +48,10 @@ ]]> </fx:Script> - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> - - <s:Panel title="Cursor Management Samples" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <s:Panel title="Cursor Management Samples" width="100%" height="100%"> <s:layout> - <s:HorizontalLayout horizontalAlign="center" - paddingLeft="10" paddingRight="10" - paddingTop="10" paddingBottom="10"/> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> <s:Button label="Normal Cursor" color="0x000000" click="setCursor('normal')"/> http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml index b4e0a23..3f4ff7f 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop1Example.mxml @@ -19,12 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> - - <s:layout> - <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /> - </s:layout> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> <s:ArrayList id="arr1"> @@ -38,15 +33,10 @@ </s:ArrayList> </fx:Declarations> - <s:Panel title="Drag and Drop Samples" - width="600" height="100%" - color="0x000000" - borderAlpha="0.15"> + <s:Panel title="Drag and Drop Samples" width="100%" height="100%"> <s:layout> - <s:HorizontalLayout horizontalAlign="center" - paddingLeft="10" paddingRight="10" - paddingTop="10" paddingBottom="10"/> + <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> <s:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/186a01be/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml index 6cea57e..abe2060 100644 --- a/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml +++ b/TourDeFlex/TourDeFlex3/src/spark/other/DragAndDrop2Example.mxml @@ -19,8 +19,7 @@ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" - xmlns:mx="library://ns.adobe.com/flex/mx" - skinClass="TDFGradientBackgroundSkin"> + xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <