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

앱인벤터 텍스트박스 컴포넌트

by flycoding 2021. 12. 20.
반응형

  앱인벤터 텍스트박스 컴포넌트

 

앱인벤터의 컴포넌트들 중에 텍스트박스 컴포넌트는 사용자가 문자를 입력할 때 사용하는 사용자인터페이스이다.

 

 

. 앱인벤터 텍스트박스 컴포넌트

스마트폰을 사용하다 보면, 문자나 숫자를 입력하는 사용자 인터페이스이다. 예로 검색어를 입력한다거나 간단한 숫자나 문자 등을 사용자가 입력할 때 텍스트박스 컴포넌트를 사용한다.

 

 

팔레트

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

본 예제는 텍스트박스의 탭할 때마다 아래 레이블에 값을 바꾸어주는 간단한 예제이다.

 

 

뷰어

 

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

하기 예제는 텍스트박스 컴포넌트 2, 레이블 컴포넌트 2개와 버튼 컴포넌트 1개를 수평배치 레이아웃에 추가하여 간단한 더하기 프로그램을 작성해 보았다.

 

앱인벤터 텍스트박스 컴포넌트 삽입 예시화면

 

앱인벤터의 텍스트박스 컴포넌트의 속성값

 

앱인벤터 텍스트박스 컴포넌트의 속성값으로는 힌트, 여러줄, 숫자만, ReadOnly 속성값이 있다.

앱인벤터 텍스트박스 컴포넌트 속성값

 

 

힌트는 텍스트박스에 어떠한 값을 입력할 것인지 힌트를 준다. 입력하기 전에 텍스트박스에 힌트를 표시해준다.

 

텍스트박스 컴포넌트 덧셈 디자인 화면

 

 

앱인벤터 텍스트박스 컴포넌트의 여러줄속성값은 입력받는 문자나 숫자가 1줄 이상일 경우에 설정한다.

숫자만속성값은 텍스트박스 컴포넌트에 숫자만 입력받을 경우엔 숫자만을 체크한다.

ReadOnly 속성값은 텍스트박스 컴포넌트를 읽기전용으로 설정할 것인지 체크한다.

 

 

. 앱인벤터 텍스트박스 컴포넌트의 블럭들

 

. 앱인벤터 텍스트박스 컴포넌트의 블럭중 이벤트 블럭들

앱인벤터 텍스트박스 컴포넌트의 이벤트 블럭은 포커스를받았을때’, ‘포커스를잃었을때이벤트 블럭이 있다. 만일 사용자가 텍스트박스가 선택되었을 때, 혹은 선택을 해제하였을 때 이벤트가 발생하면 해당 블럭이 실행이 된다.

앱인벤터 텍스트박스 컴포넌트 포커스를받았을때

 

. 앱인벤터 텍스트박스 블럭중 호출 블럭들

앱인벤터 텍스트박스 컴포넌트 중 호출 블럭은 2개가 있다. ‘키보드화면숨기기포커스요청하기블럭이다.

키보드화면숨기기블럭은 텍스트박스 입력상태에서 키보드 화면을 숨기게 한다.

 

앱인벤터 텍스트박스 컴포넌트 키보드화면숨기기 블럭

  

포커스요청하기블럭은 텍스트박스의 포커스가 활성화를 요청하는 블럭이다.

 

앱인벤터 텍스트박스 컴포넌트 포커스요청하기 블럭

 

. 앱인벤터 텍스트박스 블럭중 가져오기/지정하기 블럭들

 

. 힌트 블럭

앱인벤터 텍스트박스 컴포넌트의 힌트블럭은 텍스트박스에 어떠한 값을 입력할 것인지 암시적으로 텍스트박스에 표시해주는 블럭이다.

 

앱인벤터 텍스트박스 컴포넌트 힌트 블럭

  

. 여러줄 가져오기/지정하기 블럭

앱인벤터 텍스트박스 컴포넌트의 여러줄 블럭은 텍스트박스의 입력할 수 있는 줄을 한 줄에서 여러 줄로 변경하며 값은 참, 거짓값을 설정할 수 있다.

 

앱인벤터 텍스트박스 컴포넌트 여러줄 블럭

 

. 숫자만 가져오기/지정하기 블럭

앱인벤터 텍스트박스 컴포넌트에서 숫자만블럭은 텍스트박스의 입력할 수 있는 값을 숫자로 제한하는 것이다.

 

앱인벤터 텍스트박스 컴포넌트 숫자만 블럭

  

. ReadOnly 가져오기/지정하기 블럭

앱인벤터 텍스트박스 컴포넌트에서 ‘ReadOnly’ 블럭은 텍스트박스를 읽기 전용으로 설정하는 블럭이다. 설정하는 값은 참, 거짓값을 사용할 수 있다.

 

앱인벤터 텍스트박스 컴포넌트 ReadOnly 블럭

  

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

 

 

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

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.

 

 

 

 

반응형

댓글