Dreamer’s Blog 꿈꾸는 사람의 블로그

又看到一篇不错的Flex初级教程，翻译了过来。 또한 좋은 플렉스 기본 가이드, 번역합니다. 翻译已经经过作者Marco Casario的同意，原文版权归原作者所有，译文版权归Dreamer所有。 이후에 저자가 번역되어있습니다 마르코 casario의 동의 원래 저자의 원래 텍스트를 소유, 몽상 : 소유의 모든합니다. 此文未经同意，谢绝转载。 이 문서가 동의를하지 않고, 재판을 거부합니다.

英文原文：http://mxdj.sys-con.com/read/276919_1.htm 영어 텍스트 : http://mxdj.sys-con.com/read/276919_1.htm
作者： Marco Casario 저자 : 마르코 casario

译者：Dreamer 역자 : 꿈꾸는

Flex应用程序可能有复杂的结构但它们通常都是由多个MXML，Actionscript 以及CSS文件组成。 플렉스 응용 프로그램은이 복잡한 구조를하지만 그들에 의해 개수는 보통 mxml, actionscript 및 전투 근무 지원 문서를 조성합니다.

在单个文件里编写整个程序不是一个最佳实践。 전체 프로세스를 단일 문서를 준비하는 모범 사례가있습니다. 那样会使代码难以维护和重用，而且程序没有被架构成逻辑上的各个部分。 이 코드는 어려울으로 재사 용할을 유지하고, 그리고 프로 시저의 논리 구조에되지 않은 여러 부분합니다.

Flex允许开发者将一个工程分成外部的模块，创建分离的MXML文件并且单独维护它们。 프로젝트를 통해 플렉스 개발자가 나뉘어된다 외장형 모듈을 분리하고 보존하는 별도의 문서를 만드는 그들을 mxml합니다. 将Flex程序分离成各个逻辑模块有很多好处。 플렉스 프로그램은 서로 다른 논리 모듈은 많은 장점로 구분됩니다. 它允许开发小组独立地开发和调试单个模块，模块中的错误和功能可以被独立出来。 그것의 개발을 통해 독립적인 그룹을 하나의 모듈을 개발 및 디버깅에 독립적인 실수를 모듈과 기능을 수있습니다. 这使得代码变得容易维护，也提高了代码在多个应用程序间的重用性。 이것은 그것을 유지하기 쉬운 코드,이 코드도 증가 사이의 수많은 응용 프로그램을 다시 사용합니다.

每个MXML文件是一个MXML组件，但是只有主MXML程序可以加载外部组件。 mxml 문서는 mxml 각각의 구성 요소, 단지 외부 구성 요소의 주요 mxml 절차를 읽어 들일 수있습니다. 事实上一个应用程序中只能有一个Application 标签，其它所有都是MXML组件。 실제로 응용 프로그램의 응용 프로그램 상표는 하나만있을 수있습니다, 다른 모든 구성 요소는 mxml합니다.

为了设计一个MXML组件，需要创建一个MXML文件。 을 위해 디자인을 mxml 구성 요소, mxml 문서를 만들 필요합니다. 这个文件的根标签不是Application而是一个组件标签（比如VBox，Panel，Canvas，Button，DataGrid等等），而且根标签中需要声明命名空间http://www. adobe .com/2006/mxml 。 하지만이 문서의 구성 요소는 응용 프로그램의 루트 레이블을 레이블 (예 : vbox, 패널, 캔버스, 버튼, 데이터 등), 그리고 뿌리를 레이블 이름을 지정 공간이 필요 성명 @합니다. adobe .com/2006/mxml합니다.

下面的代码展示了一个简单的叫做custDataGrid.mxml 的MXML组件，它由一个用来存储数据的DataGrid组成。 아래의 간단한 코드를 호출의 표시를 custdatagrid.mxml the mxml 구성 요소를 사용하여 데이터 저장소의 데이터를 구성 요소 중 하나를합니다.

