Adobe Flex provides three ways to specify data binding:
1` the curly braces ({}) syntax in MXML,
2` the <fx:Binding> tag in MXML,
3` and the BindingUtils methods in ActionScript.
MXML语言:
<?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">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
/**
* Use a function to deal with data binding,
* when inputText change ,then will call this function
* and the function will change the lable2.text
*/
private function someFunction(_val:String):String
{
return _val + " receive";
}
/**
* Binding the Data with the as3 BindingUtils
* it define put which object.which param binding where
* !!Attaction the first two param is to define which object you want to binding
*/
public function initDataBinding():void
{
mx.binding.utils.BindingUtils.bindProperty(lable4, "text", inputText, "text");
}
]]>
</fx:Script>
<s:TextInput id="inputText"
x="22"
y="24"/>
<mx:Label id="lable1"
x="22"
y="67"
text="{inputText.text.toLocaleUpperCase()}"/>
<mx:Label id="lable2"
x="24"
y="98"
text="{someFunction(inputText.text)}"/>
<mx:Label id="lable3"
x="25"
y="132"
text="Label"/>
<mx:Label id="lable4"
preinitialize="initDataBinding()"
x="24"
y="167"
text="Label"/>
<fx:Binding source="inputText.text"
destination="lable3.text"/>
</s:Application>
When data binding occurs:
Binding occurs under the following circumstances:
1· The binding source dispatches an event because the source has been modified.
This event can occur at any time during application execution. The event triggers Flex to copy the value of the
source property to the destination property.
2· At application startup when the source object dispatches the initialize event.
All data bindings are triggered once at application startup to initialize the destination property.
如果没有在initialize()函数调用时候Trigger的话,Demo中的Label3的Text默认应为“Label3”,但运行结果并非如此
Although binding is a powerful mechanism, it is not appropriate for all situations. For example, for a complex user
interface in which individual pieces must be updated based on strict timing, it would be preferable to use a method
that assigns properties in order. Also, binding executes every time a property changes, so it is not the best solution
when you want changes to be noticed only some of the time.
MoreInfo:
《Flex4 Help》P362
分享到:
相关推荐
当接收到服务器返回的数据时,Flex4的DataBinding机制能自动更新UI组件,实现数据驱动的界面。 4. 安全性:在Flex4与Java的结合中,安全性是个重要考虑因素。可以使用HTTPS加密通信,防止数据在传输过程中被窃取。...
1. **TopologyCanvas**:这是主视图组件,它负责绘制拓扑图的整体布局。可能包含一个Sprite或Canvas作为画布,用于放置和操作节点和连接线。 2. **NodeComponent**:表示拓扑图中的每个节点,它通常是一个自定义的...
这些数据通过ActionScript的DataBinding机制与Flex4界面进行交互,确保用户操作界面时,后台数据的同步更新。 MyEclipse是基于Eclipse的Java EE集成开发环境,支持包括Flex在内的多种开发技术。将项目导入MyEclipse...
2. 数据绑定:使用Flex的DataBinding特性,实现在Flex组件和后台数据模型之间的双向绑定。 七、异常处理与安全考虑 1. 异常处理:设置合适的错误处理机制,确保在通信过程中出现异常时能够正确反馈。 2. 安全性:...
同时,Flex的DataBinding机制可以自动同步界面上的数据和后台模型,极大地提高了开发效率。 在实际项目中,为了更好地管理和重用代码,通常会引入BlazeDS或LCDS这样的中间件。BlazeDS是一个开源的服务器端组件,它...
1. **创建Flex界面**:使用Flex Builder或IntelliJ IDEA等工具,创建一个新的Flex项目。定义一个主容器,例如Canvas,然后在其中添加各种UI组件,如Label用于显示城市名,NumericStepper用于切换日期,Slider用于...
Flex的DataBinding允许UI组件与后台数据模型进行同步,简化了数据驱动的UI开发。 2. **模型(Model)**:存储和管理业务数据,可能是通过AMF(Action Message Format)与后端服务进行通信的数据实体。 3. **视图...
此外,还会结合DataBinding技术将数据绑定到图表组件。 **图表展现**:Flex的图表组件库中包含了多种图表类型,其中“RealChart”可能是一个为时间序列数据量身定制的图表组件。这类组件可以以时间轴为基准,按照...
- Supports Databinding - Supports Styles - Customizable function to handle unsupported browsers - Show, hide, move and size - Display HTML skinnable pop up windows in your application with layering ...
同时,Flex的DataBinding特性使得数据与UI之间的同步变得简单,开发者无需手动处理更新视图的逻辑。 项目可能还涉及了数据可视化,比如使用图表组件来展示微博趋势的变化。Flex中的Spark Chart组件库提供了各种图表...
1. **创建和设置ToolTip** - 使用`mx.controls.ToolTip`类来创建自定义的提示框。可以通过实例化这个类并设置其属性来控制提示框的内容、样式和行为。 - 通过`ToolTip.show()`方法显示工具提示,通常与鼠标事件...