65.9K
CodeProject 正在变化。 阅读更多。
Home

高级JSON表单规范 - 第三章:输入列表小部件

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2016 年 7 月 18 日

LGPL3

2分钟阅读

viewsIcon

13849

downloadIcon

149

JSON表单规范。

章节

引言

输入列表小部件是允许用户在单个表单屏幕中输入两个或多个单独值的屏幕。本文附带了一个表单示例,演示了这些屏幕类型。在继续之前,读者应该通过下载、解压缩并将此表单复制到 Android 设备来测试此表单。使用CCA-mobile应用填写表单。 备份完成的表单以查看 JSON 格式的表单实例。

以下是一个代码块,显示了已附加的表单的完成实例。

/*
{
"OrgAbbrev":  {
"International Monetary Fund": "IMF", 
"United Nations": "UN", 
"World Health Organization": "WHO", 
"North Atlantic Treaty Organization": "NATO"
}, 
"OrgYear":  {
"International Monetary Fund": 1945, 
"United Nations": 1945, 
"World Health Organization": 1948, 
"North Atlantic Treaty Organization": 1949
}, 
"FruitAffinity":  {
"Guava": 0.8, 
"Apple": 0.8, 
"Banana": 0.6, 
"Oranges": 0.9
}
}
*/

本文的其余部分讨论了三种输入列表小部件屏幕类型。

文本输入列表

文本输入列表屏幕允许用户在单个屏幕中输入多个文本值,如下面的图像所示

在下面的代码块中,关于上述输入屏幕的特定参数是screenwidgetType JSON stringwidgetSchema JSON stringoptions JSON 数组。

/*
{
"mainScreen":  {
"screenID": "OrgAbbrev", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "1. Type in the abbreviations for the organizations listed below.
", 
"screenHint": "All inputs are compulsory.
"
}], 
"screenwidgetType": "textInputList", 
"inputRequired": true, 
"widgetSchema": "
\"OrgAbbrev\": {
\"type\": \"object\",
\"properties\":  {
\"International Monetary Fund\": {
\"type\": \"string\"
},
\"United Nations\": {
\"type\": \"string\"
},
\"World Health Organization\": {
\"type\": \"string\"
},
\"North Atlantic Treaty Organization\": {
\"type\": \"string\"
}
},
\"additionalProperties\": false
}", 
"options": ["International Monetary Fund", "United Nations", 
            "World Health Organization", "North Atlantic Treaty Organization"]
}
}
*/

screenwidgetType设置为textInputListwidgetSchema包含输入模式的转义string。在这种情况下,输入模式是一个名为OrgAbbrev的 JSON object,它具有四个属性,这些属性是 JSON string类型。此屏幕的文本输入必须映射到这四个属性之一的模式。请注意,可以像textInput屏幕一样,将长度和格式的约束应用于这四个属性。

options参数是一个 JSON 数组,其中包含为表单屏幕标记每个输入textbox的文本。

整数输入列表

整数输入列表屏幕的 JSON 表单规范与文本输入列表屏幕类似,只是在widgetSchema中转义的对象的属性是 JSON 整数类型,并且screenwidgetType设置为integerInputList

如下面的代码块所示,适用于integerInput屏幕的约束(以可接受的输入值范围为单位)也适用于此处。

/*

{
"mainScreen":  {
"screenID": "OrgYear", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "2. Type in the year in which each of these organizations listed where created.
", 
"screenHint": "Enter values between 1900 and 2000.
"
}], 
"screenwidgetType": "integerInputList", 
"inputRequired": true, 
"widgetSchema": "
\"OrgYear\": {
\"type\": \"object\",
\"properties\":  {
\"International Monetary Fund\": {
\"type\": \"integer\",
\"minimum\": 1900,
\"maximum\": 2000
},
\"United Nations\": {
\"type\": \"integer\",
\"minimum\": 1900,
\"maximum\": 2000
},
\"World Health Organization\": {
\"type\": \"integer\",
\"minimum\": 1900,
\"maximum\": 2000
},
\"North Atlantic Treaty Organization\": {
\"type\": \"integer\",
\"minimum\": 1900,
\"maximum\": 2000
}
},
\"additionalProperties\": false
}", 
"options": ["International Monetary Fund", "United Nations", 
            "World Health Organization", "North Atlantic Treaty Organization"]
}
}
*/

数字输入列表

本节中的图像和代码块是不言自明的。

/*

{
"mainScreen":  {
"screenID": "FruitAffinity", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "3. On a scale of 0.1 to 0.9 how much do you like the fruits listed below?
", 
"screenHint": "Enter a valid decimal value in the range stated above.
"
}], 
"screenwidgetType": "numberInputList", 
"inputRequired": true, 
"widgetSchema": "
\"FruitAffinity\": {
\"type\": \"object\",
\"properties\":  {
\"Guava\": {
\"type\": \"number\",
\"minimum\": 0.1,
\"maximum\": 0.9
},
\"Apple\": {
\"type\": \"number\",
\"minimum\": 0.1,
\"maximum\": 0.9
},
\"Banana\": {
\"type\": \"number\",
\"minimum\": 0.1,
\"maximum\": 0.9
},
\"Oranges\": {
\"type\": \"number\",
\"minimum\": 0.1,
\"maximum\": 0.9
}
},
\"additionalProperties\": false
}", 
"options": ["Guava", "Apple", "Banana", "Oranges"]
}
}
*/

下一章

第 4 章中介绍了定义允许用户从给定列表中选择一个或多个选项的屏幕的参数。

看点

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

历史

  • 2016 年 7 月 18 日:第一个版本
  • 2016 年 11 月 3 日:对此工作进行了更正
© . All rights reserved.