DOC-03-30 嵌入式设备平台(Embedded Platforms)上的UI控件

除了对桌面特性的全面支持,JavaFX软件开发包(SDK)还引入了为触摸设备而设计的新操作特性。

本章将会描述在嵌入式平台上使用JavFX UI控件的方式。

嵌入式运行时特性

尽管JavaFX UI控件并未引入任何额外的公开API使其工作在嵌入式平台之上,但是在实现上已经作出了很大的改变,这使得开发者可以在为触摸式设备开发的JavaFX应用程序中使用桌面控件。

支持触摸设备

JavaFX SDK中为UI控件引入了新的功能特性来支持触摸式设备:手势、触摸。手势可以由触摸屏或触控板事件来产生,而触摸则仅仅支持触摸屏事件。在当前版本的JavaFX SDK中仅支持单点触控以及滑动手势。

参考《处理事件》(Handling Events)一文中的“在触摸设备上处理事件”(Working with events from touch-enabled devices)章节来了解更多关于在JavaFX中处理手势和触摸操作的信息。

虚拟键盘

虚拟键盘控件用于在没有硬件键盘时在设备上输入文本。它可以如同实体键盘一样工作,只是由于空间限制,数字和符号需要占用同一个键位。图30-1展示了虚拟键盘的样例。

30–1 虚拟键盘

3-30-1 embedd-vk

虚拟键盘会在文本输入框获得焦点时自动显示。注意与键盘关联的控件会在键盘出现时仍保持可见。你不需要设置其父舞台(Parent Stage)向上移动。键盘会从底部区域滑入并且将Parent Stage向上推动,以此来保持与键盘关联的控件在屏幕上可见。

当虚拟键盘显示时,用户可以通过触摸合适的按键来输入字符。然后与按键关联的字符将会发送给对应的控件。用户可以输入字母、数字和符号字符。如果要切换键盘,则可以使用ABC/!#123键和Shift键。如果要获取不常用的字符,用户需要长按对应的按键,然后从弹出菜单中选取目标按键,如图30-2所示。

30–2 输入不常用字符

3-30-2 embedd-rare-symbols

表30-1列出了在触摸设备上使用虚拟键盘的可用操作。

30–1 虚拟键盘的使用

操作 按键顺序
输入一个字母 在字母键盘上:按下一个字母键在数字/可选键盘上:先按下“ABC”键,然后按下字母键
输入一个大写字母 在字母键盘上:先按一次Shift键,然后按下字母键
输入多个大写字母 在字母键盘上:先连续按两次Shift键,然后按下字母键
输入一个数字 在数字/可选键盘上:按下数字键在字母键盘上:按下“!#123”键并输入数字
输入一个可选符号 在数字/可选键盘上:按下可选符号键在字母键盘上:按下“!#123”键并输入可选符号
删除一个字符 按下Backspace键来删除插入符左侧的字符
确认输入数据 按下Enter键来确认输入数据
隐藏虚拟键盘 按下键盘左下角的Hide键

如果你的程序的UI界面需要输入电子邮件地址、URL或者仅仅是数字符号,你可以从几个可选键盘布局中选择合适的进行设置。例30-1为一个文本控件设置了此属性。

30–1为虚拟键盘设置电子邮件布局

目前,vkType属性支持如下几个值:numeric、url、email和text。最后一个是默认的布局。

图30-3展示了键盘的email布局。除了字母、数字和可选符号,这个布局中还有一“@”和“.com”(“.org”)键,这两个键在需要快速输入电子邮件地址时非常有用。

30–3 虚拟键盘的Email布局

3-30-3 embedd-vk-email

虚拟键盘的URL布局如图30-4所示,它没有空格键。相反,它提供了“www.”和“http//”键。

30–4 URL虚拟键盘的URL布局

3-30-4 embedd-vk-url

在某些UI中,用户希望仅仅输入数字,图30-5展示了虚拟键盘的一个简单numeric布局,它可以完成此任务。在这个布局中没有Shift键,也没有可选符号键。

