Lecture 21 | Programming Methodology (Stanford)

Lecture by Professor Mehran Sahami for the Stanford Computer Science Department (CS106A). Professor Sahami continues lecturing on interactions and pushes it further.

CS106A is an Introduction to the engineering of computer applications emphasizing modern software engineering principles: object-oriented design, decomposition, encapsulation, abstraction, and testing. Uses the Java programming language. Emphasis is on good programming style and the built-in facilities of the Java language.

Complete Playlist for the Course:
http://www.youtube.com/view_play_list?p=84A56BC7F4A1F852

CS106A at Stanford Unversity:
http://www.stanford.edu/class/cs106a/

Stanford Center for Professional Development:
http://scpd.stanford.edu/

Stanford University:
http://www.stanford.edu

Stanford University Channel on YouTube:
http://www.youtube.com/stanford

...

이 강의는 스탠포드에서 전문인 양성을 위하여

제공됩니다.

지난 시간의 주제를 이어서 공부해 봅시다

우리의 친구, 상호작용자를 배우고 있었죠

상호작용자와 액션 리스너에 대해서요

구체적으로는 버튼을 만드는 방법과 그 버튼들에 의해 발생하는 액션 이벤트에 대해 배웠습니다

기억하나요? 그걸 간단히 정리하고 좀 더 깊이 있는 내용을 배워봅시다

지난 시간에 이야기 했던 것 중 하나가 바로 프로그램에 init 메소드를 만드는 것이었습니다

public void고요

이 메소드 안에서 프로그램의 일부를

다양한 사용자들을 클릭하거나 해서

어떠한 이벤트가 발생했을 때의 상황을 처리해 줄 수 있었죠

액션 리스너를 add해 줌으로써요

그래서 버튼을 클릭하면

특정한 메소드를 호출하도록 처리해 주는 것입니다

액션리스너는 예를 들어 프로그램의 버튼이 있을 때 버튼에 무슨 일이 일어나는 지 감시해주었습니다

그래서 버튼을 클릭하면 특정한 메소드를 호출하도록 처리해 주는 것입니다

예를 들어 actionPerformed를 호출하면 그것에 바탕하여 어떤 버튼이 눌렸는 지를 확인하고

실제로 무엇인가를 실행해줍니다 아셨죠?

자 여기 우리의 친구 public void actionPerformed가 있습니다

자 여기 우리의 친구 public void actionPerformed가 있습니다

자 여기 우리의 친구 public void actionPerformed가 있습니다

자 여기 우리의 친구 public void actionPerformed가 있습니다

그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

그리고 actionPerformed는 ActionEvent라고 부르는 인자를 갖습니다.

액션 이벤트를 우리는 여기서 e라고 지칭해주고요

이것은 어떤 액션이 일어났는지 혹은 어떤 버튼이 클릭되었는지를 확인해 줍니다

기억하고 있길 바래요
지난 시간 수업을 잠시 돌아봤고요

이제 액션 이벤트가 생겼을 때, 몇 가지 할 일이 있다고 했었죠

가장 중요한 것은

어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

어떤 코맨드가 이 액션 이벤트를 발생시켰는 지를 알아내는 겁니다

이렇게 하는 거죠

일단 문자열 cmd를 만듭니다 command의 줄임말이고요

이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

이 코맨드, 즉 상호작용자는 actionPerfromed 메소드를 호출합니다

자 여기서 e.cmd = e.getActionCommand를 써주세요

자 여기서 e.cmd = e.getActionCommand를 써주세요

. getActionCommand가 하는 일은 바로

상호작용자의 이름을 문자열로 리턴시켜 주는 것입니다

그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

그리고 버튼의 이름은 기본적으로 버튼에 써져있는 것입니다

그리고 몇 개의 if를 이 cmd를 바탕으로 여기 써줍니다

if(cmd.equal)으로 확인해서 어떤 버튼이 눌려졌는 지에 따라 액션을 취해 줄 수 있도록

버튼의 이름을 확인 할 수 있습니다

사실 이 액션 코맨드cmd보다는

ActionEvent e를 활용해서 할 수 있는 것이 더 많습니다

이걸 지난 수업 때 간단히 봤었는데요
우리가 했던 프로그램에서요

이제 이걸 좀 더 배워봅시다 좀 더 시간을 들여서요

이제 저희가 원하는 것은 e에서 액션 코맨드를 알아내는 것이 아닙니다

액션의 소스를 직접 가져오는 것을 바라죠

액션의 소스를 직접 가져오는 것을 바라죠

자, 여기서 재밌는 것은 getSource가 리턴하는 내용입니다

여기선 잠시 세미콜론을 뺄게요

getSource는 오브젝트(객체)를 리턴해 줍니다

이벤트를 발생시키는 오브젝트 자체를 리턴해주죠

즉, 버튼을 클릭했다면

e.getActionCommand는 버튼의 이름을 리턴해주고

e.getSource는 버튼 오브젝트의 레퍼런스를 리턴해 줍니다

즉 오브젝트를 참조할 수 있게 되는 겁니다

즉 오브젝트를 참조할 수 있게 되는 겁니다

이것은 어떤 의미를 가질까요

여기서 이것은 여러분이 초기화를 설정 할 때

여기서 이것은 여러분이 초기화를 설정 할 때

new JButton을 해줍니다

new JButton을 해줍니다

new JButton을 해줍니다

이걸 hi라고 할게요. 알겠죠

그리고 hi = new JButton을 해주고요

hi를 인스턴스 변수로 만든거죠

그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

그럼 프로그램 내에 인스턴스 변수, private JButton hi가 생겼습니다.

hi라는 변수를 선언했고요, JButton입니다

그리고 초기화 메소드에서

이 버튼에 라벨 hi를 붙여 생성합니다

그런 다음 이것을 컨트롤 바에 add해 줍니다

예를 들어 이 hi를 SOUTH 컨트롤 바에 add시켜 주죠

여기에 add하는 게 일반적이라서요

버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

버튼이 실제로 화면 상에 나타나는 걸 보는 건 즐겁죠

이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

이렇게 add시켜 준 뒤에 이벤트 발생을 기다리는 거죠

그리고 이 버튼이 클릭 될 때를 위한 액션 리스너를 add해 줍니다

이제 버튼이 클릭 되면

이 버튼의 cmd로

이 버튼의 이름을 가져오라고 요청할 수 있어요

혹은 액션 이벤트에게 액션 코맨드의 이름을 가져오게 할 수 있죠

그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

그리고 cmd.equal이 예를 들어 저기 버튼 hi의 이름과 같을 때

이제 처리하고 싶은 대로 할 수 있습니다

예를 들면 스크린에 뭔가를 출력해 주던가 하는 거죠

이게 이걸 쓰는 한 가지 방법이고요

고전적이 방법이기도 하죠

지난 시간에 본 겁니다

