본문 바로가기
앱인벤터/앱인벤터 컴포넌트

앱인벤터 스피너 컴포넌트

by flycoding 2021. 12. 9.
반응형

 

 앱인벤터 스피너 컴포넌트

 

앱인벤터의 컴포넌트들 중에 스피너 컴포넌트는 버튼 컴포넌트와 유사하다. 클릭할 경우에 미리 지정해 둔 항목들의 목록이 팝업으로 나타나며 사용자는 그 중에 하나의 항목을 선택할 수 있다. 주로 옵션을 선택할 때 사용된다.

 

 

. 앱인벤터 스피너 컴포넌트

스마트폰을 사용하다 보면, 버튼 모양으로 클릭을 하면 여러 항목 중에 하나를 선택하는 사용자인터페이스가 스피너 컴포넌트이다. 주로 여러 개의 값들 중에서 하나를 선택할 때 사용되는 사용자 인터페이스이다.

 

 

팔레트

앱인벤터의 스피너 컴포넌트는 팔레트에 사용자 인터페이스에 있다. 스피너 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 화면에 추가된다.

 

 

뷰어

 

아래 그림은 팔레트에서 스피너 컴포너트를 추가하여 뷰어에 나타난 화면이다.

하기 예제는 슬라이더 컴포넌트와 아래에 수평배치로 레이블 컴포넌트 2개를 삽입하여 수평배치하였다. 슬라이더를 움직이면 아래에 슬라이더 값을 출력하는 것이다.

 

앱인벤터 스피너 컴포넌트 화면예시

 

앱인벤터의 스피너 컴포넌트의 속성값

 

앱인벤터의 스피너 컴포넌트의 속성값은 아래와 같다.

스피너 컴포넌트 속성값으로는 요소문자열, 프롬프트, 선택된 항목 속성값이 있다.

스피너 컴포넌트의 요소문자열은 여러 개의 항목 값을 정의할 때 사용하는 속성값이다. 예제로 사계절에 , 여름, 가을, 겨울요소문자열을 설정하면 스피너에는 아래 그림과 같이 나타난다.

스피너 컴포넌트의 프롬프트(prompt)는 스피너 컴포넌트의 선택 팝업창의 제목을 설정한다.

스피너 컴포넌트의 선택된항목 속성값은 사용자가 여러개의 항목 중에 선택한 항목을 지정한다.

앱인벤터 스피너 컴포넌트 속성값

  

. 앱인벤터 스피너 컴포넌트의 블럭들

 

. 앱인벤터 스피너 블럭중 이벤트 블럭들

앱인벤터 스피너 컴포넌트의 이벤트 블럭은 선택후에가 있다. 사용자가 여러 항목 중에서 선택을 한 후에 선택후에블럭이 호출되며, ‘실행영역의 명령들이 실행된다.

 

앱인벤터 스피너 컴포넌트 선택후에 블럭

 

 

 

스피너 컴퍼넌트의 요소 항목값 , 여름 가을, 겨울중에서 하나를 선택하면 레이블에 선택한 요소 항목값을 표시한다.

 

앱인벤터 스피너 컴포넌트 선택후에 블럭 예시

  

. 앱인벤터 스피너 컴포넌트 블럭중 지정하기/가져오기 블럭들

 

. 프롬프트 블럭

프롬프트 블럭은 스피너 팝업창의 제목을 표시하는 블럭이다. 예로 사계절이라 설정하면 아래와 같이 출력이 된다.

 

앱인벤터 스피너 컴포넌트 프롬프트 블럭

 

. 선택된항목 블럭

스피너 컴포넌트에서 선택된항목 블럭은 사용자가 여러 항목 요소 중 하나를 선택하면 해당 선택된 항목을 지정하거나 가져오는 블럭이다.

 

앱인벤터 스피너 컴포넌트 선택된항목 블럭

 

 

. 선택된항목번호 블럭

스피너 컴포넌트에서 선택된항목번호 블럭은 사용자가 여러 항목 요소 중 하나를 선택하면 해당 선택된 항목번호르[ 지정하거나 가져오는 블럭이다.

 

앱인벤터 스피너 컴포넌트 선택된항목번호 블럭

 

 

 

나머지 블럭은 기본 블럭들이고 중복되어서 생략합니다. 이에 알고 싶으면 레이블이나 버튼 블럭을 참고해주시면 감사하겠습니다.

 

 

 

 

 

이상으로 알림 컴포넌트와 관련된 코딩블록을 리뷰해보았습니다. 여기서 다루지 않은 블록들은 기본적인 블록들로 레이블이나 버튼 컴포넌트의 블록에서 다루었기 때문에 해당 글을 참고하시면 감사하겠습니다.

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.

 

 

 

 

반응형

댓글