如何允许用户自定义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.RemoteControllerremote.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF控件和布局

WPF控件和布局&#xff0c;根据刘铁猛《深入浅出WPF》书籍讲解内容&#xff0c;主要记录控件和布局的原理&#xff0c;如果有不足的地方&#xff0c;请大牛们键盘下留情--轻喷&#xff01;如果还算有用&#xff0c;请给点动力&#xff0c;支持一把&#xff01; 一、WPF里的控件…

css背景图片定位

背景图默认平铺&#xff1a; background-repeat: no-repeat;/*不平铺*//*repeat-x;沿X轴平铺*//*repeat-x;沿Y轴平铺*/ 背景图片定位&#xff1a; background-position: 100px 30px;/* X轴 Y轴 *//* 20% 20%; 百分比的方式 *//* left|center|right top|center|bottom */ 背景中…

使用GZIP和压缩数据

抽象 我们都知道用zip或gzip压缩文件的含义。 但是在Java中使用压缩文件并不像您想的那样简单明了&#xff0c;尤其是当您不是直接使用文件而是压缩流数据时。 我们会去&#xff1a; 如何将字符串转换为压缩/压缩字节数组&#xff0c;反之亦然 创建用于读取和写入文件的实用程…

Oracle ——概述 Oracle 5 步调优方法论

http://www.toadworld.com/KNOWLEDGE/KnowledgeXpertforOracle/tabid/648/TopicID/OPS3/Default.aspx 对 Oracle 调优应该采取积极的态度。如果等到用户开始抱怨性能&#xff0c;才调优通常以为时已晚&#xff0c;即便是最有效的调优策略。性能问题确定和处理的时间越晚&#x…

js,jq.事件代理(事件委托)复习。

<ul id "lists"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul>js委托&#xff1a; var lists document.getElementById(&qu…

整体服务器与微服务

介绍 刚开始时&#xff0c;由于要求简单&#xff0c;所以应用程序既简单又小。 随着时间要求和需求的增长&#xff0c;我们的应用程序变得越来越大&#xff0c;越来越复杂。 这导致将单片服务器开发和部署为一个单元。 在某种程度上&#xff0c;微服务可以通过简单的应用程序回…

NEXUS S安卓4.0/4.1 【完美】 ROOT教程

原文链接&#xff1a;http://bbs.gfan.com/android-3517082-1-1.html 进行bootloader解锁&#xff08;即使解锁&#xff0c;再上锁&#xff09;&#xff0c;会清除你手机上的【所有】数据&#xff08;包括内部的16G SD 存储&#xff09;&#xff0c;包括但不限于应用、设置、联…

CSS中的各种FC

什么是FC&#xff1f; Formatting Context&#xff0c;格式化上下文&#xff0c;指页面中一个渲染区域&#xff0c;拥有一套渲染规则&#xff0c;它决定了其子元素如何定位&#xff0c;以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context&#xff0…

HDU 2647 Reward 拓扑排序

http://acm.hdu.edu.cn/showproblem.php?pid2647 题意&#xff1a; 输入N和M代表N个人和M组数据&#xff0c;M组数据中的A和B代表A的工资要比B的工资高&#xff0c;底薪是&#xff08;888元&#xff09;&#xff0c;问你这个老板至少要付 多少钱给这些员工&#xff0c;A比B工资…

EE Servlet 3:简单表单处理

对于大多数Web开发人员而言&#xff0c;Web应用程序中的表单处理就像小菜一碟。 如果我们无法捕获用户的输入并进行处理&#xff0c;将不会有太大用处。 因此&#xff0c;我在servlet3示例中包含了一个简单的FormServlet &#xff0c;该示例演示了您可能会遇到的很少使用的表单…

编写高质量的代码--基础:结构和样式,行为的分离

实现高质量的代码需要我们在结构和样式&#xff0c;行为的分离的基础上做到&#xff1a;精简&#xff0c;重用&#xff0c;有序。精简&#xff1a;尽量减小文件的大小&#xff0c;提高页面加载速度。重用&#xff1a;提高代码的重用性&#xff0c;减少冗余代码&#xff0c;提高…

提高Java的锁性能

Plumbr是唯一通过解释应用程序性能数据来自动检测Java性能问题的根本原因的解决方案。 几个月前&#xff0c;我们在Plumbr中引入了锁定线程检测之后&#xff0c;我们开始收到类似于“嘿&#xff0c;太好了&#xff0c;现在我知道是什么导致了性能问题&#xff0c;但是现在应该…

APK反编译工具

apktool dex2jar jd-gui 1、将要反编译的APK文件后缀改为.zip&#xff0c;解压 2、取出classes.dex文件&#xff0c;拷贝至dex2jar目录。 3、在dex2jar目录运行下列命令行&#xff1a;dex2jar.bat classes.dex&#xff0c;回车。 4、会发现该目录生成了classes.dex.dex2jar.j…

Dom属性方法

一、javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型&#xff0c;提供的方法可以让js操作html标签 3.BOM Browser Object Model 浏览器对象模型&#xff0c;提供的方法让js可以操作浏览器 注意&#xff1a;1. js里最大的boss是wind…

学习Netflix管理员–第2部分

为了继续上一篇有关Netflix Governator的一些基础知识的文章&#xff0c;在这里&#xff0c;我将介绍Netflix Governator带给Google Guice的另一项增强功能–生命周期管理 生命周期管理本质上提供了进入对象所经历的不同生命周期阶段的钩子&#xff0c;以引用有关Governor的Wi…

[置顶] UDP协议---心德(1)

UDP协议1.面向无连接 2.速度快 3.不可靠的协议&#xff0c;容易丢包 4.包小于64k DatagramSocket:此类表示用来发送和接收数据报包的套接字 DatagramPacket:数据包 发送端&#xff1a; 1.创建一个udpsocket服务 DatagrameSocket dsnew DatagramSocket(); 2.将数据封装到数据包…

@vue/cli 3 运行支持报错 socket

问题 /sockjs-node/info 无限报错解决方案 原因是相关代理端不支持 ws&#xff0c;因此需要在代理处关闭 ws&#xff0c;即 ws: false&#xff0c;如下&#xff1a;vue.config.js const ds_proxy {/: {ws: false,target: https://dev.test.gitinn.com/,changeOrigin: true,…

Eclipse快捷键以及设置

转自&#xff1a;http://www.blogjava.net/liudawei/articles/362468.html Eclipse实用快捷键大全 收藏 Alt左箭头,右箭头 以在编辑窗口切换标签Alt上下箭头, 以自动选择鼠标所在行,并将其上下移动Ctrlf6 可以弹出菜单…

学习Netflix管理员–第1部分

最近几天&#xff0c;我一直在与Netflix Governator合作&#xff0c;并尝试使用Governator尝试一个小样本&#xff0c;以将其与Spring Framework的依赖项注入功能集进行比较。 以下内容并不全面&#xff0c;我将在下一系列文章中对此进行扩展。 因此&#xff0c;对于没有经验的…

元素类型

元素是文档结构的基础&#xff0c;在CSS中&#xff0c;每个元素生成了一个包含了元素内容的框&#xff08;box&#xff0c;也译为“盒子”&#xff09;。但是不同的元素显示的方式会有所不同&#xff0c;例 如<div>和<span>就不同&#xff0c;而<strong>和&l…