[앱 인벤터2] 간단한 메모 앱(1)-메모 화면 설계 및 메모 삭제

[앱 인벤터2] [실습 프로젝트] 메모 앱 만들기(1)-메모 화면 설계 및 메모 삭제

 

오늘도 여러분에게 신나고 좋은 일이 생깁니다.

어떤 항목의 내용을 화면에 보여주고 싶다. 그리고 메모 항목을 삭제하고 싶다면 어떻게 해야 할까?

이와 같은 목적이 있을 때, 이 강좌가 도움이 됩니다.

(예제 화면)

 

목차   학습 목표 학습 내용 우리가 만들 화면 디자이너 화면 블록 화면 결과 화면

 

학습 목표

(1) 메모 목록을 보여줄 수 있다.

(2) 선택된 메모를 삭제할 수 있다.

 

 

학습 내용

(1) 메모 목록을 보여주는 목록뷰에 대해 알아본다.

(2) 메모를 삭제하기 위한 목록뷰의 내용을 학습해 본다.

 

 

우리가 만들 화면

(가) 화면 및 기능

 

만들 화면	기능
	(1) 메모 추가 버튼으로 메모를 추가할 수 있다. (2) 메모 삭제 선택하여 선택된 메모를 삭제할 수 있다. (3) 메모 확인을 선택하여 선택된 메모의 내용을 확인할 수 있다.

 

(나) 사용할 구성요소

TinyDB, 수평배치, 버튼1,2,3, 레이블, 목록뷰

 

 

디자이너 화면

 

(가) 뷰어, 컴포넌트 화면

 

뷰어	컴포넌트

 

(나) 구성요소 속성 변경

(1) 이름을‘메모추가버튼, 메모삭제버튼, 메모확인버튼’으로 변경한다.

(2) 레이블1의 텍스트를 ‘나만의 메모장’으로 변경한다.

(3) 각 버튼의 텍스트를 ‘메모 추가’, ‘메모 삭제’, ‘메모 확인’으로 변경한다.

 

(다) 디자이너 뷰어화면 설명

메모추가/메모삭제/메모확인 버튼 : 메모를 추가, 삭제, 확인하는 기능을 갖는다.

레이블 : 메모장 목록의 타이틀이다.

목록_뷰1 : 메모의 목록을 보여준다.

TinyDB1 : 내가 원하는 메모 정보를 DB(데이터 저장장소)에 저장해 준다.

 

 

블록 화면

(가) 전체화면

 

 

 

(나) 각각의 블록 설명

(1) 메모 목록 초기화

(2) TinyDB에 메모 목록이 있다면 그것을 불러오고, 그렇지 않다면 하나의 샘플메모을 보이게 한다.

(3) 목록을 선택 후, ‘메모삭제’를 누르면 해당 목록이 삭제되도록 한다. 

 

 

 

 

 

결과 화면

 

 

오늘 하루도 수고하셨습니다~

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