자바 GUI (그래픽 유저 인터페이스) 프로그래밍 [1]

에 이어서 조금은 더 고급(?) 스러운 예제를 다뤄 볼까 합니다.

앞서 다룬 예제는 솔직히.. 예제랄것도 없었죠?

그냥 프레임 클래스와 패널 클래스등을 사용하여 단순히 GUI 윈도우를 띄어보는 수준에 그쳤는데요.

이번 글에서는 조금 더 나아가서 버튼을 사용하고, 버튼을 눌러서 상호작용하는 아주 간단한 예제까지 다뤄보고자 합니다.


Content Pane과 Panel에 대한 설명이 이전 포스팅에서 다 되었기 때문에 기초 지식은 다 안다고 생각합니다.

따라서, 바로 예제 코드를 보는 것이 더 좋을 것 같네요


import javax.swing.*;

import java.awt.Color;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;


public class ButtonDemo implements ActionListener {

int redScoreAmount = 0;

int blueScoreAmount = 0;

JPanel titlePanel, scorePanel, buttonPanel;

JLabel redLabel, blueLabel, redScore, blueScore;

JButton redButton, blueButton, resetButton;

public JPanel createContentPane() {

/* total panel */

JPanel totalGUI = new JPanel();

totalGUI.setLayout(null);

/* titel panel */

titlePanel = new JPanel();

titlePanel.setLayout(null);

titlePanel.setLocation(10, 0);

titlePanel.setSize(250, 30);

totalGUI.add(titlePanel);

redLabel = new JLabel("Red Team");

redLabel.setLocation(0, 0);

redLabel.setSize(100, 30);

redLabel.setHorizontalAlignment(0);

redLabel.setForeground(Color.red);

titlePanel.add(redLabel);

blueLabel = new JLabel("Blue Team");

blueLabel.setLocation(120, 0);

blueLabel.setSize(100, 30);

blueLabel.setHorizontalAlignment(0);

blueLabel.setForeground(Color.blue);

titlePanel.add(blueLabel);

/* score panel */

scorePanel = new JPanel();

scorePanel.setLayout(null);

scorePanel.setLocation(10, 40);

scorePanel.setSize(250, 30);

totalGUI.add(scorePanel);

redScore = new JLabel("0");

redScore.setLocation(0, 0);

redScore.setSize(100, 30);

redScore.setHorizontalAlignment(0);

scorePanel.add(redScore);

blueScore = new JLabel("0");

blueScore.setLocation(120, 0);

blueScore.setSize(100, 30);

blueScore.setHorizontalAlignment(0);

scorePanel.add(blueScore);

/* button panel */

buttonPanel = new JPanel();

buttonPanel.setLayout(null);

buttonPanel.setLocation(10, 80);

buttonPanel.setSize(250, 70);

totalGUI.add(buttonPanel);

redButton = new JButton("Red Score!");

redButton.setLocation(0, 0);

redButton.setSize(100, 30);

redButton.addActionListener(this);

buttonPanel.add(redButton);

blueButton = new JButton("Blue Score!");

blueButton.setLocation(120, 0);

blueButton.setSize(100, 30);

blueButton.addActionListener(this);

buttonPanel.add(blueButton);

resetButton = new JButton("Reset Score");

resetButton.setLocation(0, 40);

resetButton.setSize(220, 30);

resetButton.addActionListener(this);

buttonPanel.add(resetButton);

totalGUI.setOpaque(true);

return totalGUI;

}


private static void createAndShowGUI() {

JFrame.setDefaultLookAndFeelDecorated(true);

JFrame frame = new JFrame("[=] JButton Score! [=]");

ButtonDemo demo = new ButtonDemo();

frame.setContentPane(demo.createContentPane());

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setSize(250, 190);

frame.setVisible(true);

}

public static void main(String[] args) {

SwingUtilities.invokeLater(new Runnable() {


@Override

public void run() {

// TODO Auto-generated method stub

createAndShowGUI();

}

});

}


@Override

public void actionPerformed(ActionEvent e) {

// TODO Auto-generated method stub

Object obj = e.getSource();

if (obj == redButton) {

++redScoreAmount;

redScore.setText("" + redScoreAmount);

} else if (obj == blueButton) {

++blueScoreAmount;

blueScore.setText("" + blueScoreAmount);

} else if (obj == resetButton) {

redScoreAmount = 0;

blueScoreAmount = 0;

redScore.setText("" + redScoreAmount);

blueScore.setText("" + blueScoreAmount);

}

}

}


결과물



코드가 갑자기 너무 방대해졌나요? 실은 큰 의미가 있는 코드들은 그닥 길지 않습니다. 찬찬히 읽어보시면 충분히 이해가 갈겁니다.

