Search (advanced)

Sort by date Sort by relevance

RIA爱好者

1 | Next Page

填充不同状态的Bubble图表项目

Bubble图表项目在单一状态下的颜色填充是很简单的，设定fill样式就搞定了。然而多数情况下，Bubble图表项目是有不同状态的，比如禁用且无法选中状态、具有焦点但并未显示为处于选中状态、鼠标滑过状态、处于选中状态但没有焦点等状态，那如何实现不同状态下Bubble图表项目的填充呢？ 1.使用默认的实心填充 首先我们得让Bubble图表项目具有多种状态，只要设置Bubble图表的selectionMode属性为none就行了。如果是用实心填充Bubble数据系列，默认下，Bubble图表项目在未选中时会是棕黄色，当鼠标滑过时会比未选中颜色暗一些，但会比选中时亮一些。点击此处查看效果。 2.自定义实心填充 如果要自定义实心填充，可简单地通过设置fill、itemDisabledColor、itemRollOverColor 和itemSelectionColor 样式来实现。其中使用itemDisabledColor样式表示图表中未选中时图表项目的颜色并非字面意义上禁用的颜色。点击此处查看效果。 3.使用默认的渐变填充 在Start.mxml中，我们将fill样式设定为RadialGradient类的实例，实现了Bubble图表项目在未选中和失去焦点时放射渐变填充。但问题也出来了，图表项目在其它状态下仍用实心填充。点击此处查看效果。  4.自定义渐变填充 大家可以用用ChartItemEvent类型事件试一下，事实上是无法解决这个问题的，我们得从图表项目的itemRenderer入手。 BubbleChart数据系列默认的itemRenderer为CircleItemRenderer类。参看CircleItemRenderer.as源码，你会发现该类在各种状态下都是用实心填充图表项目。因此为支持需要渐变填充，得改写这个类。为了简便，我们另外自定义了一个RadialGradientEx类，设定其第一个渐变对象的颜色值为白色，这样会在图表项目上部产生高光效果。另外设定填充矩形的高为图表项目高的一半，这样可让高光效果真实一些。详情请参看GradientCircleItemRenderer.as。 点击此处查看本实例的效果，点击此处下载本实例的源码。 (translate)

将AdvancedDataGrid的分组数据拖放到DataGrid中

如果AdvancedListBase组件如AdvancedDataGrid没有用分组数据，拖放时会当成是DataGrid，因此可以很方便地拖放到ListBase组件如DataGrid或List中。但如果用分组数据，又怎么实现这个功能呢？Flex的帮助文件没有讲，网上这方面的资料也很少，本文将以AdvancedDataGrid和DataGrid为例讲述。 实现功能：选择AdvancedDataGrid中一个或多个叶节点项目，选择一个或多个子节点项目，同时选择一个或多个叶节点项目和一个或多个子节点项目，拖放到DataGrid中。 拖放操作有三个主要的类：DragManager、DragSource和DragEvent，其中DragEvent是最核心的。可以为DataGrid(拖放目标)添加DragEvent类事件侦听器函数测试一下，结果不起任何作用。如果看过AdvancedListBase和ListBase及其子类的源码，就知道原因了。以dragEnterHandler处理方法为例： protected function dragEnterHandler(event:DragEvent):void { if (event.isDefaultPrevented()) return; lastDragEvent = event; if (enabled && iteratorValid && event.dragSource.hasFormat("items")) { DragManager.acceptDragDrop(this); DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE); showDropFeedback(event); return; } hideDropFeedback(event); DragManager.showFeedback(DragManager.NONE); } 很简单，它首先要检测要检测的被拖动的数据是否包含使用相应格式的数据，因为AdvancedDataGrid的分组数据的格式不是items而是treeDataGridItems，因此我们得用DataGrid子类重写drapOverHandler等DragEvent方法，添加对treeDataGridItems数据格式的支持。如： override protected function dragEnterHandler(event:DragEvent):void { super.dragEnterHandler(event); if (enabled && iteratorValid && event.dragSource.hasFormat("treeDataGridItems")) { DragManager.acceptDragDrop(this); DragManager.showFeedback(event.ctrlKey ? DragManager.COPY : DragManager.MOVE); showDropFeedback(event); return; } } 点击此处查看本实例的效果，点击此处下载本实例的源码。 所以说，搞清楚AdvancedDataGrid和DataGrid拖放的工作原理，实现起来就不难了。至于反过来怎样将DataGrid的项目拖放到AdvancedDataGrid上，此处就不再说了，原理都一样。另外，我给的源码中，重写了同时选择拖放AdvancedDataGrid多个项目，感兴趣的可以参考一下。 (translate)

