캠핑과 개발

[Flex] 사용자 컴포넌트

개발/FLEX & AIR2010. 6. 15. 10:49

사용자 컴포넌트의 기본 내용

Flex의 모든 비주얼 컴포넌트는 UIComponent를 확장해서 만들기 때문에 UIComponent의 모든 메소드, 속성, 이벤트, 스타일및 이벤트를 상속받는다. 또 한 사용자 컴포넌트를 만들때는 반드시 클래스의 생성자를 구현해야하며 아래와 같은 protected 메소드 들을 선택적으로 오버라이드 할 수 있다.

 commitProperties()  컴포넌트의 속성이 변경되면 동시에 적용하거나, 지정된 순서대로 적용하는 역활
 createChildren()  컴포넌트의 자식 컴포넌트를 생성한다. 예를 들어 ComboBox에는 자식 컴포넌트로 TextInput과 Button을 포함하고 있다.
 layoutChrome()  컨테이너 주위의 테두리 영역을 정의한다. Container 클래스의 서브클래스에만 해당
 measure()   컴포넌트의 기본 크기 및 최소 기본 크기를 설정
 updateDisplayList()  지금까지 설정된 모든 속성 및 스타일을 기반으로 자식 컴포넌트의 크기 및 위치를 설정하며, 컴포넌트에 쓰이는 스킨이나 그래픽 요소들을 드로잉 한다. 컴포넌트의 부모 컨테이너는 컴포넌트 자체의 크기를 결정한다.

위에 메소드는 사용자가 직접 호출하는게 아니라 컴포넌트가 생성이 되면서 초기화 될 때나 다른 메소드를 호출했을 때 Flex에서 자동으로 호출 됨

Flex는 invalidation 메커니즘을 사용하여 컴포넌트의 변경을 동기화 시킨다. Flex는 invalidation 메커니즘을 인련의 메소드로서 구현하고 있으며, 컴포넌트가 변경되면 메소드를 호출하여 Flex가 컴포넌트의 commitProperties(), measure(), layoutChrome() 및 updateDisplayList() 메소드를 호출 하도록 한다.
다음은 invalidation 메소드에 대한 설명이다.

 invalidateProperties()  다음 화면 갱신 때 commitProperties() 메소드가 호출되도록 컴포넌트를 마크 한다.
 invalidateSize()  다음 화면 갱신 때 measure() 메소드가 호출되도록 컴포넌트를 마크한다.
 invalidateDisplayList()  다음 화면 갱신 때 layoutChrome() 및 updateDisplayList() 메소드가 호출되도록 컴포넌트를 마크한다.

컴포넌트는 invalidation 메소드가 호출되면 컴포넌트를 갱신할 필요가 있다는 것을 Flex로 통지한다. 여러개의 컴포넌트의 invalidation 메소드를 호출하면, Flex는 다음 화면 갱신시에 해당 컴포넌트들을 모두 같이 갱신한다.

일반적으로 invalidation 메소드는 사용자가 직접 호출하는 것이 아니라, 컴포넌트의 setter 메소드나 컴포넌트 클래스의 다른 메소드에서 필요한 경우 호출된다.

컴포넌트의 기본 구조
package components
{
	public class CustomerComponent
	{
		public function CustomerComponent()
		{
			super();
			
			//other code
		}
	}
}

생성자를 사용해서 클래스의 속성의 초기 값을 설정한다. 예를 들어 속성이나 스타일의 초기값을 지정하거나, 배열과 같은 구조체를 초기화 할 수 있다. 생성자에서 화면에 표시될 자식 오브젝트를 생성해서는 안된다. 생성자는 오직 컴포넌트 속성의 초기 값을 설정하기 위한 용도로 사용한다. 만약 자식 컴포넌트를 생성하고자 한다면 createChildren() 메소드에서 생성한다. 

Button 컴포넌트를 확장한 사용자 컴포넌트
package components
{
	import mx.controls.Button;
	
	public class MyButton extends Button
	{
		public function MyButton()
		{
			super();			
			label = "Button";
			setStyle("cornerRadius", 5);
			setStyle("color", 0xFFFFFF);
		}
	}
}
FLEX 사용자 컴포넌트를 사용한 코드


	
		<--![CDATA[
			import components.MyButton;
			private function init():void{
				var button:MyButton = new MyButton();
				this.addChild(button);				
			}
		]]>

저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

Event 메타데이터 태그  (0) 2010.06.18
Style 메타데이터태그  (0) 2010.06.18
BlazeDS 4 출시  (0) 2010.06.11
[AIR] 플렛폼 독립적인 공통 디렉터리  (0) 2010.05.12
[Flex] TextInput 컨트롤에 제한된 문자면 입력하기  (0) 2010.04.22

