한국어

Programming

twin 주소복사
조회 수 2783 추천 수 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. [앱인벤터2] 말하는 Hello World 앱

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

    Date2018.08.27 Bytwin Views3090
    Read More
  3. [앱인벤터] 리스트를 이용하여 녹음이 되는 실로폰

    Date2018.08.27 Bytwin Views5350
    Read More
  4. [앱인벤터] Sound를 이용한 실로폰 앱

    Date2018.08.27 Bytwin Views985
    Read More
  5. [앱인벤터] 내가 만든 앱을 구글 플레이스토어에 등록하는 방법

    Date2018.08.27 Bytwin Views720
    Read More
  6. [앱인벤터] App Inventor 2 Tips

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

    Date2018.08.27 Bytwin Views839
    Read More
  8. [앱인벤터] ActivityStarter 액티비티 스타터를 사용한 여행앱

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

    Date2018.08.27 Bytwin Views1035
    Read More
  10. [앱인벤터] Camera & Share, 사진찍고 메모해서 공유하기

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

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

    Date2018.08.27 Bytwin Views1322
    Read More
  13. [앱 인벤터] 캔버스와 이미지 스프라이트, 두더지잡기 게임(Molemash)

    Date2018.08.27 Bytwin Views2655
    Read More
  14. [앱인벤터] 방향센서와 나침반

    Date2018.08.27 Bytwin Views1046
    Read More
  15. [앱인벤터2] 캔버스와 이미지스프라이트, Bouncing Ball 예제

    Date2018.08.27 Bytwin Views1122
    Read More
  16. [앱인벤터2] 두 개의 스크린 사이의 값 전달, 구구단 예제

    Date2018.08.27 Bytwin Views4223
    Read More
  17. [앱인벤터2] Slider를 사용하는 타이머

    Date2018.08.27 Bytwin Views2186
    Read More
  18. [앱 인벤터2] 알람시계

    Date2018.08.27 Bytwin Views3270
    Read More
  19. [앱 인벤터2] 위치센서와 문자 보내기, SOS 앱

    Date2018.08.27 Bytwin Views2555
    Read More
  20. [앱인벤터2] 아날로그 시계 만들기

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