javafx 教程
在过去的几个月中,我很高兴使用JavaFX 8,以便为计划和调度应用程序实现复杂的用户界面。 所需的功能之一是执行“就地”编辑的方法,即快速编辑用户选择对象的某些基本属性的方法。
遵循“如果您无法创新,就模仿”的原则,我了解了Apple如何做这些事情,并且iCal确实向我展示了我需要知道的一切。
iCal –榜样
在iCal中,当用户双击事件时,将显示以下“弹出窗口”。
<div>
<img alt="ical-11" src="https://img-blog.csdnimg.cn/img_convert/3a03e13d1bdb545742003308e649b5bc.png" width="480" height="180">
</div>
此时,弹出窗口将显示各个设置组的摘要。 第一组涵盖与事件时间,警报设置和全天标记有关的所有内容。 第二组处理参与者,第三组处理笔记,附件和Web链接。
用户单击三个摘要之一后,弹出窗口将显示用于更改设置的控件。 这种方法降低了UI的复杂性,并使用户更容易专注于对他真正重要的信息。
<div> <img alt="ical-21" src="https://img-blog.csdnimg.cn/img_convert/7c29b9386d08ea987b39ade88e053e78.png" width="480" height="275">
</div>
另一个简洁的功能是可以撕下弹出窗口的选项。 当用户将弹出窗口拖动到远离事件的位置时,箭头将消失,然后弹出窗口将变为独立的实用程序窗口(请参见下面的屏幕截图)。 可以执行多次,以便用户可以并行使用这些窗口中的几个。
<div> <img alt="ical-3" src="https://img-blog.csdnimg.cn/img_convert/521b6affad47bf840fdeaf38df4c5f75.png" width="345" height="241"></div>
JavaFX –竞争者
我很高兴得知,将透明窗口和粘贴到父窗口的子弹出窗口之类的东西对JavaFX 8来说是小菜一碟,而开发人员所面临的Swing问题一去不复返了。 我的工作结果是产生了如下所示的控件的5个类。
<div> <img alt="javafx-1" src="https://img-blog.csdnimg.cn/img_convert/2b6fb79af435ea48a78311d2a2d26e58.png" width="300" height="165"></div>
PopupEditor控件是具有其自己的样式表的自定义控件。 它的整个外观可以通过CSS进行控制。 标题和副标题是文本字段,可以进行编辑(“样式化”边框和背景)。 完整的页眉和页脚(带有“删除”按钮)是可替换的节点。
弹出窗口中的不同部分是手风琴控件中“ TitledPane”的子类。 为了使窗格有时显示常规标题文本,有时甚至在带有节摘要的图形节点(上面的屏幕截图仅显示常规标题文本),需要进行子类化。
当标题窗格扩展或折叠时,弹出窗口会自动调整大小。
<div> <img alt="javafx-2" src="https://img-blog.csdnimg.cn/img_convert/7e43caf5eb297a810aae4561b76fc6d0.png" width="300" height="249"></div>
就像在iCal中一样,用户可以通过在弹出窗口背景内的任何位置开始拖动来撕下弹出窗口。 一旦箭头不再指向“拥有”节点(在上例中为红色按钮),该箭头将消失。 当用户释放鼠标按钮时,弹出窗口将变为常规窗口(可以指定新窗口的类型(实用,透明,修饰等)。)
<div> <img alt="javafx-3" src="https://img-blog.csdnimg.cn/img_convert/2226d4d91b8c9d760af812af1129581e.png" width="275" height="300"></div>
以下屏幕快照显示了我需要它的调度应用程序中正在运行的弹出编辑器。
<div> <img alt="甘特弹出" src="https://img-blog.csdnimg.cn/img_convert/280b2f6914639f155ec928b9fe6a6f7a.png" width="300" height="207"></div>
这是一个小视频,显示了一些严重的编辑操作: