Flex CookBook翻译(2)

 

(1)Problem

想尝试一下Flex4的新的绑定特性.

Solution

使用Binding标签或者直接绑定到你要的属性.

Detailed explanation

Gumbo提出的双向绑定(two-way)的确是一个很好的新特性。就像你所知道的，基础的数据绑定就是所谓的：文本域的文本属性总是某一个变量的值。但是反过来了？就不行了。猜猜现在发生了什么？你可以用这种双向绑定了。

这是我的简单的一个程序例子：

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  
  <s:TextInput id="firstField" />
  <s:TextInput id="secondField" />
</s:Application>

使用MXML绑定标签就可以了，但是如果你希望双向绑定而不是用老的方法，那么你需要设定twoWay属性为true

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  
  <fx:Binding source="firstField.text" destination="secondField.text" twoWay="true" />
  
  <s:TextInput id="firstField" />
  <s:TextInput id="secondField" />
</s:Application>

在Flex3中是下面的表述：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
        [Bindable]
        protected var myVar:String;
        ]]>
    </mx:Script>
    <mx:TextInput text="{myVar}" />
</mx:Application>

新的双向绑定只是多加了一个@符而已

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  
  <s:TextInput id="firstField" />
  <s:TextInput id="secondField" text="@{firstField.text}" />
</s:Application>

谁说转到Flex4会很难的？！！

(2)Problem

我想使用PopUpManager在我的程序里控制弹出窗口.并希望用户可以在弹出窗口以外的地方(Modal即PopUp背后的的半透明的组件区域)点击从而关闭弹出窗口。

Solution

我们使用mouseDownOutside事件, 它在用户点击目标外部区域时被发送.由于Modal是PopUp之外全部的UI区域，所以点击PopUp外部就是点击Modal。

Detailed explanation

我们使用一个简单的PopUp里面只包含一个BitmapImage
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <s:BitmapImage source="@Embed('../../../assets/logo.jpg')" />
</s:Group>

 

我的主程序

package com.palleas.components
{
    import mx.events.FlexEvent;
    import mx.events.FlexMouseEvent;
    import mx.managers.PopUpManager;
    
    import spark.components.Application;
    
    public class Facade extends Application
    {
        public function Facade()
        {
          super();
          addEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
        }
        
        /**
         * This method is called when the component is ready 
         * @param e
         * 
         */        
        protected function creationCompleteHandler(e:FlexEvent):void
        {
          // we don't need this anymore//好习惯哈，用完就删掉
          removeEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
          // creating the modal pop-up
          var popup:PrettyPopup = PopUpManager.createPopUp(this,PrettyPopup,true) as PrettyPopup;
          // centering the created pop-up
          PopUpManager.centerPopUp(popup);
          // adding a listening on the click-outside event
          popup.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,modalClickHandler);
        }
        
        /**
         * This method is called the user has clicked "outside" the popup
         * which mean on the modal 
         * @param e
         * 
         */        
        protected function modalClickHandler(e:FlexMouseEvent):void
        {
          // getting the targeted popup
          var popup:PrettyPopup = PrettyPopup(e.target);
          // removing the listener
          popup.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,modalClickHandler);
          // destroying the popup
          PopUpManager.removePopUp(popup);
        }
    }
}

结论：

虽然我们可以使用Click事件，并通过判断taget来完成同样的效果，但是明显上面的这种方法更加符合逻辑！