IListItemRenderer는 인터페이스니 노출되지 않은 public 포스팅에는 ListItemRenderer 를 대신 하겠습니다


1. CoreList (flex)


public 속성입니다.


1. container:Sprite

아이템이 담길 컨테이너입니다. 배경 정도로 생각하셔도 됩니다. 리스트 컴포넌트 내에 미리 만들어서 이 인스턴스 네임을 붙여놓은게 없다면 자동으로 생성됩니다


2. itemRenderer:Class (flex)

아이템 렌더러로 쓰일 클래스입니다.  itemRendererName 로 들어온 값이 이리로 저장됩니다.


3. set itemRendererList(value:Vector.<IListItemRenderer>):void

itemRendererInstanceName 과 같습니다.  itemRendererInstanceName 로 들어온 아이템 렌더러 클래스가 이것으로 내부에 저장됩니다.



4. selectedIndex:int = - 1  (flex) 

DropdownMenu 의 그것과 같습니다. 정확히는 DropdownMenu 의 그것이 이것과 같은거겠죠 :^)



5. dataProvider:IDataProvider (flex)

DropdownMenu 의 그것과 같습니다 



6. labelField:String  (flex) 

DropdownMenu 의 그것과 같습니다  



7. labelFunction:Function  (flex) 

DropdownMenu 의 그것과 같습니다  



8. get availableWidth():Number

리스트의 실제 현재의 넓이입니다 (드롭다운 버튼의 넓이가 아닌)


9. get availableHeight():Number

리스트의 실제 현재의 높이입니다 (드롭다운 버튼의 높가 아닌)  



public 메소드입니다.


1. scrollToIndex(index:uint):void

특정인덱스의 아이템이 있는 곳으로 스크롤을 옮깁니다


2. scrollToSelected():void

선택된 아이템이 있는 곳으로 스크롤을 옮깁니다


3. itemToLabel(item:Object):String

DropdownMenu 의 그것과 같습니다.


4. getRendererAt(index:uint, offset:int=0):IListItemRenderer

해당 인덱스의 아이템을 그려낸 아이탬 렌더러 클래스를 반환합니다


5. invalidateRenderers():void

다음번 렌더링에 렌더링을 예약합니다


6. invalidateSelectedIndex():void

다음번 렌더링에 선택 렌더링을 예약합니다



2. ListItemRenderer (flex)


플렉스와는 다른게 CLIK 의  ListItemRenderer 는 Button 을 상속받는다는 겁니다.


public 속성입니다.

1. index:uint = 0

아이템의 인덱스겠죠? 

2. selectable():Boolean = true

현재 선택가능한 녀석인지에 대한 여부입니다 


public 메소드입니다.

1. setListData(listData:ListData):void

아이템에 대한 데이터가 아닌 리스트에 관련된 데이터를 저장합니다. 몇번째 인덱스라던가 하는 것들요. 


2. setData(data:Object):void

아이템 데이터를 저장합니다... 사실 이 인터페이스를 구현한 대부분의 ListItemRenderer 가 Button을 상속받기 때문에 data 를 써도 되긴 합니다.

 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

갑자기 두개를 다루려는게 아니라, 두 녀석을 떼놓고 말할 수가 없네요.


1. CoreList  (flex) 


DropdownMenu 글을 쓰다 보니 스크롤리스트 ScrollingList 의 글을 먼저 했어야 한다는 생각이 들더군요. ScrollingList 설명을 쓰려면 상속받은 CoreList 설명부터 해야 하고요.

CoreList 가 머냐면 스크롤리스트에서 스크롤이 빠진 형태를 생각하시면 됩니다.
사실 스크롤 없이 List가 쓰일 일은 별로 없겠지만(일반 웹 UI 형태의 서브 메뉴 형태 정도?) 기초이니 해야겠군요.


현재 CLIK 에 관한 글은 0 과 1로 나누고 있는데요... 약간 이해를 돕기 위해 좀 덧붙이자면 이렇게 보시면 됩니다.

0 번 글은 Flash IDE 에 노출된 옵션이기에 디자이너나 플래시를 전혀 접해보지 못한 클라이언트 분들이 보시면 될 포스팅입니다.