이걸 쓰는 또 다른 방법으로는 getSource를 이용하는 것입니다

cmd의 이름을 가져와 hi와 같은지 확인하는 것과 달리

e.getSource를 호출하는 방법입니다

사실, 이 방법을 사용하면 이 cmd 라인은 더 이상 필요가 없게 됩니다

지우지는 않고 코멘트 처리 하겠습니다

e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

e.getSource를 하면 오브젝트를 리턴해 준다고 했었죠

그럼 저는 이 리턴되는 오브젝트가

제 hi 버튼이 맞는 지 확인할 겁니다

여기서, 직접적으로 hi와 equal 하는 지 확인하고

맞으면 원하는 데로 처리해 줍니다 아까와 똑같이 처리하겠습니다

내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

내가 가지고 있는 버튼이 클릭된 hi버튼인지 확인하는 작업입니다

이 두 가지 방식의 차이는

하나는 이름을 문자열로 사용한다는 것이고

다른 하나는 실제 오브젝트를 사용한다는 것입니다

다른 하나는 실제 오브젝트를 사용한다는 것입니다

이제 이게 무엇인지 깊이 생각해봅시다

이름을 이용할 때 우리는 실제 오브젝트까지 손 댈 필요가 없었죠

이것은 즉 실제 오브젝트를 사용한다면

우리는 이것을 인스턴스 변수로 사용할 필요가 없을 거라는 겁니다

이것을 인스턴스 변수로서 사용할 일은

이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

이것을 아직 사용한 일이 없는 다른 메소드에서 일 겁니다

예제를 하나 보여드리겠습니다
코드로 좀 더 구체적으로 알아봅시다

자, 코드를 보세요

이게 기본적으로 버튼을 만드는 코드 입니다

이게 기본적으로 버튼을 만드는 코드 입니다

버튼 이름을 hi라고 했고요

서쪽 영역에 넣었고요
그리고 버튼이 클릭되는 상황을 알아챌 수 있게

액션 리스너를 add하였습니다

버튼이 클릭되면

클릭된 버튼이 내가 만든 버튼인지를 확인하고요

저쪽의 hi대신에 여기 실제로 호출되는 hi버튼이 있고요

이걸 칠판에서는 자리를 좀 덜 차지하게 줄여썼어요

클릭된 게 hi버튼이라면

화면에 hello가 출력될 겁니다

계속해서 이 프로그램을 실행해보죠

계속해서 이 프로그램을 실행해보죠

hi를 클릭하면 전에 봤던 게 나옵니다

hi를 클릭할 때마다 hello가 화면에 뜨죠

이제, 이걸 조금 다른 방식으로 활용할 수 있습니다

지난 시간에 봤었던 것처럼요

자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

자 보세요. add를 할 때. 버튼을 생성하고 그걸 add해 주잖아요

한 줄의 코드로요. 왜냐면 버튼을 저장할 변수가 필요 없었기 때문이었습니다

여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

여기서는 어떤 액션이벤트인지 소스를 체크할 필요가 없습니다

그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

그냥 액션 이벤트한테 command를 내놓으라고 하는 거에요

cmd는 버튼의 이름일 것이고요

그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

그러므로 더 이상 실제 버튼 오브젝트의 레퍼런스를 저장하는 변수가 필요 없어지게 됩니다

왜냐면 이게 내가 필요한 이름을 전달해 주기 때문에요

결과적으로, 여기서 인스턴스 변수가 필요없다는 것에 주목해주세요

이게 바로 거래입니다

이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

이것은 또한 여러분에게 인스턴스 변수가 필요할 때을 구분할 수 있는 통찰력을 줍니다

이런 케이스에는 인스턴스 변수가 필요하고

이런 케이스에는 인스턴스 변수가 필요하고

아 잘못된 줄이네요

인스턴스 변수가 있어야 하는 경우는

다른 메소드에서 이 변수를 참조해야 할 경우입니니다

다른 메소드에서 이 변수를 참조해야 할 경우입니니다

자 이렇게 버튼을 생성했고요

이걸 어딘가에 저장(store)했고요

이걸 다른 메소드에서 참조할 수 있어야 합니다

그래서 인스턴스 변수가 필요해 지는 겁니다

만약 다른 메소드에서 이것을 참조할 필요가 없다면

만약 다른 메소드에서 이것을 참조할 필요가 없다면

두 번 째 경우처럼 되는 것이죠

자 이렇게 참조가 필요 없는 경우에는 이걸 저장할 필요도 없죠

여기에 대해 질문?

그게 학생의 로직 내의 버그(오류)입니다
컴퓨터는 두 버튼에 동시에 같은 이름을 주었을 경우

사용자가 둘 중 어떤 버튼을 이용한 것인지 알아내려고 하지 않습니다

난 모른다 이런 식이죠

그게 문제를 발생시켜요 그러니까 이런 짓은 하지 마세요

이렇게 해서 어떤 일이 일어나는 지 궁금하다면 한 번 시도해 보시고요

이것은 컴퓨터 실행의 오류가 아니라 논리적 오류입니다

또 다른 질문 있나요? 네?

그런 식의 접근도 이 케이스와 비슷합니다
실제 버튼을 얻는 거죠

여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

여기서 변수를 만들기 않으면 이게 뭘 리턴 할까요?

여전히 우리가 만든 오브젝트의 레퍼런스를 리턴해 줄 겁니다

이제 문제는 뭐냐면 이제 어떤 오브젝트와 equal한 것인 가를 확인할 방도가 없다는 겁니다

이걸 인스턴스 변수로 만들기 않았다면요

이게 hi버튼과 같은 것인지 확인할 수가 없어요

그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

그러므로 hi버튼을 여기 생성하면 즉각적으로 이것이 add되서 그 후에는 기록을 추적할 수 없게 됩니다

이 녀석은 hi버튼에 대한 포인터를 리턴해 주고요

그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

그래서 여러분이 “좋았어, hi버튼의 포인터를 얻었어”라고 할 수 있게 되는 겁니다

이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

이게 hi버튼이걸 어떻게 아냐고 묻는다면 알 수 없습니다

이걸 실제 hi버튼과 비교할 방법이 없어요

이게 바로 이걸 저장해야 하는 이유랍니다

좋아요, 이 두 가지 다른 방식을 어째서 보여주는가?

그 이유는 이제 여러분이 상호작용자들을 실제로 활용하게 되면서

이러한 측면을 사용하게 될 것이기 때문입니다

이러한 측면을 사용하게 될 것이기 때문입니다

자 이제 다음으로 할 것은요

항상 말하지만 프로그램을 만들 때 항상 유저들이 콘솔창에서 뜨는 게 아니고

또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

또 상호작용적으로 쓸 수 있는 텍스트를 마련해 주어야 합니다

그러므로 이제 이 예제를 함께 봅시다

그러므로 이제 이 예제를 함께 봅시다

