< 이전 | 다음 >

학습 1.2: 직원 테이블 추가 및 레이아웃

이 학습에서는 Java Visual Editor를 사용하여 JScrollPane 및 JTable을 응용프로그램에 추가합니다. 차후 연습에서는 회사 디렉토리의 모든 직원 목록을 리턴하는 웹 서비스로부터 데이터를 가져오도록 JTable을 프로그래밍합니다.

JTable을 추가한 후에는 Java Visual Editor의 디자인 보기를 사용하여 다음 스펙과 일치하도록 JTable의 레이아웃을 사용자 정의합니다.

  • 가로로 세 개의 셀과 세로로 두 개의 셀에 JTable이 놓이도록 하십시오.
  • 왼쪽에 15픽셀의 삽입을 추가하십시오.
  • JTable의 이름을 employeesTable로 바꾸십시오.

Java Visual Editor에서 DirectoryApp.java 파일 열기

Java Visual Editor에서 DirectoryApp.java 파일을 열려면 다음을 수행하십시오.
  1. Java Perspective의 패키지 탐색기 보기에서 MyDirectory 프로젝트와 directory.client 패키지를 펼치십시오.
  2. DirectoryApp.java 파일을 마우스 오른쪽 단추로 클릭한 후 열기 > Visual Editor를 선택하십시오. Java Visual Editor는 Java 클래스를 로드하고 디자인을 그래픽 캔버스 영역에 표시합니다.
팁:
  • Java Visual Editor에서 사용하는 룩앤필을 변경하려면 > 환경 설정 > Java > Visual Editor로 이동하여 Swing 룩앤필을 지정하십시오. 환경 설정은 다음 클래스를 열 때 적용됩니다. 이 학습서에서는 Windows 룩앤필을 사용합니다.
  • Visual Editor를 모든 Java 파일의 기본 편집기로 만들려면 > 환경 설정을 클릭한 후 Workbench > 파일 연관 페이지로 이동하여 환경 설정을 정의하십시오.

JScrollPane에 JTable 추가

DirectoryApp.java의 기본 창은 JPanel이 있는 JFrame을 기본 컨텐츠 분할창으로 사용합니다. 이 때 작성하는 응용프로그램의 JPanel 이름은 jContentPane입니다. jContentPane은 GridBagLayout이라고 하는 레이아웃 관리자 유형을 사용하도록 설정되었습니다. GridBagLayout은 비주얼 구성요소가 점유할 수 있는 셀의 눈금에 기반한 강력한 레이아웃 체계입니다. Java Visual Editor는 눈금 경계를 표시하여 GridBagLayout에서의 작업을 쉽게 해줍니다. 또한 새 구성요소를 눈금에 놓을 때 위치 마커를 표시하며 크기를 조정하거나 GridBagLayout에서 이동 중인 구성요소에 핸들을 표시합니다.

직원 테이블(javax.swing.JTable)을 DirectoryApp.java 사용자 인터페이스에 추가하려면 다음을 수행하십시오.
  1. 디자인 보기 또는 Java Bean 보기에서 jContentPane을 마우스 오른쪽 단추로 클릭하고 눈금 표시를 선택하십시오. 빨간색 점선은 눈금 경계를 표시하며 파란색의 번호가 있는 원은 행 및 열 번호를 표시합니다. 예를 들어, 새로 작성 단추의 셀은 행 1(눈금 y)과 열 3(눈금 x)입니다.

    그래픽 캔버스의 눈금

  2. Java Visual Editor 팔레트에서 JScrollPane의 JTable JScrollPane의 JTable 아이콘 Swing 컴포넌트를 선택하십시오. 이 컴포넌트는 팔레트의 Swing 컴포넌트 드로어에 분류되어 있습니다.
    팁: 기본적으로 팔레트는 디자인 영역의 오른쪽에 접혀 있습니다. 팔레트의 크기를 조정하고 이동할 수 있습니다.
  3. 마우스 포인터를 열 0, 행 1에 있는 눈금의 셀 위로 이동하십시오.

    눈금에서 놓기 위치

    • 눈금 위에서 포인터를 이동하면 마우스 포인터는 포인터의 위치에 따라 눈금의 x와 y 좌표를 알려주는 두 개의 번호가 있는 사각형을 표시합니다.
    • 마우스 포인터를 눈금 경계 바로 위로 가져가면 새 행과 열이 작성될 수 있으며 기존 행과 열에는 번호가 재지정됩니다. 이 경우 마우스 포인터의 노란색 사각형, 눈금 사이의 노란색 막대 및 노란색 열과 행 레이블이 이러한 작동을 표시하며 이러한 배치가 갖게 되는 영향을 지적해 줍니다.
  4. 왼쪽 마우스 단추를 클릭하여 JScrollPane 및 JTable을 열 0 및 행 1 셀에 끌어 놓으십시오.

    눈금에 놓인 테이블

JScrollPane 및 JTable을 눈금의 여러 행과 열로 늘리기

이제 더 나은 간격과 크기 조정을 위해 JScrollPane(및 해당되는 하위 JTable)을 세 개의 열과 두 개의 행으로 늘려보겠습니다. 테이블을 열 및 행으로 늘리려면 다음을 수행하십시오.
  1. 디자인 영역이나 Java Bean 보기에서 JScrollPane을 선택하십시오. (방금 추가했으므로 계속 선택되어 있어야 합니다.) JScrollPane의 오른쪽과 맨 아래에 있는 작은 초록색 사각형을 보십시오. 이 크기 조정 핸들을 사용하여 JScrollPane을 끌어 여러 열과 행으로 늘려보십시오.
  2. JScrollPane의 오른쪽에 있는 녹색 핸들을 왼쪽 마우스 단추로 클릭하고 계십시오.
  3. 위치가 열 2, 행 1이 될 때까지 마우스 포인터를 오른쪽으로 끄십시오. 마우스 단추를 놓으면 어두운 회색 음영이 컴포넌트가 위치한 셀을 표시됩니다.

    세 열에 걸쳐 펼쳐지도록 마우스로 끈 테이블

  4. 마우스 단추를 놓으십시오. 이제 JScrollPane은 세 개 열로 늘어납니다.
  5. 유사한 과정을 반복하여 JScrollPane이 행 2가 될 때까지 JScrollPane의 맨 아래 핸들을 끄십시오.

    두 행에 걸쳐 펼쳐지도록 마우스로 끈 테이블

눈금 상자 내에서 JScrollPane의 간격 사용자 정의하기

GridBagLayout 관리자의 또 다른 기능은 레이아웃을 추가로 사용자 정의하는 데 여러 가지 제한조건을 지정할 수 있다는 것입니다. 예를 들어, 다음 제한조건을 지정할 수 있습니다.
  • 앵커: 셀 안에서 컴포넌트에 앵커 방향을 지정할 수 있으며 이는 사용자가 응용프로그램의 크기를 다시 조정할 때 컴포넌트의 이동 방식에 영향을 줍니다. 예를 들어, 구성요소를 상단 왼쪽, 가운데 왼쪽, 가운데 또는 하단 오른쪽에 정착시킬 수 있습니다.
  • 채우기: 셀 안에서 수평, 수직 또는 이 두 방향으로 사용 가능한 모든 공간을 차지하도록 컴포넌트에 지시할 수 있습니다.
  • 삽입: 컴포넌트와 눈금의 가장자리 사이에 간격을 두기 위해 맨 위, 맨 아래, 왼쪽 및 오른쪽에 채우기를 지정할 수 있습니다.

JScrollPane에 대한 앵커, 채우기 및 삽입을 사용자 정의하려면 다음을 수행하십시오.

  1. 디자인 보기 또는 Java Bean 보기에서 JScrollPane을 마우스 오른쪽 단추로 클릭하고 레이아웃 사용자 정의를 선택하십시오.

    jScrollPane의 팝업 메뉴

    팁: 다른 컴포넌트에 대한 레이아웃을 선택하고 변경할 때 레이아웃 사용자 정의 대화 상자를 열어 둘 수 있습니다. 언제든지 메뉴 표시줄에서 레이아웃 사용자 정의 단추를 클릭하여 레이아웃 사용자 정의 대화 상자를 열 수 있습니다.

    레이아웃 사용자 정의 메뉴 아이콘

  2. 레이아웃 사용자 정의 대화 상자의 컴포넌트 탭에서 앵커 가운데 단추를 눌렀는지 확인하십시오.
  3. 가로 채우기세로 채우기 단추가 모두 클릭되어 있는지 확인하십시오.
  4. JScrollPane의 왼쪽 간격이 응용프로그램의 다른 비주얼 컴포넌트와 유사하도록 왼쪽 삽입으로 15(픽셀)를 추가하십시오.

    레이아웃 사용자 정의 대화 상자

    예를 들면, 테이블이 필터 레이블에 맞게 정렬됩니다.

    레이아웃 사용자 정의 대화 상자

새 JTable의 이름을 유용한 값으로 바꾸고 단일 행을 선택하도록 설정

나중에 테이블에 대해 작업하게 되므로 JTable 인스턴스 및 해당되는 getter 메소드의 이름을 변경하는 것이 좋습니다. 테이블의 이름을 바꾸려면 다음을 수행하십시오.
  1. Java Bean 보기에서 jTable 컴포넌트를 마우스 오른쪽 단추로 클릭하고 팝업 메뉴에서 필드 이름 바꾸기를 선택하십시오.

    jTable의 팝업 메뉴

  2. employeesTable을 입력하고 확인을 클릭하십시오. JTable의 이름이 employeesTable로 변경되고 이를 인스턴스화하는 메소드는 getEmployeesTable이 됩니다.
  3. 단일 행만 선택할 수 있도록 테이블을 설정하십시오.
    1. 디자인 보기에서 employeesTable을 선택하십시오.
    2. 특성 보기에서 selectionMode 특성을 선택하고 SINGLE_SELECTION으로 설정하십시오.

      JTable에서 SINGLE_SELECTION을 표시하는 특성 보기

    3. DirectoryApp.java 파일을 저장하십시오.

학습 체크포인트

Visual Editor를 사용하여 기존 사용자 인터페이스에 테이블을 삽입하는 방법을 학습했습니다. 따라서 레이아웃, 위치 및 간격 지정을 사용자 정의해 볼 수 있습니다.

< 이전 | 다음 >