도대체 언제까지 시작이라고 할텐가???ㅋㅋ 죄송합니다. 그런데 이제 진짜 레알 시작입니다. 정신 차리시고 출발~!!띵띵~~
우선 디자인에 관계 없이 구성요소만 배치해보도록 하겠습니다. 어떻게 하면 될까요? 친절한 제가 친절히 알려드리죠! ① 이름을 입력하기 위한 TextBox, ② 입력 완료를 명령할 Button, ③ 입력 받은 이름을 출력할 Label, ④ 비명 소리 출력을 명령할 Button을 아래 그림과 같이 드래그하여 배치합니다. Viewer와 Components 구역에 각각의 요소들이 배치되는 것을 확인할 수 있습니다.
보이지 않지만 작동에 필요한 요소가 있습니다. 뭘까요? 바로!! ① 소리를 재생하는 Sound입니다. Palette 영역의 Media를 클릭하면 나타난 요소들 중 Sound를 Viewer로 드래그 합니다. 소리를 재생하는 장치는 보이는 요소가 아니기 때문에 ② Viewer영역 아래에 Non-Visible components 영역으로 들어가는 것을 확인 할 수 있습니다. 여기까지 잘 하셨나요? 역시 제가 설명을 너무 잘했죠? 여기까지만 잘 하셨음 거의 다 된겁니다! 이예~~
이제 배치한 구성요소(Components)들의 이름을 바꾸도록 합시다. 구성 요소의 이름을 역할에 맞도록 지정해 준다면 나중에 논리를 구현할 때 이름만 보고 무슨 역할을 하고 특성이 무엇인지 쉽게 알 수 있습니다. 아 미래를 내다보는 이 선경지명! (역할과 특성에 맞는 이름을 지정해 줘야겠죠?) 제가 미리 이름을 정해놨어요!! 이런 너무 친절하다~ 다음과 같이 구성요소(Components)들의 이름을 바꾸어 봅시다. 이름을 바꾸는 방법은 아래 사진을 참고하세요.
| 현재 이름 | 수정 된 이름 |
| TextBox1 | NameBox |
| Button1 | NameInputBtn |
| Label1 | NameLabel |
| Button2 | TounchBtn |
| Sound1 | TouchSound |
① 이제 배치는 다 끝났습니다. 하지만 배치가 다 끝났다고 동작하는 것은 아닙니다.
제가 지금 말씀드리지만 스마트폰, 컴퓨터는 워낙 수동적인 아이라서 하나하나 동작을 지정해줘야 알아 듣고 작동한답니다. 근데 시킨건 시킨 그대로 끝내주게 하지요!
그럼 배치된 구성요소들의 역할을 지정하고 작동 논리를 만들봅시다. 근데...
어떻게 하는 걸까요?? 바로 block들을 연결해서 합니다! block 연결은 쉽고 재밌어요!!
② 왼쪽 상단의 Blocks 버튼을 클릭해봅시다.
구성요소들의 작동 논리를 지정해주는 Blocks 창입니다. 우와 신기하게 생겼죠? 프로그래밍의 기본적인 논리와 내용을 시각적으로 제공하기 때문에 프로그래밍에 대한 지식 없이도 조금의 노력으로 프로그램을 완성할 수 있습니다. 여러분이 원하던 바죠? 후훗!! 역시 캐치를 잘해낸것 같아요!
다시 우리가 할 내용으로 돌아가 봅시다. 앱 사용자가 NameBox에 이름을 입력하고 NameInputBtn을 클릭하면 NameLabel에 입력한 문자를 표시해야 합니다. 표시 내용은 NameBox에 담겨있는 문자(Text)입니다. 스마트폰이 처리해야 할 내용과 시점을 굵은 글씨로 표현하였습니다.
스마트폰이 본격적으로 일을 시작할 시점은 NameInputBtn을 클릭했을 때 입니다. 뭘 할지 느낌이 오나요? 그럼 그 느낌 살려서 해봅시다! ① Blocks 구역의 NameInputBtn을 클릭하면 NameInputBtn에 관련된 기능을 수행하는 블록들이 뜨는 것을 확인 할 수 있습니다. ② 여기서 클릭 했을 때 실행하라는 기능 블록인 ‘when NameInputBtn.Click’ 블록을 ③ 드래그하여 빈 화면 영역에 둡니다.
스마트폰이 이름입력 버튼(NameInputBtn) 클릭을 감지한 다음 할 일은 NameLabel의 글자(Text)를 바꾸는 일 입니다. ① Blocks 구역의 NameLabel을 클릭하고 ②‘set NameLabel.Text to’ 블록{바뀌어짐을(set ~~ to) 나타내는 페인 모형}을 아래 그림과 같이 ③ ‘when NameInputBtn.Click’ 블록 안에 넣습니다.
NameLabel에 출력 될 내용(Text)은 NameBox에 입력된 내용(Text)입니다. 그러므로 ‘set NameLabel.Text’ 블록이 ‘NameBox.Text’ 블록으로부터 값을 전달 받아야 합니다. 두 블록을 조립하여 값을 전달하도록 명령합시다. (튀어나온 블록 : 값 전달을 의미. 페인 블록 : 값 전달 받음을 의미)
여기까지 TextBox에 이름을 입력하고 Button을 누르면 Label에 출력하는 논리를 완성하였습니다. 여러분의 화면이 아래와 같은 화면인지 확인해 주세요. 같지 않다면 무언가 잘못하신거에요! 잘 따라만 하면 되는 거니깐, 위에서 뭔가 빠뜨렸는지 다시 한번 읽고 고쳐주세요~ 같으시다면!! 우쭈쭈 잘했다~ 다음 단계로 넘어갈께요~
