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 원래 저자 : 피터 피부과

译者：Dreamer。 역자 : 꿈꾸는합니다. 本文的翻译已经得到了原作者同意。 이 종이는 원래 저자의 번역은 합의합니다.

组件类——第二部分 구성 요소를 분류 - 제 2

在上一篇文章中我演示了如何基于一个既有的MXML组件——HBox来创建一个组件。 의 기사에서 데모 나를 기반으로하는 방법을 모두 mxml 구성 요소 - hbox의 구성 요소를 작성합니다. 在本文中我们将使用ActionScript 写一个同样的组件。 우리는 플래시에서이 논문을 쓸 비슷한 구성 요소를 사용합니다. 我认为这个练习很有价值，因为这会让你明白MXML组件和ActionScript 组件是多么相似。 이 연습은 귀중한 것 같아요 때문에, mxml 구성 요소 및 actionscript을 사용하면 그 구성 요소를 이해하기는 매우 유사합니다.

将-keep-generated-actionscript=true 添加到Flex编译器选项中是一个不错的尝试，这样MXML文件首先就会被转换成ActionScript类，然后再编译成SWF文件。 이 - 계속 - 생성 - actionscript = 진실에 추가 플렉스 컴파일러 옵션은 좋은 시도, 처음 같은 mxml 문서는 actionscript 클래스로 변환을 누른 다음으로 swf 파일을 컴파일합니다. 设置-keep-generated-actionscript参数会将转换的中间ActionScript类保留下来，这样我们就可以对比一下我们将要编写的ActionScript组件和编译器自动生成的ActionScript类。 설정 - 계속 - 생성 - actionscript 매개 변수를 유지 actionscript 중산층의 전환을, 우리가 무엇을 드릴 수 있도록 명암을 사용할 수 있도록 준비하는 구성 요소와 분류 actionscript actionscript 컴파일러를 자동으로 생성합니다.

看一下上篇文章中的MXML组件，它有四个部分：根标签（HBox），Event元数据标签，Script块以及子组件（LinkButton 和Image）。 이 문서를보고 mxml 구성 요소, 그것은 4 개의 부품 : 루트 레이블 (hbox), 이벤트 메타 데이터를 분류, 스크립트 블록과 서브 - 구성 요소 (linkbutton 및 이미지). 当你用ActionScript编写该组件的时候你将会明白这些元素都对应什么东西。 actionscript의 구성 요소를 사용하는 경우 준비의 시간을 이해하 대응하는 이러한 요소는 아무것도합니다.

下载源文件 파일 다운로드
上面是本文例子的源码，里面还包含了一个图标文件。 위의 예제의 소스, 또한 문서 아이콘을 포함하고있습니다.

创建一个名为CycleSelectButtonV2的ActionScript类，并使其扩展自HBox。 카테고리를 만들라는 cycleselectbuttonv2 the actionscript, 그리고 그 이후로 확장 hbox합니다. 你可以使用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代码来实现。 actionscript의 통제로의 이미지와 linkbutton 코드의 일부를 달성을 쓸 필요합니다. 上篇文章中我已经提及过Flex框架是如何通过调用commitProperties()来设定属性以及其他一些东西，而创建子组件也是框架的一部分功能。 의 기사에서 나는 플렉스 프레임 워크가를 호출하는 방법에 언급된 commitproperties ()을 설정하는 속성과 그 외 다른 것들을 만드십시오 서브 - 구성 요소는 또한 프레임 워크의 일부 기능을합니다.

当一个组件被创建的时候Flex框架就调用createChildren()函数，无论是创建像HBox这样的容器类还是Button这样的控件。 플렉스 프레임 워크의 구성 요소가 만들어집니다 때 대기 때 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 두 개의 범주를 사용할 수있습니다 actionscript하지 똑같은 구조를 아래의 코드를 추가 기능을 배후 :

private var linkButton:LinkButton; 사립 변수 linkbutton : linkbutton;
private var image:Image; 사립 변수 이미지 : 이미지를;

MXML文件中的子组件是公有的（public），这里我想将他们变成私有的(private)，当然，你可以根据自己的意愿将它们声明成保护（protected）或者公有的（public）。 서브 - mxml 문서를 공개 도메인에 구성 요소 (공공), 그들은 여기가되기 위해 싶습니다 민간 (개인), 물론이 될 수있다는 희망에 따라 자신의 문장으로 보호를 (보호) 또는 국민 (공공).

你还需要导入环形按钮的图片。 또한 버튼을 반지의 사진을 가져올이 필요합니다. 在MXML文件中图片是直接嵌入在Image标签中的，在ActionScript中没有类似的操作，你需要将下面的代码添加到变量声明的后面： mxml에 포함된 문서에 직접 그림은 이미지를 탭에있는 actionscript의 부재에서 비슷한 작업을해야합니다 변수 뒤에 아래의 코드에 추가될 수 성명 :

