[ Java ] GUI 프로그래밍 응용

오늘은 이전 포스팅에서 알아보았던 GUI 프로그래밍 예제를 통해서 알아봅시다.

 

1. FlowLayout 

 

FlowLayout은 몇 개의 컴포넌트를 자연스러운 크기로 한 줄로 순서대로 배치합니다.

 

그럼 예제를 통해서 알아봅시다.

 

<예제 1>

public class FlowlayoutEx1 extends JFrame {
    public FlowlayoutEx1(){
        setTitle("FlowLayOut 예제");
        setSize(300,200);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        // flowlayout 설정
        setLayout(new FlowLayout(FlowLayout.RIGHT,30,40));
        //FloLayout,정렬위치,컴포넌트간 좌우간격 30픽셀, 상하간격 40픽셀로 옵션을 정할 수도 있음
	//생성자를 이용하여 왼쪽으로 정렬할지, 오른쪽으로 정렬할지, 가운데로 정렬할지 지정할 수 있음

        add(new JButton("1"));
        add(new JButton("2"));
        add(new JButton("3"));
        add(new JButton("4"));
        add(new JButton("5"));
    }

    public static void main(String[] args) {
        new FlowlayoutEx1();
    }
}

 

<예제1> 코드를 실행하면 아래와 같은 창이 출력됩니다.

FlowLayout

 

Frame Size(300,200) 값으로 크기를 정해주고 생성자로 정렬기준뿐만 아니라 상하좌우 간격도 지정해 주었습니다.

위 결과를 보면 컴포넌트들이 일렬로 배치되는 걸 볼 수 있는데 창의 크기를 바꿨더니 아래와 같은 화면이 되었습니다.

( 예시로 컴포넌트들을 오른쪽으로 정렬해 보았습니다. )

 

FlowLayout

 

그럼 바로 다음 예제를 통해서 좀 더 알아봅시다.

대체적으로 글쓴이는 코드에서 변수 활용을 중요하게 생각해서 변수를 활용해 보았습니다.

 

<예제 2>

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

public class FlowlayoutEx2 extends JFrame {
    JPanel jp; // 패널 변수 언언
    JButton jb1,jb2,jb3,jb4,jb5,jb6; //버튼변수 선언

    public FlowlayoutEx2(){
        super("FlowLayOut 예제2");
        jp = new JPanel();//패널 생성
        jb1 = new JButton("버튼1");
        jb2 = new JButton("버튼2");
        jb3 = new JButton("버튼3");
        jb4 = new JButton("버튼4");
        jb5 = new JButton("버튼5");
        jb6 = new JButton("버튼6");

        jp.add(jb1);
        jp.add(jb2);
        jp.add(jb3);
        jp.add(jb4);
        jp.add(jb6);
        jp.setLayout(new FlowLayout());
        add(jp);

        setSize(400,300);
        setVisible(true);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    }

    public static void main(String[] args) {
        new FlowlayoutEx2();
    }


}

 

<예제2> 코드를 실행하면 아래와 같은 창이 출력됩니다.

FlowLayout

 

정리하자면 Flowlayout은 가장 기초적이며 상당히 자주 쓰이는 레이아웃입니다.

내가 선택한 정렬로 정렬을 할 수 있습니다.

 

그럼 레이아웃의 정렬방법은 여러 가지 있으므로 찾아서 보도록 합시다.

 

2. BorderLayout 

 

BorderLayout은 한 영역에 1개의 컴포넌트만 배치됩니다. 즉, 웹 사이트와 같다고 생각하시면 됩니다.

동서남북 중 총 5가지의 구역으로 나눠져 있습니다.

참고로 BorderLayout은 컨탠트팬을 배치하지 않는 프레임의 기본 레이아웃이기도 합니다. 배치할 때 중요한 점은배치할 때 플래그를 지정해주지 않는다면 자동으로 센터에 들어간다는 점..!! 그리고 한 구역에 하나밖에 배치할 수 없다는 점입니다. 만약 한 구역에 여러 개를 배치하고 싶다면 그 안에 패널을 따로 넣어주어야 합니다.

 

그럼 예제를 통해서 알아봅시다.

 

