flex 自定义组件

Posted 2023-04-20

用AS写 一个模型按钮
默认红色
鼠标经过黄色
鼠标点击蓝色
我想学FLEX 自定义组件给个模型就可以了 不要用skinClass 实现
谢谢你的回答。 但是我已经说明了。 我是想学习下扩展。

重写组件
一、为什么要重写组件
1、在FLEX已有组件无法满足业务需求，或是需要更改其可视化外观等特性时，直接进行继承扩展。举例，继承BUTTON组件的长文本却不自动换行的自定义控件。
2、为了模块化设计或进一步重用，需要对FLEX组件进行组合。比如一个包括TEXTAREA,BUTTON的复合控件。
二、重写组件需要经常换位思考的三个角色
1、作为重写组件的使用者，有哪些需求。比如需要在MXML标签和AS代码中暴露哪些属性及对应默认值、事件和事件的处理逻辑。
2、重写组件一般需要使用FLEX原有组件，要站在原有开发者的角度了解设计规则。
3、作为重写组件的设计者，在满足需求的情况下尽量做到可复用、低耦合易扩展等设计原则，让新组件像FLEX原组件一样好用。
三、重写组件AS方式和MXML方式的采用规则
1、MXML文件和AS文件最后都会被编译成AS类，只不过MXML编译速度稍慢一些
2、如果MXML和AS都能完成的一个简单组件，MXML更容易被创建和控制布局
3、当要覆盖组件的某些方法时只能用AS方式
4、创建一个直接继承UIComponent的子类时只能用AS
5、创建非可视化组件比如Formatter、validator、Effect……时，只能用AS
6、要为组件添加日志功能时，只能用AS.
四、AS方式重写组件常规步骤
1、如果有必要，为组件创建所有基于标记（tag-based）的皮肤（skins）
2、创建ActionScript类文件
⑴从一个基类扩展，比如UIComponent或者其他的组件类
⑵指定使用者能够通过MXML标记进行设置的属性
⑶嵌入（Embed）所有的图片和皮肤文件，文件大小尽可能小
⑷实现构造器，可以设置属性和样式的缺省值，或者初始化数据结构，比如数组
⑸根据需要，确定是否覆盖以下五个方法：
(a)UIComponent.createChildren()方法，创建组件的子组件
(b)UIComponent.commitProperties()方法，提交组件所有的属性变化，设置measure()方法可能使用的属性值。绝大多数情况下，都是对影响组件如何在屏幕上显示的属性使用这个方法
(c)UIComponent.measure()方法，设置组件的缺省size（measuredWidth、measuredHeight）和缺省的最小size（measuredMinWidth、measuredMinHeight）
(d)UIComponent.layoutChrome()方法，用于定义容器的边框区域和确定边框区域的位置，以及确定要在边框区域中显示的附加元素。例如，Panel 容器使用layoutChrome()方法定义panel 容器的title 区域，这个区域用来包含title 文本和close 按钮。
通常，使用RectangularBorder 类来定义容器区域的边框，而不是用图片资源去包围组件。比如创建一个RectangularBorder 对象，然后在重载的createChildren()方法中,将其作为一个内容子控件添加到组件中，再用updateDisplayList()方法来确定其位置。
将容器的内容区域和容器边框区域分开处理的主要原因是为了应对Container.autoLayout
属性被设置为false 的这种情况。当autoLayout（自动布局）属性使用默认值true时，只要容器子控件的大小和位置发生变化，容器及子控件就会进行度量和布局。而当其为false时，度量和布局只在子控件被添加或移出容器时才执行。分开处理让Flex 在这两种情况下都执行layoutChrome()，从而在autoLayout属性为false 的情况下，容器仍能够更新它的边框区域。
(e)UIComponent.updateDisplayList()方法，根据以前所设置的属性和样式来确定组件的子组件在屏幕上的大小（size）及位置（position），并且画出组件所使用的所有皮肤（ skins）及图形化元素。组件的父容器负责确定组件本身大小（size）。
要在updateDisplayList()方法中确定一个组件的大小，当子组件是UICOMPONENT时使用setActualSize()方法，而不是UICOMPONENT则使用与组件大小相关的属性width 和height。要确定组件的位置，当子组件是UICOMPONENT时使用move()方法，而不是UICOMPONENT则使用x 和y 属性。一个区别就是move()方法不仅改变了组件位置，而且在调用这个方法之后立即分发了一个move 事件，设置x和y属性也更改组件的位置，但却在下一个屏幕更新事件中才会分发move 事件。
组件支持很多类型的可视元素，比如皮肤，样式和边框。在updateDisplayList()方法中，可以添加这些可视元素，并对它们进行一些控制。由于UICOMPONENT继承自SPRITE，所以可以使用Graphics对象中的Flash绘画APIs进行绘制图形，比如使用Graphics 类去画边框水平线以及其他图形元素：
graphics.lineStyle(1, 0x000000, 1.0);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
updateDisplayList()方法形式如下：
protected function updateDisplayList(unscaledWidth:Number，unscaledHeight:Number):void
以像素为单位的组件坐标系中，unscaledWidth和unscaledHeight是由父容器确定的组件大小，而不管组件的scaleX,scaleY是多少。缩放发生在Flash Player或者AIR中，发生时机是在updateDisplayList()执行之后。比如一个组件的unscaledHeight属性是100，而其scaleY 属性是2.0,那么它在Flash Player或AIR中出现的高度为200像素。
需要注意的是，定义新组件时不一定要重载所有的五个方法，只需重载实现组件功能所必需的即可。比如实现一个自定义的Button 控件，该控件使用新的机制来定义缺省大小（size）。在这种情况下，只需要重载measure()方法。或者，要实现VBox 容器的一个新子类。新子类利用VBox 类已有的所有有关设定大小（sizing）的逻辑，但是变更了VBox 类的布局逻辑以实现从底部到顶部的方式来布局容器中的子控件，而不是自顶向下的布局。在这种情况下，只需要重载updateDisplayList()方法。
(6)增加属性（properties），方法（methods），样式（styles），事件（events）以及元数据
3、以ActionScript文件或者SWC文件的形式部署组件
五、深入组件生命周期
1、生命周期（LifeCycle）简述
⑴调用组件构造函数。构造函数没有返回类型，没有参数，使用super()调用父类的构造器
⑵使用set,get设置组件属性，常在set方法内监控一个布尔变量来实现失效机制
⑶调用addChild()方法将组件添加到父组件显示列表中，FLEX将自动调用createChildren()，invalidateProperties()，invalidateSize()，invalidateDisplayList()。只有将组件添加到父容器中，FLEX才能确定它的大小(size)，设置它所继承样式(style)属性，或者在屏幕上画出它
⑷组件的parent 属性设置为对父容器的引用
⑸样式(style)设置
⑹组件分发preinitialize事件
⑺调用组件createChildren()方法
⑻调用 invalidateProperties()，invalidateSize()，invalidateDisplayList()失效方法，FLEX将在下一个“渲染事件”(render event)期间对相应的commitProperties()，measure()， updateDisplayList()方法进行调用。这个规则唯一例外就是当用户设置组件的height 和width 属性时, Flex 不会调用measure()方法。也就是说，只有当组件的explicitWidth 和explicitHeight 属性是NaN 时Flex才会调用measure()方法。
⑼组件分发initialize事件。此时组件所有的子组件初始化完成，但组件尚未更改size和布局，可以利用这个事件在组件布局之前执行一些附加的处理
⑽在父容器上分发childAdd事件
⑾在父容器上分发initialize事件
⑿在下一个“渲染事件”(render event)中, Flex 执行以下动作：
a.调用组件的commitProperties()方法
b.调用组件的measure()方法
c.调用组件的layoutChrome()方法
d.调用组件的updateDisplayList()方法
e.在组件上分发updateComplete事件
⒀如果commitProperties()， measure()，updateDisplayList()方法调用了invalidateProperties()，invalidateSize()，invalidateDisplayList()方法，则Flexh 会分发另外一个render事件
⒁在最后的render事件发生后, Flex执行以下动作：
a.设置组件visible属性使其可视
b.组件分发creationComplete事件，组件的大小(size)和布局被确定，这个事件只在组件创建时分发一次
c.组件分发updateComplete事件。无论什么时候，只要组件的布局(layout)，位置，大小或其它可视的属性发生变化就会分发这事件，然后更新组件来正确地显示。
2、为什么使用失效机制（invalidation mechanism)
一种情况是，当设置了组件的多个属性后，比如Button 控件的label 和icon 属性，我们需要所有属性被设置后一次性执行commitProperties(), measure(), updateDisplayList()方法，而不是设置过label 属性后执行一遍这些方法，然后在设置icon属性后又执行一次这些方法。
另一种情况是几个组件同时更改了它们的字体大小。程序更改字体大小的执行速度大大快于Flex 更新应用的速度，因此要在确定最终更改字体之后才开始更新布局。另外，Flex 需要协调布局操作以消除任何冗余过程，而不是在每个组件更新它的字体大小之后都执行一次布局操作。
Flex 使用“失效机制（invalidation mechanism）”来同步组件的更改。Flex 用一系列方法的调用，比如在setter方法内监控一个变更变量来标记组件的某些东西已经发生变化， 然后在下一个“渲染事件（renderevent）”中触发组件的commitProperties(), measure(), layoutChrome()，updateDisplayList()检查这些布尔变量来完成最终的变更逻辑。这样做的额外好处就是setter方法可以更迅速地返回，把对新属性值的处理留给了commitProperties()方法。
失效方法及其对应的触发函数如下：
invalidateProperties() 通知组件，以使下次屏幕更新时，它的commitProperties()方法被调用。
invalidateSize() 通知组件，以使下次屏幕更新时，它的measure()方法被调用。
invalidateDisplayList() 通知组件，以使下次屏幕更新时它的layoutChrome()方法和
updateDisplayList()方法能被调用。
当组件调用一个“失效”方法时，它就通知Flex该组件已经被更新。当多个组件调用失效
方法，Flex 会在schedules中协调这些更新，以使这些更新操作在下一次屏幕更新时一起执行。注意，createChildren()没有对应的失效方法，它会在调用后被立即执行。
六、几个重写组件的例子
参见DEMO,详见注释。
到csdn下载
flex中的组件重写例子 参考技术A css 比自定义简单， 你要的模型是什么东西，是个例子么本回答被提问者采纳 参考技术B 如果是想要学习扩展，这个例子涉及不到多少。

