사용자 정의 컴포넌트 만들기 Enjoy/FLEX2010. 7. 9. 13:33
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf68268-7ffb.html
MXML 또는 ActionScript 파일로 사용자 정의 컴포넌트를 만들 수 있습니다.
MXML component 만들기
플렉스는 고객이 주소 정보를 입력할때 사용할 수 있는 Spark ComboBox를 제공하고 있습니다. 폼에서 미국내 50개 주의 목록에서 선택할 수 있도록 ComboBox를 포함할 수 있습니다. 사용자가 주소를 입력할 수 있는 여러개의 폼이 있는 어플리케이션에서 50개 주에 대한 동일한 정보로 여러 개의 ComboBox 컨트롤을 반복해서 생성하고 초기화 시키는 작업은 지루한 것입니다.
대신 50개 주가 사전에 세팅되어 있는 ComboBox 컨트롤을 포함하는 하나의 MXML 컴포넌트를 만들 수 있습니다. 그럼 어플리케이션 어디에서든지 이 MXML 컴포넌트를 사용하여 주를 선택할 수 있는 기능을 추가할 수 있습니다. 다음은 사용자 정의 ComboBox 컨트롤에 대한 예시를 보여줍니다.
<?xml version="1.0"?>
<!-- createcomps_intro\StateComboBox.mxml -->
<!-- Specify the root tag and namespace. -->
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:dataProvider>
<s:ArrayList>
<fx:String>AK</fx:String>
<fx:String>AL</fx:String>
<!-- Add all other states. -->
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>이 예제는 다음과 같은 내용을 보여줍니다.
사용자 정의 MXML 컴포넌트 정의의 첫 번째 라인은 XML 버전을 선언합니다.
root 태그라고 불리는 컴포넌트의 첫 번째 MXML 태그는 플렉스 컴포넌트 또는 사용자 정의 컴포넌트을 명시합니다. 따라서 MXML 컴포넌트는 ActionScript 클래스에서와 비슷하게 MXML 컴포넌트의 슈퍼클래스를 루트 태그에서 지정합니다. 이 예제에서 MXML 컴포넌트의 슈퍼 클래스로 플렉스 ComboBox 컨트롤을 지정합니다.
루트 태그에 xmlns 속성은 플렉스의 XML 네임 스페이스를 지정합니다. 이 예제에서는 xmlns 속성은 접두사 mx:를 사용하는 MX 네임 스페이스에 해당하는 태그를 나타냅니다.
컴포넌트의 나머지 라인은 컴포넌트에 대한 정의입니다.
다음 예제에서는 메인 어플리케이션이나 다른 MXML 컴포넌트 파일에서 StateComboBox 컴포넌트를 참조하는 것을 보여줍니다.
<?xml version="1.0"?>
<!-- createcomps_intro/IntroMyApplication.mxml -->
<!-- Include the namespace definition for your custom components. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="*">
<!-- Use the filename as the MXML tag name. -->
<MyComp:StateComboBox/>
</s:Application>
이 예제에 대한 실행 swf파일은 아래에 있습니다.
어플리케이션의 하위 디렉터리에 사용자 정의 컴포넌트를 넣는 것이 가장 좋은 방법입니다. 그것들은 각자 다른 네임 스페이스를 가지고 있기 때문에 컴포넌트 이름이 중복되지 않도록 하는데 많은 도움이 될것입니다. 어플리케이션의 myComponents라는 하위 디렉터리에 컴포넌트를 저장하면 네임 스페이스는 xmlns:MyComp="myComponents.*"가 될 것입니다.
StateComboBox.mxml 파일의 루트 태그로 ComboBox 컨트롤을 지정했으므로, 사용자 정의 컴포넌트의 MXML 태그에서 또는 ActionScript <fx:Script> 태그에서 ComboBox 컨트롤의 모든 속성을 참조할 수 있습니다. 예를 들어 다음 예제는 ComboBox.maxChars 속성과 ComboBox.close 이벤트 리스너를 지정하는 것을 보여줍니다.<?xml version="1.0"?>
<!-- createcomps_intro/MyApplicationProperties.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*">
<fx:Script>
<![CDATA[
import flash.events.Event;
private function handleCloseEvent(eventObj:Event):void {
// ...
}
]]>
</fx:Script>
<MyComp:StateComboBox maxChars="25"
close="handleCloseEvent(event);"/>
</s:Application>
이 예제에 대한 실행 swf파일은 아래에 있습니다.
MXML componrnt에 대한 자세한 내용은 Simple MXML components 참조하십시오.
ActionScript 컴포넌트 만들기
- User-interface, visual, components
- 사용자 인터페이스 컴포넌트는 처리 논리와 시각적인 요소 모두를 포함하고 있습니다. 기존의 동작을 수정하거나 컴포넌트에 새로운 기능을 추가하는 사용자 지정 사용자 인터페이스 컴포넌트를 만듭니다. 이러한 컴포넌트는 일반적으로 플렉스 컴포넌트 계층 구조를 확장합니다. UIComponent 클래스 또는 Button, ComboBox, DataGrid와 같은 플렉스 컴포넌트를 확장할 수 있습니다. 사용자 정의 ActionScript 컴포넌트의 모든 메서드와 속성, 이벤트, 스타일, 효과는 super클래스로부터 상속 받습니다.
- Nonvisual components
예를 들어 사용자 정의 버튼 컴포넌트를 Spark Button 클래스를 기반으로 정의할 수 있다는 것을 다음 예제로 보여줍니다 :
package myComponents
{
// createcomps_intro/myComponents/MyButton.as
import spark.components.Button;
public class MyButton extends Button {
// Define the constructor.
public function MyButton() {
// Call the constructor in the superclass.
super();
// Set the label property to "Submit".
label="Submit";
}
}
}예제에서는 MyButton.as 파일에 MyButton 클래스를 작성합니다.
<?xml version="1.0"?><!-- createcomps_intro/MyApplicationASComponent.mxml --><!-- Include the namespace definition for your custom components. --><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:MyComp="myComponents.*"> <!-- Use the filename as the MXML tag name. --> <MyComp:MyButton/></s:Application>SWF파일 링크
컴포넌트 배포
MXML이나 ActionScript 파일로 사용자 정의 컴포넌트를 배포할 때 일반적으로 지정된 어플리케이션 파일과 같은 디렉토리나 ActionScript 소스 경로로 설정된 디렉토리, LiveCycle Data Services ES를 위한 WEB-INF/flex/user_classes 디렉토리 구조로 사용자 정의 컴포넌트를 배포합니다
보안상의 이유로 소스 코드 파일로 사용자 지정 컴포넌트를 배포하지 않기로 결정할 수도 있습니다. 이런 경우 SWC 파일이나 Runtime Shared Library (RSL)의 일부로 컴포넌트를 배포할 수있습니다.
SWC 파일은 플렉스 컴포넌트에 대한 아카이브 파일입니다. SWC 파일은 플렉스 개발자들 사이에 컴포넌트를 쉽게 주고 받을 수 있도록 합니다. MXML 이나 ActionScript 파일, 이미지 및 기타 리소스 파일 대신 swc파일 하나만 전달하면 됩니다. 또한 컴파일된 SWF 파일을 SWC 파일 내부에 담고 있어서 그 코드가 외부로 노출되지 않습니다.SWC 파일은 하나 이상의 컴포넌트를 포함하는 PKZIP 압축 형식으로 압축하거나 풀수 있는 파일입니다. SWC은 WinZip, JAR 또는 다른 압축 도구를 사용하여 파일을 확인해 볼 수 있습니다. 그러나 수동으로 SWC 파일의 내용을 변경해서는 안됩니다. SWC 파일 내부의 SWF 파일을 SWC외부에서 실행하려고 해서도 안됩니다.
SWC 파일을 만들기 위해서는 flex_install_dir/bin 디렉토리에 있는 compc 유틸리티를 사용합니다. compc 유틸리티는 MXML/ActionScript componrnt 소스 파일에서 SWC 파일을 생성 합니다. compc에 대한 자세한 내용은 Flex compilers를 참조하십시오.
application의 SWF 파일 크기를 줄이는 한 가지 방법은 별도로 다운로드되어 클라이언트 캐시에 남아있게 되는 stand-alone file에 공통으로 사용되는 자원을 객관화(externalizing)하는 것입니다. 이러한 공유 자원은 런타임에 여러 어플리케이션에서 수차례 로드가 시도되어도 클라이언트측에는 단 한번만 전송됩니다. 이 공유 파일은 Runtime Shared Libraries 또는 RSLs로 알려져 있습니다.
RSL 파일을 만드는 방법을 포함한 자세한 내용은 Runtime Shared Libraries를 참조하십시오.
