캠핑과 개발

 
   private var urlDataLoader:URLLoader;

   //---------------------------------------------------------------
   // xml 형식의 파일을 불러온다.
   //----------------------------------------------------------------
   var dataRequest:URLRequest = new URLRequest("gshhs_l_data.xml");
   urlDataLoader = new URLLoader();
   urlDataLoader.addEventListener(Event.COMPLETE, loadDatasXML);
   urlDataLoader.load(dataRequest);
   
   
   
   //----------------------------------------------------------------
   // txt 형식의 파일을 불러온다.
   //----------------------------------------------------------------
   var requestConfig:URLRequest = new URLRequest("bdy_config.txt");
   var loaderConfig:URLLoader = new URLLoader();
   loaderConfig.addEventListener(Event.COMPLETE, completeConfigHandler);
   loaderConfig.load(requestConfig);



/**
   * configXML 설정파일 xml을 셋팅한다.
   */
  private function loadDatasXML(e:Event):void
  {
         //dataXML = new XML(e.target).children();
         dataXML = new XML(urlDataLoader.data).children();
         //trace(dataXML.length());
         //draw();
         // todo..
 
  }
 
private function completeConfigHandler(e:Event):void
{
    var src:String = e.target.data as String;
    tempConfigRowArray = src.split("\n");
    //mainHeaderConfigRowArray = tempConfigRowArray[0].split(",");
    //trace("config row count::" + tempConfigRowArray.length);
    //etc. etc.
}


데이터 바인딩식의 소스로서 사용할 수 있는 프롭퍼티를 식별합니다

프로퍼티가 데이터 바인딩식의 소스인 경우, Flex는 소스 프로퍼티의 변경시에 자동적으로 소스 프로퍼티의 값을 행선지 프로퍼티에 카피합니다.
다만, 카피를 실행하는 듯 Flex 에 통지하기 위해서는 [Bindable] 메타데이터태그를 사용해 프로퍼티를 Flex 에 등록해 소스 프로퍼티로부터 이벤트를 송출할 필요가 있습니다.

[Bindable] 메타데이터태그의 문장구조법은 다음과 같습니다.

[Bindable]
[Bindable(event="eventname")]

이벤트명을 생략 하면, Flex는 자동적으로 propertyChange라는 이름의 이벤트를 생성합니다.

데이터 바인딩 및 이 메타데이터태그에 대해 자세한 것은,데이터 바인딩을 참조해 주세요.


바인드 가능 프로퍼티 체인의 사용

데이터 바인딩의 소스로서 프로퍼티를 지정하면 그 프로퍼티의 변경 뿐만이 아니라 그 프로퍼티가 포함되는 프로퍼티 체인도 감시됩니다. 행선지 프로퍼티를 포함한 프로퍼티의 체인 전체는 「바인드 가능 프로퍼티 체인」이라고 불립니다.
다음의 예의 firstName.text는  firstName 오브젝트와 그 text 프로퍼티를 포함한 바인드 가능 프로퍼티 체인입니다.
 <first>{firstName.text}</first>

바인드 가능 프로퍼티 체인내의 지정한 프로퍼티가 변경되었을 경우에는 이벤트를 생성할 필요가 있습니다. 프로퍼티가 [Bindable] 메타데이터태그에 의해서 마크 되고 있는 경우는 Flex 컴파일러에 의해서 자동적으로 이벤트가 생성됩니다.

다음의 예는 변수 및 getter 프로퍼티에 대해서 [Bindable] 메타데이터태그를 사용하고 있습니다. 또한 이 예는 dispatchEvent() 함수를 호출하는 방법도 나타내 보이고 있습니다.

 [Bindable]
public var minFontSize:Number = 5;

[Bindable("textChanged")]
public function get text():String {
    return myText;
}

public function set text(t : String):void {
    myText = t;
    dispatchEvent( new Event( "textChanged" ) );
}

[Bindable] 메타데이터태그로 이벤트명을 생략 했을 경우는 Flex 컴파일러에 의해서 propertyChange라는 이름의 이벤트가 자동적으로 생성되어 송출되기 위해, 프로퍼티를 데이터 바인딩식의 소스로서 사용할 수 있습니다.

또, 오브젝트를 기존의 형태에 캐스트 하는 것에 의해서 오브젝트에 관한 구체적인 정보를 컴파일러에 제공할 필요가 있습니다.
다음의 예에서는,List 컨트롤의 myList 에 Customer 오브젝트가 포함되어 있으므로,selectedItem 프로퍼티는 Customer 오브젝트에 캐스트 됩니다.
 <mx:Model id="selectedCustomer">
    <customer>
        <name>{Customer(myList.selectedItem).name}</name>
        <address>{Customer(myList.selectedItem).address}</address>
        ...
    </customer>
