JMetro版本5发布

Java的第5版JavaFX主题JMetro刚刚发布。

这是此版本中的新功能：

• 新的文本区域明暗风格；
• 现有控件样式的一些更改；
• 新CSS变量称为accent_color。 顾名思义，它允许您定义JMetro控件中使用的强调颜色。
• 已经进行了很大的重构，简化并删除了重复CSS代码。

在这篇文章中，我将详细介绍这个新版本。

JMetro的样式更新

TextArea JMetro样式

在JMetro问题跟踪器中的错误报告之后，我添加了新的Text Area浅色和深色样式。

这种新样式与现有的“文本字段”和“密码字段”样式非常相似。 它已经在先前的4.8.5版本中发布，但是由于我只是在Twitter上宣布了这一点，因此我将在此处发布更多详细信息。

这是TextArea深色和浅色样式的外观：

文本区域– JavaFX主题JMetro灯

文本区域– JavaFX主题JMetro暗

更改现有样式

选择框新样式

这是Choice Box的新样式。 以前的样式看起来太像一个按钮，如果使用“选择框”执行动作，则该按钮会更合适。 并非如此，它用于选择一个项目，因此我对样式进行了调整，使它们看起来更像JMetro组合框。

选择盒– Javafx主题JMetro灯

选择盒– Javafx主题JMetro黑暗

微调器新样式

微调框深色样式已进行了调整：

微调框– Javafx主题JMetro黑暗

Tabs和TabPane新样式

“选项卡”和“选项卡窗格”灯光主题中使用的重点颜色已略微调整。

黑暗主题的样式已完全改头换面：

选项卡和选项卡窗格-JavaFX主题JMetro暗

其他样式调整

其他更改包括对“树状视图”的浅色和深色主题进行了细微调整。

造型JMetro

新CSS变量

添加了新CSS变量，以便可以轻松地进一步设置JMetro的样式。

作为公共API的新CSS变量是：

• accent_color ：顾名思义，此变量用于更改强调色。 可以将此颜色设置为与您的产品品牌更匹配的颜色。

下面是为JMetro设置不同的强调色的同一控件的两个示例。 在两个图像中，鼠标都悬停在最底部的“切换开关”上。

带有蓝色(＃0078d7)配色的拨动开关

带有绿色(＃10893e)配色的拨动开关

以下CSS代码用于第一个屏幕截图：

.root { 
  accent_color: #0078d7; 
}

这是第二个屏幕CSS：

.root { 
  accent_color: #10893e; 
}

如您在上面的屏幕截图中看到的那样，当鼠标悬停时，切换开关的颜色是所定义强调色的浅色版本。 该颜色是从accent_color变量值自动得出的。

JMetro中使用的命名约定

以下是JMetro中使用的命名约定。

CSS属性

属性名称以“-”开头。 示例： -shrink-animate-on-press ， -show-value-on-interaction 。

CSS变量

变量以小写字母开头，以“ color”结尾。 单词之间用“ ”分隔。 示例： accent_color ， text_color 。

我更喜欢这种约定，而不是通常使用的约定，因为在变量是什么和CSS属性之间有更清晰的区别。 第一次阅读CSS代码的人将立即将变量与属性区分开，而不必研究Java代码内部的逻辑。

理想情况下，我希望通过在变量前添加“-”来定义变量。 这是为Web CSS中的变量定义的约定。 但是，在JavaFX CSS中(至少当前)以“-”开头的变量是非法的。

变量以“ _color”结尾以防止冲突。 例如，使用名称text定义变量将与-fx-cursor属性值text冲突。 如果在某处为-fx-cursor定义了值text ，它将被您为text变量定义的变量值替换。 这将导致样式错误。

其他约定

到目前为止，我还没有定义任何常量，但是我正在考虑在不久的将来定义一些常量。 可能的惯例是使用与CSS变量相同的惯例，但不是将它们写成小写，而是将它们定义为所有大写。

CSS并不区分大小写，但是看到所有大写字母的文本都会立即向读者表明该文本代表一个常量。

对JMetro的大重构

对JMetro进行了重大重构，以删除重复CSS代码。 它并不是那么大，但是考虑到我所知道的，据我所知，没有一个好的工具可以对JavaFX CSS代码执行重构，它花费的时间比使用Java代码要多。 CSS中的简单重构(如更改变量名称)可能既耗时又容易出错。

深色主题和浅色主题的所有通用代码均移至一个CSS文件：“ JMetroBase.css”。 “ JMetroDarkTheme.css”和“ JMetroLightTheme.css”定义了定义各自主题的颜色变量的值。 它们都包含“ JMetroBase.css”。

现在，除了Table View(我将在以后的版本中重构)之外，CSS代码不再重复。

结语

版本5代表JMetro的另一个迭代。 所有现有样式均已重新设计，并添加了新的控件样式。

现在，您还可以通过重新定义CSS变量来调整主题的属性，如强调色。

最新版本带来了一个新控件：文本区域，对一些现有样式的调整，新CSS变量，可以轻松地根据您的需要调整JMetro，最后进行了很大的重构，以删除重复的代码并简化JMetro。

与往常一样，这是JavaFX主题JMetro的文档页面。 我将在接下来的几天中尝试对其进行更新。

接下来是我平移的内容：

• 通过Maven Central使JMetro可用(已经可以通过Bintray，JCenter和可下载的jar使用)；
• 添加新的树表视图样式；
• 添加新的手风琴样式；
• 等等。

照顾自己。 与往常一样，我的Twitter帐户将是我发布有关JMetro和其他开源贡献的所有新闻的地方。

翻译自: https://www.javacodegeeks.com/2018/12/jmetro-version-5-released.html