6. 구성요소에 활력 불어넣기
1. 기존의 블록에디터의 블록구성은 다음과 같다.
참고사항: 설명의 편의상, 기존의 블록구성을 추가된 블록도와 함께 설명한다.
2. 블록에디터를 오픈하고 좌측에 위치한 사용자블록(My Blocks)탭을 선택하면, 디자이너창에서 작업한 라벨, 텍스트, 버튼, 수평배열, 선택용 리스트피커, 제거용리스크피커, 액티비티스타터, RSS데이터베이스(rssdb) 및 통보자(Notifier1) 등에 대응하는 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.
3. (1) 메모를 다이내믹하게 임시저장하기 위해 사용하는 변수(RSS아이템리스트(rssitmelist), 타이틀리스트(TitleList), 콘텐트리스트(ContentList), RSS인터넷주소리스트(URLList))와, (2) 타이틀리스트의 선택시에 사용되는 인덱스변수(index)(이 인덱스에 대응하여 선택된 인터넷주소를 액티비티스타터의 인터넷주소로 사용됨)에 대해 설명한다.
3-1. 우선, RSS아이템리스트(rssitmelist), 타이틀리스트(TitleList), 콘텐트리스트(ContentList), RSS인터넷주소리스트(URLList)에 대해 설명한다.
3-1-1. 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 변수정의블록(def variable)을 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(variable)을 더블 클릭하여 rssitemlist로 정정한다.
리스트(Lists)드로워를 열고 리스트 만들기 호출블록(call make a list item)을 선택하여 작업영역으로 드래그한다.
아래 스크린샷과 같이, 상기 변수정의블록(def rssitemlist)의 소켓에 리스트만들기호출블록(call make a list item)에 플러그인한다.
참고 사항: 이 조합블록은 이미 기존에 있는 블록이므로 별도로 만들 필요는 없다.
3-1-2. 또한, 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 변수(def variable)블록을 3회 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(variable)을 더블 클릭하여 TitleList, ContentList 및 URLList로 각각 정정한다.
리스트(Lists)드로워를 열고 리스트 리스트만들기 호출블록(call make a list item)을 3회 선택하여 작업영역으로 드래그한다.
아래 스크린샷과 같이, 상기 3개의 변수정의블록(def TitleList, ContentList, URLList의 소켓에 각각 리스트만들기 호출블록(call make a list item)을 플러그인한다.
3-2. 다음에는, 인덱스변수(index)에 대해서 설명한다.
3-2-1. 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 변수(def variable)블록을 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(variable)을 더블 클릭하여 index로 정정한다.
참고 사항: 상기 인덱스(index)의 생성시에 사용자블록탭의 사용자정의 드로워에도 이에 대응하는 두개의 블록(global index, set global index to)이 생성된다.
3-2-2. 수학(Math)드로워를 열고 번호블록(number 123)을 선택하여 작업영역으로 드래그하고, 번호블록의 번호(123)를 더블클릭하여 0으로 정정한다.
3-2-3. 아래 스크린샷과 같이, 인덱스정의블록(def index)의 소켓에 숫자블록(number 0)를 플러그인하여 인덱스의 디폴트값을 0으로 한다.
4. 타이틀텍스트박스(txtRSSUrl)에 RSS인터넷주소를 입력하고 RSS구하기 버튼을 터치하면 버튼클릭이벤트가 발생하고, 이에 의해 호출되는 버튼클릭 이벤트핸들러(btnGetRSS.Click)에 대해 설명한다.
4-1. 상기 RSS구하기 버튼의 버튼클릭이벤트핸들러블록(when btnGetRSS.Click do)은 다음과 같다.
4-2. RSS의 기사내용전체가 기재되는 라벨의 텍스트(set lblRSS.Text to)를 전부 공백으로 하는 블록을 조합한다.
4-3. 텍스트박스에 입력한 RSS인터넷주소(txtRSSUrl.Text)를 태그로 사용하여, RSS데이터베이스의 겟밸류를 호출하는 블록(call TinyWebDB.GetValue tag)의 소켓(tag)에 플러그인한다.
4-4. 라벨RSS의 텍스트를 공백으로 하는 블록과 텍스트박스에 입력된 RSS인터넷주소를 태그로 사용하여 RSS데이터베이스의 겟밸류를 호출하는 블록을 상기 RSS구하기의 이벤트핸들러(when btnGetRSS.Click do)의 섹션(do)에 놓는다. 이에 대한 스크린샷은 다음과 같다.
참고 사항: 이 블록조합은 이미 기존에 있는 블록이므로 별도로 만들 필요는 없다.
6. 아래의 RSS데이터베이스의 갓밸류블록(when rssdb.GotValue tagFromWebDB valueFromWebDB do)은, 텍스트박스에 입력한텍스트를 태그(txtRSSUrl.Text)로 사용하여 RSS데이터베이스(rssdb)에 데이터값을 요청(호출)한 후, RSS데이터베이스에서 한 쌍의 태그와 값(name tagFromWebDB, name valueFromWebDB)이 핸드폰에 도달한 때에 이벤트가 발생하여 트리거된다. 이 블록도 기존에 있는 블록이다.
참고 사항: 사용자블록(My Blocks)탭을 선택하고 RSS데이터베이스(rssdb)드로워를 열고 RSS데이터베이스의 갓밸류 블록(when rssdb.GotValue tagFromWebDB valueFromWebDB do)을 작업영역으로 드래그할 때에 상기 한 쌍의 기능인수인 태그와 값의 블록(name tagFromWebDB, name valueFromWebDB)이 상기 RSS데이터베이스의 갓밸류 블록(when rssdb.GotValue tagFromWebDB valueFromWebDB do)의 좌측에 자동생성된다. 이에 관련하여, 사용자블록(My Blocks)탭의 사용자정의(My Definitions)에 한 쌍의 기능인수에 대응하는 한 쌍의 태그와 값의 블록(value tagFromWebDB, value valueFromWebDB)이 자동생성된다.
6-1. RSS인터넷주소를 사용하여 호출한 XML의 아이템(item)은 일반적으로 제목(Title), 기사내용(Description), 인터넷주소(Link)로 구성된다. 따라서, rssitemtext를 3개의 아이템으로 구분하여 임시저장소(rssitemlist)에 저장한다.
6-2. 아이템의 분리시에 인덱스를 사용하고 인덱스 1은 타이틀, 인덱스 2는 기사내용, 인덱스 3은 인터넷주소를 나타낸다.
6-2-1. 임시 저장소에 저장된 RSS아이템리스트(global rssitemlist)에서 인덱스 1에 대응하는 타이틀(Title)을 선택하여 임시저장소인 타이틀리스트(global TitleList)에 추가한다.
6-2-2. 마찬가지로, 임시 저장소에 저장된 RSS아이템리스트(global rssitemlist)에서 인덱스 2에 대응하는 콘텐트(Content: 기사내용)를 선택하여 임시저장소인 콘텐트리스트(global ContentList)에 추가한다.
6-2-3. 마찬가지로, 임시 저장소에 저장된 RSS아이템리스트(global rssitemlist)에서 인덱스 3에 대응하는 URL(기사내용의 링크)를 선택하여 임시저장소인 URL리스트에 추가한다.
6-2-4. 상기 3개의 조합블록을 차례로 다음과 같이 조합한다.
6-3. 상기 설명에서는 3개의 리스트블록으로 구분하여 임시저장하고 있다.
다음의 설명은 기존의 블록에 관한 것이므로 간단하게 설명한다.
6-3-1. 임시 저장소에 저장된 RSS아이템리스트에서 인덱스 1, 2, 3을 사용하여 타이틀(Title), 기사내용(Description), 기사내용의 링크(인터넷주소)를 각각 선택하고, 텍스트만들기블록(make text)을 사용하여 선택된 아이템마다 행을 두 번 걸러서 만들어진 단일의 텍스트를, 이미 기재된 라벨의 텍스트(lblRSS.Text)에 추가하여, 기재한다.
6-4. 이와 같은 작업은 기사의 아이템(name rssitemtext)마다 반복된다. 따라서, 웹데이터베이스로부터 수신한 값으로 이루어진 리스트에서 RSS아이템텍스트(rssitemtext)마다 반복하는 퍼이취블록(foreach)을 사용한다.
6-5. 상기와 같은 두 그룹의 블록조합을 퍼이취블록(foreach)에 조합하면 다음의 스크린샷과 같다.
6-6. 사용자블록(My Blocks)탭의 통보자(Notifier1)드로워를 열고 통보자의 경고알림블록(Notifier1.ShowAlert)을 선택하여 작업영역으로 드래그한다. 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text)을 선택하여 작업영역으로 드래그한다. 알림문구로서, “RSS 주소를 변경하는 경우에는, 초기화 버튼을 터치한 다음 임의의 기사제목을 터치하세요.”를 복사하여 텍스블록(text)에 붙여 넣는다. 다음에, 경고알림호출블록(call Notifier1.ShowAlert notice)의 소켓(notice)에 상기 텍스트블록(text)을 플러그인한다.
참고 사항: 중간 테스트를 하는 과정에서 RSS인터넷주소를 처음 사용하여 기사를호출할 때에는 문제가 되지 않는다. 그러나, 다른 RSS인터넷주소를 계속해서 입력하여 사용하는 경우에는 라벨에 텍스트(lblRSS.Text)의 기재에는 문제가 없지만, 나중에 설명하는 선택리스트피커(기사선택버튼)의 터치에 의해 나타나는 리스트에는 종래의 리스트가 그대로 남아있는 버그가 발생한다. 이 버그를 미연에 방지하기 위해, 새로운 RSS인터넷주소를 입력하기 전에 삭제리스트피커(초기화버튼)의 터치에 의해 나타나는 다수의 기사제목중에서 임의로 하나만 터치하여 모든 기사제목을 삭제하면, 상기 버그는 발생하지 않는다. 이러한 취지를 통보하기 위해 상기 경보알림을 사용한다. 아울러서, 경고알림블록을 퍼이취블록(foreach) 다음에 놓으면, 앱실행시에 경고알림이 나타났음에도 불구하고 라벨에 텍스트가 나타나지 않는 경우에는 RSS인터넷주소에 오류가 있는 것도 부가적으로 암시할 수 있다.
6-7. 상기한 바와 같이, RSS데이터베이스(rssdb)에 요청한 한 쌍의 태그와 값이 핸드폰에 도달한 때에 사용되는 RSS데이터베이스의 갓밸류 블록(rssdb.GotValue)에, 상기 퍼이취블록(foreach)과 경고알림블록을 조합한 스크린샷은 다음과 같다.
7. 상기 RSS데이터베이스의 갓밸류 블록(rssdb.GotValue)에 조합된 다수의 블록에 마우스커서를 놓고 마우스의 오른쪽버튼을 클릭하고 watch를 선택하여 클릭하면 다음과 같은 데이터의 흐름을 육안으로 관찰할 수 있다. 이에 의해, 블록조합의 오류부분을 용이하게 예측하여 찾아낼 수 있다.
참고 사항: 국내 사이트를 라이브테스트하는 경우에는 한글이 전부 사각형으로 표시되어 데이터의 흐름을 육안으로 관찰하는 것이 곤란한 경우에는, 영문으로 기재된 외국사이트를 이용하면 편리하다. 데이터 흐름이 변화하는 내용을 비교적 자세하게 표시한다.
8. 다음에는, 임시저장소에 저장한 인터넷 주소모음 리스트에서 선택된 인터넷주소에 해당하는 인터넷주소를 브라우징하기 위해 선택용 리스트피커를 사용하는 방법에 대해 설명한다.
기사선택 리스트피커(SelectListPicker)를 터치하면, 선택용 리스트피커에 이벤트가 발생하여 브라우징하고자 하는 인터넷주소에 대응하는 타이틀리스트의 타이틀(즐겨찾기 명칭)의 피크(선택) 전후로 구분하여 블록조합을 구성한다.
8-1. 블록에디터의 사용자 블록(My Blocks)탭을 선택하고, 기사선택 리스트피커(SelectListPicker)드로워를 열고 기사선택 리스트피크의 피크전블록(when SelectLisPicker.BeforePicking do)을 작업영역으로 드래그한다.
8-1-1. 다음에, 선택용리스트피커의 구성요소(set SelectListPicker.Elements to)의 소켓(to)에 타이틀리스트(TitleList)를 플러그인한다. 즉, 타이틀리스트의 타이틀(RSS의 제목) 중에서 브라우징하고자하는 인터넷주소에 대응하는 RSS의 제목을 선택하기 전에 타이틀리스트(RSS의 제목모음 리스트)를 선택용 리스트피커의 구성요소로 설정한다.
8-1-2. 타이트리스트를 선택용리스트피커의 구성요소로 설정한 상기 블록조합을 선택용리스트피크의 피크전블록(when SelectLisPicker.BeforePicking do)의 섹션(do)에 놓는다.
8-2. 다음에, 블록에디터의 사용자 블록(My Blocks)탭을 선택하고, 선택리스피커(SelectListPicker)드로워를 열고 선택리스트피커의 피크(선택)후 블록(when SelectListPicker.AfterPicking do)을 작업영역으로 드래그한다.
8-2-1. 타이틀리스트(TitleList)에서 선택(터치)한 타이틀(SelectListPicker.Selection)의 위치(positon in list)를 찾아서 인덱스(set global Index to)에 임시 저장한다.
8-2-2. 상기 인덱스(set global index to)에 대응하여 자동생성된 전역 인덱스(global index)에 의거하여 인터넷 주소모음 리스트(URList)에서 선택된 인터넷 주소를 액티비티스타터의 데이터URL(ActivityStarter1.DataUrl)로 설정한다.
8-2-3. 인터넷 주소가 일단 액티비티스타터의 데이터URL에 설정되면, 액티비티스타터의 스타트액티비티(ActivityStarter.StartActivity)는 브라우저를 런칭하고 상기 인터넷주소를 블라우징한다.
8-2-4. 이상 설명한 블록의 조합은 다음의 스크린 샷과 같이 구성된다.
8-3. 상기 설명한 선택리스트피커 전후 한쌍의 리스트피커는 다음과 같다.
9. 다음에는, 임시저장소에 저장한 타이틀리스트, 콘텐트리스트, URL리스트, 및 라벨의 타이틀, 콘텐트, 링크를 모두 제거하여 초기화하는 제거용 리스트피커를 사용하는 방법에 대해 설명한다.
상세하게는, 초기화 리스트피커(RemoveListPicker: 제거용 리스트피커)를 터치하면 제거용 리스트피커(RemoveListPicker)에 이벤트가 발생하고, 상기한 바와 같이 모두 제거하도록 타이틀리스트중 임의로 어느 한 아이템(타이틀)을 피크(선택)하는 시점의 전후로 구분하여 구성하는 조합블록에 대해 설명한다.
9-1. 블록에디터의 사용자 블록(My Blocks)탭을 선택하고, 리스트제거용 피커(RemoveListPicker)드로워를 열고 제거용 리스트피커의 피크전블록(when RemoveListPicker.BeforePicking do)을 선택하여 작업영역으로 드래그한다.
9-1-1. 다음에, 제거용 리스트피커의 구성요소블록(set RemoveListPicker.Elements to)의 소켓(to)에 타이틀리스트(TitleList)를 플러그인한다. 즉, 타이틀리스트 중에서 임의로 어느 한 아이템(타이틀)을 선택하기 전에 타이틀리스트의 타이틀 전체를 선택용 리스트피커의 구성요소로 설정한다.
9-1-2. 타이트리스트를 제거용리스트피커의 구성요소로 설정한 상기 블록조합을, 제거용리스트피커의 피크전블록(when RemoveLisPicker.BeforePicking do)의 섹션(do)에 놓는다.
9-2. 사용자 블록(My Blocks)탭을 선택하고, 리스트제거용 피커(RemoveListPicker)드로워를 열고 제거용 리스트피커의 피크후 블록(RemoveListPicker.AfterPicking)을 드래그한다.
9-2-1. 타이틀리스트의 타이틀 중에 임의로 어느 하나의 타이틀만 선택하여도, 타이틀리스트(TitleList)에 타이틀이 존재하면 타이틀리스트의 타이틀을 모두 제거하도록 설정한다.
9-2-2. 타이틀리스트의 타이틀 중에 임의로 어느 하나의 타이틀만 선택하여도, 콘텐트리스트(ContentList)에 콘텐트(기사내용)이 존재하면 콘텐트리스트의 콘텐트를 모두 제거하도록 설정한다.
9-2-3. 타이틀리스트의 타이틀 중에 임의로 어느 하나의 타이틀만 선택하여도, URL리스트(URLList)에 인터넷주소가 존재하면 URL리스트의 인터넷주소를 모두 제거하도록 설정한다.
9-2-4. 타이틀리스트의 타이틀 중에 임의로 어느 하나의 타이틀만 선택하여도, 라벨의 텍스트(lblRSS.Text)를 모두 제거하도록 설정한다.
9-2-5. 이상 설명한 블록의 조합은 다음의 스크린 샷과 같이 구성된다.
9-3. 상기 설명한 제거용 리스트피커 전후 한쌍의 리스트피커는 다음과 같다.
참고 사항: 제거용 리스트피커에 대한 일반적인 설명은 리스트중에서 선택된 리스트의 항목에만 관련된 리스트만 제거하였는 데, 이번에 설명한 제거용 리스트피커는 리스트중에서 임의로 어느 하나의 아이템만 선택하여도 모든 리스트의 내용이 제거되고, 나아가서는 라벨의 텍스트까지 완전히 제거되어 모든 내용을 초기상태로 한다. 따라서, 이전에 설명한 바와 같이 새로운 RSS인터넷주소를 입력하는 경우 이전의 타이틀리스트가 그대로 남아 있는 버그가 발생하는 것을 방지할 수 있다.
10. 지금까지의 설명한 블록을 종합한 2개의 스크린샷을 이하 나타낸다.
