高级JSON表单规范 - 第五章：选项列表小部件

• 下载选项列表小部件表单 - 751 字节

章节

• 第 1 章：引言
• 第 2 章：输入小部件
• 第 3 章：输入列表小部件
• 第 4 章：选项小部件
• 第 5 章：选项列表小部件
• 第 6 章：捕获小部件
• 第 7 章：日期和时间小部件
• 第 8 章：高级表单功能

引言

选项列表屏幕是第 4 章中讨论的选项屏幕的扩展版本。与之前的章节一样，这些屏幕类型通过示例可以更好地解释。 选项列表小部件表单附在此文章中，以帮助理解。 下载、解压缩并将表单复制到 Android 设备，并使用提供的 CCA-Mobile 应用程序来完成此表单的实例。 备份已完成的实例。 下面的代码块显示了已完成实例的 JSON 格式示例。

/*
{
"FruitLike":  {
"Guava": "Yes", 
"Apple": "No", 
"Banana": "Yes", 
"Oranges": "No"
}, 
"FruitColour":  {
"Guava": ["Green", "Yellow"], 
"Apple": ["Green", "Yellow", "Red"], 
"Banana": ["Green", "Yellow"], 
"Oranges": ["Green", "Yellow", "Red"]
}
}

*/

单选列表选项屏幕

下图是单选列表屏幕的示例。 在此示例屏幕中，“Guava”、“Apple”、“Banana”和“Oranges”文本称为选项，而“Yes”和“No”文本称为选项标签。

下面的代码块显示了上述屏幕的 JSON 定义

/*
{
"mainScreen":  {
"screenID": "FruitLike", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "1. Do you like the fruits listed below?", 
"screenHint": "Select one option for each fruit.
"
}], 
"screenwidgetType": "singleChoiceList", 
"inputRequired": true, 
"widgetSchema": "
\"FruitLike\": {
\"type\": \"object\",
\"properties\":  {
\"Guava\": {
\"type\": \"string\"
},
\"Apple\": {
\"type\": \"string\"
},
\"Banana\": {
\"type\": \"string\"
},
\"Oranges\": {
\"type\": \"string\"
}
},
\"required\": [\"Guava\", \"Apple\", \"Banana\", \"Oranges\"],
\"additionalProperties\": false
}", 
"options": ["Guava", "Apple", "Banana", "Oranges"], 
"optionLabels": ["Yes", "No"]
}
}
*/

此屏幕的 screenwidgetType 设置为 singleChoiceList。

widgetSchema 参数的内容是 JSON string，它是 JSON 对象的转义模式，即 FruitLike。 此对象的属性严格地是 options 参数数组中名称和值类型中的项。 在此屏幕类型的 widgetSchema 中定义的 JSON 对象的每个属性的实例值都限制为 optionsLabel 参数数组的项。

下面的代码块显示了 FruitLike 对象的实例示例。

/*
{
...
"FruitLike":  {
"Guava": "Yes", 
"Apple": "No", 
"Banana": "Yes", 
"Oranges": "No"
}, 
...
}

*/

多选列表选项屏幕

如下图所示，多选列表选项屏幕与单选列表选项屏幕类似。 唯一的区别是多选列表选项屏幕允许用户为每个可用选项选择一个或多个条目。

 

由于多选列表选项屏幕中的每个选项必须能够一次保存多个值，因此每个选项都定义为 JSON 数组。 下面的代码块显示了上述屏幕的定义。

/*

{
"mainScreen":  {
"screenID": "FruitColour", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "2. Select the colours in which the species of the fruits listed below come in.
", 
"screenHint": "Select all that apply.
"
}], 
"screenwidgetType": "multipleChoiceList", 
"inputRequired": true, 
"widgetSchema": "
\"FruitColour\": {
\"type\": \"object\",
\"properties\":  {
\"Guava\": {
\"type\": \"array\",
\"items\": 
{
\"type\": \"string\"
},
\"maxItems\": 3,
\"uniqueItems\": true,
\"additionalItems\": false
},
\"Apple\": {
\"type\": \"array\",
\"items\": 
{
\"type\": \"string\"
},
\"maxItems\": 3,
\"uniqueItems\": true,
\"additionalItems\": false
},
\"Banana\": {
\"type\": \"array\",
\"items\": 
{
\"type\": \"string\"
},
\"maxItems\": 3,
\"uniqueItems\": true,
\"additionalItems\": false
},
\"Oranges\": {
\"type\": \"array\",
\"items\": 
{
\"type\": \"string\"
},
\"maxItems\": 3,
\"uniqueItems\": true,
\"additionalItems\": false
}
},
\"additionalProperties\": false
}", 
"options": ["Guava", "Apple", "Banana", "Oranges"], 
"optionLabels": ["Green", "Yellow", "Red"]
}
}
*/

从上面的 widgetSchema 参数的值中，请注意，定义 FruitColour 对象的模式具有 JSON 数组类型的属性，并从 options 参数数组的项目派生其名称。 这些数组的内容在值和类型上都限制为 optionsLabel 参数数组的项。 观察到 FruitColour 对象中每个数组可以容纳的最大项数等于 optionsLabel 参数数组中的项数。

下面的代码块显示了 FruitColour 对象的实例

/*
{
..., 
"FruitColour":  {
"Guava": ["Green", "Yellow"], 
"Apple": ["Green", "Yellow", "Red"], 
"Banana": ["Green", "Yellow"], 
"Oranges": ["Green", "Yellow", "Red"]
}
}

*/

下一章

允许捕获 GPS 坐标、收集签名、扫描条形码、捕获和注释图像的屏幕将在下一章中介绍，即第 6 章。

看点

感兴趣的读者应遵循这些演练的表单设计部分，并使用此GUI 工具以了解更多关于基于大量用例场景设计表单的信息。

历史

• 2016 年 7 月 18 日：第一个版本
• 2016 年 11 月 3 日：对此工作进行了更正