프로그램에서 textField라 불리는 게 있습니다

내 이름이 Mehran이잖아요

그럼 hello, Mehran 이렇게 나오고

만약 Sally면 hello, Sally이렇게 출력되게 하고 싶어요

이걸 텍스트 필드를 이용하여 할 수 있습니다

이걸 텍스트 필드를 이용하여 할 수 있습니다

이걸 텍스트 필드를 이용하여 할 수 있습니다

상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

상호작용자잖아요? 이게 필드 입니다. 콘솔창에 뜨는 거 아닙니다

그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

그리고 여기에 유저가 뭔가를 써 넣을면 그것을 콘솔창에서 이용하게 해보죠

자 이걸 어떻게 만들까요?

일단 text field라 불리는 상호작용자를 만들어야겠죠

일단 text field라 불리는 상호작용자를 만들어야겠죠

기본적으로, 텍스트 필드는 여러분이 봤던 겁니다

텍스트를 입력할 수 있는 공간이 있는 상호작용자입니다

이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

이것이 컨트롤바에 뜨고 그 안에서 엔터를 치면 액션 이벤트가 일어나게 되는 겁니다

여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

여러분이 텍스트와 관련된 뭔가를 만들 고 싶다면 이게 바로 그 기본입니다

만들면 실제로 상자모양이 생깁니다. 그게 다에요

만약 거기에 라벨을 add하고 싶다면

앞에서 이름을 add해 주었던 것처럼 해주어야 합니다

이걸 어떻게 하는지는 잠시 뒤에 보여드리고요

자 상자모양이 생기고 그 안에 뭔가를 쓰고 엔터키를 칩니다

그럼 잠재적으로 이벤트가 발생합니다.

그럼 잠재적으로 이벤트가 발생합니다.

이걸 또 어떻게 설정할까요?

자 우리가 만들려고 하는 것은 바로 JTextField입니다

이전에 봤던 체크박스나 콤보박스 등과 같은 상호작용자고요

이것을 JTextField라 합니다

저는 이 약자를 따서 TF라고 이름 짓겠습니다

저는 이 약자를 따서 TF라고 이름 짓겠습니다

자 이걸 새로 하나 생성하는 방법은 new JTextField를 해주는 거고요

인자를 줍니다. 여기서 재미있는 게 있죠

여러분은 라벨을 주는 것이 아닙니다

텍스트 필드는 라벨이 딸려 있지 않아요
라벨을 별개로 만들어 주어야 하죠

여기에 주는 인자는 바로 텍스트 필드의 사이즈 입니다

이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

이것이 얼마나 큰지를 텍스트 필드 내에 들어가는 문자의 최대치로 정해 줍니다

만약 폰트를 설정해 준다면 사이즈는 10M이 됩니다

여기서 M은 그 폰트의 가장 넓은 문자입니다

모를까 봐 알려드려요

모를까 봐 알려드려요

모를까 봐 알려드려요

사용자가 엔터를 칠 때 말입니다

다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

다른 아무 것도 쓰지 않으면 actionPerformed는 오직 버튼에서만 호출되기 때문에

actionPerformed를 호출하지 않을 겁니다

그러므로 우리가 해 야 할 것은 텍스트 필드를 만든 후에

이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

이 텍스트 필드가 뭔가 액션을 생성한다는 것을 알려주어야 합니다

이걸 하는 방법은 좀 펑키한데,

일단 textfield.addActionLestener를 해주고요

textfield.addActionLestener

textfield.addActionLestener

알겠죠?

실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

실제로 이 방식이 모두 낮을 레벨의 의미하기에 걱정할 필요가 없습니다

여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

여러분이 해야 할 것은 이 텍스트 필드에 액션을 생성할 수 도 있다고 알려주는 거죠

그리고 다른 사람들에게 액션을 생성해 주었을 때를 알려주는 겁니다

그래서 이걸 넘긴 거에요

그래서 이걸 넘긴 거에요

하지만 매번 텍스트 필드를 생성할 때마다

모든 텍스트 필드에 이걸 해 줄 필요는 없습니다

이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

이 addActionListner의 메세지를 독립적으로 전해 주기 때문에요

한 번만 해주면 됩니다.

하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

하지만 기본적으로 우리는 이제 텍스트 필드도 이러한 액션이벤트를 생성할 수 있도록 만들어 준 것입니다

러므로 이걸 생성한 뒤 이 줄을 설정하고 이걸 프로그램의 어딘 가에 add해 주어야 하는 데요

프로그램 내에서, add TF를 해주어야 합니다

프로그램 내에서, add TF를 해주어야 합니다

add TF를 서쪽 영역에 해줍시다

지금까지 그랬던 것처럼요

누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

누구간 TF에 대고 엔터키를 치면 액션이벤트에 대한 혹은 액션 이벤트를 넘겨주는 액션퍼폼드에 대한 호출이 생성됩니다

자 이렇게 설정되었을 때

이 이벤트를 생성한 텍스트 필드가 무엇인지 어떻게 알죠?

여러 개의 텍스트 필드가 있고

그 중 하나에 사용자가 엔터를 쳐넣을 때요

e.getSource를 해주면 되죠

자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

자 이 안에, e.getSource 가 TF와 equal한 지 알아보는 코드를 씁니다

여기서, 모든 종류의 경고창이 뜹니다

그러므로 여기서, 우리는 박스에 들어있는 텍스트와 hi를 합쳐서 println해 주고 싶은 건데요

이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

이걸 하는 방법을 이 텍스트 필드의 이름.getText를 해주면 됩니다

그럼 알아서 텍스트를 리턴해 줄 겁니다

엔터를 치면 박스에 있던 문자열을 리턴해 주죠

그럼 hi와 이 리턴된 텍스트를 출력해 줍니다

프로그램에서 봤던 것과 같습니다

그건 hi가 아니라 hello였다는 걸 제외하면요

그건 hi가 아니라 hello였다는 걸 제외하면요

하지만 경고음 사라져야 합니다

이렇게 코드를 써서 생기는 문제는 뭘까요?

이건 인스턴스 변수가 아닙니다. 그렇죠?

그러므로 현재는 방도가 없어요

여기 이게 init메소드고 이 밖에서 TF를 참조하려면요
그래서 인스턴스 변수를 생성해야 하는 것입니다

알겠죠? 이게 init메소드고요 이 앞은 public void고요

이 TF를 클래스 어딘가에서 예를 들어 여기서요

내가 l바를 선언한 곳이죠

클래스 아래쪽 어딘가 입니다

여기다 private JTextField TF를 해줍니다

private JTextField TF

private JTextField TF

private JTextField TF

그리고 여기서는 선언은 안하고 tf를 new로 생성해 줍니다

이렇게 인스턴스 변수를 선언했습니다

이렇게 인스턴스 변수를 선언했습니다

여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

여기 버튼 예제에서 보시는 것처럼요. 이게 텍스트 필드라는 것만 빼면 동일합니다

