自定义ui_如何允许用户自定义UI
自定义ui
理念
利用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
自定义ui_如何允许用户自定义UI相关推荐
- 小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁,支持 UI 自定义、支持跨进程回调
YImagePicker 项目地址:yangpeixing/YImagePicker 简介: 小红书图片剪裁框架+微信图片选择器+超高清大图预览+图片自定义比例剪裁,支持 UI 自定义.支持跨进程回调 ...
- Wuss Weapp一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- hive 元数据 自定义_Hive中的用户自定义函数
1.1 关于自定义函数 1)Hive 自带了一些函数,比如:max/min等,但是数量有限,自己可以通过自定义UDF来方便的扩展. 2)当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考 ...
- ux和ui_我怎么知道UI / UX是否适合我?
ux和ui 重点 (Top highlight) I'm super excited to be writing this as it's the first official issue of Vi ...
- 控制台ui_设计下一代控制台UI
控制台ui 游戏UX (GAMES UX) Yesterday's Sony presentation showed us the final look of the PlayStation 5, a ...
- ctk 组件创建 ui_创建可重复使用的UI组件的提示和技巧
ctk 组件创建 ui by Gabriel Colombo 加布里埃尔·科伦坡(Gabriel Colombo) 创建可重复使用的UI组件的提示和技巧 (Tips & tricks for ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序UI组件库
快速上手 在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档. Github 地址(喜欢的可以点个star~) Github Wuss Weapp 文档 wuss- ...
- lua搭建ui_构建类魔兽UI插件的lua安全沙箱
魔兽的UI插件结构 1.使用lua+XML作为配置 分析:XML虽然人机交互很好,但其实没有几个UI是真正用纯XML写的,大多还是用编辑器比较方便.速度很慢,但尚不清楚魔兽代码里是否进行优化 2. I ...
最新文章
- 实验四 JSP数据库编程基础
- 95行代码实现最大熵模型训练
- python报错 SyntaxError: invalid character in identifier
- 操作系统原理_读懂操作系统之缓存原理(cache)(三)
- POJ 2449 Remmarguts' Date
- 惊叹jQuery(解决jQuery对象到DOM的转换)
- 业务中台如何提升研发效率
- S3C2440 LCD驱动(FrameBuffer)实例开发一(转)
- vivox6Android版本,vivo X6的手机系统是什么?vivo X6能升级安卓5.0吗?
- 转:孩子,上学去!乖
- 惠普打印机驱动服务器系统,在打印机服务器(系统WIN2003)上安装了HP5100 打印机,客户机系统WIN7 64位,现没法添加HP5100的驱动...
- 《跨越鸿沟》中的提到的五类用户
- CannotGetJdbcConnectionException:Failed to obtain JDBC Connection
- ajax请求参数为数组解决方案
- 银行业掀起RPA风潮丨RPA应用于银行业9大场景
- Codeforces Round #708 (Div. 2)B. M-arrays
- 基于 LSTM 的分布式能源发电预测(Matlab代码实现)
- webrtc丢包率与jitter计算
- 贾志刚_OpenCV视频课程资源
- CAD下载的流程,具体步骤是什么样的呢?
热门文章
- P5516-[MtOI2019]小铃的烦恼【期望dp,线性消元】
- P5304-[GXOI/GZOI2019]旅行者【最短路】
- P4170-[CQOI2007]涂色【区间dp】
- HDU4035 Maze(树上期望)
- codeforces1208 F. Bits And Pieces(SOS DP)
- 【整体二分】区间第k小(金牌导航 整体二分-1)
- some useful tricks
- JavaFX UI控件教程(二)之JavaFX UI控件
- 支付渠道参数如何设计成路由化配置
- 115个Java面试题和答案——终极列表(上)