BlazeDS 4 출시

개발/FLEX & AIR2010. 6. 11. 11:31
BlazeDS 4.x 버전이 나왔네요
아직까지 어떤 부분이 달라진건지는 좀더 봐야 하겠지만 기대는 됩니다.
이전 프로젝트 진행중에 Data Push를 이용하는 부분에 있어서 버그가 발생이 되었는데 이런 부분이 해결되면 정말 좋을꺼 같습니다. 전 PDF 파일이 좋은데 아직 PDF 파일은 없네요.

http://opensource.adobe.com/wiki/display/blazeds/BlazeDS


저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

Style 메타데이터태그  (0) 2010.06.18
[Flex] 사용자 컴포넌트  (0) 2010.06.15
[AIR] 플렛폼 독립적인 공통 디렉터리  (0) 2010.05.12
[Flex] TextInput 컨트롤에 제한된 문자면 입력하기  (0) 2010.04.22
[FLEX] DateChooser, DateField 달력 한글로 표기하기  (0) 2010.04.19

[AIR] 플렛폼 독립적인 공통 디렉터리

개발/FLEX & AIR2010. 5. 12. 11:38

 공통디렉터리 설명  속성 
 사용자 홈 사용자 계정의 루트 디렉터리  File.userDirectory
 사용자 문서 디렉터리 사용자 홈 디렉터리에 위치하는 문서 디렉터리  File.documentsDirectory
 애플리케이션 스토리지 디렉터리 설치되는 어플리케이션별로 생성되는 고유 스토리지 디렉터리  File.applicationStorageDirectory
 애플리케이션 디렉터리 애플리케이션이 설치된 디렉터리   File.applicationDirectory
 바탕화면 사용자의 바탕화면 디렉터리   File.desktopDirectory


사용자 바탕화면 디렉터리 읽어오기
var listing:Array = File.desktopDirectory.getDirectoryListing();

애플리케이션 디렉터리 참조하기
var applicationDirectory:File = new File("app:/");
var applicationDirectory:File = File.applicationDirectory();

예제)

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute"
 creationComplete="creationCompleteHandler()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function creationCompleteHandler():void{
    print(File.userDirectory.nativePath);
    print(File.documentsDirectory.nativePath);
    print(File.desktopDirectory.nativePath);
    print(File.applicationDirectory.nativePath);
    print(File.applicationStorageDirectory.nativePath);
    print(File.documentsDirectory.resolvePath("Downloads").nativePath);
    print(File.documentsDirectory.resolvePath("Downloads/test").nativePath);
    print(File.documentsDirectory.resolvePath("..").nativePath);
    print(File.userDirectory.getRelativePath(File.documentsDirectory));
   }
   
   private function print(string:String):void{
    output.text += ">" + string + "\n";
   }   
  ]]>
 </mx:Script>
 <mx:TextArea id="output" width="100%" height="100%" />
</mx:WindowedApplication>

참고 
http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS53995f63097985ed-7aaf5f2511d5bbfba82-8000f.html
http://livedocs.adobe.com/apollo/1.0/aslr/
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[Flex] 사용자 컴포넌트  (0) 2010.06.15
BlazeDS 4 출시  (0) 2010.06.11
[Flex] TextInput 컨트롤에 제한된 문자면 입력하기  (0) 2010.04.22
[FLEX] DateChooser, DateField 달력 한글로 표기하기  (0) 2010.04.19
[AIR] 윈도우 우선 순위 속성  (0) 2010.03.27

[Flex] TextInput 컨트롤에 제한된 문자면 입력하기

개발/FLEX & AIR2010. 4. 22. 00:18

Text 입력 컨트롤에 제한된 문자열만 받고 싶을때는 restrict 속성을 사용한다.

0-9 : 숫자 0 ~ 9
a-z : 소문자 알파벳 a ~ z 까지
^a~z : 소문자 알파벳 a ~ z를 제외한 모든 문자
0-9a-z : 숫자 0 ~9 까지 그리고 알파벳 소문자 a-z까지의 문자 입력 가능

<mx:TextInput restrict="0-9a-z!?.+=@"/>

저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

BlazeDS 4 출시  (0) 2010.06.11
[AIR] 플렛폼 독립적인 공통 디렉터리  (0) 2010.05.12
[FLEX] DateChooser, DateField 달력 한글로 표기하기  (0) 2010.04.19
[AIR] 윈도우 우선 순위 속성  (0) 2010.03.27
[FLEX] Arial Font 사용시 사이즈 오류 문제  (0) 2010.02.24

[FLEX] DateChooser, DateField 달력 한글로 표기하기