FLEX：flash 组件没有收到它自己的自定义事件

【中文标题】FLEX：flash 组件没有收到它自己的自定义事件

【英文标题】：FLEX: flash-component not receiving it's own custom event

【发布时间】：2011-08-22 14:22:39

【问题描述】：

我在 Flash 中制作了一个动画剪辑，它调度了一个自定义事件：MyEvent.THE_TYPE = "the_type"

在 flex 中我有：<local:my_flash_mc the_type="do_something()"

但是，这不起作用。

在 Flash 中，我的事件气泡设置为 true。在 Flash 中一切正常。

在 flex 中我没有使用：

<fx:Metadata>
  [Event(name="the_type", type="...")]  
</fx:Metadata> 

... 因为我认为这仅与自定义弹性事件有关；加上 .swc 已经编译好了，所以这里没有理由在 type 参数中标识事件类。

我尝试在我的事件类中创建一个“名称”属性，但没有成功。

有什么想法吗？

谢谢

【问题讨论】：

请参阅：forums.adobe.com/message/3668890#3668890 详细说明我如何解决我的问题......主要问题（对我来说）是 [EVENT ...] 元数据......一旦我把它放进去我的 flash mc，Flex 开始认识到该组件需要自定义事件（代码提示列出了该事件）。

@user689152 回答您自己的问题的正确方法是回答您自己的问题并将其标记为此类。尽管如此，您的解决方案（使用元数据）对我来说没有多大意义。元数据的存在应该不会影响事件是否触发，并且您链接到的问题侧重于代码提示；而您的问题在这里声称该事件不会触发。两个截然不同的问题。

