지금까지 WebViewer의 사용방법을 알아보았습니다. 이제 WebViewer를 사용하여 앱을 만들어 봅시다! 다시 시작해야 한다니...
그래도 지금까지 WebViewer를 사용해 보신 것이 피가 되고 살이 되어 앞으로의 내용이 좀 더 이해가 쉬울겁니다! 다 여러분을 위해 그런거야~ 내 맘 알쥐? 뿌뀨뿌뀨 (죄송합니다. 사과 드립니다ㅜㅜ)
검색어를 입력할 [TextBox]
검색을 명령할 [Button]
웹 페이지를 띄우는 [WebViewer]
구성요소를 배열할 [HorizontalArrangement] Layer가 필요합니다.
① 바로 전 페이지에서 사용해본 것들 이구요.
② 구성요소를 가로로 배치하기 위해 [HorizontalArrangement] Layout을 사용합니다. ③ Compoents에 두 개의 HorizontalArrangement가 생긴 것을 알 수 있습니다.
준비된 두 개의 [Layout] 중 위쪽 Layout에 검색어를 입력할 [TextBox]와, 한방에 검색어 삭제 버튼이 될 [Button]을 배치합니다.
아래 쪽Layout에는 Naver, Google, Daum, Nate의 버튼이 될 4개의 [Button]을 배치합니다.
[Button5]를 배치할 때 화면에서는 보이지 않지만 Components 구역이 아래 사진과 같이 들여쓰기가 되어 있다면 배치가 잘 된 것입니다.
(아직 앱인벤터의 디자인 부분과 실제 앱에서 보이는 부분이 많이 다릅니다. 제대로 만든다면 실제 앱에서는 정상적으로 보이기 때문에 걱정하실 필요 없습니다.)
배치된 Components의 이름을 바꿉시다.
현재와 같은 이름은 각각이 무슨 역할을 하는지 명확하지 않기 때문에 Blocks에서 각각의 역할을 설계 할 때에 매우 혼란스럽습니다. 우리는 그 혼란을 막기 위해서 각 구성요소가 하는 일을 잘 알 수 있도록 이름을 수정하겠습니다.
아래 그림과 같이 [Components]의 이름을 바꿉시다.
Block 설계에 필요한 이름을 바꿨다면 이제 실제 보이는 구성요소의 이름(Button에 표시될 이름)을 바꿔보도록 합시다.
이는 각 구성요소의 특징을 설정하는 Properties 영역에서 바꿀 수 있습니다. 이미 눈치채고 있었나요? 역쉬!! 다 제가 잘..... 아니에요~ㅋㅋ!!
Viewer 또는 Components에서 구성요소를 클릭하여 [Properties]영역에서 [Text]항목에 쓰여있는 Text for Button1을 지우고 “삭제”를 입력합니다.
Viewer영역의 Delete버튼에 삭제라고 표시된 것을 확인할 수 있습니다. 나머지 구성요소의 이름도 아래 사진과 같이 바꿔주세요.
검색 기능을 만들기 전에 웹페이지에서 검색 명령을 어떻게 내리는지 알아보도록 하겠습니다.
흠... 알고 싶지 않나요? 제발...알고 싶어 해주세요ㅜㅜ 저희가 일단 알려줄테니 잠깐 따라해보세요~
사용하시는 웹 브라우저를 켜고 Naver에 접속한 다음 “dreamcode”를 검색해 봅시다.
주소창에 뜻을 알 수 없는 글자들이 나오는 것을 확인 할 수 있습니다. 그런데 주소를 잘 살펴보면 주소 어딘가에 우리가 검색했던 dreamcode가 있는 것을 확인 할 수 있습니다.
이제 주소창에서 dreamcode 부분을 삭제하고 원하는 검색어를 입력한 뒤 엔터키를 쳐 봅시다. (영어로 입력하는 것을 추천합니다. 간혹 검색 페이지에서 한글로 검색 시 한글을 알아 보지 못하는 부호로 바꾸는 경우가 있기 때문입니다.)
주소창에서 쓰인 dreamcode부분을 삭제하고 원하는 검색어를 입력한 후 엔터키를 쳐도 검색이 되는 것을 확인할 수 있습니다.
즉 Naver에서는 검색을 명령할 때 아래 사진의 [보라색 부분] + [검색어] + [초록색 부분]으로 검색을 명령하는 것을 알 수 있습니다.
오오! 이런 규칙이 있었다니!! 신기하죠??? 제발 신기해 해주세요.ㅋㅋ 저희가 알려주는건 알면 다 좋다니깐요~
다른 검색사이트는 아래와 같은 규칙을 사용합니다.
| 네이버 | http://search.naver.com/search.naver?where=nexearch&query= |
| 검색어 | |
| &sm=top_hty&fbm=1&ie=utf8 | |
| 구글 | https://www.google.co.kr/?gfe_rd=cr&ei=E4cZU9inHIqakgXy-oHoDA#newwindow=1&q= |
| 검색어 | |
| 다음 | http://search.daum.net/search?w=tot&DA=YZRR&t__nil_searchbox=btn&sug=&sq=&o=&q= |
| 검색어 | |
| 네이트 | http://search.daum.net/nate?thr=sbma&w=tot&q= |
| 검색어 |
혹시 스스로 검색하여 검색 규칙을 확인했을 때 위의 표와 다른 결과가 나오더라도 걱정하지 마세요. 검색 요청시 사용한 브라우저, 시기 등에 따라 규칙이 바뀔 수 있습니다.
검색 명령법을 알았으니 이제 다시 App Inventor로 돌아와서 기능을 설계해봅시다.
Blocks 버튼을 클릭하여 배치한 구성요소들의 기능을 설계합시다.
① [Naver]버튼 기능을 설계하기 위해 [when Naver.Click] 블록 안에 [call WebViewer1.GoToUrl] 블록을 배치합니다.
② Blocks 구역의 [Text]를 클릭하여 [join]블록을 아래 그림과 같이 배치합니다.
세 등분으로 나뉜 Naver 검색규칙을 하나로 만들어 전달하기 위해 아래 그림과 같이 join블록의 네모 박스를 클릭하여 조합할 수 있는 블록을 3개까지 확장합니다.
그리고 빈 텍스트를 조립한 후 3등분 된 검색 규칙 중 “첫 번째 검색 규칙”을 빈칸 안에 써 넣습니다.
이제 3등분 된 검색 규칙 중 2번째인 “검색어”를 입력해야 합니다. 검색어는 위에서처럼 Text로 지정해 줄 수 없습니다. 검색을 할 때마다 바뀌기 때문입니다.
그렇다면 어떻게??? 검색어는 사용자가 [SearchTextBox]에 입력하기 때문에 입력된 값을 가져오면 되겠죠!!!
Blocks영역에 [SearchTextBox]를 클릭하여 [SearchTextBox.Text]를 드래그 하여 아래 그림의 자리에 조립합니다. 이제 SearchTextBox에 입력된 글자가 검색어 영역에 들어갈 수 있습니다.
마지막으로 빈 [Text] 블록을 [join]블록의 세번째 빈칸에 맞춘 후 세등분 된 “마지막 검색 규칙”을 입력합니다.
입력창에 검색어를 입력하고 Naver버튼을 클릭하면 Naver에서 검색을 한 결과를 보여주는 동작 설계를 완료하였습니다.
방금 한 것과 같이 Google, Daum, Nate 버튼을 눌렀을 때 작동하는 동작을 설계해 보세요.
완성된 블록 사진은 아래에 있으니 참고하세요.
자 이제 Connect 또는 Build를 하여 잘 동작하는지 테스트를 해 봅시다!
제발... 잘 동작하기를! 만약 잘 동작하지 않는다면 튜토리얼 또는 소스파일 WebViewerVD.aia를 import하여 비교해 보세요. 질문이 있으시다면 댓글을 통해 질문해 주세요~