캠핑과 개발

컴포넌트의 스타일을 정의 할때 쓰이는 메타데이터 태그로, 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


 공통디렉터리 설명  속성 
 사용자 홈 사용자 계정의 루트 디렉터리  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/


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

출처 : http://cafe.naver.com/flexcomponent/12264

아시는 분들도 계시겠으나...
DataService 를 사용하지 않고 XML 응답만으로 Flex 를 개발할때
java 서버측 구현에 쉽게 적용 가능한 Caster 라는 XML 변환 프레임웍을 소개해 드립니다.

아래의 링크에서 Caster 를 다운로드 받습니다. 샘플도 많습니다. 다운받으세요~
http://www.castor.org/download.html

아래의 링크는 맵핑에 관련된 설명입니다.
http://www.castor.org/xml-mapping.html


간단히 소개해 드리자면
------------------------------------------------
Java결과객체 → Caster프레임웍 → 변환된 XML
                                ↑
                       XML맵핑룰.xml
------------------------------------------------
와 같이 동작하는 매우 일반적 형태의 프레임웍입니다.

 

바로 사용할 수도 있으나 사용의 편이성을 위해 아래와 같은 클래스를 맹길었습니다.

 

public class CasterMapper {

    /** XML 맵핑 객체 */
    Mapping mapping;

    // .. 스트림이나 파일을 받는 생성자 등등등...

    /**
     * XML 파일을 객체로 변환한다
     * @param xmlIn
     * @return
     * @throws MappingException
     * @throws ValidationException
     * @throws MarshalException
     */
    public Object xmlToObject(Reader xmlReader)
            throws MappingException, MarshalException, ValidationException {
        Unmarshaller unmarshaller = new Unmarshaller(this.mapping);
        return unmarshaller.unmarshal(new InputSource(xmlReader));
    }

 

    /**
     * 객체를 XML 로 변환한다.
     * @param obj
     * @param xmlOut
     * @throws IOException
     * @throws MappingException
     * @throws ValidationException
     * @throws MarshalException
     */
    public void objectToXml(Object obj, Writer xmlWriter)
            throws IOException, MappingException, MarshalException, ValidationException {
        Marshaller marshaller = new Marshaller(xmlWriter);
        marshaller.setMapping(this.mapping);
        marshaller.marshal(obj);
    }
}

 

그리고 Flex의 요청에 대한 응답을 처리하는 Servlet 내에서 아래처럼 결과객체를 변환하여
응답을 보냅니다.

 

    // #. 결과객체 (변환하고자 하는 객체)
    Object resultObject = new Object(); // 개인마다 DB의 결과를 담은 다른 클래스형의 객체가 들어갈겁니다...

    // #. 맵핑룰 XML 얻기
    InputStream xmlInputStream = getClass().getResourceAsStream("test_ed_mapping.xml");
    CasterMapper mapper = new CasterMapper(xmlInputStream);

    // #. print response
    mapper.objectToXml(resultObject, response.getWriter());

 

 

아래는 test_ed_mapping.xml 의 예로서 전체 XML응답전문을 Header 와 Body 로 구분하고
사용자 목록을 출력하도록 지정했습니다.

맵핑전문은 아래와 같은 특징이 있으니 잘 살펴보시기 바랍니다.
- Element(태그)는 클래스와 맵핑된다.
- 값은 Attribute 나 Element 로 표현될 수 있다.
- 위쪽에서 사용된 클래스에 대한 정의로 바로 아래에서 표현한다.

 

test 로 시작되는 패키지 내의 Class 는 개인적으로 만드셔야 합니다.
전문을 눈여겨 보면 어렵지 않게 클래스를 만들수 있으시라라 생각됩니다.
참고로 PagingList 란 넘은 java.util.ArrayList 형의 list 어트리뷰트를 가지고 있습니다.

 

<?xml version="1.0"?>
<!DOCTYPE mapping PUBLIC "-//EXOLAB/Castor Mapping DTD Version 1.0//EN" "http://castor.org/mapping.dtd">

<mapping>

    <class name="test.common.xml.ed.XmlResponse">
        <map-to xml="response"/>
        <field name="header" type="test.common.xml.ed.XmlHeader">
            <bind-xml name="header" node="element"/>
        </field>
        <field name="body" type="test.common.xml.ed.XmlBody">
            <bind-xml name="body" node="element"/>
        </field>
    </class>

    <!-- HEADER -->
    <class name="test.common.xml.ed.XmlHeader">
        <map-to xml="header"/>
        <field name="id" type="java.lang.String">
            <bind-xml name="id" node="attribute"/>
        </field>
        <field name="group" type="java.lang.String">
            <bind-xml name="group" node="attribute"/>
        </field>
        <field name="code" type="java.lang.String">
            <bind-xml name="code" node="attribute"/>
        </field>
        <field name="message" type="java.lang.String">
            <bind-xml name="message" node="attribute"/>
        </field>
    </class>

    <!-- BODY -->
    <class name="test.common.xml.ed.XmlBody">
        <map-to xml="body"/>
        <field name="obj" type="test.common.xml.ed.PagingList">
            <bind-xml name="users" node="element"/>
        </field>
    </class>

    <!-- Users -->
    <class name="test.common.xml.ed.PagingList">
        <map-to xml="users"/>
        <field name="list" type="test.beans.User" collection="arraylist">
            <bind-xml name="user" node="element"/>
        </field>
    </class>

    <!-- USER -->
    <class name="test.beans.User">
        <map-to xml="user"/>

        <field name="id" type="java.lang.String">
            <bind-xml name="id" node="attribute"/>
        </field>

        <field name="name" type="java.lang.String">
            <bind-xml name="name" node="attribute"/>
        </field>

        <field name="email" type="java.lang.String">
            <bind-xml name="email" node="attribute"/>
        </field>
    </class>