30–5 虚拟键盘的Numeric 布局

3-30-5 embedd-vk-numeric

在嵌入式平台上的UI控件外观

为触摸设备特别设计了embedded.css样式表。它补充了modena.css样式表并且重写了其中的部分样式。UAStylesheetLoader类用于管理UI控件的样式,当检测到程序工作在触摸设备上时,它进行CSS文件切换。

embedded.css样式表改变了如下控件的外观:

· ScrollBar, ScrollPane ——重新定义了滚动元素

· TextArea, TextField, PasswordField, DatePicker ——可视化输入符

· ContextMenu——引入了横向上下文菜单

滚动控件

在移动触摸平台的Scroll Pane中,滚动操作是在可滚动视图内容中一个触摸手势的结果。当用户没有和Scroll Pane进行交互时滚动条会被隐藏起来,即使其展示的内容比Scroll Pane要大一些也是如此。当触摸手势被触发后滚动条会自动出现,但是它们仅仅作为一个展示内容大小和位置的指示符,并不是一个可以被用来进行滚动操作的活动控件。当滚动条显示时,它们会覆盖部分可见内容并且不会像在桌面平台上那样移动可见内容。如图30-6所示。

30–6在桌面和嵌入式环境中的Scroll Pane外观

3-30-6 embedd-scroll

当可见内容滚动操作停止后Scroll Bar将会自动消失。

文本输入控件

在可触摸平台上,TextArea、TextField和PasswordField均被实现成一个可以让用户输入单行或多行文本的矩形区域。与文本控件的交互在各个平台上都是很相似的。然而,在嵌入式环境中,使用插入符来进行导航和文本选择,使用虚拟键盘来向文本控件中输入字符。

图30-7展示了在一个可触摸平台上运行的TextFieldSample程序。插入符标识出了用户使用虚拟键盘来输入符号的位置。详细情况参考附录中的TextFieldSample.java内容。

30–7 TextField控件的外观

3-30-7 embedd-text

当文本输入控件获得焦点时会自动显示虚拟键盘,并且在设备被旋转时会重新显示。当用户需要向TextField、TextArea、PasswordField以及其它UI控件中输入文本时,如果对应控件的可编辑状态是被启用的,那么虚拟键盘将会显示出来。要隐藏虚拟键盘,用户可以点击Hide按钮或点击控件的外面。

上下文菜单(Context Menu)

在嵌入式环境中上下文菜单(Context Menu)的默认外观被改变了,它为菜单项提供了水平方向的布局。

当用户长按时将会显示Context Menu。如果剪贴板是空的,那么Context Menu将会显示“选择”(“Select”)和“全选”(“Select ALL”)菜单项,否则将会显示如图30-8所示的Context Menu。

30–8 Context Menu的外观

3-30-8 embedd-table

如果在文本控件中的文本被选择过,那么就会显示如图30-9所示的“剪切”(“Cut”)、“复制”(“Copy”)、“粘贴”(“Paste”)和“全选”(“Select All”)菜单项。

图30–9 在选择了内容之后的Context Menu外观

3-30-9 embedd-table1

你可以在JavaFX SDK中找到可触摸平台的另外一种样式。Embedded-qvga.css文件为带有QVGA屏幕的嵌入式设备定义了CSS样式。特别地,它为TextField和TextArea控件了定义了另外的内边距(Padding)。

在嵌入式平台上可用的UI控件特性

除了之前的章节所提到的视觉效果改变,还改变了UI控件的行为来适应单点触摸和滑动手势。

表30-2总结了这些变化。

30–2 针对嵌入式运行时的特性

UI控件 用户操作 支持的触摸动作
Button, Hyperlink,MenuButton,

ToggleButton

