앱인벤터 이미지선택버튼 컴포넌트

 

앱인벤터 이미지선택버튼 컴포넌트

 

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

이번 시간에는 미디어에서 이미지선택버튼 컴포넌트에 대해 이해하고 실습을 하고자 한다. 이미지선택버튼 컴포넌트는 이미지를 선택하는 기능을 제공한다.

 

. 이미지선택버튼 컴포넌트

미디어 팔레트에서 이미지선택버튼 컴포넌트는 스마트폰에 사진들을 선택하는 기능을 제공하는 컴포넌트이다.

 

팔레트

이미지선택버튼 컴포넌트는 팔레트에 “미디어”에 있다. 이미지선택버튼 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 본 예제에서는 이미지선택버튼을 클릭하여 여러 개의 이미지들 중에서 하나의 이미지를 선택하고, 이미지 컴포넌트에 선택한 이미지를 지정하여 화면에 보여줄 것이다.

 

뷰어

추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.

 

이미지선택버튼과 이미지 컴포넌트를 추가하여 화면을 설계하였다.

 

앱인벤터 이미지선택버튼 컴포넌트 화면 예시

  

컴포넌트

컴포넌트에는 Screen1아래에 “이미지선택버튼1”을 클릭하여 이미지를 선택한 후에, 선택한 이미지를 이미지 컴포넌에 지정하여 화면에 보여줄 것이다.

 

 

이미지선택버튼 속성값

카메라 속성값은 별도로 없다.

 

 

 

이미지 속성값

이미지 속성값에는 이미지의 크기를 지정하기 위해 너비는 ‘부모 요소에 맞추기’, 높이는 ‘300픽셀’로 지정하였다.

 

앱인벤터 이미지선택버튼 컴포넌트 속성값

 

이미지선택버튼 컴포넌트 블록

 

 

이미지선택버튼 컴포넌트 이벤트 블럭들

 

이미지선택버튼 컴포넌트 이벤트 블럭에는 선택후에, 선택전에, 포커스를받았을때, 포커스를잃었을때, 처티다운했을때, 터치업했을때 이벤트가 발생하였을 때 호출되는 블럭들이다.

 

앱인벤터 이미지선택버튼 컴포넌트 이벤트 블럭

 

 

 

예로 이미지를 선택한 후에, 이미지 컴포넌트의 사진에 선택한 항목을 지정하는 블럭 코드를 만들어보았다.

 

앱인벤터 이미지선택버튼 컴포넌트 선택후에 블럭

 

   

이미지선택버튼 컴포넌트 호출 블럭들

 

. 이미지선택버튼 컴포넌트 열기 블럭

 

버튼을 클릭했을 때, 이미지 폴더의 이미지를 열기 위해 호출하는 블럭이다.

 

앱인벤터 이미지선택버튼 컴포넌트 열기 블럭

 

이미지선택버튼 컴포넌트 가져오기/지정하기 블럭들

 

. 이미지선택버튼 컴포넌트 이미지 블럭

 

사용자가 선택한 이미지이거나 이미지값을 지정한다.

 

앱인벤터 이미지선택버튼 컴포넌트 이미지 블럭

 

 

. 이미지선택버튼 컴포넌트 선택된항목 블럭

 

사용자가 선택한 선택한 항목값을 가져온다.

 

앱인벤터 이미지선택버튼 컴포넌트 선택된항목 블럭

 

 

  

지금까지 앱인벤터 이미지선택버튼 컴포넌트의 블럭들에 대해 살펴보았다.

 

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.