Flex的视图状态。

关注

原创最新推荐文章于 2014-09-02 16:28:04 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

Flex使用视图状态(View States)笔记使用视图状态(简称VS)能够让你的程序根据用户的操作显示不同的组件内容和组件外观。在RIA中，界面会根据不同的任务而改变，简单的例子比如：当鼠标滑过一张图片的时候，将会显示关于这个图片对应的内容，比如拍摄时间，地点，日期等内容，鼠标离开的时候，只显示一张图片。这就是VS的一个简单的应用。立即下载

在建立了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中可以用状态解决这个问题，我们可以把学生列表通过以上的编码方式存为一种状态，当我们需要重新查看学生列表的时候，只需要调用对应的状态就可以了，无须再请求服务器。

收录于