理念

利用JavafX / FXML的聲明性設計模式，并允許用戶僅通過使用例如SceneBuilder打開某個視圖即可重新定制布局或添加新控件，甚至根據用戶需要更改樣式，從而無需任何編碼即可自定義某個視圖。

FXML文件+ CSS基本上可以放置在通過URL可以到達的任何地方。 用戶必須只知道FXML內部分配的控制器類的接口/方法。

遙控器

假設此簡單的演示控制器類提供了用于遠程控制設備和發送MQTT消息的方法，則用戶可以自定義自己的遙控器。

public class RemoteController{@FXMLpublic void onTest(){Alert alert = new Alert(Alert.AlertType.INFORMATION);alert.setContentText("");alert.setHeaderText("WORKS!");alert.show();}public void onTest(String value){Alert alert = new Alert(Alert.AlertType.INFORMATION);alert.setHeaderText("WORKS!");alert.setContentText(value);alert.show();}public void onSwitch(String houseCode, int groudId, int deviceId, String command){Alert alert = new Alert(Alert.AlertType.INFORMATION);alert.setHeaderText("Switch!");alert.setContentText(String.format("Command: send %s %d %d %s", houseCode, groudId, deviceId, command));alert.show();} }

remote.fxml和remote.css

請注意引用的de.jensd.shichimifx.demo.ext.RemoteController和remote.css 。

因此，基本上可以通過以下方式調用控制器動作：

onAction="#onTest".

不錯：

如果添加：

<?language javascript?>

到FXML，也可以通過controller -instance通過JavaScript調用傳遞參數。

onAction=controller.onTest('OFF') onAction=controller.onSwitch('a',1,1,'ON')

不幸的是，除了-> this ，我找不到更多關于此功能的文檔，但是以某種方式它神奇地起作用了;-)。 甚至可以傳遞不同類型的參數。

<?xml version="1.0" encoding="UTF-8"?><?language javascript?> <?import javafx.geometry.*?> <?import java.lang.*?> <?import java.net.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?><VBox alignment="TOP_CENTER" prefHeight="400.0" prefWidth="600.0" spacing="20.0" styleClass="main-pane" stylesheets="@remote.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.jensd.shichimifx.demo.ext.RemoteController"><children><Label styleClass="title-label" text="Universal Remote" /><HBox alignment="CENTER_RIGHT" spacing="20.0"><children><Label layoutX="228.0" layoutY="96.0" styleClass="sub-title-label" text="Light Frontdoor" /><Button layoutX="43.0" layoutY="86.0" mnemonicParsing="false" onAction="#onTest" prefWidth="150.0" styleClass="button-on" text="ON" /><Button layoutX="411.0" layoutY="86.0" mnemonicParsing="false" onAction="#onTest" prefWidth="150.0" styleClass="button-off" text="OFF" /></children><padding><Insets left="10.0" right="10.0" /></padding></HBox><HBox alignment="CENTER_RIGHT" spacing="20.0"><children><Label layoutX="228.0" layoutY="96.0" styleClass="sub-title-label" text="Light Garden" /><Button layoutX="43.0" layoutY="86.0" mnemonicParsing="false" onAction="controller.onTest('ON')" prefWidth="150.0" styleClass="button-on" text="ON" /><Button layoutX="411.0" layoutY="86.0" mnemonicParsing="false" onAction="controller.onTest('OFF')" prefWidth="150.0" styleClass="button-off" text="OFF" /></children><padding><Insets left="10.0" right="10.0" /></padding></HBox><HBox alignment="CENTER_RIGHT" spacing="20.0"><children><Label layoutX="228.0" layoutY="96.0" styleClass="sub-title-label" text="Light Garden" /><Button layoutX="43.0" layoutY="86.0" mnemonicParsing="false" onAction="controller.onSwitch('a', 1,1,'ON')" prefWidth="150.0" styleClass="button-on" text="ON" /><Button layoutX="411.0" layoutY="86.0" mnemonicParsing="false" onAction="controller.onTest('OFF')" prefWidth="150.0" styleClass="button-off" text="OFF" /></children><padding><Insets left="10.0" right="10.0" /></padding></HBox></children><padding><Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /></padding> </VBox>

基于此示例，用戶可以使用SceneBuilder輕松打開FXM1，并添加新的Button來調用controller.onSwitch（）方法，以控制為家庭自動化安裝的不同/新設備。

FxmlUtils

的下一個版本ShichimiFX將包含新Utilily類負載FXML如圖中ExternalFXMLDemoController 。 請注意 ，已加載的窗格通過onLoadExternalFxml()添加到演示應用程序的externalPane （BorderPane）的中心：

public class ExternalFXMLDemoController {@FXMLprivate ResourceBundle resources;@FXMLprivate BorderPane externalPane;@FXMLprivate TextField fxmlFileNameTextField;@FXMLprivate Button chooseFxmlFileButton;@FXMLprivate Button loadFxmlFileButton;private StringProperty fxmlFileName;public void initialize() {fxmlFileNameTextField.textProperty().bindBidirectional(fxmlFileNameProperty());loadFxmlFileButton.disableProperty().bind(fxmlFileNameProperty().isEmpty());}public StringProperty fxmlFileNameProperty() {if (fxmlFileName == null) {fxmlFileName = new SimpleStringProperty("");}return fxmlFileName;}public String getFxmlFileName() {return fxmlFileNameProperty().getValue();}public void setFxmlFileName(String fxmlFileName) {this.fxmlFileNameProperty().setValue(fxmlFileName);}@FXMLpublic void chooseFxmlFile() {FileChooser chooser = new FileChooser();chooser.setTitle("Choose FXML file to load");if (getFxmlFileName().isEmpty()) {chooser.setInitialDirectory(new File(System.getProperty("user.home")));} else {chooser.setInitialDirectory(new File(getFxmlFileName()).getParentFile());}File file = chooser.showOpenDialog(chooseFxmlFileButton.getScene().getWindow());if (file != null) {setFxmlFileName(file.getAbsolutePath());}}@FXMLpublic void onLoadExternalFxml() {try {Optional<URL> url = FxmlUtils.getFxmlUrl(Paths.get(getFxmlFileName()));if (url.isPresent()) {Pane pane = FxmlUtils.loadFxmlPane(url.get(), resources);externalPane.setCenter(pane);} else {Alert alert = new Alert(Alert.AlertType.WARNING);alert.setContentText(getFxmlFileName() + " could not be found!");alert.show();}} catch (IOException ex) {Dialogs.create().showException(ex);}} }

翻譯自: https://www.javacodegeeks.com/2015/01/how-to-allow-users-to-customize-the-ui.html

總結

以上是生活随笔為你收集整理的如何允许用户自定义UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。