`
japankn
  • 浏览: 219530 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

state transition整合总结二 多组件改变

    博客分类:
  • flex
阅读更多

    在上一个单组件改变状态效果的基础上,增加至两个组件之间的切换,更好的理解其中的关联,下次有时间把他们之间的关系总结一下!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    styleName="applicationcenter" currentState="pan1_state">
 <mx:states>
  <mx:State name="pan1_state">
   <mx:SetEventHandler target="{but1}" name="click" handler="currentState='pan2_state'"/>
  </mx:State>
  <mx:State name="pan2_state">
   <mx:RemoveChild target="{pan1}"/>
   <mx:AddChild relativeTo="{canvas1}" position="lastChild">
    <mx:Panel x="46" y="23" width="250" height="200" layout="absolute" id="pan2" title="pan2">
     <mx:Button x="82" y="58" label="but2" id="but2" click="currentState='pan1_state'"/>
    </mx:Panel>
   </mx:AddChild>
  </mx:State>
 </mx:states>
 <mx:Style source="css/css.css"/>
 <mx:Canvas width="352" height="260" borderColor="#A42B2B" borderStyle="solid" borderThickness="5" id="canvas1">
  <mx:Panel x="46" y="23" width="250" height="200" layout="absolute" title="pan1" id="pan1">
   <mx:Button x="82" y="58" label="but1" id="but1"/>
  </mx:Panel>
 </mx:Canvas>
 
 <mx:transitions>
  <mx:Transition fromState="pan1_state" toState="pan2_state">
   <mx:Sequence>
    <mx:WipeLeft target="{pan1}" showTarget="false"/>
    <mx:RemoveChildAction target="{pan1}"/>
    <mx:AddChildAction target="{pan2}"/>
    <mx:WipeRight target="{pan2}"/>
   </mx:Sequence>
  </mx:Transition>
  <mx:Transition fromState="pan2_state" toState="pan1_state">
   <mx:Sequence target="{pan2}">
    <mx:WipeLeft showTarget="false"/>
    <mx:RemoveChildAction target="{pan2}"/>
    <mx:AddChildAction target="{pan1}"/>
    <mx:WipeRight target="{pan1}"/>
   </mx:Sequence>
  </mx:Transition>
 </mx:transitions>
 
</mx:Application>

分享到:
评论

相关推荐

    Spring_Web_Flow_2[1].0_入门.pdf

    Transition 定义了从一个 State 到另一个 State 的转换条件。例如,当用户点击“确认订单”按钮时,会触发从 View State 到下一个 State 的转换。 #### 四、购物车示例分析 以下是一个简化的购物车流程示例,用于...

    尚硅谷VUE核心技术课件资料-笔记总结

    - 过渡效果:使用Vue内置的transition组件和CSS过渡/动画实现组件的进入离开效果。 - 动画库整合:如Animate.css、Velocity.js等,与Vue结合实现复杂动画。 10. **单文件组件(SFC)** - 单文件组件结构:理解SFC...

    spring mvc 教程

    3. **与JSF整合**:通过适配层,可以将JSF组件集成到Spring Web Flow中,从而充分利用JSF丰富的组件库。 4. **与Spring Security整合**:安全性的增强是Spring Web Flow 2.0的重要特点之一,通过简单的配置即可实现...

    opencore开发文档2.pdf

    3.8. OpenMax组件从空闲状态到加载状态的转换以及去初始化(OMX Component Transition from Idle -&gt; Loaded State and De-initialization):阐述了组件状态转换的逆过程以及组件的去初始化流程。 3.9. OpenMax核心...

    spring web flow demo

    定义 transition 来实现到其他 state 的转换,转换的发生一般由事件( event )来触发。 什么情况下可以使用 Spring Web Flow? 前面讲了, Spring Web Flow 提供了描述业务流程的抽象能力,但对一种 Web 开发技术而...

    Jetpack Compose入门到精通

    例如,可以使用`AnimatedVisibility`进行可见性切换,`Transition`来创建复杂的动画序列。 ### 反馈与交互 Jetpack Compose提供了`onClick`, `onLongClick`等交互处理函数,使得按钮点击、触摸事件的响应变得直观。...

    flex3的cookbook书籍完整版dpf(包含目录)

    对指定组件应用局部Transition 11.6节. 建立在基础State之上的State 11.7节. 用HistoryManagement整合States视图 11.8节. 使用States的延时实例工厂 11.9节. 对添加到State中的Object进行数据绑定 11.10节. 在State...

    Vue实现的拼图小游戏

    每个组件有自己的状态(state)和方法(methods),用于处理用户交互。例如,我们可能有一个`PuzzleBlock`组件,它包含了当前拼图块的位置信息和旋转状态,并且响应用户的拖放操作。 CSS 在这个项目中主要负责样式...

    Osworkflow技术文档

    3. **丰富的功能组件**:Osworkflow提供了一系列用于构建复杂流程的元素,包括但不限于环节(step)、条件(conditions)、循环(loops)、分支(splits)、合并(joins)、角色(roles)等。 #### 三、Osworkflow的使用场景与...

    vue面试题30道.zip

    - Vuex是集中管理组件状态的库,提供`state`、`mutations`、`actions`等概念。 - 使用Vuex可以解决复杂应用的状态管理问题。 9. **异步组件** - 可以通过函数返回一个Promise来延迟加载组件,优化应用性能。 10...

    An online avatar generator just for fun _ 一个纯前端实现的头像生成网站.zip

    首先,Vue.js是一个渐进式的JavaScript框架,它的核心库专注于视图层,易于上手且便于与其他库或现有项目整合。Vue.js的特点包括声明式渲染、组件化、虚拟DOM、指令系统以及生命周期钩子等。在头像生成器项目中,Vue...

    html5+React+Gsap鼠标悬停文字导航菜单背景变色滑动动画特效.zip

    CSS3的`transition`和`transform`属性可能被用来实现颜色改变和元素位置的平滑变化,以创造出吸引人的视觉效果。 总的来说,这个项目结合了HTML5、React和jQuery的优势,为用户提供了一种动态的、交互式的导航体验...

    Spring Web Flow2入门(二)

    - **Flow**:是SWF的基本构建块,表示一个具有多个状态(或视图)和转换(或动作)的用户交互序列。 - **State**:每个Flow由一系列的状态组成,每个状态代表页面或者任务的特定阶段。 - **Transition**:定义了...

    Qt QML高仿微信

    例如,我们可以使用Transition和State来实现消息发送后的反馈动画。 9. **用户界面设计**:参照微信的设计,我们需要考虑布局、颜色、图标等视觉元素,以及各种交互细节,如触摸手势、下拉刷新等。Qt Design Studio...

    Kalman 滤波器

    1. **状态转移矩阵(State Transition Matrix)**:描述了系统状态从t时刻到t+1时刻的变化规律。 2. **观测矩阵(Observation Matrix)**:描述了系统状态如何转化为可观测的输出。 3. **系统噪声协方差矩阵...

    Laravel开发-laravel-workflow

    `Laravel Workflow` 提供了一种优雅的方式来管理这些状态流程,它将 Symfony 的工作流组件整合到了 Laravel 框架中。通过使用 Workflow,我们可以定义复杂的业务流程,而无需在控制器和模型中编写大量条件逻辑。 **...

    heather-react:我的投资组合的源代码

    4. **Props和State**:Props(属性)是父组件向子组件传递数据的方式,而State(状态)则是组件自身管理的数据,可以通过setState方法来更新。 在这个项目中,可能包含以下部分: 1. **路由管理**:React Router库...

    Jetpack-compose-sample

    例如,可以使用`AnimatedVisibility`来控制组件的显示和隐藏,`Transition`用于平滑地改变组件状态。此外,`State`和`LaunchedEffect`等工具使得实现响应式UI变得轻松,当数据发生变化时,UI会自动更新。 主题和...

Global site tag (gtag.js) - Google Analytics