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右側,用以設定各物件的屬性。
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).
<?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"
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。
[6] JavaFX 8.0 API Specification.
[7] Java Platform, Standard Edition 8 API Specification.
© Chia-Hui Huang
沒有留言:
張貼留言