GUI / Layout / awt/ 컴포넌트 / 컨테이너 개념정리

JAVA/멀티스레드, 이벤트

GUI / Layout / awt/ 컴포넌트 / 컨테이너 개념정리

읽히는 블로그 2024. 5. 23. 12:33

▤ 목차

✔ GUI(Graphical User Interface)

⌨ 목적

사용자에게 이해하기 쉬운 모양의 정보를 제공한다.

사용자가 편리하게 입출력을 할 수 있는 그래픽 화면으로 구성하고 입출력 장치를 통해 입력받을 수 있도록 지원하는 사용자 인터페이스이다.

✨ 자바 GUI 특징

GUI 프로그래밍이 쉽다.
GUI 컴포넌트를 제공한다.

✏️ 자바 GUI 프로그래밍

GUI 컴포넌트와 그래픽을 이용

AWT : java.awt 패키지
Swing : javax.swing 패키지

✔ AWT(Abstract Windowing Toolkit)

자바가 처음 나온 시기 함께 배포된 GUI 라이브러리이다.

GUI 프로그래밍(윈도우 프로그래밍)을 위한 도구이다.
AWT컴포넌트의 최상위 조상은 java.awt.Component 클래스(메뉴 관련 컴포넌트 제외)이다.
native 운영체제의 gui 컴포넌트의 도움을 받기 때문에 처리 속도는 빠르지만 운영체제에 부담이 많이 간다.
java로 구현하지 않고 OS의 컴포넌트를 그대로 사용한다.
즉, os에 종속적이다. 만들기 쉽지만 무겁다.

✔ Swing

AWT 기술 기반으로 순수 자바 언어로 만들어진 라이브러리이다.
AWT 기술 + 고급 컴포넌트
native OS에 의존적이지 않다.
만들기는 어렵지만 가볍다.

Swing 특징

클래스 이름이 J로 시작한다.
JComponenet를 상속받는 클래스이다. (인스턴스 생성(new)이 불가능)
AWT의 Container를 상속받는 클래스(JApplet, JDialog, JFrame ..등)이다.

* JComponent : 스윙 컴포넌트의 공통 속성을 구현한 추상 클래스를말한다.

✔ 컴포넌트(Component)

모든 컴포넌트의 최상위 조상은 java.awt.Component 클래스 (메뉴 관련 컴포넌트 제외)

모든 스윙 컴포넌트는 javax.swing.JComponenet를 상속받는다.

컨테이너에 포함되어야 화면에 출력될 수 있는 GUI 객체이다.

🔧 AWT 컨포넌트 별 발생 이벤트

✔ 컨테이너(Container)

다른 GUI 컨포넌트를 포함할 수 있는 컴포넌트를 말한다.
java.awt.Container 상속받는다.
다른 컨테이너에 포함될 수 있다.
최상위 컨테이너는 독립적 출력이 가능하다.
AWT 컨테이너 : panel, Frame, Applet, Dialon, Window
add()를 사용해서 추가한다.

✔ awt 예제

📝 layoutManager 배치 관리자

컨테이너 안에 추가되는 컴포넌트의 위치와 크기를 자동적으로 결정한다.

Frame : BorderLayout(Window, Dialon, Frame)이 기본이다.
Panel : FlowLayout(panel, applet)이 기본이다.

[종류]

- FlowLayout

위드 프로세서와 같이 맞춤 정렬이 가능하다. 기본 생성자( )는 가운데 정렬, 상하 좌우 5픽셀로 설정되어 있다.

컨포넌트들을 왼쪽에서 오른쪽으로 배치한다.
너비를 벗어날 경우 다음 줄에서 다시 배치를 시작한다.
Panel과 awt.Applet의 디폴트 배치 관리자이다.

- BorderLayout

Frame, Japplet, 대화 상자.. 등 최상위 컨테이너의 디폰트 배치 관리자이다.
컴포넌트들이 상하좌우중간에 배치된다.
같은 위치에 컴포넌트들이 추가되면 앞의 컴포넌트는 보이지 않는다.

- GridLayout

컴포넌트를 열과 행으로 관리한다.
모든 컴포넌트들의 크기는 같게 되며 컴데이너의 모든 공간은 컴포넌트로 채워진다.

- BoxLayout

컴포넌트를 하나의 행이나 열로 배치한다.
box를 쌓는 모양으로 정렬된다.

💻 코드로 보기

Frame에서는 한글이 깨진다. 영어를 사용하

package packGUI;

