2014年5月18日 星期日

JavaFX Scene Builder 2.0

Oracle為加速JavaFX圖形介面的開發,2014/05/13 Oracle正式發表JavaFX Scene Builder 2.0,可至以下網址下載: 

http://goo.gl/rYah4S 

JavaFX Scene Builder如同NetBeans與JBuilder IDE一般,藉由拖曳的方式配置物件,待完成配置之後,並儲存成FXML格式檔案,此檔案以XML描述物件配置,再交由JavaFX程式處理,因此可減少直接以JavaFX撰寫配置物件程式的困難度。

以Microsoft Windows 7作業系統為例,JavaFX Scene Builder 2.0的安裝步驟如下:

Step 1:下載檔案名為javafx_scenebuilder-2_0-windows.msi的JavaFX Scene Builder之後,直接執行安裝程式。以下為JavaFX Scene Builder 2.0的安裝說明,點選「下一步」按鈕 (與JavaFX Scene Builder 1.1一樣仍是簡體中文的說明):
Step 2:接著選擇安裝JavaFX Scene Builder的目錄,預設目錄為C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0\,點選「安裝」按鈕進行安裝程序:
Step 3:安裝JavaFX Scene Builder 2.0所需檔案:
Step 4:安裝完成:
以JavaFX Scene Builder 2.0配置物件與建立FXML檔案的步驟如下:

Step 1:執行JavaFX Scene Builder 2.0,可發現開發環境已改為JavaFX 8 Modena主題樣式,此外JavaFX Scene Builder 2.0包含以下區域,如下圖所示
  • 物件面板 (Library Panel):位於JavaFX Scene Builder左上方,用以顯示JavaFX Scene Builder所有的JavaFX GUI物件,並分成Containers、Controls、Popup Controls、Menu Content、Miscellaneous、Shapes與Charts等類別。
  • 階層面板 (Hierarchy Panel):位於JavaFX Scene Builder左下方,用以顯示物件的樹狀階層關係。
  • 內容面板 (Content Panel):位於JavaFX Scene Builder中間區域,可藉由拖曳的方式自物件面板拖曳物件至內容面板以配置物件。
  • 屬性面板 (Property Panel):位於JavaFX Scene Builder右側,用以設定各物件的屬性。
Step 2:點選「File」→「New」選單建立新檔,接著選擇物件如標籤,並拖曳至內容面板中,此時屬性面板將顯示標籤的所有屬性如標籤文字、字型、文字顏色、對齊方式等。接著依序以相同的方式拖曳物件至內容面板,此時階層面板將顯示所有物件的樹狀關係,其中最上層的容器為GridPane,如下圖所示:
Scene Builder 2.0新增JavaFX Theme預覽功能,可點選「Preview」→「JavaFX Theme」選單選擇不同的主題,包括
  • Modena (FX8).
  • Modena Touch (FX8).
  • Modena High Contrast - Black on White (FX8).
  • Modena High Contrast - White on Black (FX8).
  • Modena High Contrast - Yellow on Black (FX8).
  • Caspian (FX2).
  • Caspian Embedded (FX2).
  • Caspian Embedded QVGA (FX2).
Step 3:待完成物件配置之後,點選「File」→「Save」選單儲存為FXML檔案,其內容如下所示與JavaFX Scene Bulider 1.1的最大差別只有以下紅色的部份


<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<GridPane alignment="CENTER" styleClass="root"
  hgap="10.0" vgap="10.0"
 xmlns="http://javafx.com/javafx/8"
  xmlns:fx="http://javafx.com/fxml/1"
  fx:controller="javafxapplication.JavaFXController">
  <padding>
    <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
  </padding>
  <Text id="welcome-text" text="Welcome to JavaFX"
    GridPane.columnIndex="0" GridPane.columnSpan="2"
    GridPane.rowIndex="0" />
  <Label text="User Name:" GridPane.columnIndex="0"
    GridPane.rowIndex="1" />
  <TextField GridPane.columnIndex="1" GridPane.rowIndex="1" />
  <Label text="Password:" GridPane.columnIndex="0"
    GridPane.rowIndex="2" />
  <PasswordField fx:id="passwordField"
    GridPane.columnIndex="1" GridPane.rowIndex="2" />
  <HBox alignment="BOTTOM_RIGHT" spacing="10.0"
    GridPane.columnIndex="1" GridPane.rowIndex="4">
      <Button fx:id="button" text="Login" />
  </HBox>
</GridPane>


接著將FXML檔案與JavaFX程式置於同一目錄,並以javafx.fxml.FXMLLoader類別的load()方法將FXML檔案的內容載入至JavaFX程式中,由於在JavaFX Scene Builder中設定最上層的容器為GridPane類別,因此載入FXML內容之後,需轉換為GridPane


try {
  // 載入FXML內容並轉換為GridPane
  GridPane fxmlRoot = (GridPane) FXMLLoader.load(
    getClass().getResource("JavaFXApplication.fxml"));

  Scene scene = new Scene(fxmlRoot);

  primaryStage.setTitle("JavaFX Hello World");

  primaryStage.setScene(scene);

  // Show Stage
  primaryStage.show();

catch (IOException ex) {
  System.out.println(ex.toString());
}
...


為避免因變更最上層容器而需要修改原JavaFX程式,因此亦可將載入FXML內容轉換為Parent抽象類別,如此不論最上層容器為何,均不需修改JavaFX程式:


try {
  // 載入FXML內容並轉換為Parent
  Parent fxmlRoot = FXMLLoader.load(
    getClass().getResource("JavaFXApplication.fxml"));

  Scene scene = new Scene(fxmlRoot);

  primaryStage.setTitle("JavaFX Hello World");

  primaryStage.setScene(scene);

  // Show Stage
  primaryStage.show();

catch (IOException ex) {
  System.out.println(ex.toString());
}
...


【參考資料】

[1] 黃嘉輝,深入研究JavaFX 2。
[4] NetBeans 8.0: http://netbeans.org
[5] JavaFX Scene Builder 2.0: http://www.oracle.com/technetwork/java/javafx
[6] JavaFX 8.0 API Specification.
[7] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang

沒有留言:

張貼留言