创建自动滚动的DataGrid

前几天要做一个能自动滚动的DataGrid，鼠标移动某个项目时停止滚动，移出时则继续滚动。我把代码整理成一个组件，与大家分享。 点击此处查看本实例的效果，点击此处下载本实例的源码。 源码中我们用Timer来添加项目，当数据源变化时会派发CollectionEvent.COLLECTION_CHANGE事件，其处理方法会将DataGrid顶边到内容的偏移量设定为最大值，从而滚动一行。当定时器的触发的总次数达到数据提供者的初始项目总数时，定时器会重置再启动，从而实现循环滚动。 AutoScrollingDataGrid有两个扩展属性。delay表示滚动一行数据所需的时间，resultCollection表示数据提供者的初始项目集。 我们的方法会让DataGrid的数据提供者的项目不断增多，但因为是有规律地增多，所以基本上实现了目标。不过，这样方法会导致DataGrid的排序混乱。感兴趣的可以想一下有什么好方法来解决这个问题。 (translate)

Flash Builder 4新特性试用：Data Centric Development (五)

这篇文章拖得太久，为追求系列教程的完事，还是拿出来晒一下。这回我们将以BlazeDS远程服务为例，讲述怎样使用Data Centric Development 实现Flex与Java通信。 1.了解blazeds与Remote Object Service，详见http://www.riafan.com/article.asp?id=128。 2.使用Eclipse 建立一个Java Project。编写好远程服务类(如附件)。 3.下载BlazeDS 4，解压到tomcat的webapps目录下。打开 web.xml 文件，将被注释掉的begin rds块代码解禁。注意，还要将 useAppserverSecurity 的 value 由 true 改为 false。 4.修改remoting-config.xml，配置好远程服务终端。将Web Project部署到tomcat并启动它。 5.新建一个 Flex Project，在“应用服务器类型”一栏中选择“J2EE”和“BlazeDS”后点击“下一步”。 6.在弹出窗体中进行设置，点击“验证配置 ”按钮，若无错误提示，即可进入下一步后直接按“完成”。 7.创建UI：新建HelloWorld.mxml，在主程序中放置nameTextInput、submitButton和resultLabel。 8.配置服务：在“数据/服务”视图，我们来配置之前后台发布的 RemoteClass，点击“链接数据/服务”。 在弹出窗体中选择 BlazeDS ，此时如果询问你RDS的密码，我们可以选择不需要密码直接跳过这步。 简单设置下服务名以及 包名 ，强下图。   8.其余步骤与http://www.riafan.com/article.asp?id=174中的7~11步相同。 点击此处下载本实例的工程及源码。 (translate)

五天Flex 4入门

好消息，Adobe最近推出了Flex 4 beta in a Week视频教学，让你五天就可以Flex 4入门。目前第五天的视频还没完全制作好。 Flex 4推出不到半年就有这样的免费培训，足见Adobe对Flex 4 的重视。要知道先前的Learn Flex in a week是以Flex 3正式版为基础的，而且是在正式版已经发行了很久以后。现在还在Flex 4 Beta 2，很多东东还不可预见，Adobe这样做的意图不言而喻了，呵呵！ Flex 4 Beta和Flash Builder 4 Beta有很多新特性值得学习应用，详见：http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html和http://www.adobe.com/devnet/flex/articles/flashbuilder4_whatsnew.html，尤其对于那些想用Flex而不用Flash Lite的开发手机应用的人，更有必要学习。 (translate)

SuperTabNavigator的一个Bug

