App Inventor Story: 07/09/11

5. 구성요소 작업

디자이너창을 사용하여 인터넷의 즐겨찾기를 위한 외관의 구성을 다음과 같이 디자인한다.

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

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

2-1 우선, 팔레트(Palette)컬럼의 기본(Basic)드로워에서 라벨을 선택하여 뷰어로 드래그하고, 속성(Properties)컬럼의 폰트보울드(FontBold)난에 체크표시를 하고, 텍스트난에 “즐겨찾기 명칭: “을 기재한다.

다음에, 텍스트박스를 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 텍스트박스의 명칭을 TitleTextBox로 정정하고, 속성컬럼의 힌트(Hint)난에 “즐겨찾기 명칭을 입력하세요.”라고 기재한다.

팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열을 선택하여 뷰어로 드래그하고 속성컬럼의 폭을 Fill Parent로 설정한 다음, 상기 라벨과 텍스트박스를 이 수평배열 내에 드래그하면 수평으로 정렬된다. 라벨이 스크린의 좌측과 소정의 간격을 두기를 원하는 경우에는 별도의 수평배열을 사용하여 라벨의 좌측에 배치한다. 예를 들면, 별도의 수평배열의 폭은 5픽셀로, 높이는 10픽셀로 설정한다.

2-2. 마찬가지로, 기본(Basic)드로워에서 라벨을 선택하여 뷰어로 드래그하고, 속성(Properties)컬럼의 폰트보울드(FontBold)난에 체크표시를 하고, 텍스트난에 “인터넷 주소: “을 기재한다.

다음에, 텍스트박스를 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 텍스트박스의 명칭을 URLTextBox로 정정하고 속성컬럼의 힌트(Hint)난에 “인터넷 주소를 입력하세요.”라고 기재한다.

팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열을 선택하여 뷰어로 드래그하고 속성컬럼의 폭을 Fill Parent로 설정한 다음, 상기 라벨과 텍스트박스를 이 수평배열내에 드래그하면 수평으로 정렬된다. 라벨이 스크린의 좌측과 소정의 간격을 두기를 원하는 경우에는 별도의 수평배열을 사용하여 라벨의 좌측에 배열한다. 예를 들면, 별도의 수평배열의 폭은 5픽셀로, 높이는 10픽셀로 설정한다.

2-3. 기본(Basic)드로워에서 버튼을 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 버튼의 명칭을 AddButton으로 정정한다.

또한, 속성(Properties)컬럼에서 배경색을 황색(Yellow)을 선택하고, 폰트보울드(FontBold)난에 체크표시를 하고, 텍스트난에는 “즐겨찾기 추가”를 기재한다.

상기한 바와 마찬가지로 두 개의 수평배열을 사용하여 버튼을 정렬한다. 이 때에도 수평배열의 폭과 높이는 상기 설명한 것과 마찬가지의 값으로 설정한다.

2-4. 또한, 기본(Basic)드로워에서 리스트피커(ListPicker)를 2회 선택하여 뷰어로 각각 드래그하고, 구성요소(Components)컬럼에서 리스트피커의 명칭을 SelectListPicker와 RemoveListPicker로 각각 정정한다.

또한, 속성(Properties)컬럼에서 배경색을 녹색(Green)과 엷은 회색(Light gray)을 각각 선택하고, 해당 폰트보울드(FontBold)난에 모두 체크표시를 하고, 텍스트난에는 “즐겨찾기 선택”과 “즐겨찾기 제거”를 기재한다.

2-5. 스크린배열(Screen Arrangement)드로워를 열고 수평배열을 3회 뷰어로 드래그하고 1개의 수평배열을 사용하여 피커리스트를 수평으로 정렬하고, 나머지 2개의 수평배열을 사용하여 좌측 피커리스트와 스크린의 좌측간의 간격 및 피커리스트간의 간격을 조정한다. 이 때에, 내부에 위치한 2개의 수평배열의 폭은 5픽셀과 20픽셀이고 높이는 모두 10픽셀이다. 이와 같은 간격(즉, 패딩)이 마음에 안 드는 경우에는 임의의 조정이 얼마든지 가능하다.

2-5. 기본(Basic)드로워에서 캔버스를 선택하여 안테나이미지가 배치될 장소에 드래그하고, 속성컬럼의 배경이미지(BackgroundImage)난에서 클릭하여 열고 안테나이미지파일(antenna.png)선택하고 버튼(OK)을 클릭한다.

폭을 Fill parent로 설정한 수평배열내에 캔버스(Canvas1)를 배치하고, 화면의 좌측변과 간격을 두기 위해 폭을 20픽셀로 설정한 수평배열을 화면의 좌측변과 캔버스사이에 배치한다. 또한, 캔버스와 상기 리스트피커간의 간격을 두기 위해 높이 10픽셀로 설정하고 폭을 Fill Parent로 설정한 수직배열을 그 사이에 배치한다.

2-6. 팔레트컬럼의 기본(Basic)드로워에서 라벨을 선택하여 뷰어로 드래그하고 구성요소컬럼에서 라벨의 명칭을 InternetLabel로 정정하고, 속성컬럼의 텍스트난을 “….”으로 기재한다.

라벨의 정렬도 마찬가지 방식으로 수직배열내에 수평배열을 배치하고 이 수평배열내에 수평배열과 라벨을 수평으로 배치한다. 처음의 수직배열과 수평배열의 폭은 모두 Parent로 설정하고, 나머지 한 개의 수평배열의 폭은 10픽셀로 설정한다.

2-7. 인터넷에 접근하기 위해, 필레트컬럼의 기타 자료(Other Stuff)드로워를 열고 ActivityStarter를 선택하여 뷰어로 드래그하면, 뷰어의 외측하부영역에 넌비지블한 구성요소(Non-visible Component)로서 자동으로 이동하여 배치된다. 속성컬럼의 액션(Action)난에 “android.intent.action.VIEW”를 적어 넣는다.

참고 사항: 액티비티스타터(ActivityStarter)는 다른 액티비티를 런칭하기 위해 사용되는 구성요소이다. 즉, 인터넷이나 맵을 런칭하거나 SD카드로부터 파일을 불러오는 등 다양하게 사용된다. 각각에 대한 속성의 적용방법도 다르다.

2-8. 또한, 데이터를 저장하기 위해, 팔레트컬럼의 기본(Basic)드로워에서 소형데이터베이스(TinyDB)를 선택하여 뷰어로 드래그하면, 마찬가지로 스크린의 외측하부영역에 넌비지블한 구성요소로서 자동으로 이동하여 배치된다.

2-9. 즐겨찾기 명칭과 인터넷 주소의 입력난에 입력하지 않고 즐겨찾기 추가버튼을 터치하는 경우에는 알림 문구로서, “즐겨찾기 명칭을 입력하세요.”, “인터넷 주소를 입력하세요.” 등을 나타내기 위해, 팔레트컬럼의 기타 자료(Other Stuff)드로워를 열고 통보자(Notifier)를 선택하여 뷰에 드래그하면, 마찬가지로 스크린의 외측하부영역에 넌비지블한 구성요소로서 자동으로 이동하여 배치된다.

3. 이상 설명한 디자이너창의 구성배열의 스크린샷은 다음과 같다.