Flex 3快速入门: 处理数据 格式化数据

本文来自：http://www.airia.cn/FLEX_Directory/formatting_data/2/

Adobe Flex formatters是将格式化为字符串的组件。Formatter执行单向的将原始数据格式化为字符串的转换。他们一个在显示在文本字段之前触发。Flex包含标准格式器使你能够格式化货币，日期，数字，电话，号码和邮政编码。

在Flex中所有的formatter（格式器）都是mx.fomatters.Formatter类的子类。一个Formatter类声明一个format()方法，这个方法需要一个值，返回一个字符串。

对于大多说的formatter，当一个错误发生，一个空字符串会被返回，并且描述错误的信息被写在formatter的error属性中。error属性继承自Formatter类。

• 创建并使用格式器(formatter)
• 处理格式器(formatter)错误
• 在条目渲染器中(item renderer)使用formatter

创建并使用格式器(formatter)

下边的步骤描述了使用formatter的一般过程：
1． 在你的MXML代码中声明formatter，指定适当的格式化属性。
2． 调用formatter的format()方法在数据绑定的大括号语法中，并且指定指定被格式化值作为format()方法的参数。

下边的例子格式化了用户在应用程序中使用TextInput控件输入的一个10位电话号码：

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/FormatterSimple/index.html"
    width="310" height="210"
    initialize="focusManager.setFocus(phoneInput);"
>

    <mx:PhoneFormatter id="phoneDisplay"
        formatString="(###) ###-####"
    />

    <!-- User interface -->

    <mx:Panel
        title="Using a formatter in an item renderer"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
    >
        <mx:Text text="Enter a phone number, including{'/r'}the area code{'/r'}e.g., 2025558721:"/>
        <mx:TextInput id="phoneInput" width="100%"/>   
          
           <!-- Display the formatted phone number -->
           <mx:Text text="{'Formatted: '+phoneDisplay.format(phoneInput.text)}"/>   
    </mx:Panel>       
</mx:Application>

运行结果

 

处理格式器(formatter)错误

根据协议，当检测到错误时空字符串被返回，并且将描述错误情况的信息写在formatter的error属性中。可以检查format()方法的返回值是否是空字符串，如果是，访问error属性发现错误的原因。

作为另一种选择，你可以写一个函数，返回格式化的错误信息。下边的例子展示了简单的错误处理函数。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/FormatterErrorHandling/index.html"
    width="400" height="140"
>
    <mx:Script>
        <![CDATA[   
            private function formatWithError(value:Object):String
            {
                var formatted:String = myFormatter.format(value);
                if (formatted == "")
                {
                    if (myFormatter.error != null )
                    {
                        if (myFormatter.error == "Invalid value")
                        {
                            formatted = "The value used in the format function";
                            formatted += " is not a valid value.";
                        }
                        else
                        {
                            formatted = "The formatString provided is not";
                            formatted += " a valid formatString.";                        
                        }
                    }
                }
                return formatted;
            }
        ]]>
    </mx:Script>
    <!-- Declare a formatter and specify formatting properties.-->
    <mx:DateFormatter
        id="myFormatter"
        formatString="MXXXMXMXMXMXM"
    />
    <!-- User interface -->
    <mx:Panel
        title="Handling formatter errors"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
    >
        <!-- Trigger the formatter while populating a string with data.-->
        <mx:Text
            text="Your order shipped on: {'/r'}{formatWithError('May 23, 2005')}"
        />
    </mx:Panel>       
</mx:Application>

运行结果

在条目渲染器中(item renderer)使用formatter

在条目渲染器中使用formatter，将格式化应用在List和DataGrid的条目控件中。下边的例子定义了一个List控件，它内置了一个条目渲染器。条目渲染器中包含了货币渲染器组件和label控件。label控件拥有的text属性被绑定到条前条目的当前行的List控件中，并且使用货币格式器来格式化这个数据为英镑。
 

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/FormatterItemRenderer/index.html"
    width="340" height="340"
    initialize="focusManager.setFocus(priceInput);"
    defaultButton="{submitButton}"
>
    <mx:Boolean id="formIsValid"/>
    <mx:ArrayCollection id="prices"/>
    <mx:NumberValidator
        id="numberValidator"
        source="{priceInput}"
        property="text"
        allowNegative="false"
        domain="int"
    />
    <mx:Panel
        title="Using a formatter in an item renderer"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
    >
        <mx:List
            id="priceList"
            rowCount="5" width="100%"
            dataProvider="{prices}"
        >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <mx:CurrencyFormatter
                            id="gbpFormat"
                            alignSymbol="left"
                            currencySymbol="￡"
                        />
                        <mx:Label
                            text="{gbpFormat.format(data)}"
                        />                                   
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:List>
        <mx:Label text="Enter a number below and click the button:"/>
        <mx:TextInput
            id="priceInput"
            width="100%"
            change="formIsValid=numberValidator.validate().type == 'valid'"
        />       
        <mx:ControlBar horizontalAlign="center">
            <mx:Button
                id="submitButton"
                label="Add to list"
                enabled="{formIsValid}"
                click="prices.addItem(priceInput.text);"
            />
        </mx:ControlBar>
    </mx:Panel>       
</mx:Application>