实现flex多视图组件的最佳方法是什么?

时间:2011-08-30 20:19:12

标签: flex air

我正在开发一个越来越大的Flex / AIR应用程序,并且需要从不同的角度看待一些组件(即Admin,Staff,User,Guest)。我已经看到自己在这些组件中放置代码来处理用户可以看到和看不到的内容。但随着代码和角色变得越来越大,它变得无法管理。我想知道在组件内部实现多个视图的最佳方法是什么,同时尽可能保持它们的可重用性。

我现在在做什么:

<mx:HBox width="100%" horizontalAlign="right" visible="{_view == TS_VIEW || _view == PRJ_VIEW}"
       includeInLayout="{_view == TS_VIEW || _view == PRJ_VIEW}">
<mx:Button label="Agregar" click="button1_clickHandler(event)"
           enabled="{_state != ADDING_STATE &amp;&amp; !_loading &amp;&amp; _canAdd}"/>
</mx:HBox>

有没有更好的方法来做到这一点,也适用于状态,因为你可以看到我和他们做的几乎是一样的。

感谢您的所有答案!

编辑 - 我正在使用Flex 3.5并将迁移到Flex 4。

2 个答案:

答案 0 :(得分:2)

我在一个我承担责任的大型代码库中遇到了类似的问题,并且我一直在努力实现两个主要目标:

  • 使视图尽可能小,并通过合成重用它们
  • 分解特定于视图的代码和后端功能(数据处理,服务器端请求等)

可重复使用的视图

当构建一个视图是另一个视图的超集者(可能是管理员和用户)时,我一直在尝试构建由相似组件组成的单独视图。管理员视图可以&#34;换行&#34;用户视图并添加所需的任何功能。当这有效时(并非总是如此),这意味着我不必处理太多状态,因为一个视图只是另一个视图的包装。

当包装不起作用时,我会尝试找到分别构建每个视图的常用功能。

例如:管理员和用户可能有登录控件,但不是来宾。这些将是一个单独的MXML组件,然后我将包含在管理员和用户视图中。所有3个共同的其他控件可能是另一个MXML组件,它将包含在所有3个视图中。这项技术要多一些工作,你需要注意不要发疯(例如每个Flex容器/控件使用一个MXML文件),但这意味着我可以重用某些可视组件而无需复制和粘贴。这也意味着如果需要,每个视图都可以自定义它们的显示方式。

我在我的观点中使用了继承,但只有当他们明显具有IS-A关系并且将代码更改为一个时才需要对另一个进行更改。我还使用状态来控制单个视图中较小的更改,但我尝试将它们限制为一个或两个状态,因此它没有像你提到的那样变得非常笨拙。


解耦功能

我使用presenters来帮助解除视图与其数据的连接。每个视图都有一个presenter对象,它为其数据绑定。这使得视图中的SCRIPT标记非常小,因为视图只需要知道要绑定的演示者中的哪些数据以及调用其控件时要调用的方法。

这些演示者也可以在视图之间共享。

以下是用户/管理员登录项目中的外观示例:

------------------
| User View      |        -----------------------       ---------------
|   Login Button |------- | Presenter           |       | Model/      |
------------------        | Login Click Handler |-------| Controller/ |
                          -----------------------       | ...         |
                                   |                    ---------------
------------------                 |
| Admin View     |                 |
|   Login Button |------------------
------------------

用户和管理员视图非常简单:它们是用MXML编写的视觉控件(HBox,Sliders,Buttons等)的集合,只需要我能管理的ActionScript代码很少(尽管它们通常有一些) )。每个都有一个presenter对象(用ActionScript编写并由框架注入),它具有可绑定的属性/数据和视图可以调用的函数。演示者还以某种方式能够将对属性/数据的改变中继到应用程序的后端(例如,通过控制器,事件等)。它们通过可绑定的属性/数据将数据的任何更新中继回视图。

为了实现这一点,我一直在使用Parsley,尽管有许多other框架也可以帮助解决这种类型的问题。

这使得创建新视图变得相当容易,因为后端功能主要是编写的。如果没有写,我会编写一个特定于我创建的视图的新演示者,或尝试通过继承或合成重用现有的演示者。


我认为这样可以更容易地迁移到Flex 4(我很快就会推动我们的项目):所有与视图相关的主要更改都应限于MXML文件和演示者应该变化很小。我不会追逐需要在视野中任何地方改变的视觉组件。

以下是两篇讨论分解观点的好文章:

答案 1 :(得分:0)

您希望使用Flex视图中内置的状态管理系统。

article about using states