高级JSON表单规范 - 第四章：选项小部件
5.00/5 (2投票s)
JSON表单规范。
章节
- 第 1 章：引言
- 第 2 章：输入小部件
- 第 3 章：输入列表小部件
- 第 4 章：选项小部件
- 第 5 章：选项列表小部件
- 第 6 章：捕获小部件
- 第 7 章：日期和时间小部件
- 第 8 章：高级表单功能
引言
本章介绍的屏幕会在表单屏幕上显示多个选项，用户可以从中选择一个或多个。读者应下载、解压缩并将 选项小部件 表单复制到 Android 设备上，然后使用 CCA-Mobile 应用来填写此示例 表单。
下面是一个代码块，展示了表单已完成实例的原始 JSON 格式示例。
/*
{
"Group Level": "A",
"Level": "A1",
"Fruit Fave": ["Guavas", "Oranges", "Mangoes"],
"Ack": true
}
*/
请记住，可以通过将表单的完整实例 备份 到设备来查看其原始 JSON 格式。
单选选项屏幕
顾名思义，单选选项屏幕允许用户从显示的一组选项中选择一个且仅一个选项。下图显示了此类屏幕的示例。
上面屏幕的定义显示在下面的代码块中
/*
{
"mainScreen": {
"screenID": "Group Level",
"screenDisplayArray": [
{
"localeCode": "en",
"screenLabel": "1. What is your English language proficiency level group?
",
"screenHint": "Please select only one.
"
}],
"screenwidgetType": "singleChoice",
"inputRequired": true,
"widgetSchema": "
\"Group Level\": {
\"type\": \"string\"
}",
"options": ["A", "B", "C"]
}
}
*/
screenwidgetType 设置为 singleChoice。singleChoice 屏幕有一个必需的 JSON 数组参数，称为 options。此数组包含提供给用户的选择文本。widgetSchema 参数包含一个名为“组级别”的 JSON 字符串的转义模式。请注意，singleChoice 屏幕的 widgetSchema 中包含的转义模式字符串不限于 JSON 字符串。如果 options 参数数组仅包含整数值，则 widgetSchema 应包含转义的 JSON 整数模式。相应地，如果 options 仅包含数字或布尔值，则 widgetSchema 的转义内容应分别为 JSON 数字或 JSON 布尔类型。
级联选择选项屏幕
级联选择选项屏幕是 singleChoice 屏幕的一种特殊类型；“特殊”之处在于级联选项屏幕能够根据用户在之前的表单屏幕上的选择，向用户显示不同的选项集。为了理解这里的意思，请看下图
上面的屏幕为用户提供了两个选择选项，即 A1 和 A2。之所以如此，是因为在上一节的 singleChoice 屏幕中选择了 A。如果选择的选项是 B，则上图中将显示 B1 和 B2。找出如果上一个 singleChoice 屏幕中选择了 C，那么此屏幕将显示什么。
掌握了级联选择选项屏幕的概念后，请查看下面的代码块，了解如何定义这些屏幕类型。
/*
{
"mainScreen": {
"screenID": "Level",
"screenDisplayArray": [
{
"localeCode": "en",
"screenLabel": "2. What is your English language proficiency level?
",
"screenHint": "Please select only one.
"
}],
"screenwidgetType": "cascade",
"inputRequired": true,
"widgetSchema": "
\"Level\": {
\"anyOf\": [
{
\"type\": \"string\"
},
{
\"type\": \"number\"
},
{
\"type\": \"integer\"
},
{
\"type\": \"boolean\"
}
]
}",
"cascadeOptions": {
"screenID": "Group Level",
"widgetName": "Group Level",
"A": ["A1", "A2"],
"B": ["B1", "B2"],
"C": ["C1", "C2"]
}
}
}
*/
screenwidgetType 设置为 cascade。
在显示级联选项屏幕之前，负责显示屏幕的应用程序会执行以下操作：
- 提取
cascadeOptions中包含的screenIDJSON字符串的值。在此示例中，该值为Group Level。 - 在表单中搜索其标识与步骤 1 中提取的值匹配的屏幕。
- 提取
cascadeOptions参数中包含的widgetNameJSON字符串的值。在此示例中，该值为Group Level。 - 在步骤 2 中找到的屏幕中，搜索其标签与步骤 3 中提取的
widgetName值匹配的输入的 ist 的值。 - 将步骤 4 中找到的输入值与
cascadeOptions参数中包含的 JSON 数组的名称进行匹配。 - 如果找到数组匹配项，则将匹配数组的内容显示为级联屏幕上的选项。例如，如果
Group Level的值为C，则C的 JSON 数组中的项，即[C1, C2]，将显示在级联选项屏幕上。
widgetSchema 参数的值是一个 JSON 转义模式，它表示级联屏幕的输入可以通过使用 anyOf JSON 关键字来成为 JSON 布尔值、整数、数字或字符串类型。这种灵活性是必需的，因为在级联屏幕上显示给用户的选项是动态的，无法提前知道。
多选选项屏幕
上图中的多选屏幕示例由以下代码块定义
/*
{
"mainScreen": {
"screenID": "Fruit Fave",
"screenDisplayArray": [
{
"localeCode": "en",
"screenLabel": "3. What are your favourite fruit?
",
"screenHint": "Please select all that apply?
"
}],
"screenwidgetType": "multipleChoice",
"inputRequired": true,
"widgetSchema": "
\"Fruit Fave\": {
\"type\": \"array\",
\"items\":
{
\"type\": \"string\"
},
\"additionalItems\": false
}",
"options": ["Guavas", "Oranges", "Apples", "Mangoes", "Peaches", "Plums"]
}
}
*/
screenwidgetType 设置为 multipleChoice，options 参数是一个 JSON 数组，其项是提供给用户的选择项。widgetSchema 参数包含一个 JSON 模式的转义，该模式表示一个包含用户选定或勾选值的数组。在上例中，因为 options 参数的内容是 strings，所以该数组的项预计为 JSON string 类型。如果 options 参数数组包含整数、数字或布尔 JSON 类型，则 widgetSchema 中的 Fruit Fave 数组的项将分别为整数、数字或布尔值。
确认屏幕
这是一个表单屏幕，提示用户在继续表单的其余部分之前确认某些信息。下面是确认屏幕示例的屏幕截图
下面的代码块显示了上图中所示屏幕的 JSON 定义
/*
{
"mainScreen": {
"screenID": "Ack",
"screenDisplayArray": [
{
"localeCode": "en",
"screenLabel": "4. Do you confirm that the information entered into this form is correct?",
"screenHint": "Click the button below to confirm."
}],
"screenwidgetType": "acknowledge",
"inputRequired": true,
"widgetSchema": "
\"Ack\": {
\"type\": \"boolean\"
}"
}
*/
从上面的定义可以看出，screenwidgetType 设置为 acknowledge，而 widgetSchema 参数仅仅是 JSON 布尔变量的模式。
下一章
在 第 5 章 中，将讨论一种更高级的选项屏幕，称为选项列表小部件。
看点
有兴趣的读者应遵循这些 演练教程 的表单设计部分，并使用此 GUI 工具 来进一步了解如何基于多种用例场景设计表单。
历史
- 2016 年 7 月 18 日：第一个版本
- 2016 年 11 月 3 日：对此工作进行了更正