http://docs.oracle.com/javafx/2/get_started/form.htm
어플리케이션을 만들 때 폼을 만드는 것은 매우 빈번한 일입니다. 이 튜토리얼은 화면의 레이아웃을 잡는 법과 레이아웃에 컨트롤을 추가하는 방법 그리고 입력 이벤트를 처리하는 방법에 대해서 알려드릴 겁니다.
이 튜토리얼에서는 아래 그림과 같은 로그인 폼을 만들어볼 겁니다.
이 튜토리얼을 따라하기 위해서는 JavaFX 2를 지원하는 NetBeans IDE를 사용하여야 합니다.
프로젝트 만들기
가장 먼저 할 일은 NetBeans IDE에서 Login이라는 이름의 JavaFX 프로젝트를 만드는 것입니다.
- File 메뉴에서 New Project를 선택합니다.
- JavaFX 어플리케이션 카테고리에서 JavaFX Application을 선택하고 Next를 누릅니다.
- 프로젝트의 이름을 Login으로 정하고 Finish를 클릭합니다. JavaFX 프로젝트가 새로 만들어질 때 NetBeans IDE는 지난 글에서 소개한 Hello World 소스코드를 만들어 줍니다. 이를 바탕으로 코딩을 시작하면 됩니다.
- NetBeans IDE가 만들어 준 start() 메쏘드의 내용을 지우고 다음과 같은 코드를 입력합니다.
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
primaryStage.show();
}
GridPane 레이아웃 만들기
로그인 폼을 만들기 위해서 GridPane 레이아웃을 사용할 겁니다. 왜냐하면 표처럼 컨트롤들을 행과 열에 맞추어 배치할 수 있는 유연한 방법을 제공하기 때문입니다. 컨트롤들은 그리드의 어떤 셀에도 배치될 수 있으며 필요하다면 셀을 병합하여 배치할 수도 있습니다.
다음과 같은 코드를 primaryStage.show(); 문장 앞에 추가하면 GridPane 레이아웃을 만들 수 있습니다.
GridPane grid = new GridPane(); grid.setAlignment(Pos.CENTER); grid.setHgap(10); grid.setVgap(10); grid.setPadding(new Insets(25, 25, 25, 25)); Scene scene = new Scene(grid, 300, 275); primaryStage.setScene(scene);
Scene은 GridPane을 루트노드로 선정하여 생성되었습니다. 레이아웃 컨테이너를 사용하면 바로 이 레이아웃이 루트노드가 되는 것이 보통입니다. 그래야 바깥 윈도우의 크기가 변경되면 그 아래의 GridPane이 레이아웃 규칙(constraint)에 의해 가지고 있는 컨트롤들의 크기까지 자동으로 변경하기 때문입니다. 예를 들어 윈도우의 크기를 늘리거나 줄여도 중앙 정렬 규칙에 의해 컨트롤들이 자동으로 중앙에 위치하게 되며, 아무리 윈도우 크기를 줄여도 윈도우 테두리와 GridPane사이에는 25 픽셀의 여유가 보장됨을 확인할 수 있습니다.
위의 코드는 Scene의 크기를 300 x 275 로 지정했습니다. 만일 이런식으로 크기를 지정하지 않으면 Scene의 크기는 가지고 있는 컨텐츠를 모두 보여주는데 필요한 최소 크기로 자동 지정됩니다.
Text, Label, TextField를 추가하기
위의 완성된 폼의 그림을 보면 폼은 "Welcome"이라는 제목과 사용자로부터 정보를 입력받기 위한 텍스트와 입력필드가 필요함을 알 수 있습니다. 이들 컨트롤들을 생성하기 위한 코드는 아래와 같습니다. 아래 코드를 GridPane을 생성하는 위 코드 아래에 추가하세요.
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
grid.add() 메쏘드는 scenetitle 변수에 할당된 컨트롤을 grid 레이아웃에 추가합니다. 그리드의 각 격자에 대한 행과 열 번호는 0부터 시작합니다. 그러므로 scenetitle 컨트롤은 열 0, 행 0에 추가됩니다. grid.add() 메쏘드의 마지막 두개의 인자는 열방향(가로)으로 2개를 병합할 것이고, 행방향(세로)으로는 병합하지 않음(1)을 의미합니다.
다음으로 "User Name"이라는 텍스트를 가지는 Label 객체를 만들어서 grid의 열 0, 행 1에 넣습니다. 이어서 편집 가능한 Text Field 객체를 만들어서 grid의 열1, 행1에 추가합니다. "Password"가 기록된 Label과 Text Field도 비슷한 방법으로 추가됩니다.
GridPane으로 작업할 때 그리드의 선을 표시할 수 있습니다. 이를 통해 디버깅을 편하게 할 수 있습니다. 그리드의 선을 보이게 하려면 grid.setGridLinesVisible(true)를 패스워드 필드 추가 후에 불러주면 됩니다. 이제 당신은 어플리케이션을 실행할 수 있으며 그리드의 선들과 gap들을 볼 수 있습니다. 아래 그림을 참조하세요.
Button과 Text 추가하기
마지막으로 남은 두 컨트롤은 데이타를 서브밋할 Button 컨트롤과 그 결과를 출력하는 Text 컨트롤입니다.
먼저 Button을 생성하고 이를 오른쪽 하단에 위치시킵니다. 일반적으로 서브밋 버튼은 이곳에 놓습니다.
Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);
다음으로 메시지를 출력하기 위한 Text 컨트롤을 추가합니다. 아래 코드를 추가하면 됩니다.
final Text actiontarget = new Text(); grid.add(actiontarget, 1, 6);
.jpg)
이벤트 핸들러 달기
이제 버튼을 누르면 텍스트 메시지가 출력되도록 해 봅시다. 아래 코드를 추가하세요.
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent e) {
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText("Sign in button pressed");
}
});
어플리케이션 실행하기
NetBeans IDE에서 Login 프로젝트 노드에 오른쪽 버튼을 누르고 Run을 선택합니다. 그러면 위와 같은 다이얼로그가 뜨는데 Sign in 버튼을 클릭합니다. 그러면 아래와 같이 붉은색의 메시지가 표시됩니다. 만일 잘 되지 않는 다면 다음 링크에서 전체 소스를 보고 확인하세요.
이제 뭘 할 수 있나?
기본적인 폼 만들기에 대한 튜토리얼은 끝났습니다. 다음의 관련글과 참고 URL을 확인하세요.
- JavaFX 레이아웃에 대해서 알아보기
댓글 없음:
댓글 쓰기