</mapping>

 

 

이리하여 결과는 아래와 같습니다.

DB의 사용자 테이블에 질의한 쿼리의 결과가 User 객체의 List 로 반환이 되었다고 가정하고

이것에 대한 서블릿의 결과는 다음과 같습니다.

 

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <header>
        <id>test.ViewMembers</id>
        <group>admin</group>
        <code>0000</code>
        <message>SUCCESS</message>
    </header>
    <body>
        <users>
            <user id="honggildong1" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong2" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong3" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong4" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong5" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong6" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong7" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong8" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong9" name="길동이" email="honggildongika@gildong.com"/>
            <user id="honggildong10" name="길동이" email="honggildongika@gildong.com"/>
        </users>
    </body>
</response>

 

편리하겠죠?

기존 JSP 로 작성된 시스템에서 Flex Client로 전환시 Layer 가 잘 나눠져 있다면
아주 쉽게 커스터마이징 가능하리라 생각됩니다.


간단한 내용이나 걍 참고하시라고 적어봤습니다.

 

[참고링크]
이곳에 뉴스그룹이 있으니 기타 트러블슈트 참고하시고요~
http://www.mail-archive.com/castor-dev@exolab.org/


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

FLEX - Style Exploer  (0) 2010.01.19
Flex 흐르는 텍스트 효과  (0) 2010.01.12
Flex 컴포넌트의 비율 유지  (0) 2009.12.21
Flex와 Java간 소켓 통신  (1) 2009.12.21
XML과 E4X 다루기  (0) 2009.12.20




	Ulysses
	Ulysses
	Joyce, James
	Myung jin, Hwang
	Penguin Books Ltd
	A very thick book





자식 노드 접근하기
    //<BOOK>의 자식 노드들을 나타내는 XMLList를 반환
    novel.children();
    novel.*
    
    //첫번째 자식노드에 접근하기
    novel.*[0];
    novel.children()[0];
    
    //마지막 자식노드에 접근하기
    novel.children()[novel.children().length() - 1];
    
    //이름이  SUBJECT인 root의 모든 자식 엘리번트 반환
    novel.child("SUBJECT");
    novel.SUBJECT ;
    
    //이름이  SUBJECT인 ROOT의 모든 자식 엘리먼트의  첫번째  SUBJECT 요소
    novel.child("SUBJECT")[0];
    novel.SUBJECT[0];
    
    //이름이  AUTHOR의 첫번째 엘리먼트의 이름을 WRITER로 변경한다.
    novel.AUTHOR[0].setName("WRITER");


텍스트 노드에 접근하기  
   //Ulysses1 텍스트 노드에 대한 참조
    novel.SUBJECT.children()[0];
    novel.SUBJECT.*[0]
    
    //<SUBJECT> 엘리먼트의 대한 참조
    novel.SUBJECT.*[0].parent();
   
    //문자열 "text" 반환
    novel.SUBJECT.*[0].nodeKind();
    
   //문자열  "Ulysses" 반환
    novel.SUBJECT.*[0].toString();
    novel.SUBJECT.*[0] //암시적으로 toString()로 변환해준다.
    novel.SUBJECT //Subject가 하나일 경우 텍스트 노드를 문자열로 반환한다.

  //텍스트 엘리먼트 가져오기
  novel.DESCRIPTION.text() --> A, thick book
  novel.DESCRIPTION.text()[0] --> A
  novel.DESCRIPTION.text()[1] --> thick book

부모 노드 접근하기 
var doc:XML =
    <grandparent>
     <parent>
      <child></child>
     </parent>
    </grandparent>;
    
    var kid:XML = doc.parent.child[0];
    var parent:XML = kid.parent();
    var grandparent:XML = kid.parent().parent();
    
    trace(parent);
    trace(grandparent);


형제 노드 접근하기
  var author:XML = novel.AUTHOR[0];
    //이전 형제 노드
    trace(author.parent().*[author.childIndex()-1]);
    //다음 형제 노드
    trace(author.parent().*[author.childIndex()+1]);
    
어트리뷰트 접근하기

주석과 처리 지시문 접근하기






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

Flex 컴포넌트의 비율 유지  (0) 2009.12.21
Flex와 Java간 소켓 통신  (1) 2009.12.21
[Flex] PieChart  (0) 2009.11.24
[Flex] LineChart  (0) 2009.11.24
[Chart] ColumnChart, BarChart  (0) 2009.11.24