츈츈's Spring

2.

package Ex_0520.실습문제;

import Ex_0520.BorderLayoutEx;
import Ex_0520.Myframe;

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

public class Q2  extends JFrame {

    Q2(){

        setTitle("BorderLayOut 예제");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 윈도우 창 종료시 프로세스 종료
        setSize(300,200);

        Container cp = getContentPane();
        cp.setLayout(new BorderLayout(5,5)); // 배치관리자

        cp.add(new JButton("NORTH"),BorderLayout.NORTH);
        cp.add(new JButton("SOUTH"),BorderLayout.SOUTH);
        cp.add(new JButton("CENTER"),BorderLayout.CENTER);
        cp.add(new JButton("WEST"),BorderLayout.WEST);

        this.setVisible(true); // 화면에 프레임 출력
    }
    public static void main(String[] args) {
        new Q2();
    }

}

3. 

package Ex_0520.실습문제;

import Ex_0520.CPEx;

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

public class Q3 extends JFrame {

    Q3(){
        setTitle("FlowLayout 예제");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(300,300);

        // 컨텐트 팬 알아내기
        Container cp = getContentPane();
        // 배치 관리자 설정하기
        cp.setLayout(new FlowLayout());

        // 컨텐트 팬에 요소들 생성하고 붙이기 
        cp.add(new JLabel("100+200"));
        cp.add(new JButton("="));
        cp.add(new JLabel("300"));



        setVisible(true);
    }

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

5.

package Ex_0520.실습문제;

import Ex_0520.GridLayoutEx1;

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

public class Q5 extends JFrame {


    Q5() {
        setTitle(" GridLayout 예제 ");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 윈도우 창 종료시 프로세스 종료
        setSize(500, 200);


        Container cp = getContentPane(); // 프레임의 컨테이너 팬 영역 얻어오기

        Color[] color = {Color.RED, Color.ORANGE, Color.YELLOW, Color.GREEN,
                Color.CYAN, Color.BLUE, Color.MAGENTA, Color.GRAY,
                Color.PINK, Color.LIGHT_GRAY};

       // 4x4 설정
        cp.setLayout(new GridLayout(4, 4));

        // 16개의 버튼 부착
        for (int i = 0; i < 16; i++) {
            JLabel la = new JLabel(Integer.toString(i));
            la.setOpaque(true); // 불투명 설정
            la.setBackground(color[i%10]);
            cp.add(la);
        }

        this.setVisible(true); // 컴포넌트 표시
    }

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

6.

package Ex_0520.실습문제;

import Ex_0520.NullContainerEx;

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

public class Q6 extends JFrame {

    Q6(){
        setTitle("배치관리자 없는 Layout");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 윈도우 창 종료시 프로세스 종료
        setSize(300,300);

        Container cp = getContentPane(); // 프레임의 컨테이너 팬 영역 얻어오기
        // 배치 관리자 설정 - 배치 관리자 없음
        cp.setLayout(null);

        for(int i=0;i<20;i++){
            JLabel la = new JLabel(Integer.toString(i));
            // 위치 설정
            int x = (int) (Math.random() * (this.getWidth() - 50));
            int y = (int) (Math.random() * (this.getHeight() - 50));
            la.setLocation(x,y);

            // 크기 설정
            la.setSize(20,20);
            la.setForeground(Color.MAGENTA);
            
            cp.add(la); // la를 컨텐트 팬에 부착
        }

        this.setVisible(true); // 컴포넌트 표시
    }

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

이전 글에 이어서 배치 관리자에 대해서 좀 더 예제를 통해 자세히 알아보자 

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

예제를 통해 각각의 배치 관리자를 이용하는 방법에 대해 공부해보자. 

1️⃣ FlowLayout

 FlowLayout은 삽입되는 컴포넌트들을 왼쪽에서 오른쪽으로, 그리고 다시 위에서 아래로 배치한다. 

🍀 생성자 

• FlowLayout
  모든 설정을 디폴트 값으로 생성한다. 
• FlowLayout(정렬 방법) 
  디폴트 정렬 방법은 중앙정렬이다. 정렬 방법에는 왼쪽, 중앙, 오른쪽 정렬이 있다.
  - FlowLayout.LEFT
  - FlowLayout.CENTER ( 디폴트 값 ) 
  - FlowLayout.RIGHT 
• FlowLayout( 정렬 방법, 수평 간격, 수직 간격 ) 
  디폴트 값은 둘다 5이다. 
  컴포넌트 사이의 수평 간격과 수직 간격을 설정 할 수 있다. 

🍀  예제 문제 

위의 그림과 같이 GUI 프로그래밍을 하기 위해서는 배치 관리자의 종류로 FlowLayout을 사용하여  (FlowLayout.LEFT,30,40)으로 생성해주면 된다. 

package chapter8;

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

public class FlowLayoutEx extends JFrame {

