(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>
<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来完成同样的效果,但是明显上面的这种方法更加符合逻辑!