"앱인벤터 다이어리"의 Screen3(달력을 이용한 다이어리)의
화면 디자인은 이전 포스팅을 참고해주세요!
[프로젝트/App Inventor] - [App Inventor] 앱인벤터 다이어리/메모장 만들기 #3
[App Inventor] 앱인벤터 다이어리/메모장 만들기 #3
"앱인벤터 다이어리"의 Screen1(시작화면)과 Screen2(메뉴화면)의 화면 디자인 및 블록코딩은 이전 포스팅을 참고해주세요! [프로젝트/App Inventor] - [App Inventor] 앱인벤터 다이어리/메모장 만들기 #2 [App
psjin230.tistory.com
Screen3 Block
button_date에는 date1부터 date42까지 날짜를 표시하고 기록상세페이지(Screen3_day)로 이동할 수 있는 변수를 저장합니다.
record에는 해당 날짜에 기록이 생기면 '♥'를 표시하는 변수를 저장합니다.
앱이 처음 실행될 때 month 변수에 yyyy.MM형식으로 날짜를 저장합니다.
yyyyMM 레이블에 month 변수를 출력합니다. ex) 2022.07
setCalendar 함수와 showData 함수를 호출합니다
화면에 달력을 출력하기 위한 코드입니다.
startDay는 각 월마다 1일이 시작되는 날이고, endDay는 마지막 날짜를 저장하는 변수입니다.
dates는 각 월의 모든 날짜를 담고 있는 변수입니다.
end30과 end31은 각 30일까지 있는 달, 31일까지 있는 달을 저장해 놓은 변수입니다.
ex) < 2022.07 >
이전달_버튼 '<' | 다음달_버튼 '>'
이전달_버튼 및 다음달_버튼을 클릭했을 때 moveCalendar 함수와 showData함수가 호출된다.
showData는 버튼의 Text가 비어있지 않다면, 즉 기록이 있다면 해당 날짜에 show(♥)를 표시합니다.
하단 추가버튼(+)을 클릭하면 plusRecord 함수를 호출합니다.
이 함수가 실행되면 추가페이지가 Visible(false)에서 Visible(true)로 바뀌고 나머지 이미지, 달력 등 화면에서 안보이게 됩니다. 배경색 또한 노란빛으로 변합니다.
추가페이지에서 날짜선택버튼을 누르면 yyyy.MM.d 형식으로 저장이 됩니다.
취소버튼을 클릭하면 plusRecord를 호출합니다. 그렇게 되면 현재 추가페이지는 Visible(true)에서 Visible(false)가 되고 나머지 false였던 컴포넌트들이 모두 보이게 됩니다. 또한 입력박스로 인해 나타났던 키보드는 숨겨집니다.
title 입력박스나 memo 입력박스에 아무것도 입력하지 않은 채로 저장버튼을 클릭하면 짧은 알람이 출력된다.
날짜선택을 하지 않은 상태에서 저장버튼을 클릭하면 오늘 날짜로 기록이 저장된다.
데이터가 저장될때는 items변수에 제목과 내용, 하트가 저장된다. 예를들어 [["title":"오늘 하루" ], ["memo":"오늘은 밥을 먹었다. 하늘이 맑다. 비가 안왔다. 우산챙겨왔는데 필요가 없었다..."], ["show":"♥"]] 이런식으로 저장이 된다.
기록이 있는 날짜를 클릭하면 상세페이지(Screen3_day)로 이동하게 됩니다.
스마트폰 하단 뒤로가기 버튼을 클릭하면 Screen2(메뉴화면)으로 이동합니다.
다음에 이어서 Screen3_day(상세페이지)에 대한 화면디자인과 블록코딩에 대한 포스팅을 업로드 하겠습니다!