Flex 数据绑定

<?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/mx"
               height="662">
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.binding.utils.ChangeWatcher;
            [Bindable]
            private var str:String = "asdf";
            private var watcher1:ChangeWatcher;
            private var watcher2:ChangeWatcher;
            protected function button1_clickHandler(event:MouseEvent):void{
                str += ‘a‘;
            }
            protected function btnBind01_clickHandler(event:MouseEvent):void{
                // bindProperty(目标对象,目标对象属性,源对象,源对象属性)
                watcher1 = BindingUtils.bindProperty(txt004,‘text‘,txt005,‘text‘);
            }

            protected function btnUnbind01_clickHandler(event:MouseEvent):void{
                watcher1.unwatch();
            }

            protected function btn004_clickHandler(event:MouseEvent):void{
                watcher2 = BindingUtils.bindProperty(txt010,‘text‘,txt011,‘text‘);
                // 不一定非要赋值给watcher
                BindingUtils.bindProperty(txt011,‘text‘,txt010,‘text‘);
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:Model id="person">
            <info>
                <name>
                    <first>John</first>
                    <last>Doe</last>
                    <full>{person.name.first}.{person.name.last}</full>
                </name>
                <email>[email protected]</email>
                <phone>1234567</phone>
            </info>
        </fx:Model>
    </fx:Declarations>
    <!-- fx:Binding必须为根的子元素 -->
    <fx:Binding destination="txt003.text" source="txt002.text"/>
    <fx:Binding destination="txt009.text" source="txt008.text" twoWay="true"/>
    <s:TextInput id="txt001" x="212" y="50"/>
    <s:TextInput x="212" y="100" enabled="false" text="绑定:{txt001.text}"/>
    <s:TextInput x="212" y="150" text="绑定到对象不好:{txt001}"/><!-- 这样绑定只会绑定其id -->
    <s:TextInput x="212" y="200" text="{str}"/>
    <s:Button x="352" y="201" label="绑定到变量中" click="button1_clickHandler(event)"/>
    <s:Label x="212" y="245" width="151" height="23" text="串联:{txt001.text} {txt001.text}‘s &quot;ABC"/>
    <s:TextInput id="txt002" x="471" y="50" text="使用fx:Bingding进行绑定"/>
    <s:TextInput id="txt003" x="471" y="100"/>
    <s:Panel x="476" y="130" width="250" height="200" title="使用BindingUtils类创建绑定">
        <s:TextInput id="txt004" x="21" y="10" text="目标"/>
        <s:TextInput id="txt005" x="21" y="40" text="源"/>
        <s:Button id="btnBind01" x="21" y="87" label="绑定" click="btnBind01_clickHandler(event)"/>
        <s:Button id="btnUnbind01" x="113" y="87" label="解除" click="btnUnbind01_clickHandler(event)"/>
    </s:Panel>
    <s:Panel x="194" y="290" width="250" height="299" title="双向数据绑定三种方式">
        <s:TextInput id="txt006" x="10" y="19"/>
        <s:TextInput id="txt007" x="10" y="58" text="@{txt006.text}"/>
        <s:TextInput id="txt008" x="10" y="98"/>
        <s:TextInput id="txt009" x="10" y="132"/>
        <mx:HRule x="10" y="88" width="172"/>
        <mx:HRule x="10" y="162" width="172" height="1"/>
        <s:TextInput id="txt010" x="10" y="171"/>
        <s:TextInput id="txt011" x="10" y="201"/>
        <s:Button id="btn004" x="146" y="202" label="双向绑定" click="btn004_clickHandler(event)"/>
        <s:Label x="158" y="29" text="表达式方式"/>
        <s:Label x="158" y="108" text="fx:Binding"/>
        <s:Label x="158" y="182" text="BindingUtis"/>
    </s:Panel>
    <s:Panel x="476" y="389" width="250" height="200" title="数据模型和多级绑定">
        <s:TextInput x="10" y="27" text="@{person.name.first}"/>
        <s:Label x="10" y="92" text="{person.name.full}"/>
    </s:Panel>
</s:Application>
时间: 2024-10-31 03:50:12

Flex 数据绑定的相关文章

Flex数据绑定陷阱(一)

Flex数据绑定陷阱:常见的误用和错误 当构建Flex或者Adobe AIR程序时,将一个对象的值自动的传递给另一个对象这种处理是数据绑定最常 用并最有用的特征之一. 尽管如此,同时数据绑定会减缓程序的初始化,并且当开发者不是完全理解数据绑定的机制是如何工作的话,会引 起一些开发者意想不到的问题. 最好的解决方法及是确保你正确的使用了它并且在只有需要它的时候才使用它.在这篇文章中,我整理了十条开发者在构建应用使用数据绑定时常见的陷阱和错误. 第一条: 难以发现的无声错误 这有些绑定操作似乎已经工

Flex入门(一)——基本理论

Flash作为一款漂亮动画的产品,是大家所喜爱的,他可以给我们带来更好的视觉效果.但是如何使其很快很好的让Java程序员,.net程序员等所接受,并进行相关开发,Macromedia公司在2004年3月发布的,基于其专有的MacromediaFlash平台,它是涵盖了支持RIA(Rich Internet Applications)的开发和部署的一系列技术组合. 是一种类似于Jsp和Asp的前台技术.这篇博客简单介绍一下关于flex的一些理论知识. 一,是什么,干什么用,优势,劣势? Flex是

Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下:   1.UI控件与布局     2.MVVM     3.数据绑定     4.await/async     5.Linq查询     6.WCF RIA Services     7.序列化     8.委托与事件 1.UI控件与布局 常用的主要是Grid.StackPanel.Border,其中最常用的的是Grid,是一

Flex中的折线图

1.问题背景 在Flex中,制作一个折线图,并且给折线图的横轴和纵轴进行样式设置,具体实现步骤如下: 2.实现实例 (1)设置横轴样式和数据绑定 <mx:horizontalAxis> <mx:CategoryAxis categoryField="quarter" displayName="季度"/> </mx:horizontalAxis> <mx:horizontalAxisRenderers> <mx:A

Flex中利用单选按钮切换柱状图横纵坐标以及描述

1.问题描述 一组单选按钮,有周和月之分,选择“周”,柱状图横坐标显示的是周,纵坐标显示的是人数:选择“月”,柱状图横坐标显示的月,纵坐标显示的是比率. 2.演示实例 [plain] view plaincopy <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(十三)台风模块

config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config="" url="widgets/ActualWeather/TyphoonWarningWidget.swf"/> 源代码目录如下: 界面效果: 大概的思路如下:从后台数据库获取台风的信息列表,展示在界面的表格里面:点击某条台风选项时候,会动态的在地图上展示台风

详细介绍Flex中操作XML

一  在介绍Flex中操作XML之前,首先简单介绍下XML中的基本术语. 元素:XML中拥有开始标签和结束标签的这一块称为“元素”    节点:把XML元素与文本结合起来统称为节点    根节点:位于整个XML文当顶端的节点    文本节点:包含文本的节点    属性:元素的组成部分,以键/值形式放在元素标签内 用一个例子来说明 <root_node><!--这是一个根节点也是一个元素--> <node attribute="value"><!

Flex列在一个表格式的数字值

1.问题背景 一般的.表格中展示的比率.对照率的处理是:保留两位小数,并向上保留 2.实现实例 <? 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="lib

Flex在使用无线电的button切换直方图横坐标和叙述性说明

1.问题叙述性说明 一组单选button,有周和月之分,选择"周",柱状图横坐标显示的是周,纵坐标显示的是人数:选择"月",柱状图横坐标显示的月,纵坐标显示的是比率. 2.演示实例 <? xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s=&