点击 激活对应的按钮
CheckBox 点击 切换CheckBox的被选择和取消选择状态
ComboBox 点击下拉图标 显示或隐藏备选列表。当备选列表被打开后,显示在文本域的选项将会被选中。
点击文本域 对于不可编辑的ComboBox:显示备选列表。对于可编辑的ComboBox:将插入符放到文本域中。
点击列表中的一个选项 关闭备选列表并且提交值。
在列表之外点击 关闭列表。
随着拖动持续地滚动内容。
停止滚动。
滑动 加速滚动。
ListView 随着拖动持续地滚动内容。
停止滚动。
滑动 加速滚动。
点击 选择一个选项并且触发与之关联的Action。如果内容正在滚动中则会停止滚动。
双击 如果可以,则进入编辑模式。
TextField,TextArea,

PasswordField

点击 设置插入符位置。
两次点击 选择内容。
点击并长按 打开Context Menu。
滑动 加速滚动。
随着拖动持续地滚动内容。
停止滚动。如果用户对内容“超量滚动”以至于超出了其边界,则此手势会释放滚动的内容并且会使其平滑地返回到TextArea的边界处。
RadioButton 点击 如果RadioButton是被选中的则不会产生任何动作。如果它是取消选中的,则会使其被选中并且同组的其他RadioButton会被取消选中。
ScrollBar,ScrollView 随着拖动持续地滚动内容。
停止滚动。
滑动 加速滚动。
点击 选择一个选项并且触发与之关联的Action。如果内容正在滚动中则会停止滚动。
TableView,TreeView 点击 选择对应的单元或者当对应的单元绑定了Action则调用之。展开或折叠TreeView的节点。
双击 如果被选中的单元支持编辑则切换到编辑状态。
随着拖动持续地滚动内容。
停止滚动。
滑动 加速滚动。
ColorPicker 在调色板中,在颜色选择域或自定义颜色区中快速点击一种颜色 更新颜色选择器中的颜色。关闭调色板。应用对应的颜色。
在调色板外点击 关闭调色板。
在自定义颜色对话框中的颜色域里的任意位置点击 更新RGB、HSB和Web色彩面板中的值。更新在颜色预览中的新颜色。
在自定义颜色对话框中的色调条里的任意位置点击 更新RGB、HSB和Web色彩面板中的值。更新在自定义颜色对话框中的新颜色。
点击滑块中的任何位置,或者将滑块拖动到左侧或右侧 关闭对话框。关闭调色板。更新颜色选择器。应用对应的颜色。
Pagination 点击一个页面按钮 打开被选中的页面。
点击“下一页”按钮,向左滑动 打开下一个页面
点击“上一页”按钮,向右滑动 打开前面的页面
DatePicker 点击日期信息域 在信息域中显示插入符;显示虚拟键盘。
点击日历图标 显示和隐藏日历。
点击向左和向右日历箭头 显示前一个或者后一个月份和年份。
点击日历中的日期 使用被选择的日期更新信息域并且关闭日历。
在日历外面点击 关闭日历并且不更新信息域。

当程序在可触摸平台上运行时,表30-2中提到的操作都是可用的,它们不需要再进行额外的编码。

在嵌入式平台上不可用的UI控件特性

下面列出的一些UI控件特性目前还不能在嵌入式平台上使用:

· 在TableView中进行列的大小改变、列的重排、数据排序

· 在ListView和TreeView中进行多选

· 在PasswordField中进行文本复制

在嵌入式平台上不可用的其它特性

下面列出的一些JavaFX特性无法在嵌入式平台上使用:

· 在部分嵌入式平台上,Stage类与桌面交互有关的功能不可用。例如,在这些平台上一个Stage窗口没有标题以及其他装饰物,并且无法由用户改变大小。

· Web组件——提供Web浏览器并且通过其API提供完全的浏览功能。参考《向JavaFX程序中添加HTML内容》(《Adding HTML Contentto JavaFXApplications》)一文获取更多信息。

· 多媒体——JavaFX的JavaAPI提供了多媒体功能。参考《向JavaFX程序中增加多媒体功能》(《IncorporatingMedia Assets Into JavaFX Applications》)一文获取更多信息。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_embedded/
百度已收录