Flex中在DataGrid加载数据时显示Loading...
网络状况是互联网发展与软件发展的一个很大的瓶颈,如果哪天访问网上资源能象访问本地硬盘,或者能象访问内存那样快,那样咱们的计算机以后只需要输入输出设备以及网络设备就可以了,哈哈,这只是一个美好的愿望。
Flex应用在Web开发上,避免不了网络问题,下面的说明如何在加载数据时显示Loading状态,刚刚接触Flex不久,欢迎拍砖。
原理是这样的,首先定义了两一个ViewState,其中一个就是Loading状态,当点击按钮的时候就显示这个Loading视图,直到数据加载完之显示数据的视图。
先看效果图片:
首先,点击了按钮之后就会由于网络问题显示一个遮罩,上面用了一个Label显示Loading...字样,当然这里可以用任何更加漂亮的东西替换,比如GIF的图片。这里的网络问题由于是在自己的机器上测试,是人为造成的,我的服务器代码是使用的JAVA,在服务器上延迟了三秒加载数据。
三秒之后显示:
代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<!--加载视图,可以自己制作加载画面,
这个例子就只用了一个LABEL表示一下正在加载-->
<!--数据加载成功后的State-->
<mx:State name="ListState">
<mx:AddChild relativeTo="{pl}" position="lastChild">
<mx:Canvas id="can" width="100%" height="100%">
<mx:DataGrid id="dg" horizontalCenter="0" width="100%" height="100%" >
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="p_id"/>
<mx:DataGridColumn headerText="Title" dataField="p_title"/>
</mx:columns>
&l
相关文档:
这个DEMO可以创建一个全新的树型结构,让我感到奇怪的是,虽然我用XML而不是XMLListCollection/ArrayCollection作为Tree的数据源,但对XML的更新依然会在Tree中反映出来——这似乎和Flex的文档有冲突,下面是引用Flex文档的一段内容:
Raw objects are often not sufficient if you have data that changes, bec ......
<?xml version="1.0"?>
<!-- charts/MemoryGraph.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initTimer()">
<mx:Script>
<!--[CDATA[
import flash.utils.Timer;
import flash.events.TimerEve ......
<?xml version="1.0"?>
<!-- charts/ColumnWithDropShadow.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flash="flash.filters.*">
<mx:Script>
<!--[CDATA[
import mx.collections.ArrayCollection;
[Bindab ......
1.下载安装netbeans6(我的版本是6.7.1)
2.下载Flex Sdk 3 ,将其解压到指定的一个目录。http://www.adobe.com/cfusion/search/index.cfm?loc=en_us&term=flex+sdk&siteSection=cfusion%3Atdrc
3.下载netbeans的flex插件 http://sourceforge.net/projects/flexbean/files/
4.netbeans配置Flex插件,配置成 ......
<mx:TextArea
width=
"200"
height=
"100"
>
<mx:htmlText>
This is an example of setting a <B>
TextArea</B>
control's <I>
htmlText<I>
property.
</mx:htmlText>
</mx:TextArea>
支持的样式标记
< ......