일단, 당연히 프로그램이 실행되면 main 메서드가 호출이 될 것이고, 

createAndShowGUI() 메서드를 호출하는 구문을 볼 수 있을 것입니다.

createAndShowGUI에서는 이 프레임의 ContentPane을 createContentPane 메서드로 반환하도록 하였는데요. 

그 메서드가 바로 맨 위에 길다란 메소드 구문입니다.

또, createContentPane 메서드에서 버튼 구성요소들에게는 addActionListener(this) 메서드로 액션 리스너를 설정하였는데요.

액션 리스너는 그 버튼이 클릭될 경우 actionPerformed 메서드를 호출하도록 하는 리스너입니다.


디스플레이 구성요소에는 크게 세 부분이 있는데요. 타이틀 패널, 스코어 패널, 버튼 패널이 있습니다.




많은 개발자분들이 자바 언어를 사용하시는 경우가 많을 것이라고 생각하는데요.

자바 언어를 활용하여 콘솔 창에서 다양한 프로그램을 작성해본 경험은 있어도 GUI 프로그래밍을 해본적은 없는 분들을 위해서 간단한 GUI 프로그래밍 방법에 대해서 소개해드리고자 합니다. 자바 언어를 아주 간단히 사용해본 적이 있으신 분들에 대해서 읽어보시면 좋을 듯합니다.


자바는 GUI 프로그래밍을 위해 2가지 패키지를 제공하고 있습니다.

- abstract windows kit (AWT) 

- swing toolkit

AWT가 기존의 것이고, swing toolkit이 더 새로운 것입니다. Swing 패키지에서 제공하는 프레임들은 기존 AWT가 제공하는 프레임들과 구별하기 위해서 JFrame과 같은 클래스 이름을 사용하고 있습니다. (AWT에서 제공하는 프레임 클래스는 Frame) 즉, 맨 앞에 J를 붙여줌으로써 Swing 패키지에서 제공하고 있음을 병시하는 것입니다. 


표시가능한 프레임들 JWindows, JDialog, JApplet과 같은 최상 수준의 컨테이너들이고,

표시되지 않는 컨텐츠 틀들 JPanel, JoptionsPane, JScrollPane, JSplitPane들과 같은 중간 수준의 컨테이너들입니다.

(최상 수준, 중간 수준이라는 말은 고수준-저수준의 용어의 맥락에서 생각하시면 편합니다. 수준이 높을수록 좋은게 아니고, 사람과 더 가까이 있다는 것을 의미합니다. 즉, 눈에 보이는 컨테이너들이 최상 수준이고, 눈에 보이지는 않지만 작동하고 있는 것들이 중간 수준, 혹은 저수준이라고 말할 수 있는 것이지요)


여기서 컨테이너란 위젯들을 말하거나 다른 위젯들을 관리하고 처리하는 GUI 컨트롤들을 말합니다. 

위젯들은 간단히 말해 텍스트 박스, 체크 박스, 버튼 같은 GUi 컴포넌트를 말하는 것이구요. 

(두 개가 큰 차이가 있다기 보단 위젯이 더 작은 구성요소, 그것을 그룹화하고 관리하는 것이 컨테이너라고 말할 수 있습니다.)


아래는 자바를 관리하는 썬에서 제공하는 그림입니다.



여기서 중요한 것은 위젯을 추가하여 GUI 컨트롤을 보여주려면, 그것을 Content Pane에 추가해야 한다는 것입니다.


충분히 기본적인 지식은 다 쌓았다고 생각이 듭니다.

자, 이제 다음 가장 간단한 GUI 예제를 보시면 되겠습니다.


import java.awt.*; import java.awt.event.*; import javax.swing.*;

public class Frame1 extends JFrame { JPanel pane = new JPanel(); Frame1() { super("Empty Simple Frmae"); 

setBounds(100,100,300,100); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Container con = this.getContentPane(); con.add(pane); // add the panel to content pane

/* customize panel here */

setVisible(true); }

public static void main(String args[])

{

Frame1 frame = new Frame1();

} }


중간 수준에서 위젯들을 그룹화하고 처리할 (물론 이 예제에서는 딱히 처리할 위젯이나 GUI 컨트롤이 없긴 하지만) JPanel 클래스를 만들어줍니다. 그리고 이 Panel을 Content Pane에 추가합니다. 그 이후, 패널을 자유자재로 설정해주시고, setVisible(true)를 호출하면 간단한 GUI 프레임이 등장하는 것을 보실 수 있으실 겁니다.

+ Recent posts