그럼 코드를 좀 보여드릴게요

자 이게 텍스트 필드 예제입니다

콘솔 프로그램을 확장시키려고 합니다

아직 콘솔로 하고 있잖아요

init메소드에서 name field를 만들게요

nameField가 뭐냐고요? private JTextField입니다.

이렇게 nameField를 정장해놓고요. 이걸 new JTextFiedl(10)으로 초기화 하겠습니다

저기서 썼던 거랑 똑같을 코드죠

이제 추가적으로 좀 더 재밌는 걸 해보죠

박스에 라벨을 붙이려고 합니다

일단 박스를 컨트롤 바에 붙이고

name이라는 new JLabel을 add해 줄 겁니다

name이라는 new JLabel을 add해 줄 겁니다

그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

그 텍스트가 name이고요. 이걸 서쪽 콘트롤바에 add하겠습니다.

자 첫째로 이건 그냥 name이라고 써질 거고

그리고 아까의 nameField를 add할게요

즉 name텍스트 옆에 박스를 생성하는 거죠

그리고 아까 말했던 것과 정확히 동일 하게 할겁니다

액션리스너를 add해 주고 해서

당신이 무엇인가

상호작용을 하면

그것을 알 수 있게 하는 겁니다

. 이것은 즉 이제 actionPerformed가 호출되고

액션리스너에 대한 이벤트를 생성하는 것이

가능해진다는 이야기입니다

actionPerformed에서 e.getSource를 해주고요
이걸 nameField와 비교할 수 있습니다

이걸 밑에 인스턴스 변수로 저장해 두었으니까요

hello를 써주고 이걸 nameField의 텍스트와 연계시켜야죠

텍스트 크기를 좀 더 키워볼게요

자, 조금 더 크게요 어떻게 하는지 보세요

제가 좋아하는 서체인Courier 24포인트로 할 게요

제가 좋아하는 서체인Courier 24포인트로 할 게요

좋아요 더 크게

자 다시 한 번

Mahran 하고 엔터치면 hello, Mehran이 뜹니다. 보이죠?
엔터를 칠 때마다 이벤트가 일어나죠.

엔터, 엔터, 엔터. 보세요, 텍스트가 나오죠

그리고 이건 또 다른 거. 재밌죠

Sally... 스크롤을 움직여요. 많이 재미있진 않죠

2분정도 하기에 딱 좋아요

이런 식으로 하는 거에요 이제 텍스트 박스로부터

정보(텍스트)를 얻는 방법을 아셨죠

텍스트 박스에 대해 질문?

네, 뒤에 학생

네, 기본적으로 레이아웃은 뭔가를 add해 줄 때마다

왼쪽에서 오른 쪽으로 쭉 확장됩니다

어떤 영역이던 간에요 이 경우에는, 서쪽영역이죠

모든 게 가운데로 몰렸죠. 여기에 공간을 주고 싶다면 JLabel을 더해주면 됩니다 그러면 이것들 사이에 공간이 더 넓어지겠죠

거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

거기까지 못 던지겠네요. 여기 놔둘 테니, 수업 끝나고 집어가세요

또 다른 재미있는 게 있습니다

사실 텍스트 필드에 이름을 줄 수 있습니다

이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

이런 getSource하고 인스턴스 변수 만들고 하는 거 잘 모르겠어요 하시면

이름을 줘서 그 이름으로 참조해 봅시다

괜찮죠? 이름을 만들 수 있어요

여기 완전히 똑같은 예제가 있습니다
약간의 차이가 있지만

조금 달라요

전과 동일한 코드입니다

내가 namefield를 생성했다는 걸 빼면요

여기에 액션 코맨드를 주는데요

그 액션 코맨드는 name일 것입니다

그리고 이런 이벤트를 생성할 때마다 그

이벤트의 근원이 얘인지 확인합니다

혹은, 이름을 주고

버튼에 했던 것과 똑같은 일을 할 수 있어요

이 밑에서 getActionCommand를 하고요 이건 문자열을 반환하죠

즉 이벤트를 생성하는 오브젝트의 이름을요

이게 name과 equal하나 봅니다
즉 내가 주었던 이름과요

버튼에서 했던 걸 돌아볼 수 있어요

버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

버튼에서는 항상 이름을 주고 그 이름으로 확인하잖아요

혹은 버튼의 소스로도 확인 해 볼 수 있었죠

혹은 버튼의 소스로도 확인 해 볼 수 있었죠

JTextField. 이걸 거의 항상 getSource를 사용해 이용할 수 있어요

하지만 이름으로도 참조할 수 있고요

하지만 실제 화면상에 이 이름은 보이지 않습니다

하지만 실제 화면상에 이 이름은 보이지 않습니다

화면상에 뭔가 텍스트가 뜨길 바란다면

여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

여전히 분리된 라벨에 이름을 써서 만들어 줘야 합니다

이게 최대치입니다

이게 최대치입니다

네, namefield는 l바에 있어요

더 이상 참조하지 않으니까 필요 없어요

이걸 복사해서 붙여 넣기 해볼 게요

이걸 복사해서 붙여 넣기 해볼 게요

아 이런. 이게 바로 이걸 여기 썼던 이유입니다

아 이런. 이게 바로 이걸 여기 썼던 이유입니다

이 텍스트를 얻기 위해

이걸 참조할 필요가 있죠

솔직히, 이걸 e.getSource로 처리해도 됩니다. 이 텍스트를 얻는 걸요

그래서 꼭 필요하지 않지만, 이게 나아요

이게 훨씬 깔끔한 방법이거든요

이걸 없애 버리죠

이걸 없애 버리죠

JTextField에 대해 또 다른 질문?

어.. 네

네, 할 수 있어요

20분 뒤에 보여드릴게요

세 자리 옆으로 날라갔네요..
이걸 하기 전에 앞서

지금까지와는 다른 걸 배워봅시다

지금까지는 상호작용자들이

스크린 아래쪽에서

가운데 정렬되어 나와잖아요

이걸 다른 식으로 배치할 수 있을까요
그리고 이러한 걸 가능하게 해주는 것을

그리고 이러한 걸 가능하게 해주는 것은

이상하게도 레이아웃layout입니다

즉 레이아웃이 특정 상호작용자들의 레이아웃을 컨트롤합니다

지금까지 여러분이 여러분의 친구, 콘솔 프로그램

혹은 그래픽 프로그램을

쓰면서 봤던 것은 보더레이아웃입니다

쓰면서 봤던 것은 보더레이아웃입니다

사실 여러분은 이미 보더 레이아웃을 경험해 본거죠
이렇게 생겼습니다

가운데 영역이 있고요. 북쪽, 남쪽, 동쪽, 그리고 서쪽 보더border가 있습니다

그래서 보더레이아웃이라 부르는 거죠

그래서 보더레이아웃이라 부르는 거죠

