보름달빵 2024. 6. 2. 01:26

GUI 응용프로그램

GUI란  Graphical User Interface 의 약자로 TUI(Text user interface)와 반대되는 개념이다. 

지금까지 작성한 프로그램들은 모두 텍스트 모드로 입출력이 되었기 때문에 TUI 응용 프로그램이라 할 수 있다. 

반면 GUI를 이용한 응용프로그램은 키보드 뿐만 아니라 마우스를 이용하여 사용자가 자유롭게 화면을 동작할 수 있다. 

 

자바는 AWT와 Swing 라이브러리를 제공하여 쉬운 GUI프로그래밍을 할 수 있도록 지원한다. 

 

 

 AWT와 Swing 라이브러리   

 

자바 언어는 GUI 응용 프로그램  작성을 위해서 다양한 GUI컴포넌트를 제공한다. 

GUI 컴포넌트는 AWT와 Swing 컴포넌트로 구분된다. 

 

  • AWT 컴포넌트 

자바가 처음 나왔을때 배포된 GUI패키지로 최근에는 거의 사용하지 않는다. 

이 컴포넌트는 운영체제의 도움을 받아 화면에 출력되기 때문에 속도는 빠르지만, 운영체제의 자원을 많이 사용하므로 운영체제에게 부담을 준다.  그래서 AWT 컴포넌트는 중량 컴포넌트 (Heavy weight component)라고도 불린다. 

 

또한 운영체제에 의존적 이므로 운영체제에 따라 출력화면이 다르게 나타날 수 있다.  

 

  • Swing 컴포넌트 

AWT를 기반으로 작성된 자바 라이브러리이다.  AWT 를 개선한 것이 스윙으로, 모든 운영체제에 동일한 출력화면이 나오며 

성능도 더 좋다.  스윙 컴포넌트는 운영체제의 도움을 받지 않기 때문에 경량 컴포넌트(light weight component)라고도 불린다. 

 

현재는 대부분 스윙 라이브러리를 사용하여 GUI 프로그래밍을 제작한다. 

 

 

 

 

Swing GUI 프로그래밍 

스윙 프로그램은 스윙 컴포넌트를 레고 블록 조립하듯이 작성한다. 

 

  • 최상위 컨테이너 
    다른 컨테이너에 포함 되지 않고도 화면에 출력되며 독립적으로 존재가능한 컨테이너 
    즉, 스스로를 화면에 출력 가능한 컨테이너이다. ex) JFrame
  • 컨테이너
    다른 컴포넌트를 포함 할 수 있는 GUI 컴포넌트로 java.awt.Container를 상속 받는다. 
    다른 컨테이너에 포함 될 수 있다. 
  • 컴포넌트 
    컨테이너에 포함되어야 화면에 출력 될 수 있는 GUI 객체이다. 

즉, GUI 프로그램은 최상위 컨테이너 위에 컨테이너들이 있고 그 안에 컴포넌트들이 위치하고 있는 것이 화면으로 출력되는 것이다. 

 

 

스윙 GUI 프로그램 만들기

스윙 GUI 프로그램을 만드는 과정은 3단계 이다. 

  1. 스윙 프레임 만들기
  2. main 메소드 작성
  3. 스윙 프레임에 스윙 컴포넌트 붙이기 

스윙 프레임은 모든 스윙 컴포넌트를 담는 최상위 컴포넌트 이다. 

GUI 프로그래밍을 케익을 만드는 과정에 비유해보자면 제일 먼저 케익을 올릴 판인 스윙 프레임을 준비하는 것이다.

 

스윙 프레임(JFrame)의 기본 구성은 프레임, 메뉴바, 컨텐트 팬으로 구성된다. 

  • 프레임 - 스윙 프로그램의 기본 틀
  • 메뉴바 - 메뉴들이 부착되는 공간
  • 컨텐트 팬 - GUI 컴포넌트들이 부착되는 공간 

 

스윙 프레임의 구성요소

 

 

스윙 프로그램은 마치 레고를 조립 하듯이 최상위 프레엠 위에 있는 컨텐트 팬 위에 화면에 출력하고 싶은 여러가지 컴포넌트들을 붙이고 이를 출력하는 것이다. 

 

