앱인벤터 이메일선택 컴포넌트

앱인벤터 이메일선택 컴포넌트

 

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

앱인벤터 이메일선택 컴포넌트는 텍스트박스 컴포넌트와 유사하다. 만약 사용자가 텍스트박스에 연락처의 이메일주소나 이름을 입력을 시작한다면, 이메일선택 컴포넌트는 일부 입력한 연락처의 완전한 이메일주소를 드롭다운 메뉴 형태로 보여준다. 만일 일부 입력한 연락처의 이메일주소가 여러개인 경우 드롭다운이 나타날 때 몇 초 이상 걸릴 수 있다.

만일 텍스트 속성값이 초기 비어 있다면, 힌트 속성값의 내용이 텍스트 박스 안에 희미하게 보여질 것이다.

일반적으로 텍스트박스는 버튼 컴포넌트와 함께 사용이 되는데, 사용자가 텍스트 박스에 이메일 주소를 완전히 입력을 하였을 때, 버튼을 클릭하여 이벤트를 발생시켜 특정한 행동을 하게 한다.

 

이메일선택 컴포넌트

팔레트의 소셜 부분에서 이메일 컴포넌트는 보이지 컴포넌트로, 뷰어에 drag&drop하면 화면에는 텍스트박스 모양의 컴포넌트가 표시된다.  이메일선택 컴포넌트, 레이블 2개 및 수평배치 1개의 컴포넌트를 활용하여 간단한 앱을 작성할 것이다. 이메일선택 컴포넌트를 통해 선택된 이메일주로를 레이블 컴포넌트에 보여주는 앱을 만들어보자.

팔레트

이메일선택 컴포넌트는 '소셜'에 있다. 이메일선택 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다.

 

뷰어

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

뷰어에는 보이는 컴포넌트로 이메일선택 컴포넌트 1과 레이블 2개 및 수평배치 컴포넌트 1개로 구성되어 있다.

 

컴포넌트

 

컴포넌트에는 Screen1아래에 이메일선택 컴포넌트, 레이블 컴포넌트 그리고 수평배치로 구성된다.

- 이메일선택 컴포넌트

- 레이블 2개 컴포넌트

- 수평배치 1개 컴포넌트

 

앱인벤터 이메일선택 컴포넌트 활용 예제

 

이메일선택 컴포넌트 속성값

이메일선택 컴포넌트 속성값에는 배경색, 활성화, 글꼴굵게, 글꼴크기, 글꼴서체, 높이, 너비, 힌트, 텍스트, 텍스트정렬, 텍스트색상, 보이기여부 속성값이 있다. 

본문에서는 이메일선택에 특화한 속성값으로 힌트에 관련해서 설명한다. 

힌트 속성값은 이메일선택 텍스트가 비어 있을 경우, 희미하게 사용자에게 보여주는 텍스트를 입력한다.

 

앱인벤터 이메일선택 컴포넌트 속성값

 

이메일선택 컴포넌트 이벤트 블럭들

이메일선택 컴포넌트 이벤트 블럭은 포커스를받았을때, 포커스를잃었을때 이벤트 블럭이 있다.

 

. 이메일선택 컴포넌트 포커스를받았을때 블럭

이메일선택 컴포넌트에 포커스 되었을때 호출되는 이벤트 블럭이다.

 

앱인벤터 이메일선택 컴포넌트 포커스를받았을때 블럭

 

. 이메일선택 컴포넌트 포커스를잃었을때 블럭

이메일선택이 포커스에서 포커스를 상실하였을때 호출되는 이벤트 블럭이다.

 

앱인벤터 이메일선택 컴포넌트 포커스를잃었을때 블럭

 

이메일선택 컴포넌트 호출 블럭들

연락처선택버튼 컴포넌트에 호출 블럭은 포커스요청하기 블럭이 있다.

 

. 이메일선택 컴포넌트 포커스요청하기 블럭

현재 이메일선택 컴포넌트에 포커스를 요청하는 블럭이다.

 

앱인벤터 이메일선택 컴포넌트 포커스요청하기 블럭

 

이메일선택 컴포넌트 가져오기/지정하기 블럭들

이메일선택 컴포넌트 중 가져오기/지정하기 블럭은 배경색, 활성화, 글꼴크기, 높이, 높이비율, 힌트, 텍스트, 텍스트색상, 보이기여부, 너비, 너비퍼센트 등의 블럭이 있다. 이 블럭들 중 이메일선택 컴포넌트에서 특이한 블럭은 '힌트'블럭이다. 힌트블럭도 텍스브박스 컴포넌트에서 다루었지만, 여기서 한번 더 다루기로 하였다.

 

. 이메일선택 컴포넌트 힌트 블럭

이메일선택 텍스트박스가 비어있는 경우, 사용자에게 입력할 내용을 힌트로 안내해 주어 편의성을 제공하는 블럭이다.

 

앱인벤터 이메일선택 컴포넌트 힌트 블럭

 

이외에 설명하지 않은 블럭은 공통적으로 사용하던 블럭들이다. 자세한 사항은 버튼 컴포넌트 블럭을 참고하면 감사하겠다.

 

이상으로 앱인벤터 이메일선택 컴포넌트 블럭에 대해 간략히 살펴보았다. 좀더 자세히 확인하기 싶으면, 이메일선택 앱을 통해 블럭들을 하나씩 사용해보면서 블럭의 활용 용도 등을 파악하면 좋을 것 같다. 눈으로 보는 것보다 직접 해보는게 여러모로 코딩하는데 이해하고 코딩 실력이 향상되는데 도움이 된다.

 

Just Do it!!!

Just Drag&Drop!!!

 

MagneticFieldSenso