根标签是一个简单的VBox组件并且其中声明了xmlns:mx="http://www.adobe.com/2006/mxml"。 gen - 라벨은 간단한 문장의 구성 요소와 vbox xmlns : mx = "http://www.adobe.com/2006/mxml"합니다. 一旦创建了外部模块，主程序就可以像下面一样调用这个MXML组件： 외장형 모듈을 작성하면, 메인 프로그램은 아래와 같은 이름이 mxml 구성 요소 :

主程序添加了一个新的XML命名空间并使用一个包名来表示在一个文件夹中定义的所有组件： 메인 프로그램에 추가하는 새로운 xml 네임 스페이스와이 이름을 사용하는 패키지의 폴더에있는 모든 구성 요소의 정의 :

“cust”命名空间指向”comp”文件夹中的MXML组件，实际上如果是最佳实践所有的组件都应当被保存在一个子目录下。 "고객"명명 공간에 "comp"폴더에있는 mxml 구성 요소, 모범 사례는 사실 경우에는 서브 디렉토리에 저장되어있는 모든 구성 요소를해야합니다.

使用组件和使用其它MXML标签一样，唯一不同的是不再使用”mx”前缀而是使用自定义前缀： 그리고 사용의 다른 구성 요소의 사용을 mxml 태그, 유일한 차이점은 더 이상 사용 "mx"접두사하지만 사용하는 사용자 정의 접두사 :

注意MXML标签的名字对应着这个组件的文件名。 참고 사항에 해당하는 mxml 탭의 파일 이름의 구성 요소의 이름을합니다.

紧耦合组件与松耦合组件 느슨하게 결합된 구성 요소를 구성 요소와 긴밀하게 결합

为了使组件在程序中可以配置和重用，你可能会想要创建可以接受属性，创建方法以及分派事件的MXML组件。 이 절차를 진행을 위해 구성 요소를 구성하고 재사 용할 수있습니다 수있습니다 허용되는 속성을 만들려, 그리고이 사건을 창조 mxml 구성 요소를 배포하는 방법에 관한 것. 为了做到这样，组件必须不依赖于特定的程序（紧耦合），包括它们的变量名或标签实例的名字。 이를 위해서는 구체적인 절차의 구성 요소에 의존해서는 안됩니다 (꽉 커플링)을 포함한 그들의 예입의 이름을 매개 변수 이름이나 레이블을합니다. 紧耦合情况下如果程序或者组件的代码改变了，相应的代码就不能再工作，我们必须修改紧耦合的组件来相应这些变化。 상황이나 구성 요소를 결합 절차를 꽉의 코드가 변경하면, 해당 코드는 더 이상 작동하지 않습니다, 우리 개정을 꽉 필요가 이러한 변경 사항에 해당하는 구성 요소의 결합합니다.

一种更清晰也更好的方式是开发松耦合的组件，它可以分派传播返回数据给程序的事件并且包含一些属性使得可以从程序传送信息给它。 명확하고 더 나은 방법은 느슨하게 결합된 구성 요소를 개발, 보급을 지정할 수로 복귀하려면 데이터를 처리하는 이벤트와 많은 특성을 포함하는 과정에서 메시지를 보낼 수있다 그것합니다.

这种方式可以让你像创建“黑盒子”一样创建MXML组件，并且有以下好处： 이것을 만들 수있습니다으로 "블랙 박스"처럼 mxml 구성 요소를, 그리고는 다음과 같은 장점 :

•它们容易重用和维护•除了内部的组件它们不了解其它的东西•它们不依赖于一个变量名和标签实例的名字 그들은 재사용 및 유지 관리를 쉽게 • • 이외에 다른 것들의 내부 구성 요소의 사람들은 이해를 못 • 변수 이름과 그들에 의존하지의 예입니다 레이블의 이름을

