时间线

My Life My Style

Flex的界面导航

为什么需要专门的导航系统?
Flex应用区别与以往的Web应用, 它具备典型的C/S特性:
1.One-page application的架构, 没有多页面的情况.
2.控件高度封装.
3.本地运算能力高.

由于Flex应用是运行在浏览器中, 它会有下面的限制:
1.对浏览器历史的支持
2.对Deep link的支持,以及URL参数的支持.
3.对浏览器刷新后状态的保留.

可以看出, 如果不设计, Flex下的导航变得很复杂.

主要导航方案:

ViewStack导航
很多的容器控件, 如ButtonBar, TabNavigator, 都需要一个ViewStack的数据源.

ViewStack有以下特征:
1.延迟初始化控件. 只初始化当前显示的控件, 在导航的过程中才会初始化其他的控件(Lazy Load).
2.只初始化一次. 一旦一个导航页完成了初始化, ViewStack不会再次创建.
3.导航面积比较大, 或者内部控件结构复杂, 都会导致运行效率降低.
4.支持HistoryManager, 允许浏览器的前进后退.
5.支持特效.
6.可以绑定到导航控件, 如ButtonBar, TabNavigator.

State导航

State导航有以下特征:
1.延迟初始化控件.
2.只初始化一次.
3.效率比较高.
4.不支持HistoryManager.
5.支持特效.
6.不能绑定导航控件.

导航选择策略
通常会混合使用. 单独使用任何一种都可能会使导航变得过于复杂. 必须根据项目的特点来进一步确定.
较大面积, 范围的导航尽量使用State(如子系统之间的导航).

如果几个导航界面之间有共同的部分(即, 整个界面只有一部分控件在变化),使用State较好.

如果几个导航界面之间完全不同, 两者都可以使用.

如果需要绑定到导航控件, 使用ViewStack. 这个时候使用State, 只能手写代码控制.

最佳实践
一个系统可以分成不同的子系统模块, 主mxml文件里使用任何一种作为主要导航.
每个子系统模块内部的导航有自己完成, 可以使用任何一种.
牵涉到跨子系统的导航需要在主程序, 或者是主框架的层次上解决.
使用AnimateProperty做动画, 尽可能不使用标准的效果(Resize, Zoom, Blur…).

附记
关于如何实现自定义控件的浏览器历史功能, 请参看帮助文档.
Flex 2不支持Deep link. Flex 3支持.

一条关于Flex的界面导航的评论

  1. 守望者 06月 3, 2009 @ 2:21 pm

    介绍一下TAB,操作完了如何刷新但前选项卡

发表评论

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Connecting to %s

加关注

Get every new post delivered to your Inbox.