<예제 1>

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class BorderEx extends Frame {
    public BorderEx(){
        setTitle("BorderLayout 예제");//타이틀 셋팅
        setSize(300,200);
        setVisible(true);
        

        Button b1 = new Button("east");
        Button b2 = new Button("west");
        Button b3 = new Button("south");
        Button b4 = new Button("north");
        Button b5 = new Button("center");

//        setLayout(new BorderLayout());//Frame의 기본레이아웃은 BorderLayout이다
        // 따라서 setLayout 에서 생략해도 된다.
        //BorderLayout의 각영역에 컴포넌트를 배치
        add(b1,"East");
        add(b2,"West");
        add(b3,"South");
        add(b4,"North");
        add(b5,"Center");// 또는 add(b5); Center는 생략가능

        // 윈도우창 닫기
        addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
    public static void main(String[] args) {
        new BorderEx();

    }
}

 

위 코드를 보면 FlowLayout과는 다르게 setLayout(new BorderLayout());이 생략이 가능합니다.

각 영역에 컴포넌트를 배치를 해주어야 하고 마지막에 Center는 생략하셔도 됩니다.

 

결과는 아래와 같습니다.

BorderLayout

 

BorderLayout 또한 부가적인 옵션으로 상하좌우 간격을 벌릴 수 있습니다.

※ BorderLayout(int hgap,int vgap)

 

3. GridLayout

 

GridLayout은 몇 개의 컴포넌트를 행과 열로 동일한 크기로 배치합니다. Grid는 격자라는 뜻으로 동일한 크기로 행과 열을 배치해야 하는데 GridLayout은 규칙이 있습니다.

 

- 열의 개수이상의 컴포넌트가 필요합니다.

- 총 사용 가능한 그리드 수 보단 컴포넌트가 작거나 같아야 합니다.

 

그럼 예제를 통해서 알아봅시다.

 

<예제 1>

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

public class GridEx2 extends JFrame {

    public GridEx2(){
        super("GridLayout 예제1");
        setLayout(new GridLayout(3,3));//3행3열
        for (int i=1; i<=9; i++){
            JButton button = new JButton("button"+i);
            add(button);
        }
        setSize(300,300);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new GridEx2();
    }
}

 

결과는 아래와 같습니다.

GridLayout

 

위 결과처럼 GridLayout은 생성자로 행과 열의 크기를 지정해 줄 수 있습니다. 만약에 행 또는 열을 개수에 제한 없이 받고 싶으실 때에는 (0) 값을 넣어주시면 됩니다.

 

바로 실습으로 알아봅시다.

 

<예제 2>

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

public class GridEx2 extends JFrame {

    public GridEx2(){
        super("GridLayout 예제1");
        setLayout(new GridLayout(0,3));//0행3열
        for (int i=1; i<=15; i++){ // 15개의 button
            JButton button = new JButton("button"+i);
            add(button);
        }
        setSize(300,300);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new GridEx2();
    }
}

 

<예제 1> 은 3행 3열로 9개의 컴포넌트 값으로 출력했는데, 위 코드는 컴포넌트 값을 for문을 통해서 15개의 버튼을 생성하는 코드입니다.

그럼 0행 3열로 15개의 버튼은 어떻게 출력될까??

 

결과는 아래와 같습니다.

GridLayout

 

행값에 0을 줬더니 개수에 상관없이 컴포넌트들이 들어가는 것을 보실 수 있습니다.

결과적으로 GridLayout은 컴포넌트를 행과 열로 동일한 크기로 배치할 수 있는 걸 알 수 있습니다.

 

4. CardLayout 

 

마지막으로 CardLayout은 한 개의 프레임에 여러 레이아웃을 표시합니다. 즉, 한 화면에 여러 컨테이너들을 겹쳐서 슬라이드처럼 사용하는데, 하나의 프레임으로 여러 화면을 보여주고 싶을 때 사용합니다.

 

그럼 예제를 통해서 알아봅시다.

 

<예제 1>

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

public class CardEx1 extends JFrame {
    CardLayout card;
    Container con;

    public CardEx1() {
        super("CardLayout 예제");
        card = new CardLayout();
        con = getContentPane(); // 프레임의 컨텐츠 영역
        setLayout(card);//카드레이아웃으로 변경
        JPanel[] pan = new JPanel[5];//패널 배열 생성
        Color[] color = {Color.red, Color.yellow, Color.green, Color.blue, Color.cyan};
        for (int i = 0; i < pan.length; i++) {
            pan[i] = new JPanel();//패널 생성
            pan[i].setBackground(color[i]);//패널의 배경색상 설정
            add("card" + i, pan[i]);
            //패널에 마우스 이벤트 추가
            pan[i].addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    card.next(con);//다음 화면으로 이동
                }
            });
            setSize(300, 300);
            setVisible(true);
            setDefaultCloseOperation(EXIT_ON_CLOSE);
        }
    }

    public static void main(String[] args) {
        new CardEx1();
    }
}

