코듈러(kodular),앱인벤터(App Inventor) 이중 리스트 픽커 (list picker of list picker) 활용 예제

교과서를 선택 한 후 그 교과서에 수록된 곡목을 선택하기 위한 디자인입니다.

1단계 : 첫번째 리스트피커인 [교과서]의 목록을 선택하기 위한 리스트[ListTextBook]를 [Before Picking] 컴포넌트에 입력합니다.

2단계 : 선택한 교과서명을 화면의 ListPicker에 표시하기 위해 [After Picking]컴포넌트에 지정합니다.

         여기서는 선택한 교과서명에 해당하는 파일을 읽는 과정을 [After Picking] 단계에서 시작하는 예제입니다.

         2단계에서 교과서를 선택하면 해당 교과서 파일을 읽어 들입니다.

         여기서 파일명은 관리하기 편하도록 인덱스번호를 쉽게 활용하기 위하여 교과서명이 아닌 일련번호로 파일명을 정하였습니다.

         파일읽기의 [Get Text]컴포넌트에서 파일의 내용을 리스트로 변환합니다.

         파일에는 [곡목(Title), 유튜브 주소(Youtube), 총재생시간(TotalTime)]으로 저장했습니다.

3단계 :  2단계 처리 과정 중에 두번째 리스트피커[ListTitle]의 [Elements], [Text]를 지정해줍니다.

4단계 : [After Picking] 컴포넌트에 선택 후 처리할 내용을 지정합니다. 여기서는 선택한 곡목의 인덱스번호[Selection Index]를 다른 컴포넌트(유튜브 재생)에 활용하기 위하여 변수[index]에 저장합니다.