如我们所说的那样，为了创建一个松耦合的组件我们需要属性来存储信息，需要一个事件模型来分派包含有返回数据的事件。 로 우리가 말했다, 느슨하게 결합된 구성 요소를 만들기 위해 정보를 저장해야 속성, 이벤트 모델의 필요성을 할당하는 이벤트에 데이터를 다시 포함합니다.

属性经常在ActionScript中定义（尽管你可以在MXML中定义它们）并且放在一个<mx:Script>块中： 에 정의된 속성을 자주 actionscript (그러나 그들을 정의할 수있습니다 mxml) 및 스크립트를 <mx: 블록 :

定义MXML组件的方法也是一样： mxml 구성 요소를 정의하는 방법은 동일합니다 :

在下面的例子中，组件定义了一个作为DataGrid的dataProvider的属性和一个返回字符串的方法。 아래 예제에서 dataProvider라는의 구성 요소에 대한 정의는 데이터의 속성과 문자열 방법으로 반환합니다. 下面是custDataGrid.mxml 文件的全部代码： 아래는 문서의 전체 custdatagrid.mxml 코드 :

Flex 2文档中的声明 ：在<mx:Script>标签中声明的公有变量或set函数会是这个组件的一个属性。 이 문서에서 플렉스 성명 : <mx: 스크립트 탭 매개 변수의 기능을 공개 성명 또는 설정의 속성이 구성 요소가된다. <mx:Script>标签中的公有函数会是组件的一个方法。 <mx:script> 탭의 한 구성 요소의 공용 기능을하는 방법.

我们可以在主程序文件中访问组件的方法或者传值给组件的属性： 우리가 문서를 메인 프로그램에 액세스할 수있습니다 -하는 방법이나 구성 요소를 구성 요소의 값을 속성 :

在主程序中我们创建了一个叫做”myData”的ArrayCollection变量，我们可以通过下面的方法在MXML组件标签声明中将它传递给组件： 메인 프로그램을 만들었습니다 "mydata"arraycollection 변수, mxml 구성 요소에 다음과 같은 방법을 통해 할 수 라벨 성명, 그것에 전달되는 구성 요소 :

我们用来展示自定义组件中定义的属性的Flex数据绑定机制可以利用数据绑定特性。 우리가 주문을 받아서 구성 요소를 표시하는 데 사용 플렉스의 특성에 대한 정의를 데이터 바인딩 데이터 바인딩을 사용하는 메커니즘 특성을 수있습니다. ”lista”变量是custDataGrid组定义组件的一个公有变量，所以我们将它写在custDataGrid标签声明中。 "목록"의 구성 요소에 대한 정의를 custdatagrid 그룹이 변수를 공용 변수를, 그래서 우리는이 레이블을 custdatagrid에서 성명을 작성합니다.

类似地，也可以创建一个数据绑定调用自定义组件中的一个方法： 유사하게, 데이터 바인딩을 만들 수도있습니다 사용자 정의 구성 요소를 호출하는 방법 :

Label控件的text属性将接收自定义组件custDataGrid的公有方法返回的文本： 텍스트 속성에 레이블을 제어하는 사용자 정의 구성 요소가 나타납니다 custdatagrid 방식으로 공공의 텍스트 :

设计一个松耦合组件的最后一步是处理包含返回数据的事件的分派。 느슨한 결합의 구성 요소의 디자인의 마지막 단계는 이벤트에 데이터를 다시 할당을 포함합니다. 每个自定义MXML组件都可分派事件，事件可以通过三个简单的步骤自定义： 각각의 사용자 정의 mxml 구성 요소를 배포, 3 개의 이벤트를 통해 사용자의 간단한 단계 수있습니다 :

•使用[Event]元数据标签•创建一个事件对象•分派事件并创建一个函数来处理该事件 •의 사용을 [이벤트] 메타 - 데이터에 태그를 • • 할당 행사와 이벤트 개체를 만드는 기능을 다룰 이번 사건을 만듭니다