对此感到抱歉...但是 *** 不允许我在原始帖子至少 8 小时后“回答”我的问题...为什么我的回答对您没有意义？我没有说我在触发事件时遇到了问题……我说我在接收事件时遇到了问题……并且在我的 flash 组件中没有 [Event ...] 元数据，flash 的 flex 插件无法调度flex 环境的事件（尽管 flash 环境将按预期运行）...

@user689152 真；您确实说过您无法接收（AKA 收听）该事件。但是，您的回答与此无关；它仅与 MXML 中的代码提示有关。我的回答和@J_A_X 回答都告诉您如何在 ActionScript 中侦听事件，而无需准备好元数据。

我提到了代码提示，因为它表明 flex 至少可以“访问”事件。如果没有这种“访问”，它永远不会以一种或另一种方式听到它......代码提示是问题解决过程中的基准（对我而言）。

【参考方案1】：

由于 Flash 和 Flex 之间的限制，您不能像在 Flex 中那样使用您的 MC。您必须使用“addEventListener”手动将事件侦听器添加到您的 MC。

【参考方案2】：

请定义“不工作”的含义。我假设您收到编译器警告。这段代码：

<fx:Metadata>
  [Event(name="the_type", type="...")]  
</fx:Metadata> 

告诉 Flex 编译器该事件存在，并将让它用于 MXML 中的代码提示。所以，我猜是这样的：

