9. 상기 제 1 단계에서 설명한 바와 같이 컬러보정을 하여 앱인벤터에 내장된 컬러와 동일하게 하는 것은 상당한 시간을 필요로 하고 또한 실제로 컬러를 맞추기가 힘들다. 따라서, 상기 설명한 블록중에서 컬러에 관한 블록을 모두 삭제하고, 다음과 같이 정정한다.
9-1. 프로젝트의 명칭을 MemorandumVersion으로 한다.
9-2. 이 예제에서 사용된 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다.
또는, 압축파일(MemorandumVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다.
9-3. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.
참고 사항: 상기 디자이너창과 이 후에 설명하는 블록에티터의 기능블록에 대응하는 넥서스S의 메모장 화면은 다음의 스크린샷과 같다.
9-3-1. 상기 디자이너창의 스크린샷에서는 4 개의 컬러버튼과 수평으로 배치된 버튼(SumitButton)과 리스트피커(RemoveListPicker)가 나타나지 않지만 상기 스크린샷과 하기 스크린샷에 나타난 바와같이 안드로이드폰과 에뮬레이터에서는 이들 구성요소가 모두 나타난다.
9-3-2. 상기 4개의 컬러버튼의 컬러는 앱인벤터 컬러 차트(App Inventor Color Chart)에 나열된 컬러를 포토샵 등에서 그대로 복사한 컬러에 해당한다. 즉, 컬러버튼의 컬러는 컬러차트에서 복사한 컬러이다. 이에 관련하여, 나중에 설명하는 바와 같이, 블록에디터창에서 텍스트박스와 라벨의 텍스트컬러블록은 앱인벤터 컬러 차트에 나열된 번호를 기재한 해당 번호블록을 플러그인한다.
참고 사항: 앱인벤터 컬러 차트(App Inventor Color Chart)가 게시된 사이트(http://appinventor.googlelabs.com/learn/reference/blocks/colorchart.html)를 참조한다.이 컬러차트에는 자연색에 근접한 컬러가 다양하게 준비되어 있다. 블록에 기재된 번호는 앱인벤터컬러번호(App Inventor Color Number)이다. 컬러로 직접 표시된 블록은 블록에디터창에서 직접 선택할 수 있다.
9-3-3. 또한 상기 컬러버튼의 컬러는 그림파일(colorOrange.png, colorRed.png, colorGreen.png, colorBlue.png)에 각각 해당하고, 컬러버튼의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 스크린샷과 같이 나타난다.
참고 사항: 상기 제 1 단계의 예제와 동일한 파일명을 사용하고 있지만 컬러를 선택한 방식이 차이가 있기 때문에 본 제 2 단계에서 사용되는 컬러는 상기 제 1 단계에서 사용되는 컬러와 구분된다. 또한 그림파일의 크기도 다르다.
9-3-4. 메모통그림(SubmitNoteButton)과 휴지통그림(RemoveListPicker)은 그림파일(memo.png, delete.png)에 각각 해당하고, 버튼(SubmitNoteButton)과 리스트피커(RemoveListPicker)의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 에뮬레이터의 스크린샷과 같이 나타난다.
9-3-5. 상기 4개의 버튼(즉 버튼의 이미지)을 수평배열구조(HorizontalArrangement)의 내부에 순차적으로 드래그하면, 4개의 버튼은 수평으로 정렬된다. 폭을 3 픽셀로 설정하고 높이를 5픽셀로 설정한 4개의 수평배열구조를, 화면좌측변과 버튼사이 및 버튼과 버튼사이에 한개씩 배치한다. 이들 구조를 설명의 편의상 제 1 버튼그룹으로 칭한다.
상기 버튼과 리스트피커를 다른 수평배열구조의 내부에 순차적으로 드래그하면, 버튼과 리스트피커는 수평으로 정렬된다. 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를,버튼과 리스트피커사이에 배치한다. 이들 구조를 설명의 편의상 제 2 버튼그룹으로 칭한다.
상기 제 1 버튼그룹과 제 2 버튼그룹을 또 다른 수평배열구조내에 수평으로 배치한다. 또한 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를 이들 그룹사이에 간격을 두기 위해 배치한다.
폭을 Fill parent로 설정하고 높이를 5 픽셀로 설정한 수직배열구조를, 화면의 상측변과 상기 버튼그룹사이에 간격을 두기 위해 배치한다.
9-3-6. 나머지 구조는 상기 제 1 단계의 예제와 동일하므로 생략한다.
9-4. 4개의 버튼에 관련된 컬러블록에 기재된 번호도 이전에 설명한 바와 같이 앱인벤터 컬러 차트(App Inventor Color Chart)를 참조하여 정정한다.
9-4-1. 오렌지색 버튼
9-4-2. 적색 버튼
9-4-3. 녹색 버튼
9-4-4. 청색 버튼
9-5. 필요한 메모를 기재하지 않고 버튼을 터치하는 경우에는 “메모를 먼저 입력하세요.”라는 경고문이 화면에 나타나도록 조건문을 추가한다.
9-5-1. 조건문
9-5-2. 이전의 예제의 버튼에 상기 조건문을 추가한 버튼조합블록
9-6. 스크린 초기화에서도 텍스트컬러에 관련된 부분도 앱인벤터 컬러 차트(App Inventor Color Chart)를 참조하여 정정한다.
10. 지금까지의 설명한 블록을 종합한 2개의 스크린샷을 이하 나타낸다.
댓글 없음:
댓글 쓰기