[Event]元数据标签定义了组件可以分派的事件。 [이벤트] 메타 데이터의 구성 요소 레이블을 할당할 수있습니다 이번 사건의 정의를합니다. 可以在一个ActionScript类中包定义之后类定义之前声明[Event]元数据标签： 카테고리 정의 범주 정의 후 actionscript하기 전에 패키지에 성명 [이벤트] 메타 데이터를 레이블 :

或者在MXML文件中的<mx:Metadata>标签中： mxml에 문서 또는 <mx: metadata> 탭 :

一旦[Event]元数据标签创建，组件就可以使用dispatchEvent()方法来分派该事件。 한 번 [이벤트] 메타 - 데이터에 태그를 만들고, 구성 요소를 사용할 수있습니다 dispatchevent () 메소드를 이번 사건을 배포합니다. dispatchEvent()方法将事件对象作为参数，如下面的代码中所示： dispatchevent () 메소드를 이벤트 개체를 매개 변수로에서 보는 바와 같이, 다음과 같은 코드 :

我们来修改一下custDataGrid.mxml文件，使其可以在用户点击DataGrid中一项的时候分派一个事件。 우리는 문서 custdatagrid.mxml을 개정할 수 있도록 데이터를 사용자가 클릭을 행사 시간을 할당합니다. 主程序将处理自定义组件触发的事件并在一个TextArea控件中添加一些文字。 이후의 구성 요소에 대한 정의의 주요 프로그램은 주소를 텍스트의 이벤트를 실행하기 위해 제어 및 장바구니 일부 텍스트합니다.

使用Flex Builder 2打开custDataGrid.mxml 并添加[Event]元数据标签： 플렉스 빌더를 열고이 custdatagrid.mxml의 사용을 장바구니 [이벤트] 메타 데이터를 레이블 :

[Event]元数据标签定义了一个普通Event类型的&#34;changeBlog&#34;事件并且将这个事件设为公有的，这样MXML编译器就会发现它。 [이벤트] 메타 데이터를 일반적인 유형의 정의에 레이블을 행사 "changeblog"이 사건을 설정하고 공공 이벤트, 그러한 mxml 컴파일러는 그걸 찾을 수있어.

当DataGrid的change事件被触发时这个事件就会被分派： 사건이 발생하면 데이터가이 사건의 변화에 할당됩니다 :

正如你看到的那样，&#34;changeHandler&#34;函数简单地执行了dispatchEvent()方法： 로 보여, "changehandler"를 구현하는 간단한 기능을 dispatchevent () :

主程序通过使用<mx:Script>块中定义的事件处理函数来处理自定义MXML组件所触发的事件： 메인 프로그램을 통해 <mx: 스크립트의 사용을 차단의 기능에 대한 정의를 mxml 구성 요소를 다루는 사용자 정의에 의해 발생한이 사건의 이벤트 :

custDataGrid组件触发&#34;changeBlog&#34;事件并将它与一个事件处理函数相关联： custdatagrid 구성 요소를 트리거 "changeblog"사고와 사고의 기능과 연관된 :

changeBlogHandler函数将事件对象作为一个参数并在TextAream控件中打印了一个简单的文本： changebloghandler 이벤트 개체가 정상적으로 textaream에 대한 매개 변수를 제어 및을 인쇄하는 간단한 텍스트 :

注意使用事件对象的event.type 会返回事件触发者的类型（这个例子中会返回changeblog ）。 이벤트 개체의 사용에 event.type 사건의 유형을 트리거으로 돌아갑니다 (이 예에서 changeblog으로 돌아갑니다).

注意 ：Flex Builder 2会自动找到在组件中自定义事件的引用并使用显示代码提示显示它： 참고 사항 : 플렉스 빌더 2는 사용자 지정 구성 요소를 자동으로 검색이 사건과 코드가 그것의 사용을 인용 팁 :

