javafx响应式布局_JavaFX的响应式设计

javafx响应式布局

使用CSS技术，为您的网站创建响应式设计相对容易。 根据屏幕的大小，您可以使用其他CSS文件和布局。 在JavaFX中，乍一看似乎有些困难，因为CSS仅负责样式，而不负责布局。 但是，为各个屏幕尺寸使用不同的FXML文件并共享一个控制器实际上并没有那么糟，因此您可以轻松地使用SceneBuilder来预览不同屏幕尺寸的布局。 在代码中，您可以根据屏幕大小在FXML文件之间进行切换，也可以通过根据目标设备创建不同的部署并在构建过程中复制所需的文件来摆脱这种情况。

但是，响应式设计不仅与尺寸有关。 对于启用触摸的设备，同样要使用正确的控件，这一点很重要。 在JayDay上，Jim Weaver很好地介绍了如何使用JavaFX创建支持触摸的UI。 您可以从JayDay网站上下载演示文稿： JayDay 2013 。 他提出的目的之一是使用分页控件，该控件比TabPane易于在触摸设备上使用。

不幸的是，这不能与我们重用控制器的方法很好地配合使用，因此我们必须为具有常见内容和用途的控制器创建一个基类。

@FXML private Pagination pager

用于触摸设备和

@FXML private TabPane pager

如果应用程序在桌面上运行。

如Paru Somashekar在JavaONE与Jonathan Giles的演讲中所展示的那样，如果我们能够简单地通过CSS切换外观，那就更好了。 在此演示中，她展示了CheckBox的替代外观，可以通过CSS轻松设置（大约27:15）：

因此，您可以专门为具有CSS的触摸设备创建部署，或者使用类似的方法来确定设备是否支持触摸：

PlatformImpl.isSupported(ConditionalFeature.INPUT_TOUCH);

我决定自己尝试一下，然后将我创建的ChoiceWheel控件转换为ChoiceBox的外观：

对于基于FXML / CSS的方法，我不会像Paru那样通过每个CheckBox上的样式类来设置样式，而是为所有控件启用替代的Skin。 对于我所有的ChoiceBoxes：

.choice-box {
-fx-skin: "de.eppleton.controls.choicewheel.ChoiceBoxSkin";
}

无需对控制器进行任何更改。 我认为这是一种创建在台式机，平板电脑或手机上看起来都不错的应用程序的好方法，它显示了FXML和CSS的优势。 每个设备大小都有一个CSS-FXML对，您可以：

• 根据每个设备组织布局
• 在SceneBuilder中的不同设备上轻松预览设计
• 通过CSS在不同的控件（触摸/鼠标）之间切换
• 重用同一控制器
• 创建仅包含目标设备所需文件的部署

对于常规控件，拥有更多这些经过触摸优化的皮肤真的很棒。

参考： Eppleton博客上我们JCG合作伙伴 Toni Epple的JavaFX响应式设计 。

翻译自: https://www.javacodegeeks.com/2013/09/responsive-design-with-javafx.html

javafx响应式布局