앱인벤터-날짜선택버튼 컴포넌트

앱인벤터-날짜선택버튼 컴포넌트

 

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

이번 시간에는 날짜선택버튼 컴포넌트에 대해 이해하고 실습을 하고자 한다.

 

. 날짜선택버튼 컴포넌트

스마트폰에 날짜를 선택할 수 있는 버튼이다. 버튼을 클릭하면 연도, 월, 일을 선택하는 화면이 나온다. 원하는 연, 월, 일을 선택하고 확인을 누르면 날짜를 변경할 수 있다.

이제 버튼에서 설명했던 중복되는 속성의 값들은 생략할 것이다. 필요하면 버튼 컴포넌트 편을 참고하면 좋을 것 같다.

 

 

앱인벤터-버튼 컴포넌트

앱인벤터-버튼 컴포넌트

 

팔레트

날짜선택버튼 컴포넌트는 팔레트에 “사용자 인터페이스”에 있다. 날짜선택버튼 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 레이블이 추가된다. 

 

 

뷰어

 

아래 그림은 팔레트에서 버튼을 추가하여 뷰어에 나타난 화면이다.

 

날짜선택버튼 컴포넌트 추가 화면

 

 

컴포넌트

컴포넌트에는 Screen1아래에 “날짜선택버튼1”이라는 이름의 컴포넌트가 있다.

컴포넌트영역에서는 컴포넌트의 ‘이름바꾸기’와 ‘삭제’를 할 수 있다.

날짜선택번튼1 이름을 의미가 있는 이름으로 변경하는 것을 권장한다. 나중에 코딩할 때 날짜선택버튼의 이름을 보고 어떤 기능을 수행하는지를 파악할 수 있다. 또한 날짜선택버튼1 컴포넌트르 삭제할 경우에 아래 삭제 버튼을 클릭하면 된다.

 

 

날짜선택버튼 컴포넌트 속성

 

날짜선택버튼 속성

날짜선택버튼 속성은 기본적으로 버튼 속성과 동일하다. 아래 표는 날짜선택버튼의 속성을 표로 정리한 것이다.

속성	내용	예시
배경색	레이블의 배경색을 설정할 수 있다. . 없음, 검정, 파랑, 청록색, 기본값, 어두운 회색, 회색, 초록, 밝은 회색, 자홍색, 주황, 분홍, 빨강, 흰색, 노랑, 사용자지정	레이블 빨강색
활성화	버튼 클릭의 활성화 여부	활성, 비활성
글꼴굵게	글자를 굵게 설정한다.	레이블 글꼴굵게
글꼴이텔릭	글자를 이텔릭체로 바꾼다.(옆으로 누운 글씨모양)	레이블 글꼴이텔릭
글꼴크기	글자 크기를 설정할 수 있다.	레이블 글자크기 12
글꼴서체	글꼴에 기본값, 산 세리프, 세리프, 고정너비 서체가 있다.	레이블 글꼴서체 세리프
높이	레이블의 높이(세로)를 설정한다.
너비	레이블의 너비(가로)를 설정한다.
이미지	버튼의 이미지 파일을 설정한다.	이미지
모양	버튼의 모양을 설정한다.	기본값, 둥근모서리, 직사각형, 타원
피드백보이기	버튼을 클릭했을 때 시각적으로 옅어지게 보이도록 설정한다.	활성, 비활성화
텍스트	버튼의 텍스트를 입력한다.	지우기
텍스트 정렬	텍스트의 정렬 방식을 지정한다. . 왼쪽, 가운데, 오른쪽	왼쪽 가운데 오른쪽
텍스트 색상	텍스트의 색깔을 지정한다.	색깔은 배경색과 동일하다. (배경색 참조)
보이기	레이블 보이기 여부를 설정한다.	보이기/숨기기

 

 

날짜선택버튼 블록

 

날짜선택버튼의 언제블록

 

날짜선택버튼에는 5개의 이벤트가 발생한다. 날짜선택후에, 포커스를받았을때, 포커스를잃었을때, 터치다운했을때, 터치업했을때의 이벤트가 발행한다. 코딩은 이벤트가 발생했을 때 적절한 코드를 작성해주면 된다.

 

날짜선택버튼 컴포넌트 이벤트 코딩블럭

 

날짜선택버튼의 호출 블록

 

. 호출 날짜선택.선택창열기

날짜선택버튼의 선택창을 호출하는 블록이다. 호출하면 연, 월, 일을 선택하는 화면이 아래 그림과 같이 열린다.

 

날짜선택버튼 컴포넌트 실행 예 화면

 

 

날짜선택버튼 호출 날짜선택.선택창열기 블록

 

 

. 호출 날짜선택.표시할날짜설정하기

이 블럭은 코드로 직접 연, 월, 일을 설정하는 블록이다. 인자값으로 연, 월, 일 값을 넣으면 표시하는 날짜가 인자값으로 변경이 된다.

 

날짜선택버튼-호출 날짜선택.표시할날짜설정하기 블록

 

 

. 호출 날짜선택.인스턴트로표시할날짜설정하기

날짜선택버튼의 블록에서 인스턴트는 시계의 실제값을 가지고 있는 객체라고 이해하면 쉽다. 사실 객체지향언어의 개념을 이해해야 하는데, 지금은 쉽게 인스턴트는 실제로 값을 가지고 있는 덩어리(구조체, 객체)라고 이해하면 된다. 반대로 객체는 값이 실체화되기 전에 정의만 한 덩어리를 객체라고 한다. 즉 객체에 실제 값이 들어가서 실행이 될 때, 우리는 객체의 인스턴트라고 말한다. 

 

날짜선택버튼-호출 날짜선택.인스턴트로표시할날짜설정하기 블럭

 

 

그러면 실제 인스턴트가 무엇이 들어가는지 예제 블록 그림은 아래와 같다.

억지로 "언제 날짜선택.날짜선택후에" 블록에 "호출 날짜선택.인스턴트로표시할날짜설정하기" 블록에 "호출 시계1.현재시각인스턴트로가져오기" 블록을 호출하여 인스턴트 인자값에 넣어준다. 이는 현재 시계1 컴포넌트에 현재시각인스턴트로가져오기 호출을 통해 현재 시스템 날짜를 인스턴트로 반환하여 넣어준다. 아래 블록은 인스턴트 인자에 대한 예제로 아래 그림을 참조하면 된다.

 

날짜선택버튼컴포넌트-호출 날짜선택.인스턴트로표시할날짜설정하기 블럭 예제

 

. 날짜선택버튼 지정하기 블럭

. 연, 월, 일 지정하기/반환하기

 

날짜선택버튼 지정하기 블럭

 

 

. 나머지 블럭들

나머지 블럭들은 버튼 컴포넌트의 블럭과 동일하다, 활용하는 예제나 블럭에 대해 알고 싶으면 버튼 컴포넌트와 버튼 컴포넌트의 예제를 참고하면 좋을 것 같다.

 

앱인벤터 버튼 컴포넌트 예제

앱인벤터 버튼 컴포넌트 예제

 

 

 

지금까지 날짜버튼선택 컴포넌트에 대해 알아보았다. 아래 날짜선택버튼을 활용한 예제를 꼭 실습을 통해 날짜선택버튼 컴포넌트를 이해하고 실제 활용에 적용해 보기를 권장합니다. 예제는 "우리가 처음 만난 지 며칠" 이라는 앱이다.

 

 

 

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

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

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.