스윙 응용 프로그램에서 main()의 기능은 스윙 응용 프로그램이 실행되는 시작점의 기능만 하면 된다. 

따라서 스윙 프레임을 생성하는 정도의 코드만 간결하게 작성해주면 된다. 

 

 public static void main(String[] args) {
        new MyFrame(); // 코드의 최소화
    }

 

 

 


 

1️⃣ 스윙 프레임 만들기 

 

스윙 프레임만 출력하기

 

package chapter8;

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

// 스윙 프레임 만들기

public class MyFrame extends JFrame{

    MyFrame(){
        setTitle("첫번째 스윙 프레임");
        setDefaultCloseOperation(EXIT_ON_CLOSE); // 프레임 종료와 함께 프로그램도 종료하기 
        setSize(300, 300);

        setVisible(true); // 화면에 프레임 출력하기
    }

    public static void main(String[] args) {
        new MyFrame(); // 코드의 최소화
    }
}

 

 

 

2️⃣ 3개의 버튼을 가진 스윙 프레임 작성하기 

 

 

package chapter8;

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

public class ContentPaneEx  extends JFrame {

    ContentPaneEx(){
        setTitle("컨텐트 팬 예제");
        setDefaultCloseOperation(EXIT_ON_CLOSE); // 종료시 프로그램도 같이 종료하기
        setSize(300, 150);

        // 컨텐트 팬에 버튼 부착하기
        Container cp = getContentPane(); // 컨텐트 팬 알아내기
        cp.setBackground(Color.ORANGE); // 오렌지 배경색 설정
        cp.setLayout(new FlowLayout()); // 배치 관리자 설정

        cp.add(new Button("ok"));
        cp.add(new Button("cancle"));
        cp.add(new Button("ignore"));



        setVisible(true); // 화면에 프레임 출력하기
    }

    public static void main(String[] args) {
        new ContentPaneEx(); // 코드의 최소화
    }
}

 

 

 

3️⃣  배치 관리자 설정하기 

 

배치 관리자는 컨테이너에 컴포넌트들을 어떤식으로 배치 할 것인지 결정한다. 

배치 관리자에는 크게 4가지 유형이 있다. 

  • FlowLayout 
    순서대로 왼쪽에서 오른쪽으로 배치한다. 위의 공간이 다 차면 아래로 배치한다. 
  • BorderLayout
    동서남북 + 중앙 5개의 영역으로 구분하여 배치한다. 지정한 영역에 컴포넌트를 배치한다. 
  • GridLayout
    컨테이너를 동일한 크기의 2차원 격자로 나눈다. flowlayout과 유사하게 왼쪽에서 오른쪽으로 , 다시 위에서 아래로 배치한다. 
  • CardLayout 
    카드를 쌓아 올리듯이 컴포넌트를 포개어 배치한다.  

 

배치 관리자의 대표적인 유형

 

 

 

JFrame 의 디폴트 배치 관리자는 BorderLayout으로, 위치를 지정하지 않은 경우 center가 기본값으로 설정된다. 

JPanel의 디폴트 배치 관리자는 FlowLayout 이다. 

 

 

 

2번 예제의 코드에서 배치 관리자 설정 부분을 주석 처리하면 어떤 화면이 출력 될까 ? 

 

🙊 예상해본 출력결과 
기본 배치 관리자가 BorderLayout으로 설정되고, 컴포넌트들의 위치를 정해주지 않았기 때문에 center에 배치 될 것이다.

따라서  주황색 배경화면에 마지막에 삽입된 ignore 버튼만이 출력되는 화면이 나오게 될 것이다. 

 

🙊 실제 출력결과 

그런데 출력 결과를 보니 ignore 버튼이 전체 프레임을 차지한 결과가 나왔다 . 

 

그 이유는 BorderLayout에서 center 영역은 나머지 부분이 비어있다면 그 부분을 모두 채워서 출력하도록 설정 되어있기 때문이다. 

지금은 네부분이 모두 비어있기 때문에 center의 값이 전체 프레임을 채워서 출력 된 것이다. 

North 부분에 버튼을 생성했다면 그 부분을 제외한 나머지 부분이 center 값으로 채워져서 출력되는 것이다. 

 

 

 

 

다음 글에서 각각의 배치 관리자에 대해 예제로 좀 더 자세히 알아보자