    FlowLayoutEx(){
        setTitle("FlowLayout Sample");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(300,200);

        // 컨텐트 팬에 버튼 생성하기
        Container cp = getContentPane(); // 컨텐트 팬 알아내기
        cp.setLayout(new FlowLayout(FlowLayout.LEFT,30,40)); // 어떤식으로 배치 할지 설정하기

        cp.add(new JButton("add"));
        cp.add(new JButton("sub"));
        cp.add(new JButton("mul"));
        cp.add(new JButton("div"));
        cp.add(new JButton("calculate"));


        setVisible(true);
    }

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

}

2️⃣ BorderLayout

BorderLayout은 컴포넌트들을 5개의 구역으로 나눠서 배치하는 방법이다. 따라서 컴포넌트들에게 배치 할 구역을 지정해줘야한다. 

만약 지정해주지 않는다면 디폴트 값이 center이다. 

🍀 생성자 

• BorderLayout()
• BorderLayout( 수평 간격, 수직 간격 ) 
  디폴트 값은 모두 0 
• add ( 컴포넌트 생성, 컴포넌트의 위치 설정 ) 
  - BorderLayout.NORTH
  - BorderLayout.SOUTH
  - BorderLayout.EAST
  - BorderLayout.WEST
  - BorderLayout.CENTER ( 디폴트 값 ) 

🍀 예제 문제 

컴포넌트들이 배치된 형태를 보았을때 BorderLayout을 사용하였음을 알 수 있다. 

BorderLayout의 생성자에게 값을 넘겨 위와 같이 GUI 화면을 출력해보자. 

package chapter8;

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

public class BorderLayoutEx extends JFrame {
    BorderLayoutEx(){
        setTitle("BorderLayout 예제");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(300,200);

        // 컨텐트 팬에 버튼 부착하기
        Container cp = getContentPane(); // 컨텐트 팬 알아내기
        cp.setLayout(new BorderLayout(30,20)); // 배치 관리자 설정
      //cp.setLayout(new BorderLayout()); // 디폴트값 0


        // 버튼 부착하기
        cp.add(new JButton("add"),BorderLayout.NORTH);
        cp.add(new JButton("sub"),BorderLayout.SOUTH);
        cp.add(new JButton("mul"),BorderLayout.EAST);
        cp.add(new JButton("div"),BorderLayout.WEST);
        cp.add(new JButton("calculate"),BorderLayout.CENTER); // BorderLayout.CENTER 안써도 됨

        setVisible(true);
    }

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

3️⃣ GridLayout 

GridLayout이란 컨테이너 공간을 동일한 크기의 격자로 나누어서 배치하는 방법이다. 

왼쪽에서 오른쪽으로, 다시 위에서 아래로 배치 할 수 있다. 

생성자를 통해 몇행 몇열로 배치 할 지도 결정할 수 있다. 

🍀 생성자

• GridLayout() 
  디폴트 값은 1행 1열이다. 
• GridLayout( 행, 열 ) 
• GridLayout( 행, 열 , 수평 간격, 수직 간격) 
  수평, 수직 간격의 디폴트 값은 1이다. 

🍀 예제 문제 

컴포넌트들의 배치 형태를 보니 gridLayout 형태임을 알 수 있다. 

또한 1행 10열의 배치 구조로 각각의 버튼에 0~9의 인덱스를 설정하면 된다. 

package chapter8;

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

public class GridLayoutEx extends JFrame {
    GridLayoutEx(){
        setTitle("GridLayout 예제");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(500, 200);
       

        // 컨텐트 팬에 버튼 부착하기
        Container cp = getContentPane();
        // 1x 10열의 배치 관리자 생성하기
        cp.setLayout(new GridLayout(1, 10));
      //cp.setLayout(new GridLayout(2,5,5,5));

        for(int i=0;i<10;i++){
            String text = Integer.toString(i); // i를 문자열로 변환
            cp.add(new JButton(text));
        }

        setVisible(true);
    }

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

}

4️⃣ 배치 관리자가 없는 경우 

• 컴포넌트의 크기나 위치를 개발자 임의로 설정하고 싶은 경우
• 게임처럼 컴포넌트의 위치가 수시로 변하는 경우 
• 컴포넌트들을 겹쳐서 출력하고자 하는 경우 

🍀  배치 관리자를 제거하는 방법

      -  컨테이너. setLayout ( null ) ; 

배치 관리자를 제거하면 컴포넌트의 크기는 0으로 설정되고 위치는 예측 할 수 없게 된다.

그래서 개발자가 컴포넌트의 크기와 위치를 지정해줘야한다. 

🍀  컴포넌트의 크기와 위치를 설정하는 메서드 

        -  void setSize(int widht, int height) 
             컴포넌트의 크기 설정
        -  void setLocation(int x, int y) 
             컴포넌트의 위치 설정 
         - void setBound(int x, int y, int width, int height) 
             위치와 동시에 크기를 설정 

🍀 예제 문제 

package chapter8;

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

public class NullLayoutEx extends JFrame {

    NullLayoutEx(){
        setTitle("Layout이 없는 경우");
        setDefaultCloseOperation(EXIT_ON_CLOSE); // 종료시 프로세스도 같이 종료하기
        setSize(300, 300);
      
        // 컨텐트 팬 설정하기 
        Container cp = getContentPane();
        cp.setLayout(null); // 배치 관리자 없애기

        // 컴포넌트 설정하기
        JLabel la = new JLabel("Hello Press Button!");
        la.setSize(200,20); // la 컴포넌트의 크기 설정하기 
        la.setLocation(130,50); // la 컴포넌트의 위치 설정하기
        cp.add(la); // la 컨텐트 팬에 부착하기

        // 9개의 버튼 컴포넌트를 생성하고 동일한 크기로 설정
        // 위치는 서로 겹치지 않게 설정하기

        for(int i=1;i<10;i++){
            JButton b = new JButton(Integer.toString(i)); // 번호가 있는 버튼 생성
            b.setSize(50,20); // 버튼의 크기 설정
            b.setLocation(i * 15, i * 15); // 버튼의 위치 설정
            //b.setBounds(i*15,i*15,50,20);
            cp.add(b); // 컨텐트 팬에 부착하기
        }


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

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

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 값으로 채워져서 출력되는 것이다. 

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