[앱 인벤터2] 기본기능 익히기 5-알람시계(2)-시계선택, 날짜선택

[목표]

날짜선택, 시간선택을 버튼을 선택하고 날짜 및 시간을 설정하면 해당 버튼에 내용이 보이게 하기

 

[학습내용]

(가) 날짜 선택 요소 학습

(나) 시간 선택 요소 학습

 

[기본 개념 이해하기]

날짜 선택 버튼은 선택하면 날짜를 설정할 수 있습니다.

시간 선택 버튼은 선택하면 시간을 설정할 수 있습니다.

 

 

 

[따라해 보기]

 

앞의 학습했던 내용에 이어서 하는 내용입니다.

[앱 인벤터2] 기본 기능 익히기 4 (시계-Clock) 현재 날짜 시간 보여주기

http://godisgood.tistory.com/56

 

[준비작업]

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

 

[디자이너편집 화면작업]

가. 추가할 요소

번호	구성요소	위치	사용용도 및 속성값
①	날짜 선택	화면 왼쪽 영역 사용자 인터페이스	날짜를 사용자가 원하는 날짜로 설정할 수 있는 기능을 가지고 있습니다.
②	시간 선택	화면 왼쪽 영역 사용자 인터페이스	시간을 사용자가 원하는 시간으로 선택할 수 있는 기능을 가지고 있습니다.
③	시계	화면 왼쪽 영역 센서	현재 시간과 현재 날짜를 표시할 수 있습니다.

 

 

[블록편집 화면작업]

'기본 개념 이해하기'에서 공부했던 것처럼 ‘날짜 선택’, ‘시간 선택’ 요소는 버튼을 선택하게 되면 날짜와 시간을 설정할 수 있는 창이 뜹니다.

 

우리는 선택 후, 해당 날짜와 시간을 버튼에 보이게 하려 합니다. 어떻게 해야 할까요?

 

날짜 선택 후, 날짜 선택 버튼에 날짜 설정

날짜를 선택 후에 날짜선택1 버튼에 텍스트 값을 선택한 날짜로 설정한다.

왼쪽 영역의 텍스트 – 합치기 블록을 이용하여 선택된 날짜의 년, 월, 일을 텍스트에 넣습니다.

 

 

시간 설정 후, 시간 선택 버튼에 시간 설정

시간을 선택 후에 시간선택1 버튼에 텍스트 값을 선택한 시간으로 설정한다.

왼쪽 영역의 텍스트 – 합치기 블록을 이용하여 선택된 시간과 분을 합쳐서 텍스트에 넣습니다. 

 

장치에 연결 후, 앱을 확인하기

왼쪽이 디자이너 뷰어 화면이고 그리고 오른쪽이 단말에서 확인한 화면입니다.

현재 시간이 표시되는 것을 확인해 볼 수 있습니다.

 

 

 

화이팅! 오늘 하루도 수고하셨습니다. 열공하세요!!! ^^

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)