이 보더 레이아웃에서는

이 보더 레이아웃에서는

가운데 영역에서 액션이 일어났습니다

가운데 영역에서 액션이 일어났습니다

콘솔 프로그램에서는 자동으로 가운데에 콘솔을 add해 주었고요

그게 콘솔 프로그램입니다
그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다

그리고 그래픽 프로그램에서는 G캔버스를 자동으로 가운데에 add해주었습니다
여기서 여러분이 이것저것을 draw할 수 있었죠.

다른 영역은 오직 뭔가를 그곳에 add해 주었을 때부터 보이기 시작합니다

초기에 오로지 그래픽을 위한

그래픽프로그램을 만들 때 여러분은

서쪽 영역을 보지 못했습니다

그것은 거기에 아무런 상호작용자를 add해 주지 않았기 때문이죠

이러한 상호작용자 영역은 무언가 거기에 얹혀주었을 때만 나타납니다

이러한 것을 컨트롤바라고 부른다고 했었죠
지난 시간에 봤잖아요

그런 다른 종류의 레이아웃은 무엇이 있을까요?
중요한 몇 가지 레이아웃을 공부해 봅시다

첫째로 그리드 레이아웃이라는 게 있습니다

그리드 레이아웃을 이용하려면 일단 이걸 생성해야 하고요

또 그리드 레이아웃은 행과 열로 이루어져 있습니다

또 그리드 레이아웃은 행과 열로 이루어져 있습니다

예를 들어 2행3열로요

그럼 이러한 레이아웃이 나옵니다
이것은 2행 3열을 그리드grid입니다

잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

잠시 후에 세부적으로 설명할 때 이걸 만드는 코드를 보여드릴 게요

어쨌든 Conceptually개념적으론 이렇습니다

자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

자, 이제 아이템을 add할 때 레이아웃을 그리드레이아웃으로 설정해 주어야 합니다

그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

그렇게 하면 이제 아이템, 여기서 아이템은 상호작용자를 뜻하고요

아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

아이템은 맨 위 왼쪽부터 차례로 추가가 됩니다

매번 새 요소를 더할 때 마다 그 행의 맨 마지막 열에 찰 때 까지 차례로 채워지고

자동으로 아래 행으로 내려갑니다
순차적으로 채워집니다

순차적으로 채워집니다

그리드에 차근차근요

그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

그럼 그리드 레이아웃이 실제로 어떻게 생겼는지 보여줄게요

그리드 레이아웃을 보여주는 심플한 프로그램입니다

일단 init메소드에서 레이아웃을 생성해줍니다

저는 원래 있던 레이아웃을

다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고 싶습니다

다시 2,3을 인자로 가진 new GridLayout으로 만들어 주고

즉 2행 3열의 그리드로요

이 프로그램에서 흥미로운 점은
이 그리드 레이아웃 예제를 보시면요

이건 콘솔 프로그램을 확장한 것이 아닙니다

그래픽 프로그램을 확장한 것도 아닙니다

그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

그럼 뭘까요? 제가 한 것은 프로그램 자체를 확장한 것입니다

콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

콘솔을 생성하지 마라, G캔버스도 생성하지마 이렇게 한 거에요

제가 이걸 만든 이유는

그냥 크고 뚱뚱한 버튼들이 보고 싶어서였어요

보세요. 6개 버튼이 화면을 완전 차지했죠

좋습니다

이게 그리드 입니다. 상호작용자들이 그리드를 꽉 채웠어요

이 레이아웃은 화면에서 가능한 한 많은 공간을 차지합니다

더 중요한 것은 그리드 레이아웃의 각 칸을 차지한

상호자용자들이 그 칸의 공간을 최대한 많이 차지한다는 것입니다

그래서 이런 모양이 됩니다 이렇게 차리를 차지하죠

이게 도대체 뭐지 하는 생각이 들 겁니다

이게 도대체 뭐지 하는 생각이 들 겁니다

이런 2인치x3인치만한 버튼 같은 거 필요 없다고요

이 이유에 대해선 지금 이야기 하지 않겠어요

아마 나중에요

사운드 이펙트랑 비슷해요

제가 창을 리사이즈 할 테니 한 번 보세요

모든 버튼은 작고 귀여워요

이게 바로 우리가 레이아웃 매니저를 이용하는 이유입니다

레이아웃이 어떻게 나올지 알 수 있죠

이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

이걸로 사용자가 창을 리사이징할 때의 화면을 컨트롤 할 수 있습니다

이러한 것들이 어떻게 놓일지는 알아야 합니다

만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

만약 필요한 것보다 더 많은 공간을 줘도 그리드 레이아웃에서는 그냥 차지해 버립니다

그리드 레이아웃은 그렇게 유용하진 않죠. 볼 만은 하죠. 책을 보면 알 거에요

거기 보면 테이블 레이아웃이라는

또 다른 종류의 레이아웃이 있습니다

또 플로우 레이아웃이라는 것도 있죠
이것은 이야기 하지 않을 거에요

하지만 테이블 레이아웃이라는 게 있다는 거 정도 알아두세요

테이블 레이아웃은 그리드 레이아웃과 거진 비슷합니다

그리드 레이아웃에서처럼 행과 열을 설정해 주고

거기에 차례로 상호작용자를 채워넣을 수 있습니다

차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

차이점은 한 칸에서 상호작용자가 자신이 필요한 만큼만의 공간을 차지한다는 것입니다

무슨 뜻이냐고요

즉 이 부분에 그리드 레이아웃이 아니고

테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

테이블 레이아웃을 대신 생성해서 프로그램을 돌리면요

import할 게 더 생기네요

이걸 import해줄게요

이걸 import해줄게요

자 나와라 테이블 레이아웃

테이블 레이아웃의 더 좋을 예를 보여줄게요

테이블 레이아웃의 더 좋을 예를 보여줄게요

가끔은 코드가 이렇게 추해질 때가 있어요

가끔은 코드가 이렇게 추해질 때가 있어요

어쩔 수 없어요

테이블 레이아웃?

나왔네요.

여전히 6개 버튼이 있죠

윈도우도 리사이징 할 수 있고요

하지만 이제 창의 사이즈가 바뀌어도 버튼 사이즈는 그대로 입니다

영역을 꽉 채우지 않아요

그래서 테이블 레이아웃이 그리드 레이아웃보다 아주 조금 더 유용하긴 합니다

자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

자 이제 문제는 버튼과 텍스트 필드를 연계시켜서 좀 더 멋진 걸 만들 수 있냐 이겁니다

사실, 할 수 있죠 그리고 이걸 좀 더 재미지게 보여드릴게요

이건 온도 전환 프로그램입니다

책에 있는 거고요 코드를 따로 보여주진 않겠어요

책에 있으니까. 따로 프린트물을 나눠주지 않아요

기본적인 개념은 degree Fahrenheit라고 써진 라벨을 주고요

