Flex工作流程和最佳实践

时间:2009-09-30 23:47:46

标签: flex user-interface interface components skinning

在回顾教程和示例Flex项目时,他们似乎主要关注表单元素和数据网格,而不是以更直观的方式提供内容。这是即将到来的项目所需要的。结果,我的舒适度有差距,我希望经验丰富的Flex开发人员可以帮助我。

我所拥有的项目是一个协作索引工具,可以使用具有四个独立面板的用户界面显示客户的产品和服务。

  1. 左上方的面板将包含垂直滚动中的类别列表。
  2. 左下方面板将根据所选类别包含子类别的轮子效果。
  3. 右上方面板将包含详细信息 - 所选的类别标题和说明。在此之下,选择的子类别标题和说明。
  4. 右下方面板将包含属于子类别的服务和产品项列表。列表中的每个项目下方都是一个带有URL链接的链接组手风琴,以获取更多信息。
  5. 将有一个XML文件,其中包含驱动此协作索引的完整数据树。 此外,根据所选的类别,颜色差异将出现在某些布局部分的背景中。

    所以,似乎我需要创建一些自定义组件,可能会采用一些现有组件,并重新设置所有内容,使其具有客户品牌的同义外观。

    虽然我有很多问题,但解决第一部分似乎是合乎逻辑的,本节中首先想到的问题是:在左上角的面板中,类别列表是否应该是标准的Flex按钮剥皮?或者它们应该是以某种方式引入Flex的对象实例。 然后在第二部分中,我看到了一个以适合本节的方式显示图像的组件。但是,此处显示的项目只是视觉上的圆角块,其中包含子类别名称。所以,我不确定该组件是否有效。

3 个答案:

答案 0 :(得分:1)

  1. AS3与AS2非常不同。我相信你现在已经注意到了,但是如果你没有注意的话,值得一提。

  2. Flex Components基本上只是一个Flash对象包。因此,您可以使用Sprites和/或TextFields自行编写每个Flex组件。这包括皮肤。皮肤几乎只是一个附加到具有自定义绘图的对象的Shape。

  3. 按钮只是图像+ textField +皮肤的组合,可以为您管理所有事件和皮肤过渡。

  4. 我提到这个的原因是没有正确的方法来做你想要的。如果您正在使用List控件,则应该编写一个实现IListItemRenderer的组件。按钮,所以你可以简单地覆盖按钮,没有问题。您可以使用带有标签+图标的按钮。或者只是图标。或者只是一个标签。您还可以定义标签相对于图标的位置(labelPosition =“above | below | left | right”)。有很多内置的灵活性。

答案 1 :(得分:1)

感谢您提及FlexSpaces。请注意,它最终移植到Flex 4,包括今年早些时候首次转换为spark控件。还有待处理:使用Spring ActionScript添加依赖注入,删除Cairngorm 2.x的使用。

答案 2 :(得分:0)

在过去的6个月里,我一直在大力开发Flex 4,并且必须说它会让你的工作变得非常轻松。

这就是我要做的事情:

1)查看FlexSpaces以获得最佳的Flex 3项目架构。它是Flex中功能齐全的CMS,包括类别,标签,搜索,文件系统,协作等。

2)下载Flex 4 SDK并安装它。没有必要再使用Flex 3了,如果你刚开始使用,请务必使用Flex 4.如果你需要自定义组件,Spark(新的组件架构)有一个非常简单的方法(这里是一个很酷的博客文章)在Spark中构建一个Rating Component,告诉你它是如何做到的。 Flex 4向后兼容Flex 3组件,因此您可以根据需要使用在互联网上找到的项目/组件,没问题。

3)对于左上角的类别列表,如果类别没有嵌套,我会使用spark.components.List,(here's one使用更复杂的项目渲染器)。然后只需扩展spark.components.supportClasses.ItemRenderer,就像皮肤一样。如果嵌套了类别,只需使用mx.controls.Tree即可。看看FlexSpaces为此项目(它们展示了如何在树中使用XML / ArrayCollections,你的“对象实例以某种方式引入flex”问题)。

4)对于车轮效果,到目前为止我唯一不喜欢Spark的是布局的动画很难。但人们开始制作3D布局,请查看Ryan Campbell的Here's 5 3D Layouts for Flex 4。如果你想要非常容易的动画布局,还有OpenFlux。一般来说,Flex效果非常笨重,所以我最终只使用Tweener或TweenMax进行动画制作。

5)至于重新设计,尝试使用Flex 3架构重新设计将是一项艰巨的任务,如果你想让它看起来干净漂亮,那么在下一个项目中尝试重用该代码将是疯狂的。对于Spark来说,它是一个快速的,它是100%mxml。只需从SDK中复制整个sparkSkins文件夹并开始更改内容,就可以了。

但是,FlexSpaces项目对于你所谈论的内容来说是一个非常可靠的例子。完全开源。

干杯