流利的设计风格按钮,切换按钮和Java,JavaFX的工具提示

Fluent Design Style Button, Toggle Button, and Tooltip for Java, JavaFX

最后,我快速调整了工具提示样式。

这会将JMetro版本号提高到4.4。

几何版本4.2

有时候,我对在JavaFX中工作仅几个小时所能取得的成就印象深刻。 我会尽量诚实。 但是,由于JavaFX仍为Beta(在版本1之前)并且具有自己的脚本语言(JavaFX脚本),因此一直以来我都有偏见。

再一次地,我感到震惊的是,在这里到那里的几个小时,我几乎完成了JMetro的新迭代,其中包括重新设计几乎所有JavaFX控件的样式(新动画,新颜色,新整体)。 样式),包括JavaFX框架中不存在的样式。 而且,由于JMetro包括明暗版本,因此我完成了所有两次操作–更不用说设计代码和API设计以及视觉设计和UX,测试和调整,直到我认为它足够好为止。 就个人而言,到目前为止,我所花的时间给我留下了深刻的印象。

现在,我不尝试出售任何特定技术。 因为,就像我以前听过Kirill Grouchnikov的话一样,他现在在Google工作,并且是一位前软件工程师,在博客中介绍了Swing:"客户并不关心这项技术。" 客户不在乎所使用的技术。 客户关心产品是否运作良好。

我不介意使用其他技术。 实际上,最近,我一直在使用JavaScript,HTML等进行Web开发。除了激情之外,我总是尽力为工作选择最佳的工具(当然,使用工具包的经验也很重要)。

在这个博客中,我将尽量诚实和公正。 目前,我不隶属于Oracle或任何其他出售JavaFX产品或JavaFX咨询公司的公司。 除了我已经使用了很长时间之外,我没有对JavaFX进行任何投资。 通常,我将自己描述为JavaFX顾问和自由职业者,只是因为那是我最有经验的经验。 但是,还有其他技术可以像JavaFX一样高效。 不过,我认为仅花费几个小时就可以实现令人印象深刻的目标。

按钮和切换按钮的新样式

在短短的几个小时内,我就能够通过单击一个新动画并使用一个新的CSS属性来完全打开/关闭该动画,从而完全重新实现按钮样式。

首先,这是按钮的旧的明暗风格:

Image title

按钮-JMetro OLD 轻主题

Image title

按钮-JMetro OLD 深色主题

上面看到的"默认"代表按钮的样式,该按钮被设置为默认样式。 查看此API规范以获取更多信息。

新样式如下所示:

Image title

按钮-JMetro NEW 轻主题

Image title

按钮-JMetro NEW 黑色主题

按下,悬停和相应效果的颜色已更改。 还添加了一个新的动画,该动画在单击按钮时发生。 按下按钮时,按钮会收缩,然后逐渐恢复到正常大小。 您可以使用-shrink-animate-on-press CSS属性打开或关闭此动画。 默认情况下,它在JMetro样式表中设置为on:

1
2
3
4
.button, .toggle-button {

    -shrink-animate-on-press: true;
}

切换按钮的样式很大程度上取决于按钮。 这是旧样式:

Image title

切换按钮-JMetro OLD 轻主题

Image title

切换按钮– JMetro OLD 深色主题

现在,新的切换按钮样式如下所示:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previous versions where named Metro)

切换按钮JMetro轻型主题,Java,JavaFX主题,灵感来自Fluent设计系统(以前的版本称为Metro)" data-comments-opened =" 1" data-attachment-id =" 2176">

切换按钮-JMetro NEW 轻主题

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named Metro)

切换按钮JMetro深色主题,Java,JavaFX主题,灵感来自Fluent设计系统(以前称为" Metro")" data-comments-opened =" 1" data-attachment-id =" 2177">

切换按钮 JMetro NEW 深色主题

工具提示新样式

JMetro版本4.4的最后一个新增功能是工具提示的新样式。 这是对旧样式的快速调整。 浅色和深色版本看起来都一样:

Image title

工具提示– JMetro OLD 主题

Image title

工具提示– JMetro NEW 主题

颜色略有调整,字体变大了。

结论

在此博客文章中,我对JavaFX的生产率表示了自己的看法。 特别是,几周前开始的新JMetro迭代非常易于使用。

然后,我提到了JMetro 4.4版本中的新增功能。 其中包括深色和浅色样式的新按钮和切换按钮,并添加了CSS可样式化的动画,以及新的调整后的工具提示样式。

接下来是我要更新的内容:

  • 文字栏位样式

  • 密码栏位样式

  • 进度栏样式

  • 继续努力,以使开发人员将来可以轻松调整JMetro颜色;

  • 大概在版本5左右的某个地方,我将致力于通过Maven Central提供JMetro。 该项目有一些特殊性并没有使它尽可能的容易。

  • JMetro的文档位于JavaFX主题JMetro页面上。 此最新版本尚未更新。