Flex：如何创建一个全新的组件？答案

【问题标题】：Flex: How to create an entirely new component?Flex：如何创建一个全新的组件？
【发布时间】：2010-10-04 02:13:50
【问题描述】：

我想为 Flex 开发一个网络图应用程序 - 想象一下将节点放置在 Canvas 上并通过链接将它们连接起来。节点应具有可编辑的文本和其他 UI 组件。

我正在尝试查找从头开始创建全新 UI 组件的示例，但我所能找到的只是扩展现有组件的简单示例：例如，扩展 Button 的 RedButton 或有状态可供选择。

我的主要问题是，什么 ActionScript 方法定义了组件的绘制？ 什么是 Java 的 paint() 方法的 ActionScript 等效项？

【问题讨论】：

【解决方案1】：

您想创建一个覆盖 updateDisplayList 方法的组件，并在其中进行绘图：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
  super.updateDisplayList( unscaledWidth, unscaledHeight );

  // The drawing API is found on the components "graphics" property
  graphics.clear();
  graphics.lineTo( 0, unscaledWidth );
  // etc
}

【讨论】：

【解决方案2】：

如果您需要自定义组件的示例，我建议您查看flexlib 项目。

livedocs here中有很好的一般信息

虽然您可以在 MXML 和 ActionScript 中创建自定义组件，但我建议您在 ActionScript 中实现它们。

简而言之，这就是您需要做的：

当您在 ActionScript 中创建自定义组件时，您必须覆盖 UIComponent 类的方法。您实现了基本的组件结构、构造函数以及 createChildren()、commitProperties()、measure()、layoutChrome() 和 updateDisplayList() 方法。

【讨论】：

【解决方案3】：

我建议阅读 Peter Ent 关于创建自定义组件的 5 部分教程系列。 Here 是第 1 部分的链接。

同样推荐，ItemRenderers 和 ItemEditors 的教程系列。

【讨论】：

【解决方案4】：

Kazoun 和 Lott 编写的 Programming Flex 2 第 19 章展示了构造事件模型以及刷新事件模型。

简而言之，Flex 组件结构假定您具有影响其外观的对象属性。它允许属性修改器通过继承的 invalidateProperties() 方法使组件的“内容”（例如文本）无效，而不是立即应用更改。当属性更改将改变组件的大小时，还调用 invalidateSize()，当需要重新绘制事物时调用 invalidateDisplayList()（而不是仅仅使用不同的文本）。

这种失效模型优化了组件的工作。它不会测量自己，除非它知道它改变了大小；它不会放置和绘制自己，除非自上次更新布局以来调用了 invalidateDisplayList() ；并且它不会将其属性值移动到其子组件中，除非它知道这些值已更改。

干杯

【讨论】：

【解决方案5】：

典型的行为是对现有组件进行子类化，主要是因为已经为您完成了实现这么多最典型类型组件功能的大量工作——您只需要知道哪个组件最相似您要创建的那个。（考虑到有多少，这本身就是一个挑战。）

不过，如果您愿意，您可以通过扩展 UIComponent（这将为您提供所有基线内容）“从头开始”创建一个非常简单的 UIComponent，或者我想，如果您是真的追求极简主义，而你已经准备好迎接挑战，你可以只实现IUIComponent，并手动定义每个接口方法。如果您确实选择了第二条路线，请帮自己一个忙，先listen to this talk -- 这是对 Flex 组件架构的深入讨论，由 Flex 团队的一位工程师提供。我经常强烈推荐它；它非常好，它阐明了许多组件开发细节，这些细节仍然没有得到很好的记录。如果您要构建您所描述的那种非平凡的自定义组件，那么非常有价值的东西。

希望对您有所帮助。祝你好运！

【讨论】：