App Inventor Story: 제 11 장 멀티유저 메모장 3 (앱인벤터 컬러 차트 등의 사용에 의한 추가보완작업)

1. 상기 제 1 단계의 예제에서 설명한 컬러보정을 하여 앱인벤터에 내장된 컬러와 동일하게 하는 것은 상당한 시간을 필요로 하고 또한 실제로 컬러를 맞추기가 힘들다. 따라서, 상기 설명한 블록중에서 컬러에 관한 블록을 모두 삭제하고, 다음과 같이 정정한다.

1-1. 프로젝트 명칭을 MutiUserMemorandumVersion으로 한다.

1-2. 이 예제에서 사용된 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다.

또는, 압축파일(MultiuserMemorandumVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다.

2. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.

참고 사항: 상기 디자이너창과 이후에 설명하는 블록에디터창의 기능블록에 대응하는 넥서스S의 멀티유저 메모장 화면은 다음의 스크린샷과 같다.

2-1. 상기 디자이너창의 스크린샷에서 4 개의 컬러버튼과 수평으로 배치된 버튼(SumitButton)과 리스트피커(RemoveListPicker)가 나타나지 않지만 상기 스크린샷과 하기 스크린샷에 나타난 바와같이 안드로이드폰과 에뮬레이터에서는 이들 구성요소가 모두 나타난다.

2-2. 상기 4개의 컬러버튼의 컬러는 앱인벤터 컬러 차트(App Inventor Color Chart)에 나열된 컬러를 포토샵 등에서 그대로 복사한 컬러에 해당한다. 즉, 컬러버튼은 컬러는 복사한 컬러이고 블록에디터에서 설명하는 텍스트박스와 라벨에 기재된 글자색은 앱인벤터 컬러 차트에 나열된 번호를 해당 블록에 기재한다.

2-3. 또한 상기 컬러버튼의 컬러는 그림파일(colorOrange.png, colorRed.png, colorGreen.png, colorBlue.png)에 각각 해당하고, 컬러버튼의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 스크린샷과 같이 나타난다.

참고 사항: 상기 예제와 동일한 파일명을 사용하고 있지만 컬러를 선택한 방식이 차이가 있기 때문에 본 예제에서 사용되는 컬러는 상기 예제의 컬러와 구분된다. 또한 그림파일의 크기도 다르다.

2-4. 메모통그림(SubmitNoteButton)과 휴지통그림(RemoveListPicker)은 그림파일(memo.png, delete.png)에 각각 해당하고, 버튼(SubmitNoteButton)과 리스트피커(RemoveListPicker)의 속성컬럼의 이미지(Image)난에서 해당 그림파일을 각각 선택하면 상기 에뮬레이터의 스크린샷과 같이 나타난다.

2-5. 상기 4개의 버튼(즉 버튼의 이미지)을 수평배열구조(HorizontalArrangement)의 내부에 순차적으로 드래그한다. 그 결과, 4개의 버튼은 수평으로 정렬된다. 폭을 3 픽셀로 설정하고 높이를 5 픽셀로 설정한 4개의 수평배열구조를, 화면좌측변과 버튼사이 및 버튼과 버튼사이에 배치한다. 이들 구조를 설명의 편의상 제 1 버튼그룹으로 칭한다.

상기 버튼과 리스트피커를 다른 수평배열구조의 내부에 순차적으로 드래그하여, 버튼과 리스트피커는 수평으로 정렬된다. 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를, 버튼과 리스트피커사이에 배치한다. 이들 구조를 설명의 편의상 제 2 버튼그룹으로 칭한다.

상기 제 1 버튼그룹과 제 2 버튼그룹을 또 다른 수평배열구조내에 수평으로 배치한다. 또한 폭을 5 픽셀로 설정하고 높이를 20 픽셀로 설정한 수평배열구조를 이들 그룹사이에 간격을 두기 위해 배치한다.

폭을 Fill parent로 설정하고 높이를 5 픽셀로 설정한 수직배열구조를, 화면의 상측변과 상기 버튼그룹사이에 간격을 두기 위해 배치한다.

2-6. 나머지 구조는 상기 제 1 단계의 예와 마찬가지이므로 생략한다.

3-1. 4개의 버튼에 관련된 컬러블록에 기재된 번호도 이전에 설명한 바와 같이 앱인벤터 컬러 차트(App Inventor Color Chart)를 참조하여 정정한다.

3-1-1. 오렌지색 버튼