6. 구성요소에 활력 불어넣기
1. 블록에디터를 오픈하고 좌측에 위치한 사용자블록(My Blocks)을 선택하면, 상기 디자이너 창에서 작업한 라벨, 버튼, 수평배열, 수직배열, 테이블 배열 및 통보자(Notifier1) 등에 각각 대응하는 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.
2. 컬러요법의 소개 화면에서, 첫번째 컬러 선택버튼을 터치하면 첫번째 컬러를 선택할 수 있는 첫번째 컬러선택 표시화면으로 전환한다.
그러면, 첫번째 컬러 선택버튼의 이벤트클릭핸들러의 구성에 대해 이하 설명한다.
2-1. 블록에디터의 사용자블록(My Blocks)탭을 클릭한 다음, 첫번째 컬러 선택버튼(FirstColSelButton)드로워를 열고 첫번째 컬러 선택버튼의 클릭이벤트(FirstColSelButton.Click)블록을 선택하여 작업영역으로 드래그한다.
2-2. 다음에, 사용자블록(My Blocks)탭에서 수직배열구성(VerticalArrangement1)드로워를 열고,컬러요법의 소개화면의 표시여부를 설정하는 수직배열구성의 비지블블록(VerticalArrangement1.Visible)을 선택하여 작업영역으로 드래그하고, 마찬가지로 사용자블록(My Blocks)탭에서 또 다른 수직배열구성(VerticalArrangement2)드로워를 열고, 첫번째 컬러 선택 표시화면의 표시여부를 설정하는 수직배열구성의 비지블블록(VerticalArrangement2.Visible)을 선택하여 작업영역으로 드래그한다.
2-3. 컬러요법의 소개 화면에서 첫번째 컬러를 선택할 수 있는 첫번째 컬러 선택 표시화면으로 장면 전환하도록, 컬러요법의 소개화면의 표시여부를 설정하는 수직배열구성의 비지블블록(VerticalArrangement1.Visible)의 논리를 거짓(false)으로 설정하고, 첫번째 컬러선택 표시화면의 표시여부를 설정하는 수직배열구성의 비지블블록(VerticalArrangement2.Visible)의 논리를 참(true)으로 설정한다.
2-4. 컬러소개화면을 닫는 기능블록과 첫번째 컬러 선택 표시화면을 여는 기능블록을 상기 버튼블록에 조합한 스크린샷은 다음과 같다.
참고사항: 상기 블록조합은 버튼의 터치시에 장면을 전환하는 블록으로 사용할 수있다.
3. 컬러요법에 관한 정보를 미리 저장하기 위해 변수를 사용한다. 즉, 리스트의 조합과 인덱스의 조합에 대해 설명한다.
3-1. 블록에디터의 내장블록(Built-In) 탭을 클릭하고 정의(Definition)드로워를 열고 변수(def variable)블록을 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(variable)을 더블 클릭하여 FirstSelCol로 정정하여 첫번째 선택 컬러의 정보리스트 블록(def FirstSelCol)을 만든다.
리스트(Lists)드로워를 선택하여 열고 리스트만들기블록(make a list)을 선택하여 작업영역으로 드래그하고, 첫번째 선택 컬러의 정보리스트 블록(def FirstSelCol)에 플러그인한다.
3-2. 또한, 블록에디터에 내장블록(Built-In) 탭의 텍스트(Text)드로워를 열고 텍스트블록(text)을 7회 선택하여 작업영역으로 드래그한다. 이 텍스트블록에 컬러에 관한 정보를 기재한다.
이에 관련하여, 컬러요법에서 첫번째로 선택된 컬러 “빨강색, 노란색, 오렌지, 흰색, 파란색,자주색, 초록색”의 순서로 기재한 컬러에 관한 정보는 다음과 같다. 즉,
“활력이 넘치고 독창성이 뛰어난 사람이다. 남에게 지기 싫어하는 성격으로 가끔은 반항적일 때도 있으나 일단 결심을 하면 어떤 장애도 뛰어넘을 수 있는 활력이 넘친다. 독창성도 뛰어나 평범한 것을 싫어하는 경향이 있다.”
“소극적이지만 정신력이 강하고 실행력이 있는 사람이다. 침착하고 소극적이며 매우 온화하지만 가슴 속에는 커다란 용기와 실행력을 간직하고 있는 사람이다. 평소에는 소극적이지만 필요할 때는 놀라울 정도의 힘을 발휘할 것이다. 대단한 노력가이기도 하다.”
“모험은 좋아하지 않는 책임감이 강하고 성실한 노력형. 당신은 책임감이 매우 강하고 성실한 사람이다. 작은 일이라도 결코 소홀히 하지 않고 주어진 일을 끝까지 완수할 수 있는 실력도 갖추고 있다. 상식이 풍부하며 모험은 별로 좋아하지 않는 편. 싹싹함과 쾌활함도 겸비한 사람이다.”
“매우 부드럽고 예민한 몽상가. 매우 부드럽고 동정심이 강한 사람이다. 감정 표현이 풍부하고 예민하다. 사소한 일로 고민을 하거나 흥분하는 경향이 있다. 또 상상력이 풍부하고 예술적 감각도 높기 때문에 몽상가적인 면도 있다.”
“차가운 인상을 주지만 실은 현모양처형. 남에게는 차가운 인상을 줄지도 모르지만 사실은 현모양처형 여성으로 부드러운 모습을 지니고 있다. 또 의외로 외로움을 타기 때문에 혼자 있지 못하는 사람이다.”
“개성적인 매력의 소유자. 상당히 개성적인 매력의 소유자다. 밝고 활발한 면과 쉽게 빠질 수 있는 양면성을 지니고 있다. 조금 변덕스러운 성향도 있으므로 기분에 따라 제멋대로 행동할 때도 있다.”
“주위의 신임이 두터운 리더 기질 소유. 매우 신중하며 매사를 이성적으로 판단하는 사람이다.그리고 필요할 때는 놀라울 정도의 행동력을 보여줄 수 있는 사람이다. 시원시원한 면도 있으며, 주위의 신임이 두텁고 리더 기질도 충분히 가지고 있다.”
상기 7개의 정보를 이 순서로(즉, 상기 컬러순서로) 7개의 텍스트블록(text)에 각각 복사하여 붙여 넣고, 이 텍스트블록을 리스트만들기블록(call make a list item)의 소켓(item)에, 순서를 변경하지 않고, 플러그인한다. 이와 같이 완성된 첫번째 선택 컬러의 정보리스트 블록(FirstSelCol)조합의 스크린샷은 다음과 같다.
참고 사항: 상기에서 설명한 바와 같이, 상기 블록조합의 텍스트블록에 기재된 정보는 빨강색,노란색, 오렌지, 흰색, 파란색, 자주색, 초록색 등의 순서로 이들 색에 관한 정보이고, 따라서 이들 색의 인덱스는 빨강색, 노란색, 오렌지, 흰색, 파란색, 자주색, 초록색 등의 순서로 1, 2, 3, 4, 5, 6, 7로 된다. 또한, 한글은 사각형으로만 나타나 있지만 실제 결과에는 한글로 나타난다. 이 스크린샷은 첫번째 선택 컬러의 정보리스트 블록(FirstSelCol)의 오른쪽 부분을 생략하였다.
3-3. 두번째 선택 컬러의 정보리스트 블록, 세번째 선택 컬러의 정보리스트 블록, 네번째 선택 컬러의 정보리스트 블록도 상기한 바와 마찬가지 방식으로 블록을 조합한다. 이에 대한 상세설명은 상기 설명과 중복되므로 생략한다.
상기 두번째 선택 컬러의 정보리스트 블록(SecondSelCol), 세번째 선택 컬러의 정보리스트 블록(ThirdSelCol), 네번째 선택 컬러의 정보리스트 블록(FourthSelCol)의 스크린샷은 다음과 같다.
참고 사항: 글자를 선명하게 보이기 위해 일부는 생략하고 중첩하여 나타낸다. 이전에 설명한첫번째 선택 컬러의 정보리스트 블록(FirstSelCol)도 스크린샷에 포함한다.
4. 상기 선택 컬러의 정보리스트 블록(FirstSelCol, SecondSelCol, ThirdSelCol, FourthSelCol)의 각각에 대응하는 인덱스블록을 변수블록(def variable)으로 만든다.
4-1. 상기 선택 컬러의 정보리스트 블록을 조합할 때와 마찬가지로, 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 변수(def variable)블록을 선택하여 작업영역으로 드래그하고, 이와 같은 작업을 4회 반복한다.
4-2. 이들 변수블록에 기재된 디폴트명(variable)을 각각 더블 클릭하여“currentFirstIndex, currentSecondIndex, currentThirdIndex 및currentFourthIndex”로 각각 정정하여 인덱스블록을 4개 만든다.
4-3. 또한, 수학(Math)드로워를 선택하여 열고, 번호블록(number)을 선택하여 작업영역으로 드래그하고, 번호(number)블록의 “123”을 더블클릭하여 “1”로 정정한 다음, 아래의 스크린샷과 같이, 4개의 인덱스블록에 플러그인한다.
4-4. 상기 설명의 각각에 대응하는 인덱스블록의 스크린샷은 다음과 같다.
참고 사항: 이 스크린샷에서 4개의 인덱스블록조합의 숫자 1은 각각 상기 설명한 선택 컬러의 정보리스트 블록(FirstSelCol, SecondSelCol, ThirdSelCol, FourthSelCol)의 각각에서 텍스트의 순위중에서 첫번째 순위의 인덱스이다. 즉, 첫번째, 두번째, 세번째로 각각 선택한 빨강색에 관한 정보인 문장을 가리키는 인덱스이다. 아울러서, 이들의 인덱스는 이전의 예제에서 이미 설명한 바와 같이 겉으로 드러나지 않는 히든 인덱스 변수(Hidden Index Variable)이다.
5. 예제를 실행할 때의 스크린의 초기화에 대해 설명한다.
인텍스의 값을 0으로 초기화하여 컬러를 선택하기 전의 상태로 하고, 컬러요법의 소개화면을 나타내는 수직배열1의 구성을 육안으로 볼 수 있게 한다.
스크린의 초기화면을 위한 이벤트핸들러의 스크린샷은 다음과 같다.
6. 컬러요법에서는 서로 다른 컬러를 4회 선택하여 컬러에 대한 테스트를 한다. 컬러의 4회 선택중에서 첫번째 컬러 선택에 관한 것으로서 7개의 컬러중에서 빨강색을 선택한 경우에 대해 설명한다.
6-1. 버튼의 배경색을 빨강색으로 사용한다. 이 배경색을 화면에서 터치한 때에 빨강색의 버튼을 터치한 것과 마찬가지로 된다. 이와 같이 첫번째 빨강색버튼을 편의상 RB01로 한다. 기능블록을 부가하여 버튼클릭이벤트핸들러를 만들 수 있는 버튼클릭이벤트(RB01.Click)은 다음의 스크린샷과 같다.
6-2. 빨강색버튼을 터치하면 버튼상에 선택이라는 문자가 나타나도록 설정한다.
6-3. 첫번째로 터치한 빨강색(버튼)의 정보를 식별하기 위해서는 4개의 인덱스블록중에서 첫번째 인덱스블록(currentFirstIndex)를 1로 설정한다.
6-4. 컬러요법의 정보중에서, 텍스트블록에 미리 복사하여 붙여넣은 텍스트인, (1) “첫번째 선택한 색은 당신의 본질적인 성격, 당신 자신도 눈치채지 못하고 있는 잠재적인 당신의 모습을 나타낸다. (당신은 [빨강색]을 선택했습니다.)”와, 4개의 선택리스트블록중에서 첫번째의 리스트블록(FirstSelCol)에서 첫번째 인덱스블록(currentFirstIndex)의 인덱스가 1에 해당하는 아이템의 텍스트인, (2) “활력이 넘치고 독창성이 뛰어난 사람이다. 남에게 지기 싫어하는 성격으로 가끔은 반항적일 때도 있으나 일단 결심을 하면 어떤 장애도 뛰어넘을 수 있는 활력이 넘친다. 독창성도 뛰어나 평범한 것을 싫어하는 경향이 있다.” 등의 텍스트를 조합하여, 첫번째 결과 라벨(FirstResultLabel)에 나타난다. 즉, 첫번째 선택한 빨강색에 대한 정보가 첫번째 결과 라벨의 텍스트(set FirstResultLabel.Text to)에 기재된다.
참고 사항: 상기 텍스트블록에 나타난 다수의 사각형상은 한글로서 상기 (1)의 텍스트로서“첫번째 선택한 색은 당신의 본질적인 성격, 당신 자신도 눈치채지 못하고 있는 잠재적인 당신의 모습을 나타낸다. (당신은 [빨강색]을 선택했습니다.)”에 해당하고, 첫번째 선택 컬러에 관한 정보를 일람한 리스트(global FirstSelCol)에서 첫번째인덱스블록(global currentFirstIndex)에 의거하여 선택한 정보(call select list item list index)는 상기 (2)의 텍스트로서 “활력이 넘치고 독창성이 뛰어난 사람이다. 남에게 지기 싫어하는 성격으로 가끔은 반항적일 때도 있으나 일단 결심을 하면 어떤 장애도 뛰어넘을 수 있는 활력이 넘친다. 독창성도 뛰어나 평범한 것을 싫어하는 경향이 있다.”에 해당한다.
6-5. 첫번째 색을 일단 한개 선택하면, 나머지 색은 선택할 수 없도록 되는 이벤트핸들러를 만들어야 하기 때문에, 빨강색 이외의 색에 관련된 컬러버튼(YB01, OB01, WB01, BB01, MB01, GB01)은 터치선택이 불가능하도록 이들 컬러버튼의 구동여부의 논리를 거짓(false)으로 설정한다.
6-6. 상기한 바와 같이 빨강색의 터치에 대응하는 클릭이벤트핸들러의 스크린샷은 다음과 같다.
참고 사항: 텍스트만들기블록(call make text text)의 소켓(text)에 플로그인한 텍스트는 위에서 아래의 순서로 라벨에 나타난다. 텍스트중의 백슬래시엔(＼n)은 키보드의 엔터에 대응한다.백슬래시엔이 두번 나타난 경우는 엔터를 두번 친 것에 해당한다.
6-7. 첫번째로 선택한 색이 빨강색이 아닌 다른 색(노란색, 오렌지색, 흰색, 파란색, 자주색,초록색)인 경우에도 상기한 바와 같은 방식으로 클릭이벤트핸들러를 만들면 된다. 이들의 대부분의 설명이 중복되므로, 차이점이 있는 부분만 설명한다.
6-7-1. 첫번째의 리스트블록(FirstSelCol)에서 인덱스블록(currentFirstIndex)이 빨강색에 해당하는 1인 경우에 대해서 상기한 바와 같이 설명하였으므로, 인덱스블록이 나머지의 다른색(노란색, 오렌지색, 흰색, 파란색, 자주색, 초록색)에 해당하는 2 내지 7인 경우에 대해서 설명한다. 따라서, 상기 스크린샷에서 첫번째 인덱스블록(currentFirstIndex)의 번호(number)를2 내지 7로 각각 설정한다.
6-7-2. 상기 인덱스의 수정에 관련하여, 인덱스를 2로 설정한 경우, 텍스트만들기블록(call make text text)의 소켓(text)에 플러그인한 텍스트블록(text)에, “첫번째 선택한 색은 당신의 본질적인 성격, 당신 자신도 인식하지 못하고 있는 잠재적인 당신의 모습을 나타낸다. (당신은 [노랑색]을 선택했습니다.)”의 정보를 복사하여 붙여넣는다.
마찬가지로 인덱스를 3으로 설정한 경우, 텍스트에는, “첫번째 선택한 색은 당신의 본질적인 성격, 당신 자신도 인식하지 못하고 있는 잠재적인 당신의 모습을 나타낸다. (당신은 [오렌지색]을 선택했습니다.)”의 정보를 복사하여 붙여넣는다.
나머지의 인덱스가 설정한 경우에 대해서도 마찬가지이므로 이에 대한 설명은 생략한다.
6-7-3. 차이점에 대해서만 설명하면, 상기에서 설명한 바와 같이, 이벤트핸들러에서 선택한 색 이외의 다른 색은 선택할 수 없도록 핸들러를 만들어야 하기 때문에 선택된 이외의 다른 색에 관련된 컬러버튼은 터치선택이 불가능하도록 이들 컬러버튼의 가능여부의 논리를 거짓(false)로 설정한다. 예를 들면 노란색이 이벤트핸들러에서 선택된 경우에는 노란색 이외의 색을 선택하는 컬러버튼(RB01, OB01, WB01, BB01, MB01, GB01)은 터치선택이 불가능하게 한다.
6-7-4. 이상 설명한 바와 같이, 첫번째로 색을 터치하여 선택하는 컬러버튼(RB01, YB01, OB01, WB01, BB01, MB01, GB01)에 각각 대응하는 7개의 클릭이벤트핸들러를 한꺼번에 중첩한 스크린샷은 다음과 같다.
7. 컬러의 4회 선택중에서 두번째 컬러 선택에 관한 것으로서 7개의 컬러 중에서 노란색을 선택한 경우에 대해 설명한다. 이 경우의 설명도 상기에 설명한 첫번째 컬러 선택에 관한 것과 대부분 마찬가지이므로 차이점에 대해서만 설명한다.
7-1. 두번째 컬러 선택에서는, 첫번째 선택한 컬러(빨강색)가 제외된 컬러(노란색)를 선택하여야 한다. 따라서, 첫번째 선택한 컬러를 두번째에도 동일한 컬러를 선택하는 경우에는 경고알림 통보만하고, 상이한 컬러를 선택하는 경우에만 상기 첫번째 선택과 마찬가지 방식으로 클릭이벤트핸들러를 조합한다.
이를 달성하기위해서는, 내장블록(Built-In)탭의 제어(Controls)드로워를 열고 조건블록(ifelse)를 선택하여 작업영역으로 드래그하여 사용한다.
7-2. 또한, 사용자블록(My Blocks)탭의 통보자(Notifier1)드로워를 열고 통보자의 경고알림호출블록(call Notifier1.ShowAlert notice)을 선택하여 작업영역으로 드래그하고, 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text)을 선택하여 작업영역으로 드래그한다. 텍스블록(text)에 경고문으로서, “첫번째 선택한 컬러와 중복됩니다. 다른 컬러를 선택해 주세요.”를 복사하여 붙여 넣는다. 다음에, 경고알림블록(call Notifier1.ShowAlert notice)의 소켓(notice)에 상기 텍스트블록(text)을 플러그인한다.
7-3. 두번째 인덱스블록(currentFirstIndex)을 추가 사용한다.
7-4. 상기한 바와 같이 두번째 선택한 노란색의 터치에 대응하는 클릭이벤트핸들러의 스크린샷은 다음과 같다.
7-5. 두번째로 색을 터치하여 선택하는 나머지의 컬러버튼(RB02, OB02, WB02, BB02, MB02, GB02)에 각각 대응하는 클릭이벤트핸들러도 상기한 노란색버튼의 클릭이벤트핸들러의 조합방법과 마찬가지이므로, 이들에 대한 설명은 생략한다.
7-6. 이상 설명한 바와 같이, 두번째로 색을 터치하여 선택하는 컬러버튼(RB02, YB02, OB02, WB02, BB02, MB02, GB02)에 각각 대응하는 7개의 클릭이벤트핸들러를 한꺼번에 중첩한 스크린샷은 다음과 같다.
8. 컬러의 4회 선택 중에서 세번째 컬러 선택에 관한 것으로서 7개의 컬러 중에서 오렌지색을 선택한 경우에 대해 설명한다.
이 경우의 설명도 상기에 설명한 두번째 컬러 선택에 관한 것과 대부분 마찬가지이므로 차이점에 대해서만 설명한다.
8-1. 세번째 컬러 선택에 관한 것이므로, 첫번째와 두번째 선택한 컬러가 제외된 컬러를 선택하여야 한다. 따라서, 첫번째 선택한 컬러와 동일한 컬러를 선택하는 경우의 경고 통보에 대해서는 이미 설명한 바와 같으므로 중복설명은 생략한다. 두번째 선택한 컬러와 동일한 컬러를 세번째 선택하는 경우도 마찬가지 방식으로 별도의 통보를 추가한다. 이 경우에도 별도의 조건블록(ifelse)를 사용하고, 또한 별도의 텍스트블록(text)의 경고문은, “두번째 선택한 컬러와 중복됩니다. 다른 컬러를 선택해 주세요.”를 복사하여 붙여 넣기를 한다.
8-2. 세번째 인덱스블록(currentThirdIndex)을 추가 사용한다.
8-3. 상기한 바와 같이 세번째 선택한 오렌지색의 터치에 대응하는 클릭이벤트핸들러의 스크린샷은 다음과 같다.
8-4. 세번째로 색을 터치하여 선택하는 나머지의 컬러버튼(RB03, YB03, WB03, BB03, MB03, GB03)에 각각 대응하는 클릭이벤트핸들러도 상기한 오렌지색버튼의 클릭이벤트핸들러의 조합방법과 마찬가지이므로, 이들에 대한 설명은 생략한다.
8-5. 이상 설명한 바와 같이, 세번째로 색을 터치하여 선택하는 컬러버튼(RB03, YB03, OB03, WB03, BB03, MB03, GB03)에 각각 대응하는 7개의 클릭이벤트핸들러를 한꺼번에 중첩한 스크린샷은 다음과 같다.
9. 컬러의 4회의 선택 중에서 마지막 네번째 컬러 선택에 관한 것으로서 7개의 컬러 중에서 흰색을 선택한 경우에 대해 설명한다.
이 경우의 설명도 상기에 설명한 두번째와 세번째 컬러 선택에 관한 것과 대부분 마찬가지이므로 차이점에 대해서만 설명한다.
9-1. 네번째 컬러 선택에 관한 것이므로, 첫번째, 두번째 및 세번째에서 선택한 컬러가 제외된 컬러를 선택하여야 한다. 따라서, 첫번째 및 두번째 선택한 컬러와 동일한 컬러를 선택하는 경우의 경고알림통보에 대해서는 이미 설명한 바와 같으므로 중복설명은 생략한다. 세번째 선택한 컬러와 동일한 컬러를 네번째 선택하는 경우도 마찬가지 방식으로 별도의 통보를 추가한다. 이 경우에도 별도의 조건블록(ifelse)를 사용하고, 또한 별도의 텍스트블록(text)의 경고문은,“세번째 선택한 컬러와 중복됩니다. 다른 컬러를 선택해 주세요.”를 복사하여 붙여 넣는다.
9-2. 네번째 인덱스블록(currentFourthIndex)을 추가 사용한다.
9-3. 상기한 바와 같이 네번째 선택한 흰색의 터치에 대응하는 클릭이벤트핸들러의 스크린샷은 다음과 같다.
9-4. 네번째로 색을 터치하여 선택하는 나머지의 컬러버튼(RB04, YB04, OB04, BB04, MB04, GB04)에 각각 대응하는 클릭이벤트핸들러도 상기한 흰색버튼의 클릭이벤트핸들러의 조합방법과 마찬가지이므로, 이들에 대한 설명은 생략한다.
9-5. 이상 설명한 바와 같이, 네번째로 색을 터치하여 선택하는 컬러버튼(RB04, YB04, OB04, WB04, BB04, MB04, GB04)에 각각 대응하는 7개의 클릭이벤트핸들러를 한꺼번에 중첩한 스크린샷은 다음과 같다.
10. 이번에는 첫번째 내지 네번째의 컬러선택화면의 전환을 위한 컬러 선택 버튼 및 각 컬러선택화면에서 컬러를 다시 선택하고자 할 때 사용되는 컬러 재선택 버튼에 대해서 설명한다.
10-1. 두번째 컬러 선택 버튼(SecondColSelButton)에 대해서 설명한다.
10-1-1. 두번째 컬러 선택 버튼의 클릭이벤트핸들러는 장면전환을 하는 점에 있어서는, 첫번째 컬러 선택 버튼의 클릭이벤트핸들러와 마찬가지 방식으로 조합하면 된다. 즉, 첫번째 컬러 선택 표시화면의 표시여부를 설정하는 수직배열구성의 비지블 블록(VerticalArrangement2.Visible)을 두번째 컬러 선택 표시화면의 표시여부를 설정하는 수직배열구성의 비지블 블록(VerticalArrangement3.Visible)으로 대치하고, 컬러요법의 소개화면의 표시여부를 설정하는 수직배열구성의 비지블 블록(VerticalArrangement1.Visible)을 첫번째 컬러 선택 표시화면의 표시여부를 설정하는 블록(VerticalArrangement2.Visible)으로 대치한다.
10-1-2. 또한, 클릭이벤트핸들러는 필히 컬러선택을 행한 다음 장면전환 되도록 하여야 한다. 컬러를 선택하지 않고 컬러선택버튼을 터치한 경우에는 경고메시지가 나타나고, 첫번째로 선택하는 7개의 컬러버튼(RB01, YB01, OB01, WB01, BB01, MB01, GB01)의 텍스트(선택)를 삭제하고, 컬러버튼(RB01, YB01, OB01, WB01, BB01, MB01, GB01) 전체를 동작가능하게 한다.
이를 달성하기 위해, 두번째 컬러 선택 버튼에 추가되는 블록에 대해서 구체적으로 이하 설명한다.
10-1-2-1. 우선, 사용자블록(My Blocks)탭의 통보자(Notifier1)드로워를 열고 통보자의 경고알림호출블록(Notifier1.ShowAlert)을 선택하여 작업영역으로 드래그한다. 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text)을 선택하여 작업영역으로 드래그하고, 텍스블록(text)에 경고알림문장으로서, “컬러(버튼)를 선택한 다음 컬러선택버튼을 터치하세요.”를 복사하여 붙여 넣는다. 다음에, 경고알림블록(Notifier1.ShowAlert)의 소켓(notice)에 상기 텍스트블록(text)을 플러그인한다.
10-1-2-2. 다음에, 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 절차(procedure)블록을 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(procedure)을 더블 클릭하여 Text01로 정정 기재하면, 사용자블록(My Blocks)탭에 자동으로절차호출블록(call Text01)이 생성된다. 이 때에, 절차정의블록(Text01)에, 첫번째로 선택하는 7개의 컬러버튼(RB01, YB01, OB01, WB01, BB01, MB01, GB01) 전체의 텍스트를 제거하는 블록을 추가한다.
10-1-2-3. 마찬가지로, 블록에디터의 내장블록(Built-In)탭을 선택하고 정의(Definition)드로워를 열고 절차(procedure)블록을 선택하여 작업영역으로 드래그하고, 이 블록에 기재된 디폴트명(procedure)을 더블 클릭하여 Enabled01로 정정 기재하면, 사용자블록(My Blocks)탭에 자동으로 절차호출블록(call Enabled01)이 생성된다. 이 때에, 첫번째로 선택하는 7개의 컬러버튼(RB01, YB01, OB01, WB01, BB01, MB01, GB01) 전체를 동작가능하게 하는 블록을 절차정의블록(Enabled01)에 추가한다.
10-1-2-4. 두번째 컬러 선택 버튼의 클릭이벤트핸들러에서, 현재 첫번째 인덱스가 0인 경우, 즉 첫번째 컬러를 선택하지 않고 두번째 컬러 선택버튼을 터치한 경우, 경고알림블록(Notifier1.ShowAlert)에 의해 경고를 알림과 동시에, 상기 두개의 절차호출블록(call Text01, call Enabled01)에 의해 첫번째 컬러(버튼)을 초기화하고, 현재 첫번째 인덱스가 0이 아닌 경우, 즉 첫번째 컬러를 선택하고 두번째 컬러 선택버튼을 터치한 경우에는 경고없이 장면전환을 한다. 이를 위해 조건블록(ifelse)을 사용한다.
10-1-3. 이상 설명한 두번째 컬러선택버튼과 이 버튼에 관련된 블록은 다음의 스크린샷과 같다.
참고 사항: 프로그램작성 중에 동일한 절차를 반복해서 여러 곳에서 재사용되는 경우에는 절차(procedure)블록을 사용하면 편리하다.
10-2. 첫번째 컬러 재선택 버튼에 대해서 설명한다.
10-2-1. 이미 선택한 컬러를 무시하고 다른 컬러를 선택하고자 할 때에는 이미 선택한 컬러(버튼)을 선택(동작)가능하게 하는 동시에 현재 첫번째 인덱스를 0으로 설정하는 것이 중요하다. 상기한 바와 같이 두번째 컬러선택버튼과 마찬가지로 두 개의 절차호출블록(call Text01, call Enabled01)에 의해서만 첫번째 컬러(버튼)를 선택(동작)가능하게 하는 경우에는 컬러를 선택하여도 라벨에 텍스트 정보가 나타나지 않는 버그가 발생한다. 이를 방지하기 위해, 현재첫번째 인덱스를 0으로 설정하는 것이 필수적이다.
두개의 절차호출블록(call Text01, call Enabled01)에 의해 첫번째 컬러(버튼)을 선택(동작)가능하게 하는 점은 상기 두번째 컬러 선택 버튼의 클릭이벤트핸들러에서 사용한 것과 마찬가지이므로 이에 대한 설명은 생략한다.
10-2-2. 이전에 설명한 현재 인덱스블록의 생성시에 사용자 블록(My Blocks)탭의 사용자 정의(My Definitions)드로워 내에 현재의 첫번째 인덱스(currentFirstIndex)를 0으로 설정하여 첫번째 인덱스를 초기화한다.
10-2-3. 또한, 이미 선택한 컬러에 의해 생성된 정보문자가 첫번째 결과 라벨의 텍스트(FirstResultLabel.Text)를 삭제하여 공백으로 한다.
10-2-4. 이상 설명한 첫번째 컬러 재선택 버튼에 관련된 블록은 다음의 스크린샷과 같다.
10-3. “세번째 컬러 선택 버튼과 두번째 컬러 재선택 버튼”, “네번째 컬러 선택 버튼과 세번째 컬러 재선택 버튼” 및 “결과보기 버튼과 네번째 컬러 재선택 버튼”도 모두 “두번째 컬러 선택 버튼과 첫번째 컬러 재선택 버튼”에서 설명과 마찬가지 방식으로 조합한다. 따라서 이에 대한 설명은 생략하고 스크린샷은 다음과 같다.
10-3-1. 세번째 컬러 선택 버튼(ThirdColSelButton)과 두번째 컬러 재선택 버튼(SecondColReselbutton)
10-3-2. 네번째 컬러 선택 버튼(FourthColSelButton)과 세번째 컬러 재선택 버튼(ThirdColReselButton)
10-3-3. 결과보기 버튼(ResultButton)과 네번째 컬러 재선택 버튼(FourthColReselButton)
10-4. 확인버튼(ConfirmButton)에 대해서 설명한다.
확인 버튼을 터치함으로써, 수직정렬배열구성에 의해 장면을 전환하고, 첫번째 내지 네번째 결과 라벨의 텍스트와 버튼의 텍스트를 전부 삭제하여 공백으로 하고, 컬러버튼 전체를 동작가능하게 하고, 리스트의 인덱스를 0으로 한다. 즉, 모든 구성을 초기화한다. 이에 대한 설명은 이미 하였으므로 생략한다. 승인버튼의 클릭이벤트핸들러의 구성에 대한 스크린샷은 다음과 같다.
11. 지금까지의 설명한 블록을 종합한 스크린샷을 아래에 나타낸다.
참고 사항: 블록의 좌측하단의 백색표시가 있는 부분을 클릭하여 블록을 최소크기로 축소하여 나타내었다. 자세한 블록은 상기 스크린샷을 개별적으로 찾아서 보면 된다.