尽管我们可以看到为松耦合组件创建一个自定义事件是多么简单，但是如果我们想要发送数据给这个自定义事件，这种方式也会有一些限制。 비록 우리가 볼 수있는가 느슨하게 결합된 구성 요소를 만드는 사용자 정의 사례는 너무 간단하지만 우리가 원하는 데이터를 보내는 경우에 사용자 정의, 이쪽으로 일부 제한 사항에 해당됩니다. 实际上flash.events.Event类不允许开发者向其添加属性。 사실 분류 flash.events.event의 개발자를 추가할 것을 허용하지 않습니다 특성을합니다.

实际上我们分派事件只是为了通知在自定义MXML组件中有一些事情发生了。 사실, 우리 분산에만 사용자 정의 mxml 구성 요소를 어디에서이 사건은 여러 가지 일들이 일어나기합니다. 但是如果我们需要发送复杂的数据给一个自定义事件的时候要怎么办呢？ 그러나, 만약 우리가 복잡한 데이터를 보낼 필요가를 사용자 지정을 수행하는 방법에 사건을 때»

不用担心。 걱정하지 마. 我们可以通过在ActionScript中创建自定义事件类来实现！ 사용자 지정 이벤트를 만들 수있습니다 actionscript 우리의 범주를 달성하기! 我将会通过一个例子向你展示如何开发自定义事件类。 그럴 꺼야을 통해보기를 사용자 지정 이벤트를 개발하는 방법을 보여줍니다 분류합니다.

在ActionScript中创建自定义事件类来发送复杂数据 사용자 지정 이벤트를 만들 범주를 actionscript에서 복잡한 데이터 전송

使用Flex可以创建一个使用自定义类型的事件对象的自定义事件。 의 사용을 플렉스의 사용을 사용자 정의 유형의 이벤트 개체를 만들 수있습니다 사용자 지정 이벤트합니다. 只需要创建一个扩展自Event类的子类然后向其中添加属性。 일종의 확대를 만들기만하면 이후의 이벤트의 종류 및 특성에 추가합니다. 不要忘了扩展自既有Flex类的自定义组件会继承基类的所有事件。 기존의 플렉스 잊지 마세요 같은 구성 요소를 확장하려면 사용자 지정 기본 클래스의 모든 이벤트를 상속합니다.

要创建一个自定义类我们需要创建一个扩展自flash.events.Event的ActionScript类，这个类将作为所有事件对象的基类。 사용자 정의 범주를 만들 필요 actionscript를 만들 클래스를 섬길 것입니다 flash.events.event 확장 이후의 모든 이벤트를 해당 개체로 분류합니다. 接下来，为了调用父类的构造方法并将事件类型传给它，我们要调用super()方法。 다음은이 순서를 호출하여 카테고리의 아버지 유형의 건설 방법과 패스, 우리는 슈퍼에 전화 () 메소드를합니다. 我们还需要覆写&#34;clone()&#34; 方法，通过设定type属性和其它一些属性来返回事件对象的一个拷贝。 또한 필요가 재정의하는 "클론 ()"방법을, 세트 종류와 다른 특성을 일부 속성의 복사본을 이벤트 개체를 반환합니다.

为了从自定义组件中分派一个新的事件，我们创建了这个自定义类的一个实例并传送属性值给它。 사용자 정의 구성 요소를 배포하기 위해 새로운 사건, 우리가 만들어 예로 이후이 카테고리의 정의와 속성 값을 전송합니다.

