UI(12) Listbox

안녕하세요.

애니메이터가 들려주는 맥스 스크립트의 스크립팅하는 애님입니다.

오늘 할 이야기는 Listbox입니다.

리스트 박스는 여러 항목을 나열해서 확인하거나 나열한 항목을 선택할 수 있도록 하는 UI입니다.

 

문법

 

listbox <name> [<caption>] [items:<array_of_strings>] [selection:<number>] [height:<number>] [readOnly:<boolean>]

 

[items:<array_of_strings>]는 리스트의 항목을 넣을 수 있습니다.

[selection:<number>]은 나열된 여러 항목중에 선택할 위치를 숫자로 나타냅니다. 기본적으론 1입니다.

[height:<number>]는 리스트의 높이를 뜻하는데 근본적으론 항목을 기입할 수 있는 라인의 수입니다.

[readOnly:<boolean>]는 true일 경우 확인만 할 수 있고 선택을 할 수 없습니다. false는 선택을 할 수 있습니다. 기본적으론 false입니다.

 

늘 그렇듯이 작성하여 실행하고 확인해 봅시다.

 

rollout testRoll "Test!"
(
    listbox test1_lsb "리스트박스1" items:#("가", "나", "다", "라") selection:3 height:4
    listbox test2_lsb "리스트박스2" items:#("a", "b", "c", "d") height:6 readOnly:true
)
createdialog testRoll

 

 

위 이미지와 동일하게 나왔나요?

listbox를 이래 저래 선택 해 봅시다.

그럼 어떤 방식으로 구현 됐는지 확인해 볼까요?

 

listbox test1_lsb "리스트박스1" items:#("가", "나", "다", "라") selection:3 height:4

 

test1_lsb라는 이름으로 listbox를 생성할 때,

제목은 리스트박스1로 하고,

listbox에 들어갈 항목은 배열형으로 #("가", "나", "다", "라")이며,

실행됨과 동시에 3번째 항목을 선택 하고,

높이는 4줄이다.

 

listbox test2_lsb "리스트박스2" items:#("a", "b", "c", "d") height:6 readOnly:true

 

test2_lsb라는 이름으로 listbox를 생성할 때,

제목은 리스트박스2로 하고,

listbox에 들어갈 항목은 배열형으로 #("a", "b", "c", "d")이며,

높이는 6줄로 하고,

선택을 할 수 없다.

 

리스트박스2는 선택을 할 수 없게(readOnly:true)했기 때문에 선택을 해도 파란색으로 선택되지 않습니다.

그리고, 리스트를 다 채우지 못하면 밑부분이 공란으로 남습니다.

리스트의 높이보다 항목이 많을 경우 슬라이드 바가 옆에 생겨서 확인을 할 수 있게 합니다.

 

 

이벤트

 

그럼 listbox가 작동하는 것을 확인해 봐야겠죠.

이벤트에 대해서 알아봅시다.

 

on <listbox> selected <arg> do <expr>

listbox의 항목(items) 선택했을 때 발생하는 이벤트입니다.

 

on <listbox> doubleClicked <arg> do <expr>

listbox를 더블클릭했을 때 발생하는 이벤트입니다.

 

on <listbox> rightClick [<arg>] do <expr>

listbox를 마우스 오른쪽으로 클릭했을 때 발생하는 이벤트입니다.

 

다음과 같이 변경하여 실행해 봅시다.

 

rollout testRoll "Test!"
(
    listbox test1_lsb "리스트박스1" items:#("가", "나", "다", "라", "마", "바", "사") height:4
    
    on test1_lsb selected val do
    (
        format "항목 %를 클릭했고 %번째 입니다.\n" test1_lsb.items[val] val
    )
    
    on test1_lsb doubleClicked val do
    (
        format "항목 %를 더블 클릭 했습니다.\n" test1_lsb.items[val]
    )
    
    on test1_lsb rightClick do
    (
        format "마우스 오른쪽 버튼을 클릭했습니다.\n"
    )
)
createdialog testRoll

 

 

위 이미지와 같은 다이얼로그가 나왔나요?

마우스로 클릭도 해보고, 더블클릭도 해보고, 오른쪽 버튼 클릭도 해봅시다.

더블 클릭을 하면 클릭을 두 번 하는 것 이기 때문에 처음 클릭할 때는 클릭이벤트가 발생하고 두번째 클릭할때 더블클릭이벤트가 발생하는 것이 살짝 신기하긴 하지만 곰곰이 생각하면 이해가 가능할 것입니다.

 

그럼 작동 원리에 대해서 알아봅시다.

지금까지 쭉 따라오셨다면 이벤트 자체는 그다지 궁금한 점이 없을 것이라 생각하기 때문에 생략하겠습니다.

 

format "항목 %를 클릭했고 %번째 입니다.\n" test1_lsb.items[val] val

 

format문 도 많이 사용해 보셨기 때문에 새로울 것도 없어 보이지만, 뒤에 따라오는 값이 특이합니다.

test1_lsb.items[val] 는 listbox인 test1_lsb의 아이템 중에 이벤트에서 발생한 값 val을 받아 항목을 선택해 오는 것입니다.

만약 test1_lsb의 아이템중 3번째 항목인 '마'를 선택했다면, val은 3이란 값을 가집니다.

그것은 test1_lsb.items[3]과 동일하기 때문에 배열의 3번째인 '마'라는 문자열을 반환(가져옴) 합니다.

그렇기 때문에 format문으로 출력하면 listbox의 항목 중 선택한 것이 나옵니다.

val은 일종의 변수명 이기 때문에 다른 이름을 사용해도 상관은 없습니다.

보통 편의상 val은 숫자 값을 사용할 때 쓰고, state는 상태(true, false)에서 사용합니다.

 

오늘은 Listbox에 대해서 이야기해보았습니다.

다음으로는 listbox와 비슷한 MultiListbox에 대해서 이야기하도록 하겠습니다.