5. 구성요소 작업
디자이너창을 사용하여 컬러 요법을 위한 외관의 구성에 대해 설명한다.
1. 단일의 수직배열구성마다 단일의 화면을 형성함으로써, 수직배열구성의 개수만큼 멀티화면을 자유롭게 구성할 수 있다. 이 때에 사용되는 수직배열구성의 속성은 비지블(visible)이다. 수직배열구성에 대한 디자인창의 속성컬럼에서는 비지블란을 체크여부에 따라 화면의 나타남의 여부를 결정할 수 있다. 또한, 블록에티터창에서도 수직배열구성의 비지블 설정블록(set VerticalArrangement.visible to)의 소켓(to)에 논리블록(true 또는 false)을 플러그인하여 멀티화면의 나타남을 조정할 수 있다.
2. 본 컬러요법에서는 6개의 화면으로 구성된 멀티화면을 사용한다. 즉, 컬러요법의 소개 화면, 4개의 컬러선택 표시화면, 컬러테스트의 결과화면으로 구성된다.
3. 컬러요법의 소개 화면에 대해 설명한다.
3-1 컬러요법에 대해 개괄적으로 설명하기 위해, 팔레트(Palette)컬럼의 기본(Basic)드로워에서라벨(label)을 선택하여 뷰어로 드래그하고, 속성(Properties)컬럼에서 글씨를 굵게 하기 위해 폰트보울드(FontBold)난에 체크표시를 하고, 폰트크기(FontSize)난에 20.0을 기재하고, 텍스트(Text)난에, “컬러 요법: 색을 선택하는 순서로 잠재적인 마음을 알아본다.”를 입력한다.
3-2. 마찬가지로, 4개의 라벨을 뷰어로 드래그하고, 속성컬럼에서 텍스트난에, 다음의 4개의 글을 각각 입력한다.
“♠ 컬러 요법 이란?”
“새로운 심리 요법 중 하나이며, 컬러를 이용하여 인간의 마음을 치유하기도 하고 심리상태를 반영하기도 한다는 테스트입니다. 제2차 세계 대전 무렵에는 마음에 상처를 입은 많은 사람들에게 이 컬러 심리요법이 이용되었다고 합니다. 색으로 이루어진 환경에 의해 정신과 육체에 다양한 에너지를 창출해 낸다는 것은 이미 공지된 사실입니다. “
“색이 정신과 육체에 다양한 에너지를 준다는 것은 이미 알려진 사실입니다.”
“우선, 아래의 첫번째 선택버튼을 터치한 다음, 7종류의 컬러버튼이 나타나면 컬러를 응시하면서 당신의 마음에 드는 컬러버튼 하나만 선택해서 터치하세요. 이와 같은 선택을 아래 선택버튼을 사용하여 네번 반복한 다음, 확인 버튼을 누르면 그 결과가 나타난다. 이 테스트에서는4가지 색을 선택하는 순서에 커다란 의미가 있습니다.”
3-3. 버튼(Button)을 뷰어로 드래그하고, 구성요소(Components)컬럼에서 Button1을FirstColSelButton으로 정정한다.
해당 속성(Properties)컬럼에서 텍스트(Text)난에 문자(첫번째 컬러 선택버튼)을 입력한다.
3-4. 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수직배열(VerticalArrangement)을 선택하여 뷰어로 드래그하고, 해당 속성컬럼에서 폭을 Fill Parent로 설정하고, 상기 5개의 라벨과 상기 버튼을 수직배열구조의 내부에 순차적으로 드래그한다. 그 결과, 5개의 라벨과 버튼은 수직으로 정렬된다.
3-5. 상기 설명한 컬러요법의 소개 화면은 다음의 스크린샷과 같다.
참고 사항: 상기 디자이너창의 디자인과 이후에 설명하는 블록에디터창의 기능블록에 대응하는 넥서스S의 컬러요법 소개 화면
4. 컬러를 4개 선택하기 위해 컬러선택 표시화면을 4개 구성한다.
4-1. 우선, 첫번째컬러선택 표시화면의 구성에 대하여 설명한다.
4-1-1. 팔레트(Palette)컬럼에서 기본(Basic)드로워를 열고 라벨(label)을 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 Label6를 FirstSelLabel로 정정하고 속성(Properties)컬럼에서 글씨를 굵게 하기 위해 폰트보울드(FontBold)난에 체크표시를 하고, 폰트크기(FontSize)난에 20.0을 기재하고, 텍스트(Text)난에, “첫번째 컬러 선택: ”을 입력한다.
4-1-2. 팔레트컬럼에서 기본(Basic)드로워를 열고, 버튼을 7회 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼을 RB01, YB01, OB01, WB01, BB01, MB01, GB01로 각각 정정한다. 또한, 속성(Properties)컬럼에서 배경색(BackgroundColor)을 7개의 컬러(Red, Yellow, Orange, White, Blue, Magenta, Green)를 선택하고 폭(Width)을 40으로 한다. 즉, 7개의 버튼을 동일하게 적용하되 버튼명칭과 배경색만 다르게 한다.
4-1-3. 또한, 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 테이블배열(TableArrangement)을 선택하여 뷰어로 드래그하고, 속성의 열(Columns)란에 7을,행(Rows)란에 1을 각각 적어 넣고, 상기 7개의 버튼을 테이블배열구조의 내부에 순차적으로 드래그하면, 7개의 버튼이 수평의 테이블 구조로 정렬된다.
4-1-4. 다음에, 팔레트컬럼에서 기본(Bassic)드로워를 열고, 버튼을 2회 선택하여 뷰어로 순차적으로 드래그하고, 구성요소컬럼에서 버튼의 명칭을 SecondColSelButton, FirstColReselButton으로 각각 정정하고, 속성(Properties)컬럼에서 텍스트(Text)난에 두번째 컬러 선택 버튼, 첫번째 컬러 재선택을 입력한다.
4-1-5. 또한, 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열(HorizontalArrangement)을 선택하여 뷰어로 드래그하고, 해당 속성컬럼에서 폭을 Fill parent로 하고, 상기 두 버튼을 수평배열구조의 내부에 순차적으로 드래그하면, 두 버튼은 수평으로 정렬된다.
4-1-6. 다음에, 수직배열(VerticalArrangement)을 선택하여 뷰어로 드래그하고, 해당 속성컬럼에서 폭을 Fill parent로 하고, 상기 라벨과 상기 테이블배열 및 수평배열을 모두 수직배열구조의 내부에 순차적으로 드래그하면, 라벨과 테이블배열 및 수평배열은 수직으로 정렬된다.
4-1-7. 상기한 바와 같은 수직배열구조를 가진 첫번째컬러선택 표시화면은 다음의 스크린샷과 같다.
참고 사항: 상기에서 설명한 바와 같이 수직배열구성요소를 단위로 화면에 나타나게 하는 구성함으로써 멀티화면중의 한 화면을 자유롭게 구성할 수 있다. 수직배열구성요소의 속성컬럼의 비지블(visible)란에 체크표시를 하지 않는다.
참고 사항: 스크린의 상측외부에 있는 뷰어의 인비지블 구성요소 표시(Display Invisible Components in Viewer)의 체크 표시를 하면, 속성컬럼에서 비지블란에 체크표시를 하지 않아도 뷰어에 구성요소가 나타난다.
참고 사항: 상기 디자이너창의 디자인과 이후에 설명하는 블록에디터의 기능블록에 대응하는 넥서스S의 첫번째 컬러선택 화면
4-2. 나머지 3개의 컬러선택표시화면도 상기와 같은 방식으로 구성한다. 따라서, 중복되는 부분은 설명하지 않고 다른 점만 편의상 한꺼번에 설명한다.
4-2-1. 각각의 화면에서 구성요소컬럼의 라벨을,
“SecondSelLabel”, “ThirdSelLabel”, “FourthSelLabel”로 각각 정정하고,
해당 속성컬럼의 텍스트난에,
“두번째 컬러 선택: “, “세번째 컬러 선택: “, “네번째 컬러 선택: “을 각각 입력한다.
4-2-2. 각각의 화면에서 버튼의 명칭을,
“RB02, YB02, OB02, WB02, BB02, MB02, GB02”,
“RB03, YB03, OB03, WB03, BB03, MB03, GB03”,
“RB04, YB04, OB04, WB04, BB04, MB04, GB04”로 각각 정정한다.
4-2-3. 각각의 화면에서 나머지 2개 버튼의 명칭을,
“ThirdColSelButton, SecondColReselButton”,
“FourthColselButton, ThirdColReselButton”,
“ResultButton, FourthColReselButton”으로 각각 정정하고,
속성(Properties)컬럼의 텍스트(Text)난에,
“세번째 컬러 선택 버튼, 두번째 컬러 재선택”,
“네번째 컬러 선택 버튼, 세번째 컬러 재선택“,
“결과 보기 버튼, 네번째 컬러 재선택”을 각각 입력한다.
나머지 부분의 설명은 이전의 설명을 참조한다.
4-2-4. 상기한 바와 같은 디자인창의 컬러선택화면구조는 다음과 같다.
참고 사항: 상기 스크린샷에서는 뷰어의 인비지블 구성요소 표시(Display Invisible Components in Viewer)의 체크 표시를 하지 않아도 컬러화면구조가 모두 나타난 것은 해당 속성컬럼에서 비지블란의 체크를 편의상 임시로 표시한 경우에 해당한다. 최종적으로는 이 체크표시는 하지 않는다.
참고 사항: 상기 디자이너창의 디자인과 이후에 설명하는 블록에디터의 기능블록에 대응하는 넥서스S의 두번째, 세번째, 네번째 컬러 선택 화면
5. 컬러 테스트의 결과 화면에 대해 설명한다.
5-1. 팔레트(Palette)컬럼에서 기본(Basic)드로워를 열고 라벨(label)을 5회 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 첫번째 라벨은 명칭을 정정하지 않고, 두번째라벨부터 네번째라벨까지 FirstResultLabel, SecondResultLabel, ThirdResultLabel, FourthResultLabel로 각각 정정한다.
속성(Properties)컬럼에서 첫번째라벨의 텍스트(Text)난에, “색깔선택 순서로 마음을 읽어내는 테스트/체크결과입니다.”를 입력한다. 나머지 4개에 라벨의 텍스트난에, “Text for First Result Label, Text for Second Result Label, Text for Third Result Label, Text for Fourth Result Label”을 각각 입력한다.
5-2. 다음에, 기본(Basic)드로워에서 버튼을 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을 ConfirmButton으로 정정하고, 속성(Properties)컬럼에서 버튼의 텍스트난에 확인을 입력한다.
다음에, 수직배열(VerticalArrangement)을 선택하여 뷰어로 드래그하고, 해당 속성컬럼에서 폭을 Fill parent로 하고, 상기 5개의 라벨 및 1개의 버튼을 모두 수직배열구조의 내부에 순차적으로 드래그하면, 라벨과 버튼은 수직으로 정렬된다.
5-3. 상기한 바와 같은 수직배열구조를 가진 컬러테스트의 결과화면은 다음의 스크린샷과 같다.
참고 사항: 상기 디자이너창의 디자인과 이후에 설명하는 블록에디터창의 기능블록에 대응하는 넥서스S의 컬러테스트 결과 화면
5-4. 상기 디자이너창의 스크린샷에 나타난 바와 같이, 팔레트컬럼의 기타 구성요소(Other stuff) 드로워를 열고 통지자(Notifier)를 뷰어로 드래그하면, 뷰어에 통지자의 구성요소를 드러내지 않는 넌비지블한 영역(뷰어의 외부하단 영역)에 나타난다. 이것은 앱 실행 중에 사용자에게 필요에 따라 통지하기 위해 사용된다.
댓글 없음:
댓글 쓰기