现在我会用一个例子来说明这种方式。 나는 지금은이 방법을 사용하는 예제을 설명합니다. 我们创建了一个简单的Blog阅读器，它允许用户使用下拉列表框从Blog列表中选择一个。 우리가 만든 간단한 블로그 독자, 이것은 사용자가 드롭 - 다운 목록 상자를 사용하여 목록에서 블로그를 선택하십시오. 这个程序由2个MXML组件组成，这两个组件是一个用来显示日志内容的DataGrid以及一个含有Blog列表下拉列表框。 이 절차를 수행하는 두 개의 구성 요소를 mxml,이 두 개의 구성 요소는 로그의 블로그의 콘텐츠가 데이터를 표시하고 드롭 - 다운 목록 상자의 목록을 포함합니다.

我们将从一个自定义事件类（它被保存为&#34;evtClass.as&#34;，并放在了”com”文件夹里）开始，它接受一个简单字符串属性： 우리는 사용자 정의 이벤트 범주 (그것이 구원을 "evtclass.as", 그리고 "com"폴더에), 그 수락 간단한 문자열을 속성 :

象我们之前说的那样，这个类扩展自flash.events.Event类，调用了super()方法并且覆写了clone()方法。 로 우리가 이미 전에, flash.events.event 이후이 범주로 분류 확장, 전화를 슈퍼 () 메소드를 재정의하는 클론 () 메소드를합니다.

现在，在Flex Builder 2中创建一个组件(File > New > MXML Component)并保存为custBlogList.mxml。 지금, 플렉스 빌더 2의 창조의 구성 요소 (파일> 새> mxml 구성 요소) 및 저장 custbloglist.mxml로합니다. 这个组件包含有一个下拉列表框（ComboBox）并且它的dataProvider是一个ArrayCollection对象。 드롭 - 다운 목록 상자의 구성 요소를 포함 (콤보) 및 그 dataProvider라는 개체가 arraycollection합니다.

我们使用了[Event]元数据标签定义了这个MXML组件可以分派的事件。 우리가 사용하는 [이벤트] 메타 데이터를 정의에의 경우 라벨이 mxml 구성 요소를 할당할 수있습니다. 赋给type属性的值就是我们的自定义事件类： 할당하는 값 유형 특성은 우리의 사용자 지정 이벤트 카테고리 :

一旦用户在下拉列表框中选择了一个Blog，change事件就会被触发并且changeHandler()会被调用： 일단 사용자의 드롭 - 다운 목록 상자를 선택하십시오 블로그, 변경 이벤트가 발생하고 changehandler ()가 호출됩니다 :

这个事件处理器只有一个作用，就是创建一个自定义事件类的实例并将用户所选择的值传送给这个实例（将myCombo中的值作为一个字符串）： 하나의 프로세서에만이 사건은 사용자 정의 범주의 사건을 만들 및 예제의 가치를 보내는 사용자에 의해 선택이 사건을 (를 mycombo 값을 문자열로) :

第二个MXML组件包含了DataGrid控件并且从主程序中接收dataProvider。 두 번째 구성 요소를 포함 컨트롤을 메인 프로그램 및 수신 데이터 mxml dataProvider라는합니다. 现在你需要将这个文件保存为custBlogData.mxml： 이제으로 파일을 저장하려면 이것이 필요 custblogdata.mxml :

这个DataGrid定义了两列。 이 데이터의 정의를 두 개의합니다. 第一列从用户选择的RSS feed（在custBlogList中选择的）中获取数据。 첫 번째 열에서 사용자의 선택의 피드 (custbloglist의 선택) 데이터 액세스 속도를합니다. 第二列从类型为ArrayCollection 的变量&#34;lista&#34; 获取数据。 두 번째 열 매개 변수의 유형을 arraycollection에서 "목록"데이터 액세스 속도를합니다.

接下来，就是主程序文件了（BlogReader.mxml），它会调用上面的两个组件，调用一个HTTPService来获取rss数据并且定义了一个事件处理函数： 그런 다음, 문서가의 주요 프로그램 (blogreader.mxml), 그것은 위의 두 개의 구성 요소를 호출하여 하나 피드와 정의를 구하는 전화를 httpservice적인 데이터 처리 기능이 이번 사건 :