不知道有多少人用过flexlib，又有多少人用过SuperTabNavigator，我对这个第三方组件也不是很了解，不过今天我发现的它的一个Bug。 http://www.riafan.com/flex/bubblechart/，我将这个应用做成一个组件，用SuperTabNavigator作为其容器。点击冒泡时，本来会在DataGrid中显示选择一行的，结果报错：TypeError: Error #1034: 强制转换类型失败:无法将 mx.charts.events::ChartItemEvent@1e9cb21 转换为 mx.events.IndexChangedEvent。我的这个组件本身是没问题的，放在TabNavigator也没问题，所以我怀疑是SuperTabNavigator的Bug。经过调试发现SuperTabNavigator.as的第712行：this.addEventListener(IndexChangedEvent.CHANGE,tabChangedEvent); 有问题，注释掉这行代码就可以运行了。当然我现在还不太清楚会不会影响其它功能。哈哈，改了再说。 点击此处查看本实例的效果，点击此处下载本实例的源码。 (translate)

Flash Builder中Data Centric Development的功能改进

相对于上一个版本，Flex Builder Beta 2的Data Centric Development的功能改进了不少。表现在以下几个方面： 新增测试操作面板。 网络监视器默认是禁止的，启用的话会让工作空间休眠。 连接数据/服务面板将服务名称和服务包集中到服务详细信息区，并新增数据类型包设置。 改进HTTP服务配置，新增基本URL及服务详细信息。注意，数据类型包配置对HTTP服务是不起作用的。 改进PHP服务配置，新增生成示例PHP服务面板。 添加中... (translate)

修改MenuBar的样式

在Flex 3的系列组件中，MenuBar应该是样式最复杂的之一，本实例的目标是制作一个黑背景白图标的菜单栏。 记住，MenuBar的样式包括MenuBar（菜单栏）自身和Menu（菜单）的样式。对于菜单栏的样式，值得一提的是，本例设定了themeColor，从而实现了鼠标移到菜单栏时的风格由默认的蓝色改为灰色。 菜单的样式比较复杂，主要是因为菜单项的图标比较多，而将这些图标的样式改变成白色，最方便的是用导入SWF或SWC资源。具体步骤如下： 用Flash CS 3（及以上版本）打开Flex Builder 3安装目录下的默认资源文件，以我的电脑不例，打开D:\Java\Flex Builder 3 Plug-in\sdks\3.2.0\frameworks\projects\haloclassic\assets\Assets.fla。 将MenuAssets电影剪辑拖入新建的Flash文件的库中，打开该电影剪辑将其正常状态下的菜单项的图标用白色填充。 将MenuAssets导出为swc并放置到工程文件的libs目录下，这样可以方便修改。Flash Builder 4有更简单的办法，见 http://www.riafan.com/article.asp?id=172 在Flex Builder 3中使用Artwork向导生成Menu样式。如下图： 点击此处查看本实例的效果，点击此处下载本实例的源码。 (translate)

如何过滤Flex图表系列中的数据缺失值

这几天，遇到一个问题：LineSeries画的不完整，从中间断掉了(如下图)。这是因为LineSeries系列中的数据有缺失值(如 null、undefined 或 NaN)造成的。将LineSeries的filterData属性设置成false，线是画完整了，但DataTip 控件却失效了。 filterData设为false，表示系列中的所有数据都有效，现在明知道其中有缺失值，这不是自相矛盾吗？所以得用其它办法： 在服务器端进行数据效验，确保数据提供者中没有缺失值； 在客户端对据提供者进行缺失值筛选； 如果水平轴为时间轴，可以考虑使用disabledRanges属性； 如果要删除field属性为缺失值的所有项目，可覆写stripNaNs () 方法。 (translate)

Adobe Cookbooks 2.0发布

Adobe最近发布了Adobe Cookbooks 2.0网站，整合了原来单独的Flex、AIR以及Mobile Cookbooks 资源。 Adobe Cookbooks是一个可供搜索查阅的RIA技术知识库应用。我们甚至可以用Adobe.com account登录提交问题、发表文章。 新版不仅新增了BlazeDS, Catalyst, PHP等技术版块，而且改进了原有的导航搜索功能，更加突显了投稿者的重要性。投稿者现在可以上传头像、链接到博客、链接到社区。另外，值得一提的是O'Reilly和Adobe Cookbooks之间的合作伙伴关系使得很多投稿者的文章有可能会被印刷成书。   (translate)

1 | Next Page