Dreamer’s Blog ドリーマーさんのブログ

英文原文：Component Class - Part Two英語のテキスト：コンポーネントのクラス-パート2
原文地址： http://weblogs.macromedia.com/pent/archives/2007/10/component_class_1.cfm元の住所： http://weblogs.macromedia.com/pent/archives/2007/10/component_class_1.cfm
原文作者：Peter Entオリジナルの著者：ピーターent

译者：Dreamer。翻訳：ドリーマーです。 本文的翻译已经得到了原作者同意。本稿では、合意して、翻訳され、元の著者です。

组件类——第二部分 コンポーネントの作成カテゴリ-パートI I

在上一篇文章中我演示了如何基于一个既有的MXML组件——HBox来创建一个组件。 上の記事でデモをどのように基づいて私の両方のMXMLコンポーネント-h boxを作成するコンポーネントです。 在本文中我们将使用ActionScript 写一个同样的组件。 ActionScriptの本論文を書くために我々は同様のコンポーネントを使用します。 我认为这个练习很有价值，因为这会让你明白MXML组件和ActionScript 组件是多么相似。このような行為は貴重なと思うので、それを有効にすると理解してMXMLコンポーネントや部品は非常によく似てActionScriptのです。

将-keep-generated-actionscript=true 添加到Flex编译器选项中是一个不错的尝试，这样MXML文件首先就会被转换成ActionScript类，然后再编译成SWF文件。は-のk eep-生成- A ctionScriptの= t rueを追加し、 F lexのコンパイラオプションは、良い試みでは、このようなm xmlの最初の文書はA ctionScriptクラスに変換される、と入力し、 S WFファイルにコンパイルされる。 设置-keep-generated-actionscript参数会将转换的中间ActionScript类保留下来，这样我们就可以对比一下我们将要编写的ActionScript组件和编译器自动生成的ActionScript类。セット-維持のためのパラメータ的に生成さ- A ctionScriptの中産階級のA ctionScriptへの転換を保持するため、コントラストを選択して我々が用意されているコンポーネントを自動的に生成さコンパイラおよびA ctionScriptA ctionScriptのカテゴリをクリックします。

看一下上篇文章中的MXML组件，它有四个部分：根标签（HBox），Event元数据标签，Script块以及子组件（LinkButton 和Image）。記事を見て、 MXMLコンポーネント、それは、 4つのパーツ：ルートラベル（ hbox ） 、イベントのメタデータラベル、スクリプトブロックとサブコンポーネント（ linkbuttonとイメージ） 。 当你用ActionScript编写该组件的时候你将会明白这些元素都对应什么东西。 ActionScriptコンポーネントを使用する場合は、準備中の場合、何も理解して、これらの要素が対応します。

下载源文件 ダウンロードファイル
上面是本文例子的源码，里面还包含了一个图标文件。このソースは、上記の例として、あるドキュメントのアイコンも含まれています。

创建一个名为CycleSelectButtonV2的ActionScript类，并使其扩展自HBox。 cycleselectbuttonv2のActionScriptと呼ばれるカテゴリを作成する、とその拡張以来、 hboxです。 你可以使用Flex Builder的向导，或者直接使用下面的代码创建类： Flex Builderのウィザードを使用することができますか、または直接使用して次のコードを作成するより作成カテゴリ：

package com. adobe .examples.buttonsパッケージのCOMです。 Adobeからダウンロードできます。 examples.buttons
{ （
import mx.containers.HBox;インポートmx.containers.hbox ;

public class CycleSelectButtonV2 extends HBoxパブリッククラスcycleselectbuttonv2拡張hbox
{ （
public function CycleSelectButtonV2()公共の関数cycleselectbuttonv2 （ ）
{ （
super();スーパー（ ） ;
} ）
} ）
} ）

上面所说的MXML组件的四部分中的一个已经出现了：这个类扩展自HBox。 MXMLコンポーネントは、上記の4つの部品に既に出現： hbox以来、このタイプの拡大です。

MXML组件还包含一个Event元数据标签，将它添加到ActionScript类中的类定义上面： MXMLコンポーネントのイベントのデータも含まれてメタタグ、 ActionScriptのカテゴリーで定義されて追加するには、上記の作成カテゴリ：

