高级JSON表单规范 - 第七章：日期和时间小部件

Don Fizachi

5.00/5 (1投票)

2016 年 7 月 18 日

LGPL3

4分钟阅读

9475

160

JSON表单规范。

下载日期和时间小部件表单 - 903 B

章节

引言

本章介绍日期和时间表单屏幕。一个表单，即日期和时间小部件表单，演示了这些屏幕类型的功能，该表单附在本章中。下载，解压缩并将此表单复制到 Android 设备。使用 CCA-Mobile 应用程序完成此表单。备份已完成的实例到设备。此表单的备份实例应类似于以下代码块的内容

/*
{
"Date 1":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 21
}, 
"Date 2":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 17
}, 
"Time 1":  {
"timeHour": 20, 
"timeMinutes": 26, 
"timeSeconds": 0
}, 
"Time 2":  {
"timeHour": 12, 
"timeMinutes": 30, 
"timeSeconds": 0
}
}

*/

日期屏幕

这些屏幕类型呈现一个表单界面，用户可以在该界面上选择有效的日期。可以设计日期屏幕类型，以便将输入限制在日期范围内或等于或大于今天的日期。

下图所示的屏幕是一个日期屏幕的示例，其有效输入不能小于今天。

上面屏幕的定义显示在下面的代码块中

/*

{
"mainScreen":  {
"screenID": "Date 1", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "1. Select a date of your choice", 
"screenHint": "The selected date cannot be less than today."
}], 
"screenwidgetType": "date", 
"inputRequired": true, 
"widgetSchema": "
\"Date 1\": {
\"type\": \"object\",
\"properties\":  {
\"dateYear\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 9999
},
\"dateMonth\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 12
},
\"dateDay\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 31
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": true
}
},
\"required\": [\"dateYear\", \"dateMonth\", \"dateDay\"],
\"minProperties\": 3,
\"maxProperties\": 3,
\"additionalProperties\": false
}", 
"dateOption":  {
"gtEqToday": true
}
}
}
*/

screenwidgetType 值设置为 date。日期屏幕示例的 widgetSchema 是 JSON 对象的模式——在本例中为 Date 1——它由四个属性组成，即 dateYear、dateMonth、dateDay 和 saveAsUtc。在这四个属性中，只有前三个属性的值是必需的，如您所见。

saveAsUtc 的默认值决定了用户选择的日期是否在保存之前转换为其协调世界时 (UTC) 等效值。在上面的例子中，默认值设置为 true，所以用户输入的任何日期总是会在存储前进行转换。

如果 dateOption 参数中的 gtEqToday 布尔变量的值设置为 true，则只有等于或大于今天的日期才被接受为有效输入。如果 gtEqToday 值设置为 false，则小于、等于或大于今天的日期都被接受。

此屏幕的已完成实例的格式应类似于以下代码块中显示的格式

/*

"Date 1":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 21
}
*/

下图所示的日期屏幕是一个表单屏幕的示例，该屏幕仅允许在一定范围内（即 2016 年 6 月 1 日至 2016 年 6 月 30 日）的日期输入。

日期范围边界在 dateOption 参数的 minDate 和 maxDate JSON 对象中定义，如下面的代码块所示

/*

{
"mainScreen":  {
"screenID": "Date 2", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "2. Select a date in June 2016", 
"screenHint": "The selected date must be in June 2016"
}], 
"screenwidgetType": "date", 
"inputRequired": true, 
"widgetSchema": "
\"Date 2\": {
\"type\": \"object\",
\"properties\":  {
\"dateYear\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 9999
},
\"dateMonth\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 12
},
\"dateDay\": {
\"type\": \"integer\",
\"minimum\": 1,
\"maximum\": 31
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": false
}
},
\"required\": [\"dateYear\", \"dateMonth\", \"dateDay\"],
\"minProperties\": 3,
\"maxProperties\": 3,
\"additionalProperties\": false
}", 
"dateOption":  {
"minDate":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 1
}, 
"maxDate":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 30
}, 
"gtEqToday": false
}
}
}
*/

下面是此日期屏幕的有效实例的示例

/*

"Date 2":  {
"dateYear": 2016, 
"dateMonth": 6, 
"dateDay": 17
}

*/

时间屏幕

下图所示的屏幕是时间屏幕的示例。这些屏幕类型显示允许用户选择时间输入的小时和分钟值的界面。

上面的屏幕由下面的代码块的内容定义

/*

{
"mainScreen":  {
"screenID": "Time 1", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "3. Select a time of your choice", 
"screenHint": ":)"
}], 
"screenwidgetType": "time", 
"inputRequired": true, 
"widgetSchema": "
\"Time 1\": {
\"type\": \"object\",
\"properties\":  {
\"timeHour\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 23
},
\"timeMinutes\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"timeSeconds\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": true
}
},
\"required\": [\"timeHour\", \"timeMinutes\"],
\"minProperties\": 2,
\"maxProperties\": 3,
\"additionalProperties\": false
}"
}
}
*/

screenwidgetType 值设置为 time。 widgetSchema 中包含的 Time 1 JSON 对象模式具有四个属性：timeHour、timeMinutes、timeSeconds 和 saveAsUtc。 saveAsUtc 属性的默认值的作用与上一节中讨论的用户选择的时间值的作用相同。

此屏幕输入的已完成实例应类似于下面的代码块中显示的实例

/*
"Time 1":  {
"timeHour": 20, 
"timeMinutes": 26, 
"timeSeconds": 0
}

*/

有效的时间输入也可以限制在一个时间范围内。下图是此类屏幕的一个例子。

下面代码块中 timeOption 参数中的 minTime 和 maxTime JSON 对象用于定义可接受的输入时间范围。

/*

{
"mainScreen":  {
"screenID": "Time 2", 
"screenDisplayArray": [
{
"localeCode": "en", 
"screenLabel": "4. When does lunch time start?", 
"screenHint": "Select a time between 12 - 2 pm."
}], 
"screenwidgetType": "time", 
"inputRequired": true, 
"widgetSchema": "
\"Time 2\": {
\"type\": \"object\",
\"properties\":  {
\"timeHour\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 23
},
\"timeMinutes\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"timeSeconds\": {
\"type\": \"integer\",
\"minimum\": 0,
\"maximum\": 59
},
\"saveAsUtc\": {
\"type\": \"boolean\",
\"default\": false
}
},
\"required\": [\"timeHour\", \"timeMinutes\"],
\"minProperties\": 2,
\"maxProperties\": 3,
\"additionalProperties\": false
}", 
"timeOption":  {
"minTime":  {
"timeHour": 12, 
"timeMinutes": 0, 
"timeSeconds": 0
}, 
"maxTime":  {
"timeHour": 14, 
"timeMinutes": 0, 
"timeSeconds": 0
}
}
}
}
*/

下面是此屏幕输入的一个实例。

/*

"Time 2":  {
"timeHour": 12, 
"timeMinutes": 30, 
"timeSeconds": 0
}


*/

本文的最后一章，即第 8 章，将介绍一些不特定于任何一种屏幕类型的功能。

看点

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

历史

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

高级JSON表单规范 - 第七章：日期和时间小部件

章节

引言

日期屏幕

时间屏幕

下一章

看点

历史