또 degree Celsius라는 라벨도 만들어요

그리고 이 안에 값을 주고요
Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

Fahrenheit를 누르면 Celsiusfh 변환해 주는 겁니다

Celsius에 자동으로 알맞는 값이 채워집니다

32F는 0C고요

또 다른 재밌는 건 굳이 버튼을 누르지 않아도 되게 하는 겁니다

값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

값을 쳐 주고 엔터를 누르면 버튼을 누른 것과 똑 같이 됩니다

재밌죠. 이런 프로그램을 어떻게 만들까요

첫째로 필요한 건 관리되 것들이 아닙니다

다 그리드에 들어 있고요

2행 3열의 테이블 레이아웃이 필요합니다

여기 놓을 첫 번째 요소는 라벨입니다

그리고 텍스트 필드를 넣습니다

사실 특별한 텍스트필드를 넣어줄 겁니다

두 개의 특성화된 텍스트 필드가 있는데요 인트필드와 더블필드라고 부르는 것이 그것입니다

인티저integer 값 혹은 더블double 값을 얻는다는 보장이 있는 걸 제외하면

일반 텍스트 필드와 다를 바 없습니다

그럼 만약 A를 써넣고 이걸 기온으로 바꾸려고 하면 어떻게 될 지 궁금하시죠

이런, 버튼을 잘못 눌렀습니다

A를 기온으로 바꾸려고 해요 그럼 정수값을 넣으라는 팝업 창이 뜹니다

그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

그럼 여러분은 다시 정수 값을 제대로 넣어야 합니다

그리고 버튼을 넣어주는데요
어떻게든 저는 이 버튼과 텍스트 필드를 연결해 주어서

같은 액션을 취하게 하고 싶어요

이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

이 코드를 보여 줄게요. 생각보다 훨씬 짧습니다

첫째로 할 것은 레이아웃을 테이블 레이아웃으로 설정해 주는 겁니다

콘솔이나 캔버스가 생성되는 것을 원치 않기 때문에

프로그램을 확장한다는 것에 다시 한 번 주목해주세요

저 전체 레이아웃을 명시하고 싶어요

그래서 프로그램을 확장하는 겁니다

TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

TabelLayout(2,3)로 설정해 주고 그럼 요소가 차례로 들어가게 되죠

다시 말하지만. 그리고 첫 번째 요소를 add해 주겠습니다

. 제가 첫째로 add할 것은

바로 degrees Fahrenheit를 라벨로 넣어주는 것입니다

그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

그리고 거기에 맞춰 Fahrenheit 필드를 넣어주고요

이걸 어떻게 만들죠? 이 위쪽에 일단 생성해 줍니다

바로 인스턴스 변수로써 선언해 준거죠

그리고 이건 인트필드입니다

J텍스트 필드가 아니고요

아까 말했듯이 정수를 써넣어주는 데 특성화된 필드입니다

그것 빼고는 텍스트 필드랑 똑같고요

일단 인트필드를 보여주고 싶네요

자 new intfield를 해주고 이것의 초기 값을, 사이즈가 아니고요

초기값은 32로 설정해 주겠습니다

Fahrenheit필드를요

그리고 액션 코멘드를 설정해 줄 건데요

그래서 액션이 생성되면 처리해 줄 수 있게요

그래서 액션이 생성되면 처리해 줄 수 있게요

그래서 액션이 생성되면 처리해 줄 수 있게요

이름과 연관 지어서 F -> C

이게 이름이 될 거고요 자 이제 이름도 설정했고요

이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

이제 액션 이벤트를 생성할 거라는 걸 알려줍시다

그리고 액션 리스너를 add해주죠

전에 텍스트 필드에 했던 거랑 똑같죠. 이게 인트필드라는 거 빼고요

Celsius 필드에도 이와 같은 일을 똑같이 해줍니다. 이것도 인트필드죠

이건 처음엔 초기값0으로 시작하고요
액션코맨드를 C에서 F가 되게 해놨습니다

그러므로 약간 다른 이름을 주도록 하죠

또한 액션이벤트를 listen하고 생성하도록 설정해 놓았습니다

그런 후 그리드에 놓습니다

그리드에 놓을 첫 번째 요소는 라벨입니다

아까 이야기했듯이요

다음 요소는 텍스트 박스고요

실제로는 숫자로 된 값을 갖는 거고요

그리드 첫째 줄의 마지막 요소는 버튼입니다

이름은 F ->C고요

여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

여러분은 이렇게 같은 이름을 만들어 놓으면 논리적 충돌이 일어나지 않을까 궁금할 겁니다

네 이 두 요소는 같은 이름을 가지고요
하지만 두 경우 다 같은 일을 해 주고 싶기 때문에

별 차이가 없어요

제가 원하는 건 누군가 버튼을 누르면 변환이 일어나는 것이니까요

이렇게 변환이 일어나는 코드를 쓰고요

이렇게 변환이 일어나는 코드를 쓰고요

또 누군가 텍스트 필드에 뭔가를 쓰고 엔터를 치면

버튼을 누른 것과 같은 일이 생깁니다

이것은 여러분이 웹에서 많이 접했던 것과 다르지 않습니다

어떠한 검색 엔진에서 창에 뭔가를 치고 클릭을 해서

검색이 시작되거나 엔터를 쳐서 검색이 시작되는 거 기억나시죠
하지만 몇이나 되는 사람이 버튼을 누릅니까

없어요
또 엔터를 치는 사람은 얼마나 되죠?

엔터를 치는 게 편하지 않나요?

어쨌든 이 프로그램에서도 그것과 같은 작업을 해주는 겁니다

엔터를 치는 게 더 편할 때가 있기 때문에

우리가 액션 코맨드에 추가적인 작업을 해 주는 거죠

그리고 Celcius에도 똑같은 일을 해줍니다

이게 전체 UI 혹은 GUI를 위한 설정입니다

그리고 사용자가 버튼을 클릭하면 액션 코맨드를 가지고 옵니다

그리고 액션리스너를 추가하여

처리해 줍니다

버튼을 클릭했을 때 넘어오는

액션 코맨드가 F->C라면요

Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

Fahrenheit 필드에 뭔가 써넣고 엔터를 치거나 버튼을 클릭하면

값을 갖게 되고

F필드는 인티저 필드니까 인티져 값을 반환합니다

그리고 수학적인 계산을 좀 해주면 되는 데요

그리고 수학적인 계산을 좀 해주면 되는 데요

화씨에서 섭씨로 바꾸는 실을 몰라도 너무 걱정하지 마세요

이렇게 하면 됩니다 F 곱하기 95를 하고 32를 빼주면 되요

이제 알겠죠

더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

더 재미있는 것은 이제 C필드에 계산된 값이 들어가는 것입니다

F필드에 값을 넣고 엔터를 치거나 버튼을 누르면