package com.adobe.examples.buttonsパッケージcom.adobe.examples.buttons
{ （
import mx.containers.HBox;インポートmx.containers.hbox ;

[Event(name="change",type="flash.events.Event")] [イベント（名= "変更" 、タイプ= " flash.events.event " ） ]

public class CycleSelectButtonV2 extends HBoxパブリッククラスcycleselectbuttonv2拡張hbox
{ （
…

至于子控件Image 和LinkButton就需要编写一些ActionScript代码来实现。としての管理のためのイメージとlinkbuttonを検索するActionScriptのを達成するためにいくつかのコードを書く必要があります。 上篇文章中我已经提及过Flex框架是如何通过调用commitProperties()来设定属性以及其他一些东西，而创建子组件也是框架的一部分功能。上の記事に記載されて私はFlexフレームワークを呼び出すにはどのようcommitproperties （ ）の属性を設定するといくつかの他のものは、サブコンポーネントを作成するフレームワークの機能の一部でもある。

当一个组件被创建的时候Flex框架就调用createChildren()函数，无论是创建像HBox这样的容器类还是Button这样的控件。コンポーネントが作成されるときには、 Flexフレームワークを呼び出しcreatechildren （ ）関数を作成するかどうかは、このようなコンテナのようなhboxまたはこのようなコントロールボタンをクリックします。 要创建LinkButton 和Image组件，你需要覆写createChildren()函数。 linkbuttonのイメージとコンポーネントを作成するには、 createchildrenをオーバーライドする必要があります（ ）関数です。

在V2 ActionScript文件中，将下面的语句添加到HBox的导入语句后面： v2し、ドキュメントのActionScriptは、以下の声明文に追加されましたhboxの後ろのインポート：

import mx.controls.LinkButton;インポートmx.controls.linkbutton ;
import mx.controls.Image;インポートmx.controls.image ;

Image 和LinkButton的MXML标签创建了两个类成员，你可以使用ActionScript做同样的事情，将下面的代码添加到构造函数后面：ラベルの作成mxml linkbuttonのイメージと2つの部門では、使用することができますActionScriptのには、同じことを、以下のコードを追加する構造が正常に機能するの背後：

private var linkButton:LinkButton;民間var linkbutton ： linkbutton ;
private var image:Image;民間var画像：画像;

MXML文件中的子组件是公有的（public），这里我想将他们变成私有的(private)，当然，你可以根据自己的意愿将它们声明成保护（protected）或者公有的（public）。 mxml文書は、サブコンポーネントは、パブリックドメイン（公共駐車場）は、それらはここに私は希望になるには民間（私立）は、もちろん、することができます。れるに応じて自分のステートメントの願いを保護する（保護）またはパブリック（公共）です。

你还需要导入环形按钮的图片。ボタンをクリックすることもリングのイメージをインポートする必要があります。 在MXML文件中图片是直接嵌入在Image标签中的，在ActionScript中没有类似的操作，你需要将下面的代码添加到变量声明的后面：画像に直接mxml文書に埋め込まれているイメージ]タブで、 [ ActionScriptの欠如と同様の操作で、あなたのコードを追加する必要があります以下の変数の背後に文：

[Embed(source="../assets/cycle_component.gif")] [埋め込み（ソース="../資産/ cycle_component.gif " ） ]
private var cycleIcon:Class;民間var cycleicon ：クラス;

Embed元数据标签告诉编译器从文件中获取字节然后生成一个类。埋め込みメタデータのラベルに申し出てコンパイラバイトのファイルからのアクセスを生成すると入力し、カテゴリをクリックします。 cycleIcon变量的数据类型是Class，因为我们不想创建两个图像（那样会占用太多内存），而只是要共享引用那些字节的实例。 cycleiconのタイプのデータをクラス変数は、したくないので、 2つの画像を作成する（それはメモリを取り過ぎる） 、しかし、単にそれらを共有したいの例を挙げバイトです。

现在添加createChildren()函数：カートcreatechildren （ ）関数：

override protected function createChildren() : void保護機能をオーバーライドcreatechildren （ ） ：無効
{ （
image = new Image();イメージ=新しいイメージ（ ） ;
image.width = 20; image.width = 20 ;
image.height = 20; image.height = 20 ;
image.source = cycleIcon; image.source = cycleicon ;
addChild(image); addchild （画像） ;
linkButton = new LinkButton();新しいlinkbutton = linkbutton （ ） ;
addChild(linkButton); addchild （ linkbutton ） ;

super.createChildren(); super.createchildren （ ） ;
} ）

这里创建了一个Image类的实例，然后设定了它的width，height以及source属性。ここで作成した画像のような例では、と入力し、設定、 width 、 height 、およびソース属性を設定します。 同时也创建了一个LinkButton。作成するだけでなく、 linkbuttonです。 注意这两个组件是怎样通过addChild()函数被作为子组件添加的，这个函数将这些子组件放到了显示列表里，如果不使用addChild()函数这些组件就不会显示。注：これらの2つのコンポーネントを通じてどのようaddchild （ ）関数が追加されましたサブコンポーネントとして、これらのコンポーネントの関数のリストを表示、を使用していない場合はaddchild （ ）関数はこれらのコンポーネントは表示されません。 使用new操作符和addChild()来创建组件和使用MXML标签创建组件效果是一样的。新しい演算子を使用するとaddchild （ ）を作成するコンポーネントおよびラベルの使用をMXMLコンポーネントを作成する効果は同じです。

createChildren函数是在commitProperties()函数被调用之前调用的，这样你就可以为子组件添加属性了。 createchildren関数をcommitproperties （ ）関数が呼び出される前にコールすることができますので、プロパティを追加するコンポーネントです。 现在你要做得就是从V1的组件中将setter和getter以及commitProperties()函数直接复制过来。今すぐあなたがこれを行うには、コンポーネントからのv1やされるのゲッター、セッターcommitproperties （ ）関数を直接コピーします。

随着子组件LinkButton 和Image的创建与设定，现在又实现了上例MXML组件的一部分。 linkbuttonのサブコンポーネントのイメージとの作成と設定、およびケースでは、今すぐ実現してMXMLコンポーネントの部分です。

在上一篇文章中，你可以看到Flex框架中包括了对组件大小的计算。この記事は、 Flexフレームワークをすることができますコンポーネントを参照して、サイズを含めて計算しています。 MXML组件做得一个重要的事情就是计算所有元素的大小和位置，而在ActionScript组件中你需要自己编写代码来实现。 MXMLコンポーネントを計算することは重要なことはすべての要素のサイズと位置、およびActionScriptコンポーネントを準備する必要があります。独自のコードを達成するためにします。

由于我们使用了HBox作为组件的基类，所以已经有了计算子组件大小和位置的功能。として私たちのコンポーネントを使用してhboxの基底クラスとして、計算されサブコンポーネントのサイズと位置の特徴があります。 以后我们将从零开始编写一个组件，你将看到如何自己编写代码来实现这些功能。我々はゼロからのスタート]ボタンを準備中のコンポーネントの後に、あなたは自分のコードを参照するための準備を達成するために、これらの関数です。

这个时候所缺少的唯一东西就是LinkButton的click事件处理器了。この時間だけは、行方不明linkbuttonのイベントをクリックし、プロセッサが必要です。 回到createChildren()函数将下面的一行代码添加到创建linkButton之后：トップへcreatechildren （ ）関数のコード行をされるの下にlinkbuttonを作成するに以下の通りです：

linkButton.addEventListener(MouseEvent.CLICK, handleClick); linkbutton.addeventlistener （ mouseevent.click 、 handleclick ） ;

这里你还需要导入flash.events.MouseEvent 类。ここflash.events.mouseeventカテゴリをインポートすることも必要です。

使用addEventListener()函数与将事件处理器写到MXML标签中实现的功能是一样的。を使用してのaddEventListener （ ）関数とその事件のプロセッサを達成するために書いたMXMLタグの機能と同じです。

现在将V1组件中的handleClick()直接复制过来并做以下更改： v1コンポーネントでは、今すぐにhandleclick （ ）を直接コピーしてからは、次の変更：

private function handleClick( event:MouseEvent ) : voidプライベート関数handleclick （イベント： mouseevent ） ：無効
{ （
selectedIndex = selectedIndex 1;のselectedIndex =のselectedIndex 1 ;

// wrap back to zero if more than the # of items in the dataProvider. / /ラップをゼロに戻す以上の＃した商品の場合は、 DataProviderのです。
if( selectedIndex >= dataProvider.length ) selectedIndex = 0;もし（のselectedIndex > = dataprovider.length ）のselectedIndex = 0 ;

dispatchEvent( new Event(Event.CHANGE) ); dispatchevent （新しいイベント（ event.change ） ） ;
} ）

使用MXML标签的时候你可以方便地决定向事件处理器中传送什么参数，而使用addEventListener函数的时候事件处理器就只能有一个参数。 mxmlラベルを使用する時間、簡単に決定することができます。いずれにしてもプロセッサのパラメータを送信する、のaddEventListener関数を使用して、プロセッサを検索することもでき、 1つだけ事件の時にパラメータを指定します。 如果你阅读了关于LinkButton的文档并了解了它的click事件的话，你将看到它分派了一个MouseEvent，这样数据类型就会被作为参数传送到事件处理器中。 linkbuttonを検索する場合にドキュメントを読むとそのイベントの理解をクリックして、それに割り当てられたが表示さをmouseevent 、このタイプのデータが送信された事件をパラメータとしては、プロセッサが必要です。

打开Flex主程序并将所有的CycleSelectButtonV1标签更改为CycleSelectButtonV2并运行它，运行结果和上例应该没有什么两样。 Flexのオープンcycleselectbuttonv1メインプログラムとのすべてのラベルに変更さcycleselectbuttonv2し、実行して、必要がない場合の結果は異なっています。

旋转箭头 回転矢印

在上篇文章中我提到过，除了要使用ActionScript重写这个组件以外，我们还将在每次LinkButton被点击的时候旋转箭头图像。この記事申し上げましたように、使用されるコンポーネントに加えて、 ActionScriptの書き換え、我々はそれぞれのlinkbuttonにある矢印をクリックして画像の回転時間です。 我已经将这部分代码放在上面的下载文件中了，你可以自己看一下，这将是下一篇文章的主题。私はこの部分のコードを、上記のドキュメントをダウンロードして、自身することができますを見て、これは、件名の記事です。

分享收藏 共有コレクション