제 9 장 메모장 2 (디자이너창 작업)

5. 구성요소 작업

디자이너창을 사용하여 메모장을 위한 외관구성을 디자인한다.

1. 미리 컴퓨터에 준비된 아이콘(그림파일)(colorBlue.png, colorGreen.png, colorOrange.png, colorRed.png, memo.png, delete.png)을 디자이너창의 우측내부의 아래에 위치한 미디어(Media)컬럼에서 추가버튼(Add)을 클릭하여 컴퓨터에 저장된 그림파일을 업로드한다.

2. 팔레트의 아이템을 뷰어로 드래그하고, 해당 구성요소 및 속성을 필요에 따라 정정한다.

2-1 우선, 팔레트(Palette)컬럼의 기본(Basic)드로워에서 버튼을 4회 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을 BlueButton, GreenButton, OrangeButton, RedButton으로 각각 정정한다.   또한, 해당 속성(Properties)컬럼의 이미지난에서 각 원형컬러버튼에 대응하는 이미지파일(colorBlue.png, colorGreen.png, colorOrange.png, colorRed.png)을 선택하고 각 버튼의 텍스트난의 텍스트를 삭제하여 공백으로 한다.

2-2. 또한, 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열(HorizontalArrangement)을 선택하여 뷰어로 드래그하고, 상기 4개의 버튼(즉 버튼의 이미지)을 수평배열구조의 내부에 순차적으로 드래그하면, 4개의 버튼은 수평으로 배치된다.  설명의 편의상, 이 수평배치를 제 1 수평배열군으로 칭한다.

2-3. 데이터베이스에 메모를 기록하기 위해, 팔레트(Palette)컬럼에서 기본(Basic)드로워를 열고 버튼을 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을“submitButton”으로 정정한다. 속성(Properties)컬럼의 이미지난에서 이미지파일(memo.png)을 선택하고 메모저장용 버튼(submitButton)의 텍스트난의 텍스트를 삭제하여 공백으로 한다.

2-4. 또한, 데이터베이스에 저장된 메모를 선택하여 삭제하기 위해, 기본(Basic)드로워에서 리스트피커(ListPicker)를 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을 “RemoveListPicker”로 정정한다.  또한, 속성(Properties)컬럼의 이미지난에서 이미지파일(delete.png)을 선택하고 리스트피커의 텍스트난의 텍스트를 삭제하여 공백으로 한다.

2-5. 또한, 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열(HorizontalArrangement)을 선택하여 뷰어로 드래그하고, 상기 메모저장용 버튼(submitButton)(메모장과 연필이 그려진 이미지 아이콘) 및 삭제용 리스트피커(RemoveListPicker)(휴지통의 이미지 아이콘)를 수평배열구조의 내부에 순차적으로 드래그하면, 메모저장용 버튼과 삭제용 리스트피커는 수평으로 배치된다. 설명의 편의상, 이 수평배치를제 2 수평배열군으로 칭한다.

2-6. 팔레트컬럼의 스크린배열(Screen Arrangement)드로워를 열고 수평배열(HorizontalArrangement)을 2회 선택하여 뷰어로 드래그하고, 전자의 수평배열구조는 폭(Width)을 Fill parent로 하고 후자의 수평배열구조는 폭을 50픽셀로 하고 높이는 20픽셀로 한다.  전자의 수평배열구조의 내부에 상기 제 1 수평배열군과 상기 제 2 수평배열군을 이 순서로 드래그하여 수평으로 배치하고, 이와 같이 수평으로 배치된 제 1 수평배열군과 제 2 수평배열군 사이에 후자의 수평배열구조를 위치시킨다.

2-7. 필요한 메모를 입력하기 위해, 팔레트(Palette)컬럼에서 기본(Basic)드로워를 열고 텍스트박스(TextBox)를 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을NoteTextBox로 정정한다. 또한, 속성(Properties)컬럼에서 힌트(Hint)난에서 “필요한 메모를 여기에 입력하세요.”를 입력하고, 텍스트(Text)난의 텍스트를 삭제하여 빈공간으로 남겨놓고,폭(Width)을 Fill Parent를 선택한 다음 버튼(OK)를 클릭하여 설정하면 폭방향의 부모(parent)의 폭과 동일하게 설정된다. 

2-8. 메모를 표시하기 위해 기본(Basic)드로워를 열고 라벨(Label)을 선택하여 뷰어로 드래그하고, 구성요소컬럼에서 라벨의 명칭을 NoteListLabel로 정정한다. 또한 속성컬럼에서 텍스트(Text)난의 텍스트를 삭제하여 공백으로 하고, 폭과 높이를 모두 Fill parent로 선택한다.

2-9. 데이터를 저장하기 위해, 팔레트컬럼의 기본(Basic)드로워에서 소형데이터베이스(TinyDB)를 선택하여 뷰어로 드래그하면, 뷰어의 하부에 넌비지블한 구성요소(Non-visible Component)로서 자동으로 이동하여 배치된다.

2-10. 데이터의 입력시간을 나타내기 위해 기본(Basic)드로워에서 Clock을 선택하여 뷰어로 드래그하면, 뷰어의 하부에 넌비지블한 구성요소로서 자동으로 이동하여 배치된다.

2-11. 스크린 초기화시에(즉, 앱을 실행할 때에) 알림문구로서, “메모한 다음 위의 연필과 메모장이 그려진 아이콘을 터치하세요.”를 나타내기 위해, 팔레트컬럼의 기타구성요소(Other Stuff)드로워를 열고 통보자(Notifier)를 선택하여 뷰에 드래그하면, 마찬가지로 뷰어의 하부에 넌비지블한 구성요소(Non-visible Component)로서 자동으로 이동하여 배치된다.

2-12. 이상 설명한 디자이너창의 구성요소를 배열한 스크린샷은 다음과 같다.

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