개발/FLEX & AIR2010. 4. 19. 23:49
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[AIR] 플렛폼 독립적인 공통 디렉터리  (0) 2010.05.12
[Flex] TextInput 컨트롤에 제한된 문자면 입력하기  (0) 2010.04.22
[AIR] 윈도우 우선 순위 속성  (0) 2010.03.27
[FLEX] Arial Font 사용시 사이즈 오류 문제  (0) 2010.02.24
Flex 에서 Log 남기기  (0) 2010.02.22

[AIR] 윈도우 우선 순위 속성

개발/FLEX & AIR2010. 3. 27. 23:34

orderToFront()
동일 AIR 어플리케이션 내에서 해당 윈도우를 다른 윈도우들보다 가장 앞쪽에 배치시킨다.

orderToBack()
동일 AIR 어플리케이션에서 해당 윈도으를 다른 윈도우들 보다 가장 뒤쪽에 배치한다.

orderInFrontOf(window:IWinodw)
해당 윈도우를 다른 윈도우 앞쪽에 배치한다.

orderInBackOf(window:IWindow)
해당 윈도우를 다른 윈도우 뒤쪽에 배치한다.

alwaysInFront()
해당 윈도우가 바탕화면에서 항상 다른 윈도우들보다 앞쪽에 배치되도록 한다.

var windows:Array = NativeApplication.nativeApplication.openedWindows;
for(var i:Number = 0; i < windows.length; i++){
    windows[i].orderToFront();
}
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[Flex] TextInput 컨트롤에 제한된 문자면 입력하기  (0) 2010.04.22
[FLEX] DateChooser, DateField 달력 한글로 표기하기  (0) 2010.04.19
[FLEX] Arial Font 사용시 사이즈 오류 문제  (0) 2010.02.24
Flex 에서 Log 남기기  (0) 2010.02.22
Flex - Javascript 간의 통신  (0) 2010.02.01

[FLEX] Arial Font 사용시 사이즈 오류 문제

개발/FLEX & AIR2010. 2. 24. 11:54

Flex로 개발하던 중에 Arial Font 사용시 문제점이 있네요.
일반적으로 72포인터로 사용하면 문제가 발생되지 않지만 지금 개발하고 있는 프로그램에서는 70 포인트에다가
scaleX="2" scaleY="2"를 줘서 크기를 두배로 키웠습니다.
숫자를 표현하는 부분에서는 에서는 문제가 발생되지 않았지만 영문을 사용할때 문제가 생겼는데 개발중에 있는 프로그램은 16방위의 풍향을 표현하기 위해서 다음과 같은 코드를 사용했다.

<mx:VBox width="200" height="200" verticalAlign="middle" horizontalAlign="center">
    <mx:Label fontFamily="Arial" fontSize="70"  text="NE" scaleX="2" scaleY="2" textAlign="center"/>
</mx:VBox>

내용만 전달하면 되기 때문에 코드를 간단하게 했다. 위의 코드를 실행했을 경우에 문제가 되는데 알파벳 전체를 테스트 해보지 않았지만 NNE, NE, ENE의 조합이 들어가면 문제가 발생했다. 따로 테스트 페이지를 작성해서 똑같은 테스트를 해보았지만 문제가 문제가 발생하지 않았지만 프로그램 부분에만 이런 문제가 발생하니 여간 고생이 아니였다. ㅠㅠ
해서 다음과 같이 Text로 바꾸니 이런 문제가 발생하지 않았지만 또 다른 사람들이 이런 문제가 발생이 되면 참고 하기 바란다

 <mx:VBox width="200" height="200" verticalAlign="middle" horizontalAlign="center">
    <mx:Text fontFamily="Arial" fontSize="70"  text="NE" scaleX="2" scaleY="2" textAlign="center"/>
</mx:VBox>
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[FLEX] DateChooser, DateField 달력 한글로 표기하기  (0) 2010.04.19
[AIR] 윈도우 우선 순위 속성  (0) 2010.03.27
Flex 에서 Log 남기기  (0) 2010.02.22
Flex - Javascript 간의 통신  (0) 2010.02.01
FLEX - Style Exploer  (0) 2010.01.19

Flex 에서 Log 남기기

개발/FLEX & AIR2010. 2. 22. 10:39

windows7이나 vista 환경에서 ActionScript3로 개발시 trace 로그남기는 법입니다.
일반적으로 많이들 돌아다니는 사용법으로 해보니 지금 사용하고 있는 windows7에서는 동작을 하지 않네요.
이 방법은 다른 환경에서는 해보지 않고 제가 쓰고 있는 운영체제에서만 테스트를 한것이니 참고로 사용해주세요.

 1. C:\Users\<사용자>\mm.cfg 파일을 열어서 아래 내용을 등록합니다.
    만일 파일이 존재 하지 않는다면 그냥 만들면 됩니다.