화면의 C필드에 값이 업데이트 됩니다

같은 것을 말할 때 얼마다 다양하게 표현할 수 있나요

누군가 C->F라고 한다면

섭씨에서 화씨로 변환하는 식이 필요할 겁니다

섭씨에서 화씨로 변환하는 식이 필요할 겁니다

섭씨에서 화씨로 변환하는 식이 필요할 겁니다

섭씨에서 화씨로 변환하는 식이 필요할 겁니다

섭씨에서 화씨로 변환하는 식이 필요할 겁니다

이게 전체 프로그램입니다 이건 인스턴스 변수고요

그럼 이제 기온 프로그램을 실행해 봅시다

그럼 이제 기온 프로그램을 실행해 봅시다

레이블이 있고

초기 값이 있고 F->C버튼이 있고요

그리고 100이란 값을 화씨에 넣어주면

38 섭씨로 변화해 줍니다

그리고 212를 화씨에 넣어주고

마우스를 사용하지 않고, 엔터를 쳐도 마찬가지고 변환이 이루어지고요

같습니다

섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

섭씨 온도 0. 32. 전체 프로그램을 GUI를 이용해 완성했습니다

리사이징도 할 수 있고요. 어쨌든 계속 중앙에 위치합니다.

멋지지 않나요. 작게 하면 작아지진 않아요

볼 수 없으니까. 질문 있나요?

마이크를 사용해서 말해줄래요

여러분들도 마이크를 쓰게 해야겠네요

그리드 각 셀의 넓이를 조정할 수 있나요

그래서 테이블 레이아웃이 있죠

각각의 사이즈를 특정할 수 있도록 만들 수 있어요

각각의 사이즈를 특정할 수 있도록 만들 수 있어요

. 여기서 하지 않았지만요. 책에는 있습니다

그렇게 하고 싶다면요. 하지만 수업에서는 더 이상 깊게 들어가지 않겠습니다

하지만 네 할 수 있는 방법은 있어습니다

마지막으로 재밌는 걸 하나 하고 싶네요

텍스트와 그래픽을 이용해서요 그리고 상호작용자도요

다 이용해서요

텍스트, 그래픽, 상호작용자. 옛날에 했던 거 생각이 나죠
행맨(단어 맞추는 게임)이요

행맨. 텍스트도 이용했고 그래픽도 이용했죠

하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

하지만 상호작용자는 쓰지 않았었죠. 이제 상호작용자에 대해 배웠으니 버튼 텍스트 등을 이용해서 다시 해봅시다.

자 이제 모든 걸 합쳐서 해볼 시간이 돌아왔습니다

텍스트와 그래픽에요

자 이제 텍스트와 그래픽으로 할 것은

프로그램에 콘솔을 만들고 그래픽 캔버스도 만들어야 되고요

상호작용자도 만들어야 되요.

이걸 다 어떻게 할까요

첫째로 할 것은 작은 텍스트를 칠판에 써주고요

첫째로 할 것은 작은 텍스트를 칠판에 써주고요

두 가지 멋진 맛이 합해지면 더 맛있어져요

어떤걸 초콜렛으로 하고 어떤걸 땅콩 버터로 할 지만 정해주면 되요

하지만 텍스트와 그래픽의 조합이니, 행맨이 됩니다. 상호작용자도 있고요

우리가 할 것은 콘솔 창을 확장하는 것입니다

우리가 할 것은 콘솔 창을 확장하는 것입니다

우리가 여전히 (우리의 친구인)콘솔을 필요로 하기 때문입니다

우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

우리가 콘솔 프로그램을 사용할 때, 보더라는 게 있죠

이것은 우리에게 동서남북 영역을 제공하고요

이 영역들에 우리는 상호작용자를 올릴 수 있죠

이 영역들에 우리는 상호작용자를 올릴 수 있죠

흥미로운 것은 중앙 영역입니다

전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

전에 말했던 것처럼 콘솔 프로그램은 중앙 영역을 채우고요

거기에 텍스트를 쓸 수 가 있죠 그게 할 수 있는 전부이기도 하고요

우리가 할 것은 콘솔 프로그램에게 중앙 영역을 주고

거기에 다른 레이아웃을 줘서 텍스트나

그래픽을 채워넣을 수 있게 만드는 것입니다

그래픽을 채워넣을 수 있게 만드는 것입니다

음

이제 제가 뭘 할거냐고요

첫째로 할 것은 레이아웃에 대해 고려하는 것입니다

레이아웃은 이 중앙에 적용될 것이고요

기억해야 할 것은 콘솔 프로그램입니다

콘솔 프로그램은 영역을 꽉 채우고요

이제 콘솔에 첫 요소를 추가해 주어야 합니다

이것은 즉 레이아웃을 어떻게 정하든 이 안에 적용된다는 것입니다

한 줄에 3개의 요소가 들어가는 그리드를 만든다고 하죠

첫번째는 콘솔이 될 거고요

첫번째는 콘솔이 될 거고요

그리고 제어권이 없을 겁니다
그게 콘솔 프로그램이 원래 그러니까요

여러분이 콘솔 프로그램을 확장하고 만들 레이아웃이 뭐던 간에

첫 번째 요소는 텍스트입니다

그럼 여러분은 궁금하겠죠

. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

. 아까 그래픽에 대해서도 언급했는데 콘솔 프로그램을 쓰면 그래픽은 어쩌냐고요

우리는 행맨에 약간의 트릭을 사용할 겁니다

G캔버스라는 게 있었잖아요

이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

이 G캔버스를 생성할 겁니다. 그리고 레이아웃을 줄거에요

그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

그러니까 일단 콘솔 프로그램을 생성하고 레이아웃을 생성해 주고요

예를 들어 인자가 1,3인 그리드 레이아웃을 만들죠

이렇게 생길 거고요

첫번째 칸은 이미 콘솔이 차지했고요

G캔버스를 생성해서 두 번째 칸에 올려줍니다

G캔버스를 생성해서 두 번째 칸에 올려줍니다

그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

그리고 또 G캔버스를 하나 더 생성해서 여기에 추가시켜 줍니다

이게 G캔버스 도스입니다

그러므로 한 개의 콘솔과 두 개의 G캔버스가 생겼습니다

추가로, 화면 주변에 상호작용작들을 add해 줄 수 있고요

이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

이 시점에서 여러분은 충격과 공포와 환희 등에 빠져야 합니다

이제 5분만에 한 거에요 그것도 엄청 쉽게.

자 이게 그 모습입니다

텍스트 그리고 그래픽. 콘솔 프로그램을 확장시켰고요

그리고 init메소드로 레이아웃을 설정하는 데요

저는 그리드 레이아웃으로 하고 싶어요

기억하세요 그리드 레이아웃

요소들이 공간을 준 만큼 차지해 버려요

그게 이번 경우에는 제가 바라는 바고요

