- 浏览: 1449783 次
- 性别:
- 来自: 苏州
文章分类
- 全部博客 (564)
- 算法 (7)
- 流金岁月 (1)
- Javascript (30)
- actionscript (108)
- as3.0 game (14)
- flex (84)
- fms2 (27)
- 正则表达式 (7)
- 开源组件代码(as3.0) (1)
- Pv3d (13)
- Cairngorm (4)
- vbs (54)
- VB程序设计 (26)
- 计算机应用与维护 (4)
- 职场实用穿衣技巧 (3)
- 历史风云 (15)
- 淡泊明志,宁静致远 (12)
- 情感 (26)
- 杂谈 (41)
- 越南风 (14)
- DirectX (9)
- Dev-cpp (11)
- 回望百年 (2)
- 建站经验 (2)
- Python (24)
- 网络赚钱 (4)
- php (2)
- html (1)
- ob0短址网 (1)
- ob0.cn (1)
- wordpress (1)
- pandas logistic (1)
- haxe (1)
- opencv (1)
- 微信小程序 (3)
- vue (3)
- Flutter (1)
最新评论
-
GGGGeek:
第一个函数滚动监听不起作用,onPageScroll可以
微信小程序--搜索框滚动到顶部时悬浮 -
naomibyron:
解决办法:工具 -> 编译选项 -> 编译器 ...
dev-c++中编译含WINSOCK的代码出现错误的解决方法 -
haichuan11:
这个…… 代码不全真的是让人很憋屈的感觉啊
actionScript 3.0 图片裁剪及旋转 -
chenyw101:
老兄能留个QQ号吗?具体的我有些东西想请教下你
用VB制作网站登陆器 -
yantao1943:
貌似有点问题,只派发一次事件啊
使用ActionScript 2.0或ActionScript 3.0处理音频文件的提示点(cue
itemRenderer 最擅长与应用程序的用户通信。有时通信很简单, 只是显示一个名称;有时会使用更精致的颜色;有时具有交互性。
itemEditor 是真正的交互控制, 但它们不是本文的重点。在这些示例中, 我将向您展示根据数据本身或用户操作更改可视外观的 itemRenderer。
状态
Flex <state> 是更改 itemRenderer 外观的一个理想方法。状态使用简便, 并且与过渡结合使用时, 可以为用户提供反馈和愉悦的体验。
在本例中, 您将为列表新建一个 MXML itemRenderer(记住, 如果您愿意, 完全可以使用 ActionScript 这样做)。这个 itemRenderer 显示图像、书名、作者、价格以及用于购买这本书籍的 Button。
<?xml version="1.0" encoding="utf-8"?><hbox xmlns:mx="/2006/mxml"><image id="bookImage" source="{data.image}"></image><vbox height="115" width="100%" verticalalign="top" verticalgap="0" paddingright="10"><text text="{data.title}" fontweight="bold" width="100%"></text><label text="{data.author}"></label>
<hbox id="priceBox" width="100%"><label text="{data.price}" width="100%"></label>
<button label="Buy"></button>
</hbox></vbox></hbox>
但是, 您想要实现的是, 如果书籍售空(数据包含 <instock> 节点, 它们是 yes 或 no), 价格和“购买”Button 会消失。我为价格和 Button 的 HBox 父代增加了一个 id 属性, 使此处的编码更简单一些。这样, 我可以通过更改 HBox 和 priceBox 的可视性来更改那些项目的可视性。
通过覆盖 set data 函数可以这样做, 您将会这么做, 但不是直接更改 priceBox 的可视性, 而是使用以下状态定义:
<states><state name="NoStockState"><setproperty target="{priceBox}" name="visible" value="false"></setproperty></state></states>
将以下内容放在根 <hbox> 标记下。
这个示例有些牵强, 因为它过于复杂, 不适合执行简单任务, 但它说明了如何使用状态。有两种状态:
基本状态: 这是组件的正常状态。不使用状态的组件处于基本状态。在本例中, 基本状态的 priceBox visible 属性为 true(默认)。这是当 instock 为 yes 时的情况。
NoStockState: 这是当 instock 的值为 no 时的状态。处于这个状态时, 会执行 SetProperty 指令。target 属性决定了哪个类成员有问题, name 属性是目标上待更改属性的名称, value 是该属性的新值。
set data 函数通过查看 instock 的值决定要使用哪个状态:
override public function set data( value:Object ) : void
{
super.data = value;
if( data )
{
if( data.instock == "yes" )
currentState = "";
else
currentState = "NoStockState";
}
}
currentState 是所有 UIComponent 控制的属性。它决定了哪个状态是活动状态。在状态之间切换时, Flex 框架从基本状态开始, 然后应用给定状态的规则。
注意: 请记住 itemRenderer 是循环使用的, 所以您必须始终恢复值;不要在 itemRenderer 中保留 if 而没有 else。
如果您感觉风险较打, 可以删除本例中的 set data 覆盖。使用数据绑定表达式在根标记中直接设置 currentState:
<hbox xmlns:mx="/2006/mxml" width="400" currentstate="{data.instock == 'yes' ? '' : 'NoStockState'}">
通过检查与根标记内联的 data.instock 来设置 currentState 的值-不错的伎俩, 但是可能较难维护。
添加元素
在这个 itemRenderer 中, 仅当 instack 值为 yes时才显示价格和“购买”按钮。当然不使用状态也可以这样做, 但是, 如果 itemRenderer 要添加或删除更多控制, 状态更适合, 因为可以通过设置 itemRenderer 的 currentState 属性对控制外观轻松实现控制。
您使用状态添加一个标签, 告诉用户该商品已售空, 而不是简单地删除价格和 Button。以下是修改后的状态:
<states><state name="NoStockState"><setproperty target="{priceBox}" name="visible" value="false"></setproperty><addchild relativeto="{priceBox}" position="before"><label text="-- currently not in stock --" color="#73DAF0"></label>
</addchild></state></states><addchild> 标记指明将 Label 添加到 priceBox 中。除了将 priceBox 的 visible 属性设置为 false, 再使用一条友好的消息替换它。
再次, 您可以将这个标签添加到 set data 函数中-或按原样添加它, 只需将它的可视性设置为 false 并在 set data 函数中将它更改为 true。但我认为您可以看到状态的值: 如果 instock 变为 no 条件的要求变得更复杂, 您只需调整 NoStockState;切换状态的 ActionScript 代码保持不变。
注意: 可以在 Flex Builder 的“设计”视图中修改状态。
扩展列表项目
本例不太适合 List 控制, 但十分适合 VBox 和 Repeater。当必须滚动列表时, 这个扩展适当位置项目的问题变得有些冒险。想象一下: 列表中的项目高度相同。现在扩展项目 2 的高度。目前进展顺利: 项目 2 比其他可见项目高。关键在这里: visible 项目。现在滚动列表。记住 itemRenderer 是循环使用的。所以当项目 2 滚出视图时, 它的 itemRenderer 将移到列表底部。必须重置它的高度。没问题, 这个相当简单。现在滚动列表, 使项目 2 重新回到视图中。它应该是扩展后的高度。itemRenderer 怎么知道要这样做? 通过之前的文章, 您知道信息来自数据本身或某些外部源。
我认为调整大小的 itemRenderer 太复杂, 并不值得这样做。我相信使用 VBox 和 Repeater 能以更好的方式做到这一点。但是, Repeater 的关键在于将创建每个子代。如果您有 1000 个记录并使用 Repeater, 您会获得 itemRenderer 的 1000 个实例。
对于本例, 您依然编写一个 itemRenderer, 但将它用作 VBox 的子代。列表元素看上去相当简单: 一本书籍的名称及其作者。但是单击 itemRenderer, 它会扩展到位。我们使用两种战术做到这一点:
itemRenderer 有一种包含附加信息的状态。
itemRenderer 使用一种 Resize 过渡, 为 itemRenderer 提供更平滑的扩展和收缩。
itemRenderer 的基本状态相当简单:
<hbox width="100%"><label text="{data.author}" fontweight="bold"></label>
<text text="{data.title}" width="100%" fontsize="12" selectable="false"></text></hbox>
ExpandedState 添加其他元素, 它们用于 itemRenderer 的高度:
<states><state name="ExpandedState"><addchild position="lastChild"><hbox width="100%"><image source="{data.image}"></image><spacer width="100%"></spacer><label text="{data.price}"></label>
<button label="Buy"></button>
</hbox></addchild></state></states>
使用 itemRenderer 更改大小就像添加过渡一样简单:
<transitions><transition fromstate="*" tostate="*"><resize target="{this}"></resize></transition></transitions>
将它放在 <states> 标记下。
每当状态更改时应用过渡, 因为状态的 fromState 和 toState 属性是通配符。现在您只需添加用于单击 itemRenderer(将一个 click 事件添加到根标记)的事件处理函数并更改状态:
<script></script>
后续工作
状态是对 itemRenderer 的可视外观进行大量修改的好方法。您可以将多个更改归入一个 State, 然后设置 itemRenderer 的 currentState 属性就可以全部完成。
在下一篇文章中, 我们将讨论如何通过扩展 UIComponent 编写更高效的 itemRenderer。</states></addchild></hbox></hbox></instock></state>
发表评论
-
Apache FlexJS 0.0.1 和 Apache Flex FalconJX 0.0.1发布
2015-11-01 19:44 551原文地址:http://note.sdo.com/u/634 ... -
Flash Catalyst 常用键盘快捷键
2011-03-28 15:38 1062转自:http://www.riameeting.com/ ... -
8款很实用的Actionscript写的位图(BitMap)操作类
2011-03-24 12:09 1940AS3 Scale9 Bitmap ... -
VC++ 项目中使用 FLEX
2011-03-24 09:13 19461, http://hi.baidu.com/qinpc/ ... -
flex应用开发/flash应用开发 代做flash作业/flex作业
2011-01-09 20:37 347专业承接flex应用开发/flash应用开发 ... -
脑袋里的秘密,输入姓名就可以知道你在想什么! flex版
2010-12-29 11:34 2546输入名字就可以知道她/他在想什么的工具~~ -
一个flex聊天机器人
2010-12-18 10:42 1656无聊之下所作,供大伙娱乐,随边聊聊。。。 -
Flex:基于Flex-config.xml的命令行编译
2009-07-01 09:33 1888关键字: Flex Flex2 编译 mxmlc ... -
抽出flash与java 用AMF交互代码
2009-06-30 15:09 3659最近做的一个java 与flash通讯的项目,由于项目框 ... -
BulkLoader类和PV3D
2009-06-26 17:02 1967AS3取消了movieclip的loader类,所以加 ... -
使用 Flex Builder 3.x 分析工具 Profile
2009-06-25 11:26 3411前言 关于分析工具 (原文见Flex Builder ... -
AMF3+JAVA的调用范例
2009-06-24 17:44 2561[AS3]AMF3+JAVA的调用范例 amf是Ad ... -
Flex 程序性能测试
2009-06-24 16:02 1951Flex 程序性能测试 作者:叶晖俊 yehui ... -
Flex RemoteObject类参考
2009-06-19 11:39 1239<mx:RemoteObject>标记 ... -
flex画的菱形
2009-05-11 16:19 3451package com { impo ... -
理解 Flex itemRenderer - 第 5 部分: 效率
2009-05-08 09:21 1766如果您要显示大量 itemRenderer-无论在 Dat ... -
VO to XML converter
2009-05-04 09:00 1147private function convertToXM ... -
Flex全屏
2008-09-26 11:11 1794private function goFullScreen( ... -
ExternalInterface在Firefox下出错的bug
2008-09-16 09:28 3181使用Document Class为避免命名空间冲突,通常会取消 ... -
Flex与Win32通信实例之ExternalInterface
2008-09-11 16:34 3489关键字: flex win32 vc++ vc externa ...
相关推荐
在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ItemRenderer,我们可以实现更加灵活和动态的界面设计。 #### 二、...
本篇文章将深入探讨如何利用ItemRenderer实现一个灵活且功能丰富的相册示例,同时也会涉及Flex中的一些核心概念和编程技巧。 首先,我们需要了解ItemRenderer的基本结构。ItemRenderer是ActionScript类,通常继承自...
### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...
Flex是Adobe公司推出的一个开源的、用于构建具有丰富交互性的Web应用程序的框架。...通过理解itemRenderer的设计初衷和重用机制,开发者可以更加合理地设计和使用itemRenderer,开发出既美观又性能优越的Flex应用程序。
Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如...正确理解和运用itemRenderer,能够极大地提升Flex应用的用户体验和功能表现。
本文将深入探讨Flex项呈示器(ItemRenderer)的概念、使用方法,以及如何根据需求定制它来展示用户信息,如头像和等级。 ## 一、Flex项呈示器(ItemRenderer)简介 Flex项呈示器是Adobe Flex框架中的一个组件,其...
本文将深入探讨如何使用Flex4创建一个ItemRenderer,以实现类似雅虎聊天界面的效果,并介绍相关的核心概念和技术。 首先,让我们了解ItemRenderer的基本概念。ItemRenderer是Flex中的一种组件,它的主要任务是将...
在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...
通过研究这些示例,你可以更深入地理解如何根据实际需求设计和实现内联itemRenderer。例如,你可能会看到如何处理鼠标悬停事件、添加点击事件监听器,或者如何在itemRenderer中嵌入自定义组件等。 总之,掌握Flex...
Flex ItemRenderer 是Adobe Flex框架中的一个重要概念,它主要用于自定义MX和Spark组件列表视图(如List、DataGrid等)中的每一项显示样式。ItemRenderer允许开发者根据数据项的内容个性化呈现,提供更丰富的用户...
这样,我们就可以在`itemRenderer`内部根据需要处理和显示数据。 接下来,我们来探讨如何创建一个简单的`itemRenderer`以显示序列号: 1. 创建新的MXML文件,例如命名为`SerialNumberItemRenderer.mxml`。在这个...
在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义MX或者Spark列表类(如List、DataGrid等)中的数据项显示方式。ItemRenderer使得开发者能够以更个性化的方式展示数据,提升用户界面的视觉效果和...
- 用户可以通过复选框或者选中行的样式来表示三种状态:未选(灰色)、已选(蓝色)和半选(部分选中,如子项中部分被选中)。半选状态常用于层次结构数据的场景,例如部分子项被选中,父项显示为半选。 - 数据...
分享:Flex4+Struts2+Spring3+Blazeds 百度空间_应用平台 Flex中嵌入Google地图 - 菩提树 - ITeye技术网站 分享:Flex builder3执行Debug需要安装的Flash Player Debugger环境 百度空间_应用平台 flex4 的DataGrid...
4. **MXML与ActionScript**:Flex应用可以使用MXML(标记语言)或者ActionScript(面向对象的编程语言)编写。在这个示例中,可能既包含MXML文件(用于界面布局和组件声明),也包含ActionScript文件(用于业务逻辑...
要运行或理解这个Flex CheckboxTree项目,你需要有Flex SDK和一个Flex IDE(如Flash Builder),将源代码导入项目,然后编译并运行。通过查看和分析源代码,你可以学习到如何自定义Flex组件,实现复选框与树节点的...
ItemRenderer是Flex框架中非常重要的组成部分,它为开发者提供了高度灵活的数据展示方式。通过理解ItemRenderer的工作原理及其生命周期,可以有效地提高应用程序的性能和用户体验。无论是简单的文本展示还是复杂的UI...
在Flex编程领域,数据网格(DataGrid)是用于展示大量结构化数据的组件,而AdvancedDataGrid则是DataGrid的一个增强版,提供了更为丰富的功能和更高级的定制能力。本示例"flex-datagrid-advancedDataGrid-demo"显然...
在Flex开发中,ItemRenderer是一种强大的机制,它允许开发者自定义数据列表或组合框等容器中每一项的显示方式。ItemRenderer是...理解并熟练运用ItemRenderer是提升Flex应用专业性和用户体验的关键技巧之一。
在Flex编程中,数据网格(DataGrid)是一种常用的组件,用于展示和操作表格形式的数据。...通过对源代码的学习和研究,可以深入理解Flex DataGrid的内部工作机制,以及如何处理复选框与滚动条交互的复杂性。