import java.awt.Button;
import java.awt.Color;
import java.awt.Frame;
import java.awt.GridLayout;
import java.awt.Label;
import java.awt.Panel;
import java.awt.TextField;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class Ex43FrameLayout extends Frame {
	Panel pn1 = new Panel(); // 컨테이너(visual Object)을 담는 일종의 그릇
	
	TextField txtBun, txtirum;
	Button btnGo;
	
	public Ex43FrameLayout() {
		// 배치 관리자로 화면 디자인 연습
		setLayout(new GridLayout(2,1)); //Frame의 Layout을 변경(BorderLayout > GridLayout) 2행 1열
		
		// 첫번째 행 디자인
		Label lbl1 = new Label("bunho: "); // 메시지 컴포넘트(부품,객체)
		txtBun = new TextField("10",20); //키보드로 자료 입력이 가능한 컴포넌트
		pn1.add(lbl1); // panel에 Label 객체 담기
		pn1.add(txtBun); // panel에 TextField 객체 담기
		pn1.setBackground(Color.YELLOW); // 패널 배경색 변경
		super.add(pn1); //frame에 panel을 담은것
		
		// 두번째 행 디자인
		super.setTitle("레이아웃 연습");
		super.setBounds(200, 200, 400, 300);
		super.setVisible(true);
		
		super.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});
	}
	
	public static void main(String[] args) {
		new Ex43FrameLayout();

	}

}

화면의 크기에따라 구성이 변한다.

public class Ex43FrameLayout extends Frame implements ActionListener{
	Panel pn1 = new Panel(); // 컨테이너(visual Object)을 담는 일종의 그릇
	Panel pn2 = new Panel();
	Panel pn3 = new Panel();
	Panel pn4 = new Panel();
	Panel pn5 = new Panel();
	Panel pn6 = new Panel();
	
	TextField txtBun, txtirum;
	Button btnGo;
	CardLayout card = new CardLayout();
	
	public Ex43FrameLayout() {
		setLayout(new GridLayout(2,1)); //Frame의 Layout을 변경(BorderLayout > GridLayout) 2행 1열
		
		// 첫번째 행 디자인
		Label lbl1 = new Label("bunho: "); // 메시지 컴포넘트(부품,객체)
		txtBun = new TextField("10",20); //키보드로 자료 입력이 가능한 컴포넌트
		pn1.add(lbl1); // panel에 Label 객체 담기
		pn1.add(txtBun); // panel에 TextField 객체 담기
		pn1.setBackground(Color.YELLOW); // 패널 배경색 변경
		//super.add(pn1); //frame에 panel을 담은것
		
		Label lbl2 = new Label("irum: "); 
		txtirum = new TextField("이기자",30);
		pn2.add(lbl2);
		pn2.add(txtirum);
		pn2.setBackground(Color.CYAN);
		
		pn3.setLayout(card); // FlowLayout > CardLayout
		pn3.add("first",pn1); //pn3에 first라는 이름으로 pn1을 담은 것
		pn3.add("second",pn2); // 카드처럼 겹쳐있음
		btnGo = new Button("ok");
		btnGo.addActionListener(this); //버튼 이벤트 감지
		
		pn4.add(pn3); //pn4 : flowLayout (pn3은 pn1과pn2를 가지고있음)
		pn4.add(btnGo);
		add(pn4); //panel4를 담은 것
		
		// 두번째 행 디자인
		pn5.setLayout(new BorderLayout()); //FlowLayout > BorderLayout
		pn5.setBackground(new Color(123,123,123));
		pn5.add("East",new Label("kbs"));
		pn5.add("West",new Label("mbc"));
		pn5.add("South",new Label("sbs"));
		pn5.add("North",new Label("tvn"));
		pn5.add("Center",new Label("ytn"));
		
		add(pn5);
		
		super.setTitle("레이아웃 연습");
		super.setBounds(200, 200, 400, 300); //스테이징
		super.setVisible(true);
		
		super.addWindowListener(new WindowAdapter() {
			@Override
			public void windowClosing(WindowEvent e) {
				System.exit(0);
			}
		});
	}
	
	@Override
	public void actionPerformed(ActionEvent e) {
		// 버튼 이벤트 처리 메서드
		//버튼을 클릭하면 pn1과 pn2를 교체
		//System.out.println("good");
		//System.out.println(e.getActionCommand());
		if(e.getActionCommand().equalsIgnoreCase("ok")) {
			btnGo.setLabel("go");
			card.show(pn3, "second"); //pn3에 담긴 pn2를 보여줘
		}else {
			btnGo.setLabel("ok");
			card.show(pn3, "first"); //pn3에 담긴 pn1를 보여줘
		}
	}
	
	public static void main(String[] args) {
		new Ex43FrameLayout();

	}

}

😊정리

Frame을 사용해서 윈도우레이아웃을 연습해봤다.

panel, 컴포넌트 .. 등 익숙하지 않은 단어들이 많이 나왔다.

디자인에 신경쓰지 않아도 된다.

코드의 흐름에 더 신경쓰자.

이번 개념을 바탕으로 이벤트의 다양한 코드들을 확인 할 것이다.

[참조 사이트]

https://m.blog.naver.com/so_yuns/222172786073

[Java] 자바 GUI / Layout 종류 / 수동배치

■ 배치관리자 (Layout Manager) - awt 패키지에서 사용 - FlowLayout, BorderLayout, GridLayout,...

blog.naver.com