- 浏览: 558119 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
数据绑定和集合
1.数据绑定的原理
2.ArrayCollection
3.IViewCursor定位、取得、删除ArrayCollection中的元素
4.利用隐式的getter和setter方法隐藏内部功能
-------------------------------------------------
数据绑定的本质:
Flex中,关键在于改变模型(数据)的同时,让视图(各种组件)能够同步更新
[双向绑定 two-way binding:格式化和验证器会涉及]
要想让Flex监视某个属性的变化,使用[Bindable]标签标注,Flex会根据变化来更新视图(可见组件)
隐式的getter和setter
Flex在生成代码的过程中利用的第一个概要就是隐式的getter和setter
通过隐式的getter和setter除了可以设置和获取属性值之外,还能在属性值改变时完成其它功能
即,当改变值时,setter会被调用,那么就可以在setter方法中实现一些功能
如商品数量改变时,重新计算金额
eg:
private var _sum:Number;
private function get sum():Number {
return _sum;
}
private function set sum(value:Number):void {
_sum = value;
//执行其它操作
}
Flex中,下划线通常意味着变量为私有变量!具有隐式的getters和setter方法!
事件的分发和监听(数据绑定的本质---数据发生变化后分发事件,监听到该事件,更新数据)
1.监听
MXML中监听的都是由Flex控件分发的事件
监听事件首先要指定事件发生时要调用的函数,而且通常要向函数中传入一个事件对象作为参数
如果是自定义的事件,还可以在event对象中设置属性,这样监听方就可以从event中取出数据
<s:Button id="myButton"/>
myButton.addEventListener("click",handleClickEvent);//注意:事件处理函数只需要写函数名即可,不要加()
===>
<s:Button id="myButton" click="handleClickEvent(event)"/>
2.分发
1.Flex控件进行事件分发
2.自己分发(在setter方法中分发事件,当数据变化时setter会被调用):
var event:Event = new Event("myEvent");
this.dispatchEvent(event);
使用[Bindable]和{}实现数据绑定,Flex如何实现的
1.Flex会在使用这些语法时生成对应的代码
2.数据绑定是通过后台隐式的事件分发和监听实现的
3.为确保数据绑定正确的工作,相关对象必须在有变化时分发事件
默认情况下,并不是所有Flex类都能分发事件,如值对象就不能分发事件
能够分发事件的类叫做事件分发器,Flex中所有的用户界面组件都是事件分发器
对于不具有事件分发能力的值对象,Flex看到[Bindable]元数据标签,就会在编译时将该类修改
为一个事件分发器!!!所以,进行数据绑定的类必修用[Bindable]标记!
Flex让一个不能分发事件的类具备分发能力,必须要求源代码存在着于项目中
Array类存在于Flash Player中,其源代码并不在项目中,
因此,Flex无法修改Array的代码使其具有事件分发能力。
结论:数据绑定不能直接用于数组Array!
但能通过代理技术来解决这个问题!
使用ArrayCollection(Array的代理)
Flex中常见类型:
1.XML、Object、Array 这3个类内置于Flash Player中,在编写ActionScript时,这几个类就已经存在了!
2.Number、String、int、uint、Boolean 基本数据类型
对复杂数据类型使用代理对象(其自身不具备事件分发能力),最终实现数据绑定
Object---ObjectProxy
XMLList---XMLListCollection
Array---ArrayCollection/ArrayList
说明:ArrayCollection不仅支持数据绑定,还具有排序、筛选、查询等丰富的功能
ArrayList只需要进行数据绑定时,是一个非常简单轻量级的工具
循环:
for each (var p:XML in resultDate) {}
代码片段:
使用HTTPService从远程获取数据后,执行下面的方法
private function handleProductResult(result:ResultEvent):void {
var products:Array = new Array();//创建一个Array对象
var resultData:XMLList = event.result..product;//E4X表达式后代搜寻product子元素
for each(var p:XML in resultData) {
var product:Product = Product.buildProductFromAttribute(p);//静态方法,传入XMLList,返回product对象
products.push(product);//添加到Array中
}
groceryInventory = new ArrayCollection(products);//将Array传入ArrayCollection的构造函数中,这样就能代理了
}
===============================
ArrayCollection中的数据访问
1.myArrayCollection[0] Array语法,通过下标进行访问
2.myArrayCollection.getItemAt(0);
推荐使用第2种方法,运行时比Array语法更快;还能利用数据绑定在运行时更新组件
注意:
getItemAt(index)返回的是Object对象,通常都要将其转化为具体的对象3.
如:(groceryInventory.getItemAt(0) as Product).description
对ArrayCollection进行排序
要进行排序,需要使用Sort和SortField类
1.创建新的Sort对象
2.创建一个或多个SortField对象(即可以指定主排序,副排序字段)
3.将SortField对象的数组赋值给Sort对象的fields属性
4.将Sort对象指定为ArrayCollection的sort属性
5.调用ArrayCollection的refresh()应用排序操作
对ArrayCollection中的商品进行排序,确保每次呈现的顺序一致
var prodSort:Sort = new Sort();
var sortFiled:SortField = new SortField("someFiled");//按someField属性进行排序
prodSort.fields = new Array(sortField);//或者[sortField]
myArrayCollection.sort = prodSort;
myArrayCollection.refresh();//必须refresh
说明:可以指定多个SortField,然后通过数组传递给Sort的fields属性
var sortFiled1:SortField = new SortField("category");
var sortFiled2:SortField = new SortField("listPrice");
prodSort.fields = new Array(sortField1,sortField2);
SortField对象的构造函数可以接受多个参数,第一个参数是必须的,即指定排序规则按哪个字段进行排序
其它3个参数:
1.是否区分大小写(默认区分大小写)
2.升序还是降序(默认升序)
3.按数值排序还是按字母排序(默认按字母表排序)
创建ArrayCollection时,如果没有指定Array,则系统会默认创建一个新数组放到构造函数中
即:new ArrayCollection 等价于 new ArrayCollection(new Array())
对ArrayCollection实现光标(cursor)搜索
使用光标,能够直接访问集合中的任意项
操作:
1.向前或向后移动光标
2.通过光标找到特定项
3.取得光标所在位置的项
4.根据光标位置添加和删除项
在集合类中使用光标的一般步骤:
1.createCursor()创建一个光标
2.集合排好序
3.移动光标并查询集合中的项
findFirst()、findAny()、moveNext()、movePrevious、seek()
说明:
并不是只有ArrayCollection才支持光标,其它很多类也支持
详细信息,参考IViewCursor接口
使用光标:
var cursor:IViewCursor = items.createCursor();
var found:Boolean = cursor.findFirst(item);//item为排序时指定的字段
if(found) {
var existItem = cursor.current as ShoppingCartItem;//转换类型
}
注意:
1、集合排序时为Sort指定按哪个字段进行排序,搜索使就会按那个字段进行比较
比如:SoppingCart中,已经创建了按product字段进行排序的Sort对象,那么Flex就只会比较每个对象的product字段
2、集合排序完成后,使用光标查找速度比遍历集合速度快,有利于提升效率!
使用光标进行删除操作
public function removeItem(item:ShoppingCartItem):void {
var cursor:IViewCursor = items.createCursor();
if(cursor.findFirst(item)) {
cursor.remove();
}
}
1.数据绑定的原理
2.ArrayCollection
3.IViewCursor定位、取得、删除ArrayCollection中的元素
4.利用隐式的getter和setter方法隐藏内部功能
-------------------------------------------------
数据绑定的本质:
Flex中,关键在于改变模型(数据)的同时,让视图(各种组件)能够同步更新
[双向绑定 two-way binding:格式化和验证器会涉及]
要想让Flex监视某个属性的变化,使用[Bindable]标签标注,Flex会根据变化来更新视图(可见组件)
隐式的getter和setter
Flex在生成代码的过程中利用的第一个概要就是隐式的getter和setter
通过隐式的getter和setter除了可以设置和获取属性值之外,还能在属性值改变时完成其它功能
即,当改变值时,setter会被调用,那么就可以在setter方法中实现一些功能
如商品数量改变时,重新计算金额
eg:
private var _sum:Number;
private function get sum():Number {
return _sum;
}
private function set sum(value:Number):void {
_sum = value;
//执行其它操作
}
Flex中,下划线通常意味着变量为私有变量!具有隐式的getters和setter方法!
事件的分发和监听(数据绑定的本质---数据发生变化后分发事件,监听到该事件,更新数据)
1.监听
MXML中监听的都是由Flex控件分发的事件
监听事件首先要指定事件发生时要调用的函数,而且通常要向函数中传入一个事件对象作为参数
如果是自定义的事件,还可以在event对象中设置属性,这样监听方就可以从event中取出数据
<s:Button id="myButton"/>
myButton.addEventListener("click",handleClickEvent);//注意:事件处理函数只需要写函数名即可,不要加()
===>
<s:Button id="myButton" click="handleClickEvent(event)"/>
2.分发
1.Flex控件进行事件分发
2.自己分发(在setter方法中分发事件,当数据变化时setter会被调用):
var event:Event = new Event("myEvent");
this.dispatchEvent(event);
使用[Bindable]和{}实现数据绑定,Flex如何实现的
1.Flex会在使用这些语法时生成对应的代码
2.数据绑定是通过后台隐式的事件分发和监听实现的
3.为确保数据绑定正确的工作,相关对象必须在有变化时分发事件
默认情况下,并不是所有Flex类都能分发事件,如值对象就不能分发事件
能够分发事件的类叫做事件分发器,Flex中所有的用户界面组件都是事件分发器
对于不具有事件分发能力的值对象,Flex看到[Bindable]元数据标签,就会在编译时将该类修改
为一个事件分发器!!!所以,进行数据绑定的类必修用[Bindable]标记!
Flex让一个不能分发事件的类具备分发能力,必须要求源代码存在着于项目中
Array类存在于Flash Player中,其源代码并不在项目中,
因此,Flex无法修改Array的代码使其具有事件分发能力。
结论:数据绑定不能直接用于数组Array!
但能通过代理技术来解决这个问题!
使用ArrayCollection(Array的代理)
Flex中常见类型:
1.XML、Object、Array 这3个类内置于Flash Player中,在编写ActionScript时,这几个类就已经存在了!
2.Number、String、int、uint、Boolean 基本数据类型
对复杂数据类型使用代理对象(其自身不具备事件分发能力),最终实现数据绑定
Object---ObjectProxy
XMLList---XMLListCollection
Array---ArrayCollection/ArrayList
说明:ArrayCollection不仅支持数据绑定,还具有排序、筛选、查询等丰富的功能
ArrayList只需要进行数据绑定时,是一个非常简单轻量级的工具
循环:
for each (var p:XML in resultDate) {}
代码片段:
使用HTTPService从远程获取数据后,执行下面的方法
private function handleProductResult(result:ResultEvent):void {
var products:Array = new Array();//创建一个Array对象
var resultData:XMLList = event.result..product;//E4X表达式后代搜寻product子元素
for each(var p:XML in resultData) {
var product:Product = Product.buildProductFromAttribute(p);//静态方法,传入XMLList,返回product对象
products.push(product);//添加到Array中
}
groceryInventory = new ArrayCollection(products);//将Array传入ArrayCollection的构造函数中,这样就能代理了
}
===============================
ArrayCollection中的数据访问
1.myArrayCollection[0] Array语法,通过下标进行访问
2.myArrayCollection.getItemAt(0);
推荐使用第2种方法,运行时比Array语法更快;还能利用数据绑定在运行时更新组件
注意:
getItemAt(index)返回的是Object对象,通常都要将其转化为具体的对象3.
如:(groceryInventory.getItemAt(0) as Product).description
对ArrayCollection进行排序
要进行排序,需要使用Sort和SortField类
1.创建新的Sort对象
2.创建一个或多个SortField对象(即可以指定主排序,副排序字段)
3.将SortField对象的数组赋值给Sort对象的fields属性
4.将Sort对象指定为ArrayCollection的sort属性
5.调用ArrayCollection的refresh()应用排序操作
对ArrayCollection中的商品进行排序,确保每次呈现的顺序一致
var prodSort:Sort = new Sort();
var sortFiled:SortField = new SortField("someFiled");//按someField属性进行排序
prodSort.fields = new Array(sortField);//或者[sortField]
myArrayCollection.sort = prodSort;
myArrayCollection.refresh();//必须refresh
说明:可以指定多个SortField,然后通过数组传递给Sort的fields属性
var sortFiled1:SortField = new SortField("category");
var sortFiled2:SortField = new SortField("listPrice");
prodSort.fields = new Array(sortField1,sortField2);
SortField对象的构造函数可以接受多个参数,第一个参数是必须的,即指定排序规则按哪个字段进行排序
其它3个参数:
1.是否区分大小写(默认区分大小写)
2.升序还是降序(默认升序)
3.按数值排序还是按字母排序(默认按字母表排序)
创建ArrayCollection时,如果没有指定Array,则系统会默认创建一个新数组放到构造函数中
即:new ArrayCollection 等价于 new ArrayCollection(new Array())
对ArrayCollection实现光标(cursor)搜索
使用光标,能够直接访问集合中的任意项
操作:
1.向前或向后移动光标
2.通过光标找到特定项
3.取得光标所在位置的项
4.根据光标位置添加和删除项
在集合类中使用光标的一般步骤:
1.createCursor()创建一个光标
2.集合排好序
3.移动光标并查询集合中的项
findFirst()、findAny()、moveNext()、movePrevious、seek()
说明:
并不是只有ArrayCollection才支持光标,其它很多类也支持
详细信息,参考IViewCursor接口
使用光标:
var cursor:IViewCursor = items.createCursor();
var found:Boolean = cursor.findFirst(item);//item为排序时指定的字段
if(found) {
var existItem = cursor.current as ShoppingCartItem;//转换类型
}
注意:
1、集合排序时为Sort指定按哪个字段进行排序,搜索使就会按那个字段进行比较
比如:SoppingCart中,已经创建了按product字段进行排序的Sort对象,那么Flex就只会比较每个对象的product字段
2、集合排序完成后,使用光标查找速度比遍历集合速度快,有利于提升效率!
使用光标进行删除操作
public function removeItem(item:ShoppingCartItem):void {
var cursor:IViewCursor = items.createCursor();
if(cursor.findFirst(item)) {
cursor.remove();
}
}
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1290皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十六)使用样式定制Flex应用
2013-01-03 11:47 1594为Flex应用程序添加样式: 通过标签属性设置样式 可 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1587AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16891.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1302创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5383数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10401.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 1006创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1084使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 885事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1208数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1091Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1382Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(十四)Flex4_导航
2012-12-28 09:46 1036Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1620MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 1022待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2186增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 1033Flash builder 4.6 序列号: 1424-49 ...
相关推荐
首先,数据集合绑定是WPF中一个核心特性,它使得应用程序能够动态地展示和操作数据。通过绑定,你可以将数据模型与用户界面(UI)组件关联,这样当数据变化时,UI会自动更新,反之亦然。例如,你可以绑定一个...
在C#编程中,数据绑定是一项关键特性,它允许开发者将UI控件与数据源连接起来,实现数据的动态展示和交互。数据绑定控件在Windows Forms和WPF(Windows Presentation Foundation)等平台上广泛使用,简化了用户界面...
在.NET Framework中,数据绑定主要涉及到`BindingContext`、`CurrencyManager`、`PropertyManager`和`Binding`类。 1. `BindingContext`对象: `BindingContext`是每个Windows窗体的基础属性,它维护了一个`...
当需要将数据库或其他数据源中的数据绑定到下拉框时,通常会使用列表(List)集合来存储这些数据。本篇文章将详细介绍如何在C#中实现下拉框与list集合的绑定,以及相关的控件绑定技巧。 首先,我们需要创建一个表示...
在DevExpress GridControl中,数据绑定使你可以将数据集、实体框架模型或其他数据结构映射到控件的行和列,实现数据的实时更新。 2. **数据源选择** GridControl支持多种数据源,如DataTable、List、Entity ...
C#数据绑定是.NET框架中一个关键的概念,它在Windows Forms、WPF(Windows Presentation Foundation)和ASP.NET等环境中广泛使用。数据绑定允许UI(用户界面)组件与数据源进行同步,使得数据的变化能够实时反映在...
高级应用主要包括数据绑定架构、样式(Style)和ControlTemplate、揭密DataTemplate、模式MVVM应用、集合中的数据模板和展现数据绑定架构等。 数据绑定架构 数据绑定架构是指在 WPF 应用程序中将数据源绑定到 UI ...
在DevExpress TreeList中,数据绑定是指将数据源(如数据库表、对象集合或XML文件)与TreeList控件关联的过程。这使得TreeList可以自动加载、显示和更新数据源中的信息。数据绑定的基本步骤包括: 1. 创建数据源:...
在“extjs最简单的数据绑定和修改”这个主题中,我们将探讨如何在ExtJS中实现数据的双向绑定以及如何进行数据的修改。 1. 数据模型(Model): 在ExtJS中,数据模型定义了数据对象的结构和属性。创建一个模型类,...
其中,数据绑定是WPF中的核心特性,允许UI元素与应用程序中的数据源进行交互,实现了视图(View)和模型(Model)之间的自动同步,极大地简化了UI开发和维护。 ### 数据绑定基本概念 1. **数据源(DataSource)**:...
下面我们将深入探讨WPF数据绑定的基本原理、重要性和实现方法。 1. **数据绑定基本原理**: WPF的数据绑定允许UI控件(如文本框、按钮等)直接绑定到数据源中的属性,从而实现UI和数据的动态交互。当数据源的属性...
4. **导航和数据绑定**: 在描述中提到的“上一条”和“下一条”的功能,通常涉及数据集合的导航。可以使用MVVM(Model-View-ViewModel)设计模式,其中ViewModel提供数据导航方法,而View(UI)通过数据绑定调用...
在Windows Presentation Foundation (WPF)中,数据绑定是一种强大的机制,它使得用户界面(UI)元素可以直接与数据源进行交互,实现了数据和UI之间的同步更新。这个例子旨在帮助初学者理解并掌握WPF中的数据绑定概念。...
复杂数据绑定则更适用于处理结构化数据,如数组、列表或集合。它可以绑定到数据源的多个属性,甚至整个对象,实现更复杂的视图模型。例如,使用数据绑定可以将一个列表视图(ListView)或数据网格(DataGridView)与...
数据绑定,作为MAPX中文培训教材第七章的核心内容,是指将数据从各种数据源整合并呈现到地图上的过程。这一技术的应用范围广泛,尤其在分析地理位置相关的业务数据时显得尤为重要。例如,在销售数据分析场景中,可以...
该文档介绍了各种窗体数据绑定 WPF/WinForm 自定义DataViewManger 数据游标 ListView的数据绑定 属性通知的事件绑定 AOP实现的数据绑定 WPF的超简洁的集合数据绑定 SQLserver的数据库增删改查绑定实例
在C#编程中,`DataGridView`控件是一个非常重要...总之,`C# datagridview 绑定数据后绑定标题`是一个涵盖数据绑定和界面定制的多方面话题。通过熟练掌握这些技巧,开发者能够创建出功能强大且用户友好的数据展示界面。
WinForm中comboBox控件数据绑定的实现方法 WinForm中comboBox控件数据绑定是许多开发者需要掌握的技巧,本文将详细介绍WinForm中comboBox控件数据绑定的实现方法,并结合实例形式分析了WinForm实现comboBox控件数据...
在Windows Forms 2.0中,数据绑定提供了对多种数据源的支持,包括数据库、XML、数组、集合和自定义对象。这一特性极大地简化了开发者构建用户界面和管理数据的工作。书中的内容可能涵盖了以下几个关键知识点: 1. *...
在数据绑定中,我们经常遇到"数据集"、"对象"和"集合"的概念。数据集通常指的是包含多条记录的数据结构,可以是数据库查询的结果,也可以是内存中的数组或列表。对象则是单个实体,每个对象有自己的属性和方法。集合...