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

▤ 목차

✔ 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 종류 / 수동배치