[Embed(source="../assets/cycle_component.gif")] [포함 (소스 ="../ 자산 / cycle_component.gif ")]
private var cycleIcon:Class; 사립 변수 cycleicon : 클래스;

Embed元数据标签告诉编译器从文件中获取字节然后生成一个类。 메타 데이터에 액세스할 레이블을 포함 컴파일러를 알려 바이트의 범주에서 파일을 마우스 오른쪽 버튼을 생성합니다. cycleIcon变量的数据类型是Class，因为我们不想创建两个图像（那样会占用太多内存），而只是要共享引用那些字节的实例。 cycleicon 변수는 유형의 데이터 클래스를 만들 필요하지 않기 때문에 두 개의 이미지 (가 메모리를 너무 많이 차지), 그러나 그 인용 사례를 공유하고 바이트에 불과합니다.

现在添加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属性。 여기에 이미지를 만들어 일종의 사례를 누른 세트의 폭, 높이와 소스 특성을합니다. 同时也创建了一个LinkButton。 뿐만 아니라 linkbutton을 작성합니다. 注意这两个组件是怎样通过addChild()函数被作为子组件添加的，这个函数将这些子组件放到了显示列表里，如果不使用addChild()函数这些组件就不会显示。 참고 : 두 개의 구성 요소를하는 방법을 통해 이러한 addchild () 함수가 추가되었습니다 서브 - 구성 요소로서, 이러한 구성 요소의 기능을 목록의 디스플레이로, 만약 사용하지 않기로 addchild () 함수의 이러한 구성 요소가 게재되지 않습니다. 使用new操作符和addChild()来创建组件和使用MXML标签创建组件效果是一样的。 새 연산자를 사용하고 addchild ()을 만드는 구성 요소 및 구성 요소의 사용을 레이블을 만들 mxml 효력은 동일합니다.

createChildren函数是在commitProperties()函数被调用之前调用的，这样你就可以为子组件添加属性了。 createchildren 기능을 commitproperties () 함수는 호출되기 전에 호출, 그래서 당신의 재산의 구성 요소를 추가할 수있습니다. 现在你要做得就是从V1的组件中将setter和getter以及commitProperties()函数直接复制过来。 이제 v1에서가해야 할 일은하고, 세터의 구성 요소는 게터 commitproperties () 함수를 직접 복사합니다.

随着子组件LinkButton 和Image的创建与设定，现在又实现了上例MXML组件的一部分。 - linkbutton 이미지와 구성 요소의 하위로 생성 및 설정,이 사건은 지금의 일부분 mxml 구성 요소를 실현합니다.

在上一篇文章中，你可以看到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. / / 랩 개 이상의 번호가 0으로 돌아갑니다 항목의 경우 dataProvider라는합니다.
if( selectedIndex >= dataProvider.length ) selectedIndex = 0; 만약 (selectedIndex (> = dataprovider.length) selectedIndex (= 0;

dispatchEvent( new Event(Event.CHANGE) ); dispatchevent (새로운 이벤트 (event.change));
} )

使用MXML标签的时候你可以方便地决定向事件处理器中传送什么参数，而使用addEventListener函数的时候事件处理器就只能有一个参数。 레이블을 mxml을 보낼 때 사용하실 수있습니다 어떤 경우에도 쉽게 결정할 프로세서 매개 변수가이 사건에의 프로세서를 사용하여 때 addEventListener를 함수는 하나만있을 수있습니다 매개 변수를합니다. 如果你阅读了关于LinkButton的文档并了解了它的click事件的话，你将看到它分派了一个MouseEvent，这样数据类型就会被作为参数传送到事件处理器中。 경우에 해당 문서를 읽을 수있어 이해와 그 linkbutton의 이벤트를 클릭하면 볼 수를 할당 mouseevent,이 유형의 데이터로 전송됩니다에서이 사건의 프로세서를 매개 변수로합니다.

打开Flex主程序并将所有的CycleSelectButtonV1标签更改为CycleSelectButtonV2并运行它，运行结果和上例应该没有什么两样。 플렉스의 주요 프로그램을 열어 cycleselectbuttonv1 레이블의 모든 변경 사항을 cycleselectbuttonv2 및 실행하고 그 결과를 서로 다른 지역의 경우되어야합니다.

旋转箭头 회전하는 화살표를

在上篇文章中我提到过，除了要使用ActionScript重写这个组件以外，我们还将在每次LinkButton被点击的时候旋转箭头图像。 이 기사를 제가 말씀 드린 외에도 actionscript의 사용을이 구성 요소를 재작성, 우리는 각 linkbutton 이미지 회전 시간에있는 화살표를 클릭하십시오. 我已经将这部分代码放在上面的下载文件中了，你可以自己看一下，这将是下一篇文章的主题。 코드의이 부분에서 나는 이상을 다운로드하는 문서를, 당신 자신으로 볼 수있는, 이것은 기사의 주제와합니다.

分享收藏 공유 컬렉션