앱인벤터-목록선택버튼을 활용하는 예제

앱인벤터-목록선택버튼 컴포넌트를 활용하는 예제

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.

이번 시간에는 목록선택버튼 컴포넌트의 속성값과 블럭들을 활용하는 예제를 실습한다.

본 예제는 목록선택버튼 컴포너트를 활용하여 사계절, 즉 봄, 여름, 가을, 겨울 목록을 선택하면, 해당하는 계절의 꽃이 이미지 컴포넌트에 보이게 하는 예졔이다. 주요 컴포넌트는 목록선택버튼과 이미지 컴포넌트이다.

. 목록선택버튼 컴포넌트 : 목록값으로 봄, 여름, 가을, 겨울 값을 설정하였다.

이미지 컴포넌트 : 너비는 부모요소에 맞추기, 높이는 300pixel로 설정하였다.

위의 컴포넌트를 팔레트에서 drag&drop하여 배치한 결과의 화면이다.

목록 선택버튼 컴포넌트의 요소인 봄, 여름, 가을, 겨울 목록 중에서 하나를 선택하면, 아래의 이미지 컴포넌트에 계절에 맞는 이미지를 설정해주는 간단한 프로그램이다.

본 프로그램을 통해, 목록선택버튼 컴포넌트를 활용하는데 도움이 되고, 조건문을 통해 이미지 등을 설정하는 방법을 학습할 수 있다.

* 미디어 파일 올리기

spring.jpg, summer.jpg, fall,jpg, winter.jpg 파일을 www.unsplash.com에서 서 검색해서 다운로드한 파일들이다. 이미지 크기가 큰 것은 올릴 수 없으니 3MG 이하의 파일크기를 올려주세요

목록선택버튼의 요소값을 앱이 시작이 되었을 때 요소값을 목록선택버튼의 요소값에 설정한다.

요소값은 리스트로 관리가 되고 설정이 된다.

본 예제에서는 '목록요소' 리스트 변수를 정의하였다.

스크린이 초기화할 때의 블럭은 아래와 같다.

먼저 '목록요소' 리스트에 네개의 항목 값 봄, 여름, 가을, 겨울 값을 추가하였다.

그리고 목록선택버튼 요소값에 목록요소 리스트를 설정하였다.

. 목록선택버튼에서 선택후에 이벤트를 받는 블럭이 '선택후에' 블럭이다. 사용자가 사계절 목록중에 봄, 여름, 가을, 겨울 중에 하나를 선택하면 선택한 값을 판단하여 이미지 사진에 업로드한 이미지를 설정하면 된다.

목록선택버튼 컴포넌트 예제 초기화면이다.

목록선택버튼의 텍스트에 '계절을 선택하세요'를 설정하였다.

목록선택버튼을 클릭하면 아래와 같은 화면이 표시된다.

사용자가 가을을 선택하면 이미지 컴포넌트에 가을 이미지가 표시된다. 본 예제에서는 가을꽃인 해바라기를 예제로 설정하였다.

지금까지 목록선택버튼 컴포넌트를 활용하는 예제를 실습해보았다. 블록코딩에서 목록선택의 요소값을 처리하는 방법을 학습하였고, 리스트 변수를 정의하고 리스트에 항목을 추가하는 실습을 하였다. 또한 목록선택버튼 컴포넌트의 요소값에 리스트 변수를 설정함을 학습하였다.

조금씩 다양한 컴포넌트를 활용하며 예제를 실습하다 보면 앱인벤터 코딩을 자연스럽에 익히고 코딩의 능력이 향상될 것이다.

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

Just Do It!!!

Just Drag&Drop It!!!

감사합니다.