한국어

Programming

twin 주소복사
조회 수 95 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
ListPicker(목록선택) - 리스트의 내용을 보여주고 선택할 수 있게 하는 컴포넌트
BeforePicking과 AfterPicking 이벤트가 있다

앱인벤터에는 웹뷰어(WebViewer)라는 컴포넌트가 있습니다. 이것으로 웹 브라우저를 만들 수 있습니다. 오늘은 웹뷰어를 사용하여 내가 자주가는 웹사이트를 모아서 볼 수 있게 하는 앱을 만들어 보겠습니다. 

앱의 실행 화면은 다음 그림과 같습니다. 첫번째 화면은 앱이 실행되었을 때 맨 처음 화면에 네이버가 나오는 모습입니다. 앱 상단에 있는 버튼을 누르면 해당하는 사이트로 이동이 됩니다. 상단 오른쪽의 "기타" 는 모습이 버튼과 똑 같지만 ListPicker(한글 메뉴에서는 "목록선택")입니다. 이것을 클릭하면 두번째 창의 리스트가 나오고 거기에서 하나를 선택하면 맨 오른쪽 그림과 같이 해당 사이트가 표시됩니다.
 

<그림 1> 앱의 실행 화면

디자인을 살펴보겠습니다.

<그림2>에서와 같이 HorizontalArrangement를 스크린 상단에 두고 그 아래에 WebViewer를 배치합니다.

HorizontalArrangement 안에는 4개의 버튼과 1개의 ListPicker를 배치하고 각 컴포넌트의 Width를 20%로, FontSize=12로 바꿉니다. 버튼의 이름은 <그림2>를 참조하여 수정해주세요.
 

<그림 2> 디자인 창, 4개의 버튼과 1개의 ListPicker(그림에서는 오른쪽에 잘려서 잘 보이지 않음)

다음은 블록 코딩입니다.

앱이 실행되면(Screen1.Initialize) WebView1의 URL을 https://m.naver.com으로 맞추어 줍니다. 그리고 각 버튼이 클릭되었을 때 연결될 주소를 <그림 3>과 같이 해줍니다. 주소를 쓸 때 https:// 나 http:// 와 같은 프로토콜 이름이 포함된 전체 주소를 써주어야 합니다.

<그림 3> 블록코딩1

다음은 ListPicker를 사용하여 웹뷰어에 원하는 사이트를 표시해 주기 위한 코딩입니다. 
 

<그림 4> 블록코딩 2 - ListPicker의 사용

Webs와 URLs의 두개의 리스트를 만듭니다. Webs 리스트에는 <그림 1>의 가운데 그림처럼 리스트에 표시되는 웹사이트의 이름을 써줍니다. URLs 리스트에는 Webs 리스트와 같은 순서로 해당하는 주소를 써줍니다. 

ListPicker가 클릭되었을 때 표시되는 리스트는 Webs 리스트이므로 ListPicker1.BeforePicking 이벤트에 ListPicker1.Elements = Webs로 설정합니다. ListPicker1.AfterPicking 이벤트에는 선택된 인덱스에 해당하는 URLs 리스트의 요소를 WebViewer1.GoToURL 에 연결해주면 됩니다.

이번 앱을 통해 리스트와 함께 사용되는 ListPicker에 대해 충분히 이해하시기 바랍니다.


  1. 지도에 내 위치 표시하기

    Date2018.09.14 Bytwin Views869
    Read More
  2. 앱인벤터2를 이용한 피아노 어플 제작

    Date2018.08.27 Bytwin Views125
    Read More
  3. 앱인벤터2 강좌: fingerFind5 게임

    Date2018.10.12 Bytwin Views102
    Read More
  4. 앱인벤터2 강좌 : 숫자 암기 게임

    Date2018.10.12 Bytwin Views149
    Read More
  5. 앱인벤터 에뮬레이터 다운 설치

    Date2017.03.26 Bytwin Views589
    Read More
  6. 앱인벤터 아두이노 교재

    Date2017.03.18 Bytwins Views173
    Read More
  7. 앱인벤터 동영상 강좌 app123.kr

    Date2018.09.17 Bytwin Views52
    Read More
  8. 앱인벤터 교육사이트

    Date2017.09.28 Bytwin Views91
    Read More
  9. 스톱워치 만들기

    Date2018.09.14 Bytwin Views67
    Read More
  10. 색상 팔렛트 만들기

    Date2018.09.14 Bytwin Views45
    Read More
  11. 문자메시지 보내기

    Date2018.10.12 Bytwin Views67
    Read More
  12. 메모장 앱 만들기

    Date2018.10.12 Bytwin Views104
    Read More
  13. 드림코드

    Date2017.11.10 Bytwin Views56
    Read More
  14. 과제알림장 앱 만들기

    Date2018.10.12 Bytwin Views121
    Read More
  15. [앱인벤터]Player(플레이어)를 이용한 I have a dream 앱

    Date2018.08.27 Bytwin Views50
    Read More
  16. [앱인벤터] 카메라와 캔버스, PaintPot 앱

    Date2018.08.27 Bytwin Views96
    Read More
  17. [앱인벤터] 위치센서 LocationSensor를 이용한 거리측정기

    Date2018.08.27 Bytwin Views230
    Read More
  18. [앱인벤터] 예제 - 두더지 게임

    Date2018.09.11 Bytwin Views244
    Read More
  19. [앱인벤터] 에뮬레이터, 녹스(nox) 앱플레이어 사용법

    Date2018.08.27 Bytwin Views58
    Read More
  20. [앱인벤터] 성적계산기

    Date2018.08.27 Bytwin Views85
    Read More
Board Pagination Prev 1 2 3 Next
/ 3