CLIK 10 - TreeViewItemRenderer, TreeViewDataProvider

1.  TreeViewItemRenderer


Window 편을 마지막으로 CLIK 편을 마치려고 했는데, 트리 메뉴를 쓸 일이 많아지더군요...

트리 메뉴야 샘플도 있고, 코드도 ScrollingList 를 상속받아 몇줄 되지 않지만서도 문제는 아이템 렌더러 쪽입니다.

ListItemRenderer 는 버튼을 상속받은 거의 그대로이기에 별로 볼 것도 없고 쉽지만 TreeViewItemRenderer 가 꽤나 복잡한 편입니다
그런데 공식 component 가 아닌 샘플로만 존재하기 때문에 설명을 찾을 수도 없습니다.


쓰이는 빈도 수를 생각할 때, 이것도 공식 콤포넌트로 만들어줬으면 합니다.



어쨌든 한번 파보죠...

TreeViewItemRenderer > ListItemRenderer (flex) > Button (flex) >  UIComponent (flex) 

스테이지 상에 올려놓는 무비클립 형태가 아닌 트리 콤포넌트에 연결해놓는 형태이기 때문에 Inspectable 속성은 없습니다.

[public]

1. iconItemLineStraight:String = "TreeItemLine_Straight"

폴더(트리)가 열렸을 때, 밑으로 내려오는 선에 연결할 클래스의 identifier 명입니다


2. iconFolderRoot:String = "TreeFolder_Root"

루트(최상위) 아이템에 연결할 아이콘 클래스의 identifier 명입니다 

3. iconFolderLeaf:String = "TreeFolder_Leaf"

아이템에 연결할 아이콘 클래스의 identifier 명입니다  


4. iconItemLineMiddle:String = "TreeItemLine_Middle"

폴더가 열렸을 때, 밑으로 내려오는 선에서 중간에 옆으로 연결되는 (ㅏ) 자 모양에 연결할 클래스의 identifier 명입니다 


5. iconItemLineBottom:String = "TreeItemLine_Bottom"

폴더가 열렸을 때, 밑으로 내려오는 선의 맨 밑에 연결되는 (ㄴ) 자 모양에 연결할 클래스의 identifier 명입니다  


6. iconItemAlone:String = "TreeItem_Alone"

폴더가 열리고 닫히는 것(+ / -)을 보여주는 아이콘에 연결할 클래스의 identifier 명입니다  

7. iconItemTop:String = "TreeItem_Top"

폴더가 열리고 닫히는 것(+ / -)을 보여주는 아이콘 중 가장 상단에 연결할 클래스의 identifier 명입니다


8. iconItemMiddle:String = "TreeItem_Middle"

폴더가 열리고 닫히는 것(+ / -)을 보여주는 아이콘 중 중단에 연결할 클래스의 identifier 명입니다 


9. iconItemBottom:String = "TreeItem_Bottom"

폴더가 열리고 닫히는 것(+ / -)을 보여주는 아이콘 중 하단에 연결할 클래스의 identifier 명입니다  


10. iconSize:Number = 20

이름 그대로 아이콘 사이즈입니다


11. textMargin:Number = 3

아이콘과 텍스트라벨의 간격입니다


12. function setData(data:Object):Void

상위 클래스인 ListItemRenderer 에서는 setListData(index:Number, label:String, selected:Boolean):Void 를 통해서 텍스트 라벨에 텍스트를 쓰지만 이녀석은 setData 에서 씁니다....
흠... 왜그럴까요




2.  TreeViewDataProvider  


이번에는 옵션 설명은 아닙니다.

트리메뉴에서 사용하는 독특한 데이터 컨테이너에 대해서입니다. 


데모에 있는 샘플 데이터를 볼까요...

var root:Object = 

{

label: "System",

nodes:[ 

   {label: "Applications",

    nodes:[

   {label: "CGStudio",

    nodes:[

   {label: "Data"},

   {label: "Samples"},

   {label: "Config"}

  ]

},

   {label: "Money Manager"},

   {label: "Role Call v6"},

   {label: "Inventionista"},

   {label: "Super Draft",

    nodes:[

   {label: "Templates"},

   {label: "Binaries"},

   {label: "Local"}

  ]

}

  ]

},

    {label: "Users",

 nodes:[

{label: "ldicaprio",

 nodes:[

{label: "Films"},

{label: "Contacts"}

]

},

{label: "kwinslet",

 nodes:[

{label: "Necklaces"},

{label: "Awards"}

]

}

   ]

},

{label: "Media",

    nodes:[

   {label: "Titanic",

    nodes:[

   {label: "Photos"},

   {label: "Clips"},

   {label: "Storyboards"}

  ]

},

   {label: "Script #443"},

   {label: "Script #12"},

   {label: "Script #8239"},

   {label: "Revolutionary Road",

    nodes:[

   {label: "Photos"},

   {label: "Clips"},

   {label: "Storyboards"}

  ]

}

  ]

}

  ]

};

var dp:TreeViewDataProvider = new TreeViewDataProvider(root);

 

왜 이따구로 만들었는지는 모르겠지만 암튼 JSON 처럼 만들어놨어요...
만들려면 완전 json처럼 만들던가 말이죠... json 비슷하게만 해놓은건 뭔지...

이런 형태로 해야  클라가 만들기 편할 것으로 생각했나 봅니다.

json 에 대해서는...

http://www.ibm.com/developerworks/kr/library/wa-ajaxintro10/  
http://www.json.org/json-ko.html 


이 글을 한번 읽어보시고요...

암튼 이렇게 json 형태로 만들어주면 TreeViewDataProvider 에서 다시 그걸 재귀함수가 돌면서 가공해서 사용합니다