6. 구성요소에 활력 불어넣기
1. 블록에디터의 좌측상부에는 내장블록(Built-In)탭과 사용자블록(My Blocks)탭이 있다. 이들 탭중에서 하나를 선택하면 복수의 드로워(Drawer)가 나타나고, 각각의 드로워안에는 구성요소에 활력을 불어넣기 위해 사용되는 다수의 블록이 있다.
내장블록(Built-In)탭측에는 앱인벤터 자체의 프로그램시에 미리 준비된 다수의 블록이 존재하고, 사용자블록(My Blocks)탭측에는 디자이너창에서 작업한 구성요소에 대응하여 생성된 다수의 블록이 존재한다.
2. 구체적으로는, 블록에디터를 오픈하고 좌측에 위치한 사용자 블록(My Blocks)탭을 선택하면 디자이너창에서 작업한 액티비티스타터, 브로그 버튼, 페이스북 버튼, 폰넘버 버튼, 4개의 캔버스, 폰콜 및 스크린(Screen1) 등에 각각 대응하는 복수의 드로워(Drawer)가 나타난다. 이외에도, 사용자정의(My Definitions)드로워가 나타난다.
3-1. 폰넘버버튼(ButtonPhoneNumber)을 터치하여 클릭이벤트가 발생하면 텍스트블록에 기재된 번호를 전화번호로 설정하고, 자동으로 전화를 거는 기능블록을 가진 폰넘버버튼의 핸들러에 대해 설명한다.
3-1-1. 사용자블록(My Blocks)탭의 폰넘버버튼(ButtonPhoneNumber)드로워를 열고 폰넘버버튼의 클릭이벤트핸들러(when ButtonPhoneNumber.Click do)를 선택하여 작업영역으로 드래그한다.
3-1-2. 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text text)를 선택하여 작업영역으로 드래그하고 텍스트블록내의 우측하부에 위치한 text를 더블클릭하여 전화번호를 기재한다.
참고사항: 전화번호를 기재하기 위해 텍스트블록(text text)을 사용하지 않고 숫자블록(number 123)을 사용하여 123을 0312441443을 기재하여 전화번호로 사용하면 앞에 숫자 0을 생략한312441443의 번호로 전화를 걸게 되어 통화할 수 없다.
3-1-3. 사용자블록(My Blocks)탭의 폰콜(PhoneCall1)드로워를 열고 폰콜의 폰넘버설정블록(set PhoneCall1.PhoneNumber to)을 선택하여 작업영역으로 드래그하고, 이 블록의 소켓(to)에 상기 텍스트블록을 플러그인한다.
상세하게는, 소망의 전화번호를 전화걸기의 전화번호로 설정한다.
3-1-4. 또한, 폰콜(PhoneCall1)드로워를 열고 폰콜의 전화걸기 호출블록(call PhoneCall1.MakePhoneCall)을 선택하여 작업영역에 드래그한다.
상세하게는, 전화번호버튼의 클릭이벤트시에, 상기와 같이 준비한 정보자료를 바탕으로 전화걸기를 실행하도록 하는 폰콜의 전화걸기기능을 호출한다.
3-1-5. 이와 같이 조합한 기능블록을 상기 폰넘버버튼의 클릭이벤트핸들러(when ButtonPhoneNumber.Click do)의 섹션(do)에 놓는다. 따라서, 버튼을 클릭하면 이벤트가 발생하여 전화번호를 설정하고 전화를 건다.
3-2. 브로그버튼(ButtonBlog)을 터치하여 이벤트가 발생하면, 텍스트블록에 기재된 뷰의 액션을 화면전환의 액션으로 설정하고, 인터넷주소를 화면전환의 정보로서 설정하고, 이와같이 설정된 정보에 의거하여 액티비티스타터에 의해 화면전환을 개시하는 브로그버튼의 핸들러에 대해 설명한다.
3-2-1. 사용자블록(My Blocks)탭의 브로그버튼(ButtonBlog)드로워를 열고 브로그버튼의 클릭이벤트핸들러(when ButtonBlog.Click do)를 선택하여 작업영역으로 드래그한다 .
3-2-2. 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text text)를 2회 선택하여 작업영역으로 드래그하고 텍스트블록내의 우측하부에 위치한 text를 더블클릭하여
3-2-3. 사용자블록(My Blocks)탭의 액티비티스타터(ActivityStarter1)드로워를 열고 액티비티스타터의 액션 설정블록(set ActivityStarter1.Action to) 및 액티비티스타터의 Uri 데이터 설정블록(set ActivityStarter1.DataUri to)를 순차적으로 선택하여 작업영역으로 각각 드래그한다. 각각의 블록의 소켓(to)에 해당 텍스트블록을 플러그인한다.
상세하게는, 인텐트라는 툴을 통하여 뷰의 액션을 화면전환의 액션으로 설정하고 인터넷주소를 뷰의 정보로 설정한다. 다시 말하면 브라우저를 런칭하여 인터넷주소를 브라우징하는 정보를 준비하는 과정을 말한다.
3-2-4. 또한, 상기 액티비티스타터(ActivityStarter1)드로워를 열고 액티비티스타터의 스타트액티비티 호출블록(call ActivityStarter1.StartActivity)을 작업영역에 드래그한다.
상세하게는, 브로그버튼의 클릭이벤트시에, 상기와 같이 준비한 정보자료를 바탕으로 화면전환을 개시하여 실행하도록 하는 액티비티스타터를 호출한다.
3-2-5. 이와 같이 조합한 기능블록을 상기 브로그버튼의 클릭이벤트핸들러(when ButtonBlog.Click do)의 섹션(do)에 놓는다. 따라서, 브로그버튼의 클릭시에 이벤트를 발생하여 브라우저를 런칭하여 인터넷주소를 브라우징한다.
3-3. 페이스북버튼(ButtonFacebook)을 터치하여 이벤트가 발생하면, 브로그버튼과 마찬가지로,텍스트블록에 기재된 뷰의 액션을 화면전환의 액션으로 설정하고, 인터넷주소를 화면전환의 정보로서 설정하고, 이와같이 설정된 정보에 의거하여 액티비티스타터에 의해 화면전환을 개시하는 페이스북버튼의 핸들러에 대해 설명한다.
3-3-1. 사용자블록(My Blocks)탭의 페이스북버튼(ButtonFaceBook)드로워를 열고 페이스북버튼의 클릭이벤트핸들러(when ButtonFacebook.Click do)를 선택하여 작업영역으로 드래그한다.
3-3-2. 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text text)를 2회 선택하여 작업영역으로 드래그하고 텍스트블록내의 우측하부에 위치한 text를 더블클릭하여android.intent.action.VIEW 및 http://on.fb.me/e333fP를 각각 기재한다.
3-3-3. 사용자블록(My Blocks)탭의 액티비티스타터(ActivityStarter1)드로워를 열고 액티비티스타터의 액션 설정블록(set ActivityStarter1.Action to) 및 액티비티스타터의 Uri 데이터 설정블록(set ActivityStarter1.DataUri to)를 순차적으로 선택하여 작업영역으로 각각 드래그한다. 각각의 블록의 소켓(to)에 해당 텍스트블록을 플러그인한다.
상세하게는, 인텐트라는 툴을 통하여 정보로서 뷰의 액션을 화면전환의 액션으로 설정하고 인터넷주소를 뷰의 정보로 설정한다. 다시 말하면 브라우저를 런칭하여 인터넷주소를 브라우징하는 정보를 준비하는 과정을 말한다.
3-3-4. 또한, 상기 액티비티스타터(ActivityStarter1)드로워를 열고 액티비티스타터의 스타트액티비티 호출블록(call ActivityStarter1.StartActivity)을 작업영역에 드래그한다.
상세하게는, 페이스북버튼의 클릭이벤트시에, 상기와 같이 준비한 정보자료를 바탕으로 화면전환을 개시하여 실행하도록 하는 액티비티스타터를 호출한다.
3-3-5. 이와 같이 조합한 기능블록을 상기 페이스북버튼의 클릭이벤트핸들러(when ButtonBlog.Click do)의 섹션(do)에 놓는다. 따라서, 페이스북버튼의 클릭시에 이벤트를 발생하여 브라우저를 런칭하여 인터넷주소를 브라우징한다.
3-4. 참고로서, 전화걸기 및 액티비티의 런칭을 블록의 말풍선을 사용하여 확인한다.
3-4-1. 에뮬레이터 또는 안드로이드폰을 에디터블록창에 접속한 상태에서, 폰콜의 전화걸기 호출블록(call PhoneCall1.MakePhoneCall) 및 액티비티스타터의 스타트액티비티 호출블록(call ActivityStarter1.StartActivity)위에 각각 순차적으로 마우스커서를 올려놓고 마우스의 오른쪽버튼을 클릭하면 세로메뉴가 나타난다.
3-4-2. 이 세로메뉴에서 메뉴(watch)를 선택하여 클릭하면 블록의 좌측상부에 백색의 사각형이 형성되고, 이 사각형을 더블클릭하면 말풍선이 나타난다.
3-4-3. 안드로이드폰에 해당 버튼을 터치하여 이벤트가 트리거되면 전화걸기가 시작되거나 소망의 웹브라우저가 런칭되어 소망의 블로그 또는 페이스북을 브라우징한다.
3-4-4. 한편, 전화걸기와 웹브라우저의 런칭이 시작되면서, 말풍선에는 “Done.”라고 하는 문자가 나타난다.
3-4-5. 라이브테스트가 완료되면, 폰콜의 전화걸기 호출블록(call PhoneCall1.MakePhoneCall)및 액티비티스타터의 스타트액티비티 호출블록(call ActivityStarter1.StartActivity)위에 각각 순차적으로 마우스커서를 올려놓고 마우스의 오른쪽버튼을 클릭하면 세로메뉴가 나타난다. 이 세로메뉴에서 메뉴(Stop Watching)를 선택하여 클릭하면 말풍선이 사라진다.
참고사항: 상기 조합블록은 비교적 단순하기 때문에, 상기 라이브테스트는 하지 않아도 된다. 그러나, 경우에 따라서는 상기 설명한 바와 같은 요령으로 테이터의 흐름을 추적하면 앱완성에 결정적인 도움을 준다.
4. 지금까지의 설명한 블록을 종합하여 나타내면 다음의 스크린샷과 같다.
5. 요약
기초부터 시작하지 않고 실생활에 유용하다고 생각되는 자기소개용 어플을 소개하였다. 전화를 거는 기능블록 및 블로그 또는 페이스북 등의 인터넷에 액세스하는 스타트액티비티의 주용기능을 배웠다.
참고사항 1: 초보자에게는 설명이 어려울 수 있다. 하고 싶은 의욕만 있다면 설명을 전부 무시하고 디자이너창에서 구성요소를 따라하고, 블록에디터창에서 블록을 끌어다 놓으면 된다. 성취감을 느낄수 있다.
참고사항 2: 그래도 어려우면, 제 3 장 자기소개서 앱 만들기 1 (준비단계 및 학습소개)에 첨부된 압축파일을 풀지말고 제 2 장 앱인터의 레이아웃 1 (사용자 프로젝트창)의 4-3에서 설명한 업로드 소스버튼난을 참조하여 업로드하면 디자이너창 및 블록에디터창에 지금 까지 복잡하게 설명한 블록의 조합을 볼수 있다. 이를 참고하면 쉽게 해결될 수 있다.