<local:my_flash_mc the_type="do_something()" />

正在引发编译器错误。那是对的吗？解决方法是在 ActionScript 中添加事件监听器：

my_Flash_MC_Instance.addEventListener('the_type',do_something);

在 do_something 处理程序方法中，您必须传递事件（在 MXML 中不需要）：

protected function do_something(event:MyEvent):void
 // processing here

【讨论】：

'not working'：flash 组件正在接收它的 mousedown 事件（在 flash mc ... 中定义在 flash 的时间轴上）。 mousedown 事件正在调度一个自定义事件（我可以从 mc: onHandleMyCustomEvent 中跟踪它......现在我将它注释掉了，这样它就不会捕获事件）。 flex 中的代码提示没有显示与我的自定义事件相关的任何内容。 flex 编译器没有抛出错误（我希望它是）。

我正在使用我在这里找到的方法：tv.adobe.com/watch/under-the-hood-with-adobe/… ...他不使用

@user689152 无需指定元数据来分派或收听事件。你怎么知道 Flash 组件正在接收它的 mousedown 事件？您提到了时间线，但在 Flex 应用程序中将该组件用作 SWC 时，您将无法获得此类信息。您提到您可以在处理程序内部进行跟踪。如果是这样，事件必须被触发。

flash 组件在它自己的 mouse_down 处理程序中有一个跟踪...该跟踪显示在 Flex 的控制台中...该事件总是触发，但我无法让 flex 检测到它

@user689152 您将不得不为我们提供更多代码来确定问题所在。你说的似乎不可信。

【参考方案3】：

请参阅：forums.adobe.com/message/3668890#3668890，详细了解我如何解决我的问题...

对我来说，主要问题是 [Event ...] 元数据标签。

一旦我将它放入我的 flash mc，Flex 就开始认识到该组件需要自定义事件（代码提示列出了该事件）。

【讨论】：

-1 到这个答案，原因之前在 cmets 中对主要问题进行了说明。 Flex 不需要元数据来监听事件或分派它们。元数据仅用于 IDE 中的代码提示（和 ASDoc 生成）。

你给了我一个-1来回答这个问题？你怎么了......我的答案有效......如果它对你不起作用，那么就你自己的解决方案与我的解决方案之间的差异给出一个有意义的解释......但不要开始否定...... . 你会误导以后可能会看到这篇文章的人。

我给了你一个-1，因为它提供了一个与你的实际问题无关的答案。从我的 cmets 关于最初的问题：“元数据的存在应该不会影响事件是否触发，并且您链接到的问题侧重于代码提示；而您的问题在这里声称事件不会触发。两个非常不同的问题" 元数据与事件是否触发无关；它只与代码提示有关。

解决方案的过程通常是一个渐进的、曲折的路径……期望每个解决方案都与其原始问题具有直接线性关系是不现实的。您的 -1 误导了未来的读者……我的解决方案“与（我的）实际问题无关”这一事实是由于解决问题本身的性质（坦率地说，这是您的主观意见）……