1 번 글은 노출되어있지 않은 public 속성과 메소드 들에 관한 글이기에 UI 개발자가 보실만한 글입니다.
protected 접근 제한자인 놈들은 쓰질 않았기에 확장해서 마구 수정할 개발자 분은 직접 해당 as 를 열어보셔야겠죠. 2번 포스팅으로 제가 올리게 될지도 모르겠지만 현재로서는 활용성면으로 생각할 때 미계획중입니다.


그럼 각설하고 시작하겠습니다.


1. focusable:Boolean = true (flex)

버튼과 같습니다. Button 편을 참고하세요  


2. itemRendererName:String = "DefaultListItemRenderer" 

리스트의 아이템의 렌더러로 쓰일 클래스명입니다. 인터페이스인 IListItemRenderer 를 구현해야 합니다


3. set itemRendererInstanceName:String = ""

음... 잘은 모르겠는데, 아이템을 한가지 형태로 그리는게 아니라 여러 형태로 그려낼때를 위해 다양한 렌더러 클래스를 사용할 때 쓰는 듯 합니다.

value 로 넣으면 value0, value1, value2 이런 순으로 렌더러 클래스를 사용하는거죠

잘 아시는 분은 댓글을...


4. enabled:Boolean = true (flex)

버튼과 같습니다. Button 편을 참고하세요




2. IListItemRenderer (flex)


itemRendererName 에 들어가는 클래스는 인터페이스인 IListItemRenderer 를 구현해야 합니다. 이 인터페이스는 IUIComponent를 상속받고, IUIComponent 는 또 IEventDispatcher를 상속받습니다.

그리고 이 인터페이스로 구현된 클래스인 자체는 Button 을 상속받아야 하고요


1. index:uint

아이템의 인덱스겠죠?


2. owner():UIComponent

아이템의 컨테이너입니다. 여기서는 CoreList 겠죠.


3. selectable():Boolean

현재 선택가능한 녀석인지에 대한 여부입니다


4. selected:Boolean  (flex)

버튼과 동일합니다


5. displayFocus():Boolean

포커스 여부를 표시하는지에 대해서인 듯 합니다...


6. setListData(listData:ListData):void

아이템에 대한 데이터가 아닌 리스트에 관련된 데이터를 저장합니다. 몇번째 인덱스라던가 하는 것들요.


7. setData(data:Object):void

아이템 데이터를 저장합니다... 사실 이 인터페이스를 구현한 대부분의  ListItemRenderer 가 Button을 상속받기 때문에 data 를 써도 되긴 합니다.
 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번엔 노출되어 있지 않은 public 속성들입니다.

Button 을 상속받기 때문에 모든 값을 아시려면 Button public 속성에 관한 글을 읽어보시기 바랍니다



1. menuWrapping:String = WrappingMode.NORMAL

리스트의 처음이나 마지막 아이템이 선택되어져 있는 상황에서 방향키를 눌러서 아이템을 이동할 수 있는지 입니다.

WrappingMode.WRAP : 첫 아이템(맨위 아이템)에서는 UP 키를 눌렀을 시 마지막 아이템으로 이동하고, 마지막 아이템 (맨밑 아이템)에서는 DOWN 방향키 시에 첫 아이템으로 이동합니다. 

WrappingMode.NORMAL, WrappingMode.STICK : 첫 아이템에서 UP 키를 눌렀을 때와 마지막 아이템에서 DOWN 키를 눌렀을 시 이동하지 않습니다


2. selectedIndex:int = - 1 (flex)

선택되어져 있는 아이템의 인덱스입니다
값이 변경되면 ListEvent.INDEX_CHANGE 이벤트가 발생합니다
- 1 값은 아무것도 선택되어있지 않은 상태를 말합니다 


3. dataProvider():IDataProvider (flex)

아이템들의 데이터입니다. 값이 변경되면 Event.CHANGE 이벤트가 발생합니다


4. labelField:String = "label" (flex)

아이템의 텍스트필드에 표시될 아이템 데이터의 속성명입니다.


5. labelFunction:Function (flex)

