博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flex实现页面多态--state对象
阅读量:4198 次
发布时间:2019-05-26

本文共 5362 字,大约阅读时间需要 17 分钟。

在Flex 程序中,引入了状态设计的概念。在一个程序中,按照功能的需求,将界面切分成相对独立的部分。运行过程中,随着用户交互,界面在各个部分之间切换。比如在购物车程序中,登录界面、选购商品界面、购物车界面、付款界面,这些部分代表着不同的功能,显示当前程序的运行状态,每个界面便是一个状态(Status)。

在一个复杂的程序中,将程序按照功能进行结构划分是非常重要的,这样,问题会变得明了,这也是使用状态设计的原因。
其实,我们和状态打过很多交道,只不过没有把它理论化。比如,鼠标的点击动作,也是由几个状态组成的:鼠标移上、鼠标按下、鼠标松开、鼠标移开。用这种视角来分析问题,条理就很清楚,不容易陷入令人烦恼的逻辑纠纷中。
当状态发生改变时,我们可以为两个状态的切换添加形变动画。形变动画由若干个动画效果组成,可以理解为:状态的切换也是行为的一种,因此,形变动画的创建和使用与行为一样,非常简单。
在Flex中,状态的创建也是很简单的。我们不需要花费时间在界面的设计上,也不用去关心状态的运作方式,这些都由Flex来完成。
所有的组件都实现了状态机制,一般情况下,容器类组件或有容器特色的组件和状态机制是最佳组合,这样状态机制就可以控制程序的一个功能块。
请看实例demo.mxml的源程序:
这里在mx:states标签中添加了一对mx:State标签,用来定义一个状态,并命名为“detail”。在State对象可以使用如下方法:
l  SetEventHandler:设置对象某一事件的监听方法
l  SetProperty:设置对象的属性
l  SetStyle:设置对象的样式
l  AddChild:向对象添加一个子级元素
l  RemoveChild:删除一个子级元素
l  Transition:设置状态的过渡动画效果
当程序或组件切换到目标状态时,里面添加的方法就会被自动调用。
在上面的实例中,使用了AddChild和RemoveChild方法。其中AddChild的relativeTo属性表示目标容器,position表示新对象在容器中的位置,可选的值有before、after、firstChild和lastChild。
<mx:AddChild relativeTo="{contentPanel}" position="lastChild" creationPolicy="all">
      ……
</mx:AddChild>
position 默认是lastChild,表示在所有子级元素的最后;firstChild表示添加在目标的所有子级元素最前面;before和after分别表示添加到对象的所在容器中,处于对象位置的前面和后面。在添加对象时,creationPolicy可以控制对象对子级元素的显示操作,可选的值有:all, auto,none和queued。all表示总是创建对象;auto表示只有需要对象时才创建;queued表示将对象放在等待创建的队列中,对象完成初始化再开始创建子级元素;none则表示不创建对象,直到调用了createComponentsFromDescriptors函数时才创建它。默认为auto,有时为了强迫对象总是显示出来,可以设为all。如果没有特殊的需求,设为all就可以了。
RemoveChild使用起来比较简单,只要指定目标即可:
<mx:RemoveChild target="{img}"></mx:RemoveChild>
这条语句表示删除img对象。
在使用State对象时,currentState属性代表了当前对象的状态,利用它我们可以很方便地操作状态的切换。在函数changeState中,就是利用currentState来改变状态的:
//判断当前状态,状态默认为空值
if(currentState == "detail"){
    currentState = "";          //切换到默认状态        
    btn.label = "了解详情";      //修改按钮的文字
}else{
    currentState = "detail";    //切换到detail状态     
    btn.label = "返回简介";
}
在从默认状态切换到“detail”状态时,<mx:State name = "detail">…< mx:State>标签内的代码开始执行。如果再次返回默认状态,所有的物件仍会恢复原貌。也就是说,“detail”状态下通过 AddChild、RemoveChild等进行的修改不会影响默认状态,被删除的物件仍然还在。

转载地址:http://mibli.baihongyu.com/

你可能感兴趣的文章
【一天一道LeetCode】#122. Best Time to Buy and Sell Stock II
查看>>
【一天一道LeetCode】#125. Valid Palindrome
查看>>
【一天一道LeetCode】#231. Power of Two
查看>>
【一天一道LeetCode】#202. Happy Number
查看>>
带你深入理解STL之Vector容器
查看>>
带你深入理解STL之Deque容器
查看>>
带你深入理解STL之Stack和Queue
查看>>
带你深入理解STL之Set和Map
查看>>
Redis源码剖析--源码结构解析
查看>>
Redis源码剖析--动态字符串SDS
查看>>
Redis源码剖析--双端链表Sdlist
查看>>
Redis源码剖析--字典dict
查看>>
Redis源码剖析--跳跃表zskiplist
查看>>
Redis源码剖析--整数集合Intset
查看>>
Redis源码剖析--对象object
查看>>
Redis源码剖析--字符串t_string
查看>>
Redis源码剖析--快速列表quicklist
查看>>
Redis源码剖析--列表list
查看>>
Android开发学习 之 五、基本界面控件-4时间控件
查看>>
详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法
查看>>