</mx:Model>

경우에 따라서는, 바인딩이 의도한 대로 자동적으로 실행되지 않는 것이 있습니다.
다음의 예 처럼, dataProvider 프로퍼티의 아이템 전체를 변경했을 경우 바인딩은 자동적으로는 실행되지 않습니다.
 dataProvider[i] = newItem

또, 다음의 예 처럼, 프로퍼티의 서브 프로퍼티가 [Bindable] 메타데이터를 가지는 경우도 바인딩은 자동적으로는 실행되지 않습니다.
 ...
[Bindable]
var temp;
// Binding is triggered:
temp = new Object();
// Binding is not triggered, because label not a bindable property
// of Object:
temp.label = foo;
...

이 코드예에서는 {temp.label} 에 관해서 temp 하지만 Object 인 것이 문제입니다. 이 문제는 다음의 몇개의 방법으로 해결할 수 있습니다.
  • Object 의 초기화 사전 처리를 실시합니다.
  • ObjectProxy를 temp 에 할당합니다.ObjectProxy 의 프로퍼티는 모두 바인드 가능합니다.
  • temp를, 바인드 가능한 label 프로퍼티를 사용하고, 엄밀하게 형태 지정된 오브젝트로 합니다.
mouseX 프로퍼티 등 Flash Player 에 의해서 자동적으로 갱신되는 프로퍼티에 데이터를 바인딩 하는 경우에도 바인딩은 자동적으로는 실행되지 않습니다.

UIComponent 클래스의 executeBindings() 메소드는 UIComponent 오브젝트를 행선지로 하는 모든 바인딩을 실행합니다.Repeater 컴퍼넌트를 포함한 모든 컨테이너 및 컨트롤은 UIComponent 클래스를 확장한 것입니다. Container 클래스 및 Repeater 클래스의 executeChildBindings() 메소드는 Container 클래스 또는 Repeater 클래스의 아이 UIComponent 컴퍼넌트를 행선지로 하는 모든 바인딩을 실행합니다. 컨테이너는 모두 Container 클래스를 확장한 것입니다.

이러한 메소드에 의해 의도한 대로 행해지지 않는 바인딩을 실행할 수 있습니다. 변경을 더해도 바인딩이 실행되지 않는 경우에 유저 인터페이스를 갱신하려면 executeChildBindings() 메소드에의 호출등의 코드를 1 행 추가합니다. 다만 executeBindings() 메소드는 바인딩이 자동적으로 실행되지 않는 것을 알 수 있고 있는 경우에게만 사용합니다. 
 

이벤트의 MXML 프롭퍼티와 컴퍼넌트가 생성하는 이벤트 오브젝트의 데이터형을 정의하려면 [Event] 메타데이터태그를 사용합니다. [Event] 메타데이터태그는,ActionScript 파일내의 클래스 정의 전, 또는 MXML 파일내의 <mx:Metadata> 블록에 삽입합니다.

 커스텀 이벤트의 정의 방법에 대해 자세한 것은,커스텀 이벤트(을)를 참조해 주세요.

 [Event] 메타데이터태그의 문장구조법은 다음과 같습니다.

 [Event(name="eventName", type="package.eventType")]

 다음의 표에,[Event] 메타데이터태그의 프롭퍼티를 나타냅니다.

 프롭퍼티  형  설명
 eventName  String  패키지명을 포함한 이벤트명을 지정합니다.
 eventType  String  이벤트 오브젝트의 데이터형을 정의하는 클래스를 지정합니다.클래스명은 기본 이벤트 클래스의 Event 또는 Event 클래스의 서브 클래스의 어딘가에 됩니다.클래스명에는 패키지를 포함할 필요가 있습니다.

 다음의 예에서는, 컴퍼넌트를 송출할 수 있는 이벤트로서 myClickEvent 이벤트를 지정해 있습니다.

 [Event(name="myClickEvent", type="flash.events.Event")]

 

[Event] 메타데이터태그를 사용해 클래스 파일에 이벤트를 지정하지 않고, MXML 안에서 그 이벤트명을 사용하려고 하면 MXML 컴파일러에 의해 에러가 생성됩니다. [Event] 메타데이터태그를 생략 했을 경우에서도 addEventListener() 메소드를 사용하면 컴퍼넌트는 ActionScript 안의 이벤트의 이벤트 청취자를 등록할 수 있습니다.

 