위 코드는 CardLayout을 확실하게 이해하기 위해 이벤트 처리(Event Handling)를 해보았습니다.

(이벤트 처리(Event Handling)는 맨 아래 참고해 주세요.)

 

Color() 메서드를 배열로 활용하여 각 색상을 담아주고, 패널에 마우스 이벤트를 추가해서 클릭 시 배경 색상이 바뀌게 설정으로,

결과는 아래와 같습니다.

 

CardLayout

위 사진처럼 마우스로 클릭하면 다음 페이지로 이동하면서 배경 색상이 바뀌는 걸 알 수 있습니다.

 

정리하자면 CardLayout은 여러 개의 카드를 쌓아 보여주는 레이아웃입니다.

 

- CardLayout은 컨테이너의 각 구성 요소를 카드로 취급합니다.

- 한 번에 하나의 카드만 보이며, 컨테이너는 일련의 카드 역할을 합니다.

- CardLayout에 추가된 첫 번째 구성 요소는 컨테이너가 처음 표시 될 때 보이는 구성 요소입니다.

 

5.  이벤트 처리(Event Handling)

 

• 이벤트 처리

- user와 system 간의 상호작용을 뜻합니다.

 

- user : request(요청)

- system : response(응답)

 

• 이벤트 처리의 3요소

- 이벤트 소스 : 이벤트의 대상

- 이벤트 감시자(이벤트 리스너) : 이벤트가 발생했는지 검사합니다.

- 이벤트 처리기(이벤트 핸들러) : 이벤트가 발생했을 때 처리할 코드입니다.

 

 

• 컴포넌트에 이벤트 처리 기능을 추가하는 코드

 

- 이벤트소스, 이벤트리스너(이벤트 헨들러)

button.addActionListener(this);

 

• 대표적인 이벤트 처리 클래스

ActionEvent //버튼, 메뉴 아이템 등을 클릭할 때
MouseEvent //마우스 이벤트
KeyEvent //키이벤트

 

※ 자바에서 미리 구현된 이벤트 처리 클래스에서 제공하는 기능을 사용하기 위해서는 해당되는 인터페이스만 호출하면 됩니다.

 

그럼 예제를 통해서 알아봅시다.

 

<예제 1>

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

public class EventEx2 extends JFrame {
    private JButton button1, button2, button3, button4, button5, button6;

    public EventEx2() {
        //플로우 레이아웃 변경
        setLayout(new FlowLayout());

        button1 = new JButton("Red");
        button2 = new JButton("Green");
        button3 = new JButton("Blue");
        button4 = new JButton("White");
        button5 = new JButton("Yellow");
        button6 = new JButton("Cyan");

        //프레임에 버튼 추가
        add(button1);
        add(button2);
        add(button3);
        add(button4);
        add(button5);
        add(button6);

        //버튼 클릭 시 이벤트 기능 추가
        button1.addActionListener(new MyColoAction(this, Color.red));
        button2.addActionListener(new MyColoAction(this, Color.green));
        button3.addActionListener(new MyColoAction(this, Color.blue));
        button4.addActionListener(new MyColoAction(this, Color.white));
        button5.addActionListener(new MyColoAction(this, Color.yellow));
        button6.addActionListener(new MyColoAction(this, Color.cyan));
        //버튼을 누르면 MyColorAction 클래스에서 구현한 actionPerformed()가 자동 호출됨.
        //this 는 EventEx2 자신의 객체를 가리키는 것.
        //또 데이터타입으로는 JFrame 타입이다.(JFrame 을 상속받았기 때문)


        setSize(450, 300);
        setVisible(true);
        setDefaultCloseOperation(DISPOSE_ON_CLOSE);//현재 창만 닫음
    }

    public static void main(String[] args) {
        new EventEx2();

    }
}

 

위 코드는 컴포넌트 버튼을 클릭 시 해당 색상이 배경화면에 표출되게 이벤트 처리를 해보았습니다.

 

결과는 아래와 같습니다.

 

Red~ White까지만 클릭해 보겠습니다.

 

 

---

마치며

 

GUI 프로그래밍 개념과 응용에 대해서 포스팅을 해보았습니다. 하지만 앞으로 레이아웃은 특별한 부분이 아니면 사용하지 않을 생각입니다..!! 레이아웃을 사용하면 구성요소의 크기와 위치를 자동으로 정해주기 때문에 자유도가 떨어집니다... 그럼에도 레이아웃을 배운 이유는 배워야 무슨 뜻인지 알고 넘어갈 수 있기 때문이라고 생각합니다..!!

 

그럼 다음 포스팅에 뵙겠습니다.

감사합니다.