Layout

지난주 금요일의 흐름을 이어 Java를 GUI형식으로 접근해보자!

GUI (Graphical User Interface)

• 그래픽 사용자 인터페이스(Graphical User Interface)

• GUI 프로그래밍을 윈도우 프로그래밍이라고도 함
  모든 UI 컴포넌트는 윈도우 안에서 구현되기 때문

컴포넌트

컴포넌트 : 재사용 가능한 객체 단위
(ex. GUI 분야에서는 버튼, 체크박스 등...)

(참고) 자바의 GUI 컴포넌트 종류

• AWT 컴포넌트
  java.awt
  
  
• Swing 컴포넌트
  AWT를 보완한 경량 GUI 라이브러리
  javax.swing
  OS와 무관하게 자바만으로 UI 구성 → 일관된 UI

Java 컴포넌트의 유형

• 컨테이너형 컴포넌트: 남을 포함할 수 있는 유형
  (ex. Frame, Panel)
  
  
• 비주얼 컨테이너형 컴포넌트: 남에게 포함당할 수 있는 유형 (비주얼 컴포넌트형)
  (ex. Button, Label, TextField, Checkbox, Choice ... 윈도우 안에 포함되는 것들)

AWT의 배치관리자 (Layout Manager)

AWT (Abstract Window Toolkit)

모든 GUI 프로그램은 컴포넌트들을 조합하여 화면을 구성하기 때문에
각자의 배치(레이아웃) 방법을 지원함

1. BorderLayout

• 동, 서, 남, 북, 센터의 방향을 갖는 배치
• 각 방향에 들어가는 컴포넌트는 자신의 크기를 잃어버리고, 확장되어버림
  그래서 대왕버튼이 만들어졌음

컨테이너 종류	기본 Layout Manager
Frame	BorderLayout
Panel	FlowLayout

2. FlowLayout

• 위치가 결정되지 않고 컨테이너 크기에 따라 흘러다님
  단, 방향성이 있어서 수평방향의 흐름/수직방향의 흐름 둘 중 하나임
• FlowLayout은 컴포넌트 본연의 크기를 유지해줌
  

3. GreedLayout

• 행과 열의 배치방식
• 각 행, 열에 배치되는
  즉, 셀에 들어가는 컴포넌트가 자신의 크기를 잃어버리고 확장해버림
  

4. CardLayout

• 마치 포커처럼 오직 하나의 카드만 보여지는 배치방식
• 화면 전환 시 사용되는데, 사실 직접 만들어 구현해도 되기 때문에 몰라도 됨

Login Form 구현하기

<처음보는 객체에 대한 대처법>

1. 객체명으로 기능 예측하기, 예측이 안되면 조사하자

2. 사용하기 위해 메모리 올리는 방법을 파악 (객체의 유형은 3가지)

• 일반 클래스 : new 생성자( )
• 추상 클래스 : 자식으로 구현한 후 자식을 new 생성자( )
• 인터페이스 : 자식으로 구현한 후 자식을 new 생성자( )

package gui.layout;
import java.awt.*;

public class LoginForm{
	public static void main(String[] args) {
		//이 디자인에 사용될 컴포넌트들을 우선 선언
		Frame frame=null;
		Panel p_center=null;
		Panel p_south=null;
		Label la_id=null, la_pwd=null;
		TextField t_id=null, t_pwd=null;
		Button bt_login=null, bt_join=null;
		//Java에서 변수 초기화는 null로 설정
		
		//생성(선언한 순서대로)
		frame=new Frame("Login Form");
		p_center=new Panel();
		p_south=new Panel();
		la_id=new Label("ID");
		la_pwd=new Label("Password");
		t_id=new TextField(20); //글자 수 기준의 너비
		t_pwd=new TextField(20);
		bt_login=new Button("Login");
		bt_join=new Button("Join");
		
		//크기설정
		Dimension d=new Dimension(100, 25); //재활용 위해 객체로 생성
		la_id.setPreferredSize(d);
		t_id.setPreferredSize(d);
		la_pwd.setPreferredSize(d);
		t_pwd.setPreferredSize(d);
		
		//조립 (다른방식 FlowLayout으로 가기)
		p_center.add(la_id);
		p_center.add(t_id);
		p_center.add(la_pwd);
		p_center.add(t_pwd);
		
		//중앙패널을 윈도우에 부착
		frame.add(p_center);
		
		p_south.add(bt_login);
		p_south.add(bt_join);
		frame.add(p_south, BorderLayout.SOUTH);
		
		//윈도우 설정
		frame.setSize(300,135);
		frame.setVisible(true); //윈도우의 디폴트는 숨김상태이므로 
        //꼭 빠뜨리지 말자!
	}
}

• 하나의 Frame 안에 영역별로 다른 배치를 하고 싶을 때
  (= 대왕컴포넌트를 방지하는 방법)
  html의 div와 비슷한 Panel을 사용하기

  이유:
  1. setLayout()으로 지정하는 배치관리자는 1개만 유효
  2. Panel을 쓰면 일일이 setLayout() 안 해도 기본값으로 배치가 달라지기 때문

  Frame은 기본이 BorderLayout
  Panel은 기본이 FlowLayout

• Dimension은 자바의 java.awt패키지에 포함된 클래스
  컴포넌트의 "가로(width)와 세로(height)" 크기를 표현하는 객체

• frame.add(p_south, BorderLayout.SOUTH);
  두번째 매개변수로 상수를 지정
  ➡ 상수는 public static final로 선언되었고,
  클래스 소속이므로 인스턴스 생성 없이 사용가능
  따라서 BorderLayout이 보유한 상수명으로 접근 가능