ErrorReportingEnable=1
TraceOutputFileEnable=1
TraceOutputFileName=diem-PC:Users:diem:Desktop:flashLog.txt MaxWarnings=50

붉은색으로 표시된 부분은 컴퓨터 이름과 사용자 명을 입력하시면 됩니다.
내용이 입력이 완료 되었으면 창을 저장한 후 창을 닫습니다.


2. 그 다음엔 아래 그림과 같이 환경 변수를 2개를 추가합니다.






추가가 다 되었으면 창을 닫습니다.

3. 이제 다 되었으니 아래 경로로 가서 로그가 잘 쌓이는지 확인하면 됩니다.

C:\Users\[YOURUSERNAME]\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt


ecilpse에서 플러그인을 통한 로그 확인하기
http://code.google.com/p/eclipse-flair/에서 최신 버전의 spitzer.flair-1.1.0-site.zip 파일을 다운 받는다.
압축을 푼후 그 안에 있는 폴더를 이클립스 폴더로 복사한다.

플렉스 메뉴에서 Window > Other Views 메뉴로 이동하여 Flair 폴더 하위에 Flash Log를 클릭한다.
이클립스 메뉴 하단에 Flash Log 탭이 생성이 되었으면 해당 탭을 선택하여 창을 활성화 시킨다 활성화 된 창에 보면 Preferences 버튼이 있는데 이를 클릭하여 Log file Location 메뉴에 flashlog.txt 의 경로를 입력하고 확인을 누른다.

플래시 디버거 설치 http://www.adobe.com/support/flashplayer/downloads.html

spitzer.flair-1.1.0-site.zip
mm.cfg
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[AIR] 윈도우 우선 순위 속성  (0) 2010.03.27
[FLEX] Arial Font 사용시 사이즈 오류 문제  (0) 2010.02.24
Flex - Javascript 간의 통신  (0) 2010.02.01
FLEX - Style Exploer  (0) 2010.01.19
Flex 흐르는 텍스트 효과  (0) 2010.01.12

Flex - Javascript 간의 통신

개발/FLEX & AIR2010. 2. 1. 16:45

Flex개발시 웹 페이지와의 통신이 필요할 경우가 종종.. 아니 수시로 발생한다.

물론 Flex로만 개발된 사이트라면 문제가 되지 않겠지만, 기존사이트를 유지 보수하거나, Javascript로 되어 있던 영역을 Flex로 재개발 할때 많이 발생 될것이다.

Flex의 ExternalInterface 클래스를 통해서 통신이 가능하다.

Flex에서 Javascript함수를 호출할 때는 아래와 같이 호출한다.

ExternalInterface.call("Javascript Function", "Method", Params01, Params02....);


반대로 Javascript에서 Flex함수 호출은
document.getElementById('swf ID').FlexFunction(Params);

Javascript에서 Flex함수를 호출하는 건 바로 사용할수 없다.
Flex내부에서 Callback함수를 이용할수 있도록 설정해 줘야 한다.

Interface.addCallback("FlexFunction", 실제사용될함수);  
저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

[FLEX] Arial Font 사용시 사이즈 오류 문제  (0) 2010.02.24
Flex 에서 Log 남기기  (0) 2010.02.22
FLEX - Style Exploer  (0) 2010.01.19
Flex 흐르는 텍스트 효과  (0) 2010.01.12
[Caster] XML만을 사용시 서버측 XML 객체 상호변환  (0) 2009.12.24

FLEX - Style Exploer

개발/FLEX & AIR2010. 1. 19. 23:03
* Flex Chart Style Explorer
http://demo.quietlyscheming.com/ChartSampler/app.html

* Flex Filter Style Explorer
http://www.merhl.com/flex2_samples/filterExplorer/

* Flex Button Style Explorer
http://www.wabysabi.com/flex/enhancedbuttonskin/


-----------------------------------------------------------------------------------------------------

* Flex Samples Explorer
http://flexapps.macromedia.com/flex15/explorer/explorer.mxml

* Flex Component Explorer
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

* Flex Resize Manager Explorer
http://www.teotigraphix.com/explorers/ResizeManagerFX/ResizeManagerFXExplorer.html

* Flex Reflection Explorer
http://www.wietseveenstra.nl/files/flex/ReflectionExplorer/v1_0/ReflectionExplorer.html

저작자표시

'개발 > FLEX & AIR' 카테고리의 다른 글

Flex 에서 Log 남기기  (0) 2010.02.22
Flex - Javascript 간의 통신  (0) 2010.02.01
Flex 흐르는 텍스트 효과  (0) 2010.01.12
[Caster] XML만을 사용시 서버측 XML 객체 상호변환  (0) 2009.12.24
Flex 컴포넌트의 비율 유지  (0) 2009.12.21

티스토리툴바