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
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)