在建立了Flex应用后,在MYECLIPSE中可以看到一个名叫states的视图,这个视图可以实现页面间的切换(个人感觉是通过控制层的可见性以及添加新层来完成某状态的重绘),states配置如下:
<mx:states> <mx:State name="cartView"> <mx:SetProperty target="{products}" name="width" value="0"/> <mx:SetProperty target="{products}" name="height" value="0"/> <mx:SetProperty target="{cartBox}" name="width" value="100%"/> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:DataGrid id="dgCart" width="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:RemoveChild target="{linkbutton1}"/> <mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/> </mx:AddChild> </mx:State> </mx:states>
简要分析下这段代码: <mx:State name="cartView">表示创建一个新的名为cartView的视图,
<mx:SetProperty target="{products}" name="width" value="0"/> <mx:SetProperty target="{products}" name="height" value="0"/>这2行把products容器的宽和高设为0,这样products容器被隐藏了起来不可见。
<mx:SetProperty target="{cartBox}" name="width" value="100%"/>这行让cartBox的横向填充满整个容器(高度不变),其实就是填充满刚才被隐藏了的products区域。
<mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:DataGrid id="dgCart" width="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> </mx:AddChild>这段代码是在cartBox中添加一个DataGrid 控件。
<mx:RemoveChild target="{linkbutton1}"/>这行代码移除名为linkbutton1的控件
<mx:AddChild relativeTo="{cartBox}" position="lastChild"> <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/> </mx:AddChild> 这段代码增加了一个返回base状态的链接。
看完了这个例子,我思考了如下几个问题,我们可以把某些页面存为一种状态,当我们需要的时候只要调用这个状态就可以重绘整个页面,举个简单的例子,当我们查询服务器后生成了一个页面显示学生列表,然后我们又点了很多别的页面,然后想重新看看学生列表,按以往JSP的方法,我们需要重新访问服务器请求学生列表页面,而在FLEX中可以用状态解决这个问题,我们可以把学生列表通过以上的编码方式存为一种状态,当我们需要重新查看学生列表的时候,只需要调用对应的状态就可以了,无须再请求服务器。