Flex 工作流程和最佳实践

Posted 2023-02-23

【中文标题】Flex 工作流程和最佳实践

【英文标题】：Flex workflow and best practice

【发布时间】：2010-12-02 20:13:23

【问题描述】：

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

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

左上角的面板将包含一个垂直滚动的类别列表。 左下方面板将包含子类别的***效果，具体取决于所选类别。 右上角的面板将包含详细信息 - 选定的类别标题和描述。在其下方，是选定的子类别标题和说明。 右下方面板将包含属于子类别的服务和产品项目的列表。列表中的每个项目下方将是一个链接组手风琴，其中包含 url 链接，以获取每个项目中的更多信息。

将有一个 XML 文件包含驱动此协作索引的完整数据树。 此外，根据所选的类别，某些布局部分的背景会出现颜色差异。

因此，看来我需要创建一些自定义组件，可能会采用一些现有组件，并重新设计所有内容，使其具有与客户品牌同义的外观和感觉。

虽然我有一堆问题，但处理第一部分似乎是合乎逻辑的，而本部分想到的第一个问题是：在左上角面板中，类别列表是否应该是标准的 Flex 按钮？剥皮？或者它们应该是以某种方式引入 Flex 的对象实例。 然后在第二部分，我看到了一个组件，它以非常适合本部分的方式显示图像。但是，这里显示的项目只是视觉的圆角块，其中包含子类别名称。所以，我不确定该组件是否可以工作。

【参考方案1】：

AS3 与 AS2 非常不同。我相信你现在已经注意到了，但如果你还没有注意到，那也值得一提。

Flex 组件基本上只是一个 Flash 对象包。因此，您可以使用 Sprite 和/或 TextField 自行编写每个 Flex 组件。这包括皮肤。皮肤几乎只是通过自定义绘图附加到对象的形状。

按钮只是图像+文本字段+皮肤的组合，为您管理所有事件和皮肤转换。

我提到这一点的原因是没有正确的方法来做你想做的事。如果您使用 List 控件，您可能应该编写一个实现 IListItemRenderer 的组件。 Button 可以，因此您可以简单地覆盖 Button，没有问题。您可以使用带有标签 + 图标的按钮。或者只是图标。或者只是一个标签。您还可以定义标签相对于图标的位置（labelPosition="above|below|left|right"）。有很多内置的灵活性。

【参考方案2】：

感谢提及FlexSpaces。请注意，它最终被移植到 Flex 4，包括在今年早些时候首次通过转换为火花控制。仍然要做：使用 Spring ActionScript 添加依赖注入，删除使用 Cairngorm 2.x。

【参考方案3】：

在过去的 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 组件，因此您可以根据需要使用在 Internet 上找到的项目/组件，没问题。

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 项目是您所说的一个非常可靠的示例。完全开源。

干杯

【讨论】：

Flex 4 仍处于测试阶段。在这里可能不是问题，但值得一提。

Flex 4 在我需要的视觉定制方面取得了飞跃式的进步。所以，这正是我希望得到的信息。谢谢！