다음의 예에서는 ActionScript 컴퍼넌트를 송출할 수 있는 이벤트로서 myClickEvent 이벤트를 지정해 있습니다.

[Event(name="myEnableEvent", type="flash.events.Event")]
public class MyComponent extends UIComponent
{
    ...
}

 

다음의 예는 MXML 파일내의 <mx:Metadata> 태그 안의 [Event] 메타데이터태그를 나타내고 있습니다.

 <?xml version="1.0"?>
<!-- TextAreaEnabled.mxml -->
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Metadata>
        [Event(name="myEnableEvent", type="flash.events.Event")]
    </mx:Metadata>

    ....

</mx:TextArea>


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

[actionscript 3.0] 외부 xml 및 txt 파일 읽기  (0) 2010.07.07
Bindable 메타 데이터 태그  (0) 2010.06.18
Style 메타데이터태그  (0) 2010.06.18
[Flex] 사용자 컴포넌트  (0) 2010.06.15
BlazeDS 4 출시  (0) 2010.06.11

컴포넌트의 스타일을 정의 할때 쓰이는 메타데이터 태그로, Flex Bulider에서 코드 힌트에 보이고 CSS에서 스타일 시트로 정의 가능한 메타 데이터 입니다.

 [Style] 메타데이터태그의 문장구조법은 다음과 같습니다.

 [Style(name="style_name"[,property="value",...])]

 메타 데이터가 들어가는 위치는 mxml 컴포넌트 파일의 경우 <mx:MetaData></mx:MetaData>의 테그 사이에 들어가게 되고 actionscript 컴포넌트 파일의 경우 패키지 선언과 클래스 선언 사이에 쓰이게 된다. (import 가 들어가는 위치랑 같음 )

 [Style] 메타데이터 태그의 프로퍼티값들

* name (String)

   : (필수) 스타일의 이름을 지정합니다.

* type (String)

   : 스타일 프로퍼티에 쓰는 값의 데이터 형을 지정합니다. Number나 Date등의 형태도 들어가고 packageName.className 형태의 데이터도 들어갑니다.

* arrayType (String)

   : type의 값이 Array 일 경우, Array 안에 들어가는 데이터 형을 정의 합니다. type값과 같이 데이터형과 클래스 형태도 들어갑니다.

* format (String)

   : 프로퍼티의 단위를 지정합니다. 예를들면 Type으로 Number를  지정한 경우는 format="Length"를 지정해서 스타일의 길이를 픽셀 단위로 정의 할 수 있습니다. 또는 Type으로 uint 를 지정하는 경우는 format="color"를 설정하면 RGB 칼라로 정의 할 수 있습니다.

* enumeration (String)

   : 스타일 프로퍼티에 들어갈수 있는 값들을 열거 합니다.  예를들면 BorderStyle의 경우 enumeration="inset,outset,solid,none" 식으로 값이 들어갑니다.

* inherit (String)

   : 프로퍼티를 계승 할지 지정합니다. 들어갈수 있는값은 yes, no 입니다. 여기서 계승은 객체 지향의 계승이 아니라 css 상의 계승을 의미합니다.  Global로 설정한것 또는 해당 컴포넌트에 전체로 스타일을 먹인것 (Panel, Button 형식으로)을 계승 할지 입니다.

* states (String)

   : 스킨 프로퍼티에 대해서, 스타일을 사용 할 수 있도록 지정해서 복수 상태를 가지는 컴포넌트에 스테이트 풀 스킨을 지정합니다. 예를 들면 버튼의 경우에는

states="up,over,down,disabled, selectedUp, selectedOver, selectedDown,selectedDisabled"의 값이 지정 됩니다.

 다음의 예는 TileList나 Grid 등에서 격자로 나오는 색상의 스타일 정의 입니다.

[Style(name="alternatingItemColors", type="Array", arrayType="uint", format="Color", inherit="yes")]

해당 스타일 값을 받을 때 : getStyle("style_name");
해당 스타일 값을 설정 할떄 : setStyle("style_name", "value");


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

Bindable 메타 데이터 태그  (0) 2010.06.18
Event 메타데이터 태그  (0) 2010.06.18
[Flex] 사용자 컴포넌트  (0) 2010.06.15
BlazeDS 4 출시  (0) 2010.06.11
[AIR] 플렛폼 독립적인 공통 디렉터리  (0) 2010.05.12


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

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);				
			}
		]]>
	


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로 개발하던 중에 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>

'DEVELOPMENT > 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


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

'DEVELOPMENT > 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