그래서 그리드를 쓰는 거고요. 1행 3열의 그리드를 만들 거에요

그리고 1/3에는 콘솔을 넣을 거고요

나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

나머지 두 개에는 캔버스르 넣는 데 하나는 최대한 크게 확장할 거에요

그럼 캔버스 두 개를 생성해야겠죠

RightCanvas와 LeftCanvas라고 부를게요

RightCanvas와 LeftCanvas라고 부를게요

그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

이게 상호작용자죠

제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

제가 원하는 프로그램은 상호작용자, 텍스트, 그래픽 세 가지요소가 들어가는 거였으니까

RightCanvas와 LeftCanvas라고 부를게요

이제 뭘 할 거냐고요

그리고 재미를 위해 텍스트 필드도 하나 넣어주고요

일단 LeftCanvas에 new Canvas를 해줍니다

그리고 add를 할 때 myLayout에 해주고요

캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

캔버스 전체를 더할 때는 그리드의 첫번째에 이미 콘솔을 넣기로 했으니 두번째에 넣어줍니다

캔버스를 add했잖아요. 두번째 요소로

그것을 다시 오른쪽 캔버스에 똑같이 해줍니다

세번째 요소로 들어가는 오른쪽 캔버스에요

그러므로 두 개의 큰 캔버스가 그리드의 두번째와 세번째에 있습니다

이제 콘솔, 캔버스, 캔버스 이런 식이죠

그럼 이제 상호작용자들을 add하겠어요

일단 텍스트 필드를 만들거에요. new JTextField를 해줘야겠죠

그리고 private인 인스턴스 변수로 선언할 거고요

방금 보여줬고요. 최대 사이즈는 10으로 할 거에요

라벨을 add하고요. 라벨은 some text라고 부를게요

그리고 서쪽영역에 놓고요

이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

이 시점에서 이제 여러분이 잘 알고 사랑하는 액션리스너를 add해 줍니다

매우 흔히 일어나는 일인데요. 사람들은 텍스트 필드를 생성하고 프로그램에서 뭔가 칩니다

그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

그러고 이제 이게 안되요. 그럼 멘붕이 옵니다.

머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

머리를 쥐어 뜯으며 고민해요. 바로 액션 리스너를 add해 주는 걸 까먹은 겁니다

알고 배우고 실천하고 사랑하세요

그리고 버튼도 두 개 add할 건데요

그럼 상호작용자는 텍스트 필드하고 버튼 두 개가 더 있는거죠

버튼 하나는 왼쪽 캔버스에 그림을 그릴 거고
다른 하나는 오른쪽에 그림을 그리게 만들 거에요

그럼 나머지를 마저 만들기 전에 이게 어떻게 생겼나 보여드리죠

텍스트와 그래픽까지 만들었죠

콘솔을 만들었고

콘솔을 만들었고

현재 경계선은 없지만 두 개의 캔버스가 있습니다

두 개의 다른 캔버스 창이 여기 있어요

텍스트가 있고요. hi라고 칠 수 있죠

hi. 재밌죠?

hi. 재밌죠?

Draw left는 외족 창에 그림을 그리게

사각형을 그릴건데 좀 있다 보여드리기로 하고

사각형을 그릴건데 좀 있다 보여드리기로 하고

Draw right는 오른쪽 창에 그림을 그릴 수 있게 합니다.

이걸 어떻게 할까요? 나머지 프로그램을 만들면서 알아봅시다

일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

일단 모든 게 세팅되었어요. 콘솔, 캔버스 두 개.

여기서 액션이 일어납니다
actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

actionPerformed가 호출되면 누군가가 상호작용자를 이용해 상호작용한 거죠

하나의 상호작용자를 가지고 상호작용을 하는 것 외에는
이 프로그램에서 할 수 있는 게 없습니다

일단 텍스트 필드를 체크하고요

텍스트 필드와의 상호작용이라면

그럼상호작용은 근원지가 텍스트필드 였다면 텍스트 필드에 뭔가를 친 건 이제 콘솔에 나타날 겁니다

. println을 하면 항상 콘솔에 나타나게 되어있으니까요

여기선 아직 별 재미가 없죠

양자택일적으로 텍스트필드에 타이핑을 하지 않았다면

버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

버튼을 클릭한 것인데. 이걸 getSource와 getActionCommand로 처리할 수 있습니다

이걸 여러분이 원하는 대로 섞어 사용하면 됩니다

코맨드(명령)가 뭐였냐 이러면 getActionCommand를 쓰면 되는데

그 코맨드가 Draw left였다면 이제 색이 채워진 사각형이 새로 생성되겠죠. 보여드리죠

새로운 사각형을 만듭니다

간단하죠. 50x20의 크기로요.

상수여야 해요

그리고 filled(채움)으로 설정해 주고

사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

사각형을 반환합니다. 그냥 색을 채운 사각형을 만들어서 옛다 가져라 이런 겁니다

그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

그리고 이 사각형을 왼쪽 캔버스에 더해 줘야 하는데

그냥 그래픽 프로그램이 아니니까요

그냥 add하란다고 add해 지지 않아요

이걸 더해 주려면 어떤 캔버스에 더할지 명확히 해주어야 합니다

왼쪽 캔버스에 더할 거니까 LetfCanvas 이걸 더해라. 이렇게 하고요

x좌표 20 y좌표 leftY에 더해줍니다

Left Y는 값이 10에서 시작하고요

매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

매번 뭔가를 더할 때 마다 원래 Y에서 자리가 아래로 내려갑니다

그럼 다음 사각형은 아래쪽에 그려지는 거죠

그럼 다음 사각형은 아래쪽에 그려지는 거죠

이걸 똑같이 오른쪽에도 해줍니다

일단 색을 채운 사각형을 생성한 다음에요

분리된 right Y좌표가 있고요

계속해서 이 밑으로 그려집니다

오른쪽 캔버스의 경우에는요

이 차이죠

그러므로 프로그램을 실행하면

텍스트가 있고요

다시 great 라고 쓰고

엔터를 누르면

이벤트가 발생합니다
스크린에 println해서 출력을 해주고

여기 이벤트를 생성하고요

근원지는 텍스트 필드였고 화면에 텍스트를 출력합니다

버튼 중 하나를 클릭하면

예를 들어 Draw left를요
그럼 사각형을 그려주고요 leftY좌표에서 시작하고요

다음 번에 Draw left를 계속 누르면

아래쪽으로 아래쪽으로 계속해서 똑같이 사각형을 그려줍니다.

두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

두 캔버스다 x좌표는 20이라는 것에 주목해 주세요

그런데도 서로 다른 장소에 그림이 그려지는 이유는

여기에 보이지 않는 경계선이 있기 때문입니다

이렇게 해서

텍스트, 그래픽, 상호작용자를 모두 포함한 프로그램을 만들어 보았습니다.
질문 있나요?

좋아요, 그럼 수요일날 봅시다