안녕하세요. 이지이지입니다.
이번 포스팅에서는 지난 포스팅에 이어 가계부앱을 완성해보도록 하겠습니다.
ScreenDay 스크린을 만들어 일별 지출항목을 확인하고, 항목을 삭제할 수 있도록 구성합니다.
Screen1과 TinyDB1에 저장된 값을 공유하니, 반드시 포스팅 1편을 먼저 본 후 2편을 보시기 바랍니다.
1편에 이어 다시 같은 소스 파일을 올려드리니 내려받아 참고하시기 바랍니다.
| 화면 구성 |
예제 앱의 Screen_Day 화면 구성은 위와 같으며...
ListView 컴포넌트가 가장 중요한 요소입니다.
예제앱과 같은 화면을 구성하기 위해서는
ListView1 컴포넌트의 ListViewLayout의 속성을 MainText, DetailText(Horizontal)로 설정합니다.
다른 컴포넌트의 속성은 거의 기본값으로 설정되어 있으며, 바뀐 속성은 디자인적인 측면을 위한 것입니다.
자세한 사항은 소스파일을 참고하세요.
또한 저의 이전 포스팅에 ListView의 사용법에 대해 설명한 것이 있으니 참고하시면 도움이 될 것입니다.
앱인벤터 채팅앱 만들기 #2 (채팅 화면 구성)
안녕하세요. 이지이지입니다. 이번 포스팅에서는 지난 시간에 이어 앱인벤터로 채팅앱 만들기를 완성하도록 하겠습니다. 실제 채팅이 이루어지고 메시지가 오고가는 화면(Screen2)을 구성합니다.
egeasy.tistory.com
| 블록 코딩 |
다음은 Screen_Day 스크린의 전체 블록 코딩 화면입니다.
# Step 1. Screen_Day가 처음 실행되었을 때 실행되는 블록과 변수
① TinyDB1에서 선택 일자의 지출 목록을 불러와 저장해두기 위한 리스트 변수로 처음에는 빈 리스트로 만들어둡니다.
② 선택 일자의 총 지출액을 저장해두기 위한 변수로 처음에는 0으로 저장해둡니다.
③ 선택 일자가 포함되는 월의 총 지출액을 저장해두기 위한 변수로 처음에는 0으로 저장해둡니다.
④ 변수 day_total에 TinyDB1에서 불러온 값을 저장합니다.
→ get start value는 Screen1 스크린에서 날짜를 클릭했을 때 startValue를 통해 전달한 값을 가져옵니다.
→ Screen1에서 startValue는 2021.12.9와 같이 설정됩니다.
→ TinyDB1의 tag get start value + "total" (ex. 2021.12.9total)에는 선택한 날짜의 총 지출액이 저장되어 있습니다.
(Screen1에서 저장해두었던 것으로 포스팅 1편을 참고하세요.)
⑤ 변수 month_total에 TinyDB1에서 불러온 값을 저장합니다.
→ 다음 블록에서는 시작번호(start)가 1이므로 맨 앞의 텍스트부터 길이로 설정한 숫자 7개 만큼의 텍스트를 가져오므로 ④와 연결지어 보자면 2021.12가 반환됩니다. 여기에 total을 덧붙여 2021.12total 과 같은 텍스트가 반환됩니다.
→ TinyDB1의 tag 2021.12total에는 2021년 12월에 사용한 총 지출액이 저장되어 있습니다.
(Screen1에서 저장해두었던 것으로 포스팅 1편을 참고하세요.)
⑥ lbl_heading의 텍스트를 get start value + "지출항목"으로 설정합니다.
⑦ 변수 list_from_Tiny를 TinyDB1의 tag get start value에 저장되어 있는 값으로 설정합니다.
→ TinyDB1의 tag get start value에는 사용자가 선택한 날짜의 모든 지출항목과 항목별 지출금액이 저장되어 있습니다.
(Screen1에서 저장해두었던 것으로 포스팅 1편을 참고하세요.)
⑧ lbl_total의 텍스트를 변수 day_total + "원"으로 설정합니다.
⑨ 리스트뷰를 설정하기 위한 프로시저 SetListView를 호출합니다.
# Step 2. SetListView 프로시저
① 리스트 변수 lv_list의 초기값을 빈 리스트로 저장해둡니다.
② 리스트 변수 lv_list에 빈 리스트를 저장합니다.
→ SetListView가 호출되었을 때 가장 먼저 lv_list를 빈 리스트로 저장해두는 이유는 기존에 SetListView가 호출되었을 때 이미 저장되어 있는 값이 있을 수 있어 초기화하지 않으면 기존의 항목이 함께 리스트뷰에 나오기 때문입니다.
③ 1부터 시작하여 변수 list_from_Tiny에 들어있는 항목의 개수만큼 1씩 증가하며 do 안의 블록을 실행합니다.
④ 변수 lv_list에 실제 ListView1에 나타날 항목을 추가합니다.
→ 리스트뷰 컴포넌트에 대해서는 위에서 링크를 걸어 두었던 저의 이전 포스팅을 참고하시기 바랍니다.
→ 만약 Screen1에서 2021년 12월 9일에 지출한 항목이 노트 5000원, 포스트잇 2000원이 있다면
변수 list_from_Tiny에는 [ [ ["item","노트"] , ["price","3000"] ] , [ ["item","포스트잇"] , ["price","2000"] ] ]과 같이 저장이 되어 있습니다.
리스트를 보았을 때, key와 value쌍으로 이루어져 있어, key를 찾으면 value가 반환되게 됩니다.
그래서 key를 "item"으로 한다면 결과로는 "노트"를 받아올 수 있습니다.
→ ListView1의 mainText에는 지출항목을 표시되게 하였습니다.
→ ListView1의 detailText에는 지출액을 표시되게 하였습니다.
→ ListView1에서 이미지는 따로 표시하지 않을 것이므로 imageName은 공백으로 두었습니다.
⑤ ListView1의 항목(elements)을 변수 lv_list에 저장되어 있는 값으로 설정합니다.
# Step 3. 리스트뷰에서 아이템 선택 이벤트
① 변수 del_item_index의 초기값으로 0을 저장해둡니다.
② ListView1에서 항목이 선택되었을 때
③ 변수 del_item_index에 리스트뷰에서 선택된 항목의 위치(순서)를 저장해둡니다.
# Step 4. 삭제 아이콘(-) 클릭 이벤트
① 삭제할 항목의 가격을 저장해 둘 변수 del_item_price의 초기값을 0으로 설정해둡니다.
② img_icon(삭제하기 아이콘)을 클릭했을 때,
③ 변수 del_item_price를 0으로 설정합니다.
→ 지출항목 삭제를 여러 번 할 수 있으므로 기존에 저장되어 있던 지출액을 지우기 위한 것입니다.
④ 만약 변수 del_item_index가 0이라면,
→ 아직 리스트뷰에서 선택한 항목이 없다는 의미입니다.
→ 리스트뷰 항목의 index는 1부터 시작하며 차례대로 1씩 증가합니다.
⑤ 경고창을 띄워 사용자에게 메시지를 전달합니다.
⑥ ④에서 del_item_index가 0이 아니라면 변수 del_item_price에 선택한 항목의 가격을 저장합니다.
→ ListView1의 항목은 Step 2에서 변수 list_from_Tiny에서 가져왔으므로 list_from_Tiny와 ListView1의 항목과 항목의 위치는 같습니다.
⑦ 변수 day_total에 저장되어 있던 선택한 날짜의 총지출액에서 선택한 항목의 지출액을 뺀 값을 다시 day_total에 저장합니다.
⑧ 변수 month_total에 저장되어 있던 선택한 날짜가 포함된 월의 총지출액에서 선택한 항목의 지출액을 뺀 값을 다시 month_total에 저장합니다.
⑨ 리스트 변수 list_from_Tiny에서 변수 del_item_index에 저장되어 있는 숫자를 index로 하는 항목을 삭제합니다.
⑩ TinyDB1의 tag get start value에 리스트 변수 list_from_Tiny의 값을 저장합니다.
⑪ 이제 선택한 항목이 삭제되었고, 변수의 값들도 모두 변경시켰으므로 다시 리스트뷰의 항목을 설정하기 위해 SetListView 프로시저를 호출합니다.
⑫~⑬ TinyDB1에 변동된 가격이 반영된 날짜의 총지출액과 월의 총지출액을 저장합니다.
⑭ lbl_total의 텍스트를 변동된 총지출액으로 표시합니다.
⑮ 만약 리스트 변수 list_from_Tiny의 항목 개수(length)가 0이라면,
→ 모든 지출항목이 삭제되었다는 의미입니다.
ⓐ 선택한 날짜의 총지출액이 값으로 저장되어 있던 TinyDB1의 tag를 삭제합니다.
→ 만약 0으로라도 저장되어 있다면, Screen1에서 지출액이 없는데도 0으로 표시되기 때문에 보기가 좋지 않아, 그냥 삭제를 해버리는 것입니다.
ⓑ 더 이상 삭제할 항목이 없으므로 삭제 아이콘을 클릭하지 못하도록 설정합니다.
앱인벤터로 가계부앱 만들기가 완성되었습니다.
실제앱이 아닌 여러분들에게 보여드릴 예제앱으로 만든 것이라 모든 기능을 포함시키지는 않았습니다.
한 가지만 예로 들어보자면 한 번의 클릭으로 해당 날짜 또는 해당 월 또는 전체의 지출항목과 가격을 모두 삭제하는 기능과 같은 것으로 여러분이 스스로 한 번 구현해보시기 바랍니다.~
댓글