App Inventor Story: 제 11 장 멀티유저메모장 2 (블록에디터창 작업)

6. 구성요소에 활력 불어넣기

1. 블록에디터를 오픈하고 좌측에 위치한 사용자블록(My Blocks)탭을 선택하면, 디자이너창에서 작업한 라벨, 버튼, 수평배열, 제거용리스크피커, 데이터베이스(TinyWebDB), 클록 및 통보자(Notifier1) 등에 각각 대응하는 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.

2. 메모를 다이내믹하게 임시저장하기 위해 사용하는 변수와 저장된 메모를 삭제하기 위해 사용하는 인덱스 및 색을 감마보정하기 위한 변수에 대해서는 제 9 장 제 1 단계와 동일하므로 이에 대한 설명은 생략한다.

3. 동일한 절차를 계속 사용하여야 하는 경우에는 절차블록(procedure)을 사용하는 것에 대한 설명도 제 9 장 제 1 단계와 동일하므로 생략한다.

4. 노우트텍스트박스(NoteTextBox)에 메모를 기재하고 연필과 메모장이 그려 있는 아이콘을 터치하면, 버튼클릭이벤트가 발생한다. 이 이벤트의 발생시에 호출되는 버튼클릭이벤트핸들러의 사용에 대해서는, 안드로이드폰 내부에 있는 소형의 데이터베이스(TinyDB)를 사용하는 대신에, 소형의 웹데이터베이스(TinyWebDB)를 사용하는 점을 제외하고는, 다른 구성은 제 9 장 제 1 단계와 동일하다.

데이터베이스에 notes를 태그로 사용하는 노우트리스트(NoteList)의 값이 저장되는 점도 같다. 즉, 소형 데이터베이스에 저장될 때에는 한쌍의 태그와 값(tag-value pairs)으로 저장된다.

다만, 노우트리스트(NoteList)의 값이, 소형 데이터베이스의 스토어밸류(call TinyDB1.StoreValue tag valueToStroe)에 저장되는 대신에 소형 웹데이터베이스 스토어밸류(call Tiny WebDB1.StoreValue tag valueToStore)에 저장된다.

즉, 다수사용자의 메모장에서는,

블록을 사용하는 대신에,

블록을 사용한다.

따라서, 메모장과 연필이 그려져 있는 버튼(submitNoteButton)의 클릭에 의한 버튼클릭이벤트핸들러의 블록의 조합은 다음의 스크린샷과 같이 구성된다.

5. 기록한 메모를 제거하는 제거용 리스트피커를 사용하는 방법에 대해 설명한다.

휴지통이 그려져 있는 아이콘을 터치하면, 제거용 리스트피커에 이벤트가 발생하여 제거항목을 피크(선택)하기 전후를 구분하여 블록을 구성한다.

5-1. 리스트제거용피커의 피크전블록(RemoveListPicker.BeforePicking)의 설명은 제 9 장 제 1 단계와 동일하므로 생략한다.

5-2. 리스트제거용피커의 피크후블록(RemoveListPicker.AfterPicking)의 설명은 제 9 장 제 1 단계와 동일하지만, 소형 데이터베이스를 사용하는 대신에 소형 웹데이터베이스를 사용하는 점만 다르다.

를 사용하는 대신에,

를 사용한다.

5-3. 즉, 리스트제거용피커의 피크후블록(RemoveListPicker.AfterPicking)의 조합은 다음의 스크린 샷과 같이 구성된다.

참고 사항: 소형 데이터베이스(TinyDB)를 사용하는 경우에는 라이브테스트를 할 수 없지만, 소형 웹데이터베이스(TinyWebDB)를 사용하는 경우에는 데이터베이스의 저장여부에 대해 직접 라이브 테스트를 할 수 있다.

6. 컬러버튼(원형 컬러 아이콘)을 터치하여 컬러버튼의 이미지색이 라벨의 배경색으로 나타내고 이 컬러에서 사용자가 입력한 메모의 글씨가 선명하게 나타나도록 조정하는 설명은 제 9 장 제 1 단계와 동일하므로 생략한다.

7. 본 예제를 실행할 때의 스크린의 초기화에 대해 설명한다. 소형 웹데이터베이스는 소형 데이터베이스와는 달리 안드로이드폰 자체의 데이터베이스에서 가져오는 대신에 인터넷을 통하여 구글서버에서 가져오기 때문에 약간의 대기시간을 고려하여, 소형웹데이터베이스의 겟밸류블록(call TinyWebDB.GetValue tag)이외에도, 소형웹데이터베이스의 갓밸류블록 블록(when TinyWebDB.GotValue tagFromWebDB valueFromWebDB do)을 추가하여 사용한다.

7-1. 스크린의 초기화 이벤트핸들러(Screen.Initialize)는 태그(notes)를 사용하여 소형 웹데이터베이스의 겟밸류블록(call TinyWebDB.GetValue tag)을 호출한다. 초기화 이벤트핸들러의 블록조합의 스크린 샷은 다음과 같다.

7-2. 소형 웹데이터베이스의 겟밸류블록(call TinyWebDB1.GetValue tag)을 사용하여 태그(text notes)에 대응하는 데이터값을 호출하고, 소형웹데이터베이스에서 한 쌍의 태그와 값(name tagFromWebDB, name valueFromWebDB)이 핸드폰에 도달한 경우에 소형웹데이터베이스의 갓밸류블록(when TinyWebDB1.GotValue tagFromWebDB valueFromWebDB do)이 사용된다.

참고 사항: 사용자블록(My Blocks)탭의 소형웹데이터베이스(TinyWebDB1)드로워를 열고 소형웹데이터베이스의 갓밸류블록(when TinyWebDB1.GotValue tagFromWebDB valueFromWebDB do)을 작업영역으로 드래그할 때에 상기 한 쌍의 태그와 값블록(name tagFromWebDB, name valueFromWebDB)이 상기 갓밸류(TinyWebDB1.GotValue)의 좌측에 자동생성된다. 또한, 사용자블록(My Blocks)탭의 사용자정의(My Definitions)에, 상기 한 쌍의 태그와 값블록(name tagFromWebDB, name valueFromWebDB)에 대응하는 한 쌍의 태그와 값블록(value tagFromWebDB, value valueFromWebDB)이 자동생성된다.

7-2-1. 웹데이터베이스로부터 수신한 태그(value tagFromWebDB)와 핸드폰측에서 요청한 태그(text notes)가 동일한 경우,

웹데이터베이스로부터 수신한 값(value valueFromWebDB)을 노우트리스트(set global NoteList to)에 일단 임시 저장한다.

7-2-2. 일단 저장된 노우트리스트에 아이템(이미 기록된 메모)가 없는 경우에는, 노우트리스트(NoteList)에 아이템이 없음을 나타내는 블록을 설정한다. 이 경우는 앱을 처음 실행한 경우이거나 이미 실행한 경우로서 기록된 메모를 모두 지운 경우에 해당한다. 이에 대한 상세설명은 제 9 장 제 1 단계의 스크린초기화를 참조한다.

일단 저장된 노우트리스트에 아이템(이미 기록된 메모)가 있는 경우에는, 절차블록(displayNotes)을 호출하는 블록(call displayNotes)을 추가하여 조합한다. 즉, 리스트에 있는 아이템전체(메모전체)가 라벨(NoteListLabel)에 나타내는 절자블록을 호출한다. 절차블록(displayNotes)의 상세에 대해서는 제 9 장 제 1 단계를 참조한다.