[앱 인벤터2] 기본기능 익히기 7- 여러 개의 화면에서 값을 전달하기

앱을 실행해 보면 여러 개의 화면을 가진 앱이 많습니다.

이번 강좌에서는 화면(스크린)을 두 개 만들고 그리고 버튼을 선택했을 때, 

화면이 이동하면서 값도 함께 전달되도록 하는 것을 학습해 보겠습니다.

 

그리고 두번째 화면에서 화면을 닫을 때, 또한 닫는 화면에서, 입력된 값을 다시 전달합니다.

 

[학습내용]

(1) 화면 전환 시에 값을 전달하기

(2) 창을 닫은 이후에 값을 전달하기

 

(1) ‘화면이동’ 버튼을 선택하면 ‘Screen2’ 화면으로 입력된 값을 전달하고 이동합니다.

 Screen2에 전달된 값이 표시됩니다.

(2) ‘Screen2’에서 화면 닫기 버튼을 선택하면 Screen2의 화면이 닫히면서 입력되어 있는 값이 다시 Screen1으로 전달되어 표시됩니다.

 

[필요한 요소]

텍스트 박스

버튼

Screen1, Screen2

 

[준비작업]

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

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

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

 

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

가. 스크린 추가

 

① ‘스크린 추가’ 버튼을 선택합니다.

② 추가할 화면의 이름을 입력합니다.

 

나. 뷰어에 구성 요소 추가

 [Screen1 화면]

 

 

번호	요소	속성 변경	설명
①	사용자 인터페이스 버튼	텍스트 : 화면이동	버튼을 누르면 ‘Screen2’화면으로 이동합니다.
②	사용자 인터페이스 텍스트 상자	없음	텍스트 상자에 입력된 내용이 화면 이동할 때 값으로 전달됩니다.

 

[Screen2 화면]

 

 

 

번호	요소	속성 변경	설명
①	사용자 인터페이스 텍스트 상자	없음.	Screen1에서 전달된 값이 표시됩니다. 그리고 화면 닫기를 버튼을 누르면 닫히면서 여기에 입력된 것이 다시 ‘Screen1’으로 전달되게 됩니다.
②	사용자 인터페이스 버튼	텍스트 : 화면 닫기	화면 닫기를 누르면 ‘Screen2’ 화면이 닫히고 텍스트 상자안의 값이 전달되게 됩니다.

 

[블록편집 화면작업]

 

Screen1 화면 블록

 

 

 

번호	영역	블록이름	설명
①	버튼	언제 버튼1.클릭	버튼이 선택되면 블록 안의 내용을 실행합니다.
②	제어	시작 값을 전달하며 다른 스크린 열기	원하는 스크린 이름을 입력이 가능합니다.
③	텍스트	“ “	원하는 스크린을 이동하기 위한 화면이름을 입력합니다.
④	텍스트상자1	텍스트_상자1.텍스트	텍스트 상자안의 입력된 값을 가르킵니다.
⑤	Screen1	언제 Screen1.다른 스크린 닫힘	Screen1에서 다른 화면이 열린 이후에 다시 열린 화면이 닫혔을 때, 블록 안의 내용을 실행합니다.
⑥	Screen1	지정하기 다른 스크린 이름 값	다른 스크린 이름을 지정하기 위해 사용합니다. ⑥의 영역에 마우스를 올리면 블록을 선택할 수 있습니다.
⑥	Screen1	가져오기 결과	닫힌 화면에서 전달된 값을 가져오는 데 사용합니다. ⑥의 영역에 ‘결과’ 위에 마우스를 올리면 블록을 선택할 수 있습니다.

 

[Screen1 블록 편집 화면]

 

# 화면 이동 할 때, 값 전달하기

Screen2의 화면으로 이동합니다.

화면 이동할 때, 텍스트 상자 안의 값을 함께 전달합니다.

 

# 다른 화면이 닫히고 Screen1이 보여질 때, 전달된 값 지정

다른 스크린이 닫히고, Screen1이 다시 보여질 때, 해당 이벤트가 발생합니다.

다른 스크린 이름을 Screen2로 지정하고, 텍스트상자에 'Screen2'가 닫힐 때, 전달된 결과를 가져옵니다.

단, Screen2 화면이 닫힐 때, 전달되는 값이 있어야 합니다.

 

 

[Screen2 블록 편집 화면]

 

# Screen2 처음 열릴 때 전달된 값 텍스트 상자에 값 넣기

Screen2 화면이 시작될 때, 다른 화면에서 전달된 값을 텍스트 상자에 값으로 표시합니다.

 

# 화면 닫기 버튼 클릭 시, 화면을 닫고 텍스트 상자에 값 전달

버튼1을 클릭하면, 현재 화면(Screen2)를 닫고, 텍스트 상자 안에 값을 전달합니다.

여기서는 Screen1으로 전달하게 됩니다.

 

 

 

번호	영역	블록이름	설명
①	Screen2	언제 Screen2.초기화	Screen2 화면이 처음 열릴 때, 실행됩니다.
②	텍스트상자1	지정하기 텍스트_상자1.텍스트	텍스트 상자 안에 입력되는 값을 넣을 수 있습니다.
③	제어	시작 값 가져오기	여기서 시작 값이란 앞에 화면에서 전달된 값을 말합니다.
④	버튼1	언제 버튼1.클릭	버튼1이 클릭되면 블록 안의 있는 내용이 시작됩니다.
⑤	제어	값을 전달하며 스크린 닫기 결과	스크린을 닫을 때, 값을 전달해 주는 기능을 갖습니다.
⑥	텍스트 상자1	텍스트_상자1.텍스트	텍스트 상자 안에 입력되어 있는 값을 가르킵니다.

 

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

 

단말 결과 화면

 

① 앱을 실행시키고 텍스트 상자에 원하는 내용(111111)을 입력합니다.

② 화면이동 버튼을 선택하면 Screen2 화면으로 이동합니다.

그리고 앞에서 입력했던 내용이 나타나게 됩니다.

 

③, ④ 다시 텍스트 상자 내용을 변경(111111 -> 777777) 하고 화면 닫기 버튼을 선택합니다.

그러면 텍스트 상자에 입력된 내용이 Screen1 화면의 텍스트 상자에 표시되게 됩니다.

 

그럼, 오늘도 수고하셨습니다. 내일도 화이팅하세요~

 

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