아이템의 텍스트필드에 표시될 값을 리턴하는 함수입니다. 아이템 데이터를 인자로 받습니다
이 함수가 없다면 labelField 속성으로 가져옵니다.
label 속성값이 private 로 선언되어 있다거나 할 때 사용하면 되겠죠??




지금부터는 public function 들입니다.


1. itemToLabel(item:Object):String

labelField 와 labelFunction 을 이용해 아이템의 텍스트필드에 표시될 값을  리턴하는 함수입니다. 아이템 데이터를 인자로 받습니다
labelFunction 가 없다면 labelField 속성으로 가져옵니다.


2. open():void

리스트를 펼쳐둡니다. 스테이지를 클릭하면 돌아갑니다
selected 값 또한 true로 설정됩니다


3. close():void

당연히 open의 반대겠죠?


4. invalidateSelectedIndex():void

흠... 이건 저도 잘 모르겠네요.

Mark the selectedIndex as invalid and schedule a draw() on next Stage.INVALIDATE event.
문서에는 이렇게 쓰여있는데요...

어찌어찌 제 콩글리쉬 실력으로 번역을 하자니 선택을 무효로 하고 다음번 Stage.INVALIDATE 이벤트에 그린다라고 설명에는 쓰여있는데요... 아 놔, 플래시에는 Stage.INVALIDATE 이벤트란 없다고요. Stage.invalidate 함수가 있는거지...

어쨌든 아이템 선택을 했을 때, 렌더링을 안하고 다음번 렌더링으로 넘기는거 같은데... 암튼 잘 모르겠네요.

참고로 Stage.invalidate 에 대해서는 이 글을 봐두시면 됩니다


 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번에는 DropdownMenu 입니다. 지금 순서는 자주 쓸만한 놈들로 하고 있습니다.

게임에 자주 쓰인다는게 아니고요.
예를 들어 라벨이라면 굳이 콤포넌트를 써야할까요? 뭐, 상황에 따라 쓰일 수도 있겠지만 대부분 그냥 날 TextField 로 대체 가능하다고 생각합니다.

제가 포스팅 하는 건 쓰이는 것들 중 콤포넌트를 써야 할 것들 위주라는거죠...


그리고 추가할게 있는데, CLIK 의 set / get 함수 기술 방식에 대해서입니다. 보통 플래시에서 set / get 함수를 사용하면 다음과 같이 하죠?




그런데 CLIK 에서는 다음과 같이 private 접근제한자가 protected 로 잡혀있습니다.

 

확장 클래스를 제작할 때, 느린 get 함수콜을 안하고(보통 세배 정도 느리다고 알려져 있습니다) 빠른 접근이 가능하다는 얘기죠.



다시 본론으로 돌아가죠

scaleform.clik.controls.DropdownMenu 은 scaleform.clik.controls.Button 을 상속 받았다는걸 기억해주시기 바랍니다

1.  autoSize:String = TextFieldAutoSize.NONE

버튼과 같습니다. 단, 드롭다운 메뉴가 펼쳐졌을 시가 아닌 그냥 화면에 놓여진 드롭다운 메뉴의 상태의 리사이즈를 말합니다


2. dropdown:Object = "CLIKScrollingList"

드롭다운 메뉴를 클릭했을 때, 펼쳐질 리스트로 쓰일 클래스명입니다. 써놓고 보니 리스트를 먼저 포스팅할 걸 그랬네요...
scaleform.clik.controls.ScrollingList 녀석을 상속받는군요.


3. enabled:Boolean = true (flex)

버튼과 같습니다. Button 편을 참고하세요


4. focusable:Boolean = true (flex)

버튼과 같습니다. Button 편을 참고하세요


5. itemRenderer:Object = "CLIKListItemRenderer" (flex)

dropdown 으로 생성된 리스트에 아이템 렌더러로 쓰일 클래스명입니다


6. menuDirection:String = "down"

메뉴가 열릴 방향입니다. down, up 두가지입니다


7. menuMargin:Number = 1

드롭다운 메뉴의 크기를 기준으로 리스트의 여백입니다


8. menuOffset:Padding = new Padding(0, 0, 0, 0) : top / bottom / left / right 

드롭다운 메뉴의 위치를 기준으로 펼쳐진 리스트와의 간격입니다. 내부적으로는 scaleform.clik.utils.Padding 클래스로 돌아갑니다.


9. menuPadding:Padding = new Padding(0, 0, 0, 0) : top / bottom / left / right

리스트와 아이템간의 여백값입니다 


10. menuRowCount:Number = 5

리스트가 펼쳐졌을 때, 한번에 보여질 아이템의 갯수입니다


11. menuWidth:Number = -1

펼쳐질 리스트의 넓이입니다. - 1 로 되어있으면,
드롭다운 메뉴 넓이 + menuOffset.left +  menuOffset.right 의 크기로 결정됩니다


12. scrollBar:Object

리스트의 스크롤바로 쓰일 클래스명입니다. 지정되어 있지 않으면 dropdown 클래스에 지정된 스크롤로 지정됩니다


13. thumbOffset : top / bottom (코드 안에는 thumbOffsetTop:Number, thumbOffsetBottom:Number 속성으로 들어있습니다)

상 / 하 스크롤 버튼과 스크롤과의 간격값인데, 현재 리스트의 크기가 변경되어버리는 버그가 있네요... 지금으로선 안 건드리는게 상책입니다


14. visible:Boolean = true

버튼과 같습니다. Button 편을 참고하세요


이녀석은 버그도 좀 많은거 같고, 현재로서는 직접구현하던지 고쳐 쓰던지 해야겠네요...



 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번에는 component parameter 로 노출되어있지 않은 public 속성들입니다.
get / set 이 같이 표기되어 있으면 읽기 / 쓰기 전용입니다
스케일폼 CLIK 온라인 문서에도 없는 녀석들이 좀 있습니다.

같이 표기된 값들은 기본값입니다


1. lockDragStateChange:Boolean = false

드래그오버 상태일 때(마우스가 눌러져 있는 상태에서 오버된)에도 상태 변화를(롤오버라든가) 하게 할 것이냐입니다.



2. repeatDelay:Number = 500

앞서 얘기했던 autoRepeat 시에 이벤트 반복이 최초에 실행되는 딜레이입니다.  millisecond 단위입니다



3. repeatInterval:Number = 200

이벤트 발생 주기입니다.  repeatDelay 와 마찬가지로 millisecond 입니다.
repeatDelay 와 헷갈리시면 안됩니다.  repeatDelay 는 최초 발생하는 시간이고, repeatInterval 는 그다음부터의 반복주기입니다.

 
4. constraintsDisabled:Boolean = false

이건 아직 잘 모르겠네요...누가 아시면 덧글 좀...
UIComponent 로 사용할지를 제약한다는 거 같은데... 어디에 쓸 지는 잘 모르겠네요.
코드로 추정하기로는 UI의 크기가 변경되어 UI들이 리사이징과 레이아웃이 변경될 때, 버튼도 같이 영향을 받을지에 대한 얘기인 것 같습니다


5. allowDeselect:Boolean = true

선택상태(selected)를 클릭으로 취소할 수 있는지입니다


6. textField:TextField (flex)

버튼의 텍스트필드겠죠?


7. defaultTextFormat:TextFormat

이건 위의 textField 에 적용된 TextFormat 일거고요


8. owner:UIComponent (flex)

이 버튼을 포함시킨 UIComponent 인거 같네요... 어디에 쓸지는 좀 더 두고보죠



9. get state():String

버튼의 현재 상태입니다. over 라든가 머 그런거요...



10. group:ButtonGroup, groupName:String

버튼을 그룹화합니다. 그룹화하여 사용될 일은 꽤 많은 편입니다. 메뉴에 있는 버튼을 클릭했을 때, 버튼의 인덱스를 알아내야 한다든가 말이죠...
groupName 을 넣으면 내부적으로 자동으로 group 이 만들어져 동작합니다.

Flex 의 ButtonBar 와는 컨셉상으로는 같지만 기능이 많이 다릅니다


11. focusIndicator:MovieClip

잘 모르겠네요... 대리 포커스의 개념인 듯 한데 좀 더 알아봐야겠습니다.
아시는 분은 덧글을...
 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.