簡単な画面を作成(Sample1)TableView,Label,button...

JavaFXを使った簡単な画面を作成。

この画面を作成した環境は、Mac OS X 10.7で、NetBeans7.1 Java1.7 JavaFX2.0。
環境作成は、id:skrbさんのNetBeans で JavaFX (Windows 編) - JavaFX in the Boxの記事を参考にさせていただきました。
全ソースは、githubにあります。

• 画面の起動部分

public class HelloApp extends Application{
    @Override
    public void start(Stage stage) throws Exception {
        HelloStage helloStage = new HelloStage();
        Stage s= helloStage.createStage();
        s.show();       // <--★２ここで上のHelloStageクラスで作成したstageを画面表示
    }
    public static void main(String[] args){
        launch();  // <--★１ここで起動
    }
}

以降は「HelloStage」クラス内で実装。

• レイアウト

    public Stage createStage(){
        Stage stage = new Stage();
        stage.setTitle("Hello App");
        stage.setScene(getScence());
        return stage;
    }
    private Scene getScence() {
        BorderPane layout = new BorderPane();  // <--★１
        layout.setTop(getTop());
        layout.setBottom(getBottom());
        layout.setLeft(getLeft());
        layout.setRight(getRight());
        layout.setCenter(getCenter());        
        final Group root = new Group();        
        Scene scene = new Scene(root);
        root.getChildren().add(layout);
        scene.getStylesheets().add("default.css"); // <--★２
        return scene;
    }

★１の「 BorderPane」を使って、画面をTop,Left,Center,Right,Bottomに分割してレイアウト。
ここでは、TopにLabel、CenterにTableView、BottomにButtonをそれぞれ配置。
★２では、cssを指定しています。とりあえず画面の[exit]ボタンの背景色をcssを使ってかえています。
もっといろいろ設定できるようですが、その辺はちょっとずつ勉強してブログに書いていく予定です。

• default.css

.button{
    -fx-background-color:orange;
}

• Top部分(Label)

    private Node getTop() {
        HBox hBox = new HBox(); // <--★１ここでTop内のレイアウトを設定
        hBox.setSpacing(10);
        hBox.setPadding(new Insets(10, 10, 10, 50)); // <--★２左の余白を「 BorderPane」にあわせて50を指定
        hBox.setStyle("-fx-background-color: darkcyan;"); // <--★３背景色を設定
        hBox.getChildren().addAll(getLabel()); // <--★４作成したラベルを追加
        return hBox;
    }
    private Label getLabel() {
        final Label label = new Label("Zoom Label"); // <--★５ラベル作成
        label.setOnMouseEntered(new EventHandler<MouseEvent>() {   // <--★６マウスがラベル上にきたときに、文字を拡大
            @Override
            public void handle(MouseEvent t) {
                setZoomOn(label);
            }
        });
        label.setOnMouseExited(new EventHandler<MouseEvent>() {   // <--★７マウスがラベルから移動したときに、文字をもとのサイズに
            @Override
            public void handle(MouseEvent t) {
                setZoomOff(label);
            }
        });
        return label;
    }
    private void setZoomOn(Label label){ // <--★６
        label.setScaleX(1.5);
        label.setScaleY(1.5);
    }
    private void setZoomOff(Label label){ // <--★７
        label.setScaleX(1);
        label.setScaleY(1);
    }

• Center部分(Table View)

    private Node getCenter() {
        TableView<Person> table = new TableView<>();  // <--★１まず「TableView」作成
        getTableColumns(table); // <--★２列の設定
        table.setItems(fetchDataFromServer());  // <--★３列に表示するデータを設定
        return table;
    }
    private void getTableColumns(TableView<Person> tableView){
        TableColumn<Person, String> firstNameCol = new TableColumn<>("first name");  // <--★２−１列をタイトル名称を指定し作成
        firstNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName")); // <--★２−２上で作成した列を「Person」クラスの「FirstName」と関連設定
        firstNameCol.setMinWidth(100);
        TableColumn<Person, String> lastNameCol = new TableColumn<>("last name");
        lastNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));
        lastNameCol.setMinWidth(100);
        TableColumn<Person, String> emailCol = new TableColumn<>("Email");
        emailCol.setCellValueFactory(new PropertyValueFactory<Person, String>("email"));
        emailCol.setMinWidth(200);
        tableView.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
    }

    private ObservableList<Person> fetchDataFromServer(){
        List<Person> list = new ArrayList<>();
        list.add(new Person("Duke1", "Java1", "email1@my.company.com"));  // <--★３−１ ★２−２で使用している「person」クラスを使用してデータを設定
        list.add(new Person("Duke2", "Java2", "email2@my.company.com"));
        return FXCollections.observableList(list);
    }

★３−１の部分は、databaseより取得するように変更する予定。

• Bottom部分(Button)

    private Node getBottom() {
        HBox hBox = new HBox(10); // 
        hBox.setAlignment(Pos.BASELINE_RIGHT); <--★１Topと同じレイアウト使用し、ここでは左よせに
        hBox.setPadding(new Insets(10, 50, 10, 10)); <--★２右の余白を「 BorderPane」にあわせて50を指定
        hBox.getChildren().add(getExitButton());
        return hBox;
    }
    private Button getExitButton(){
        Button button = new Button("exit");
        button.setPrefSize(50, 20);
        button.setOnAction(new EventHandler<ActionEvent>() { // <--★３画面を閉じて処理終了
            @Override
            public void handle(ActionEvent t) {                
                exitWindow(t);
            }
        });
        return button;
    }
    private void exitWindow(ActionEvent t){  // <--★３
        System.exit(0);
    }

とりあえず画面サンプルを作成して動作確認すると、TableView上にマウスがくると背景色が変わります。
TableViewでは、背景色を変える実装していないのでデフォルトでそうなっているのかな？
とっても機能が多く、Swingを知らない私には使いこなすのは難しいですが、ちょっとずつ実装していきながらブログにも書いていく予定です。