使用 Grails 与 jQuery 创建 Web Calendar（3）主要步骤
|
- UID
- 1066743
|
使用 Grails 与 jQuery 创建 Web Calendar（3）主要步骤
主要步骤本文所涉及的示例程序开发将包含以下主要步骤：
- 使用 Grails 创建日程管理相关的页面和服务。
- 创建 Grails 项目 MyCalendar。
- 创建领域对象 CalendarEvent，并使用 Grails 自动产生该领域对象的 Controller 和 View 代码，以实现对该领域对象的 CRUD 的操作页面及服务。
- 添加更多服务，并以 JSON 数据格式发布。
- 使用 jQuery 及其插件定义日历用户界面。
- 创建 Grails 页面并安装配置 jQuery 及其插件，包括 FullCalendar、qTip。
- 使用 FullCalendar 插件调用 JSON 数据格式发布的服务，并展现为日历界面。
- 使用 qTip 插件展示日程详细信息。
- 运行示例程序。
创建 Grails 项目 MyCalendar首先下载 Grails（参见参考资源），本文示例代码是基于 Grails 1.1.1 的。对于编辑器，使用 Eclipse 或者一般的文本编辑器都可以。
将 grails-bin-1.1.1.zip 解压到 c:\ grails-1.1.1 下。设置环境变量 GRAILS_HOME 为 c:\ grails-1.1.1，并添加 grails 命令（%GRAILS_HOME%/bin 目录）到 PATH 变量中。
打开命令行窗口，进入工作目录，并运行命令 grails create-app MyCalendar创建一个新的 Grails 项目。运行后，Grails 会在当前目录下创建 MyCalendar 目录，并产生其它项目相关文件。
创建领域对象（Domain Class）进入 MyCalendar 目录，运行命令 grails create-domain-class CalendarEvent,Grails 将会产生 grails-app/domain/CalendarEvent.groovy 文件。用文本编辑器打开 CalendarEvent.groovy，添加成员变量 description,startDate, endDate, allDay（见清单 1）。
清单 1. Domain Class CalendarEvent1
2
3
4
5
6
7
8
9
| class CalendarEvent {
String description //description of the event
Date startDate //event start date
Date endDate //event end date
Boolean allDay //is all day event?
static constraints = {
}
}
|
继续创建 Controller 和 Views，在 MyCalendar 目录下运行命令 grails generate-all CalendarEvent。Grails 将会产生如下 controller 文件。
- grails-app\controllers\CalendarEventController.groovy
和 views 文件
- grails-app\views\calendarEvent\create.gsp
- grails-app\views\calendarEvent\edit.gsp
- grails-app\views\calendarEvent\list.gsp
- grails-app\views\calendarEvent\show.gsp
运行命令 grails run-app，并打开浏览器访问 。
在 Grails 生成的 Web 应用中，用户可以创建、编辑、查看 CalendarEvent，完成 CRUD 的操作。
通过上述步骤可以看到，使用 Grails 创建一个完整可运行的 Web 程序非常的方便。对于示例程序来说，上述步骤基本实现了程序的持久层、业务逻辑层和展现层，为业务对象 CalendarEvent 建立了 CRUD 的基本操作。在接下来的步骤中，本文将基于刚才生成的代码，添加更多日程管理相关的服务。
添加日程查看和管理服务在 Grails 项目中 , 修改 Grails Controller 对象 grails-app/controllers/CalendarEventController.groovy 并添加下列服务。
查看日程服务首先为 CalendarEventController.groovy 添加 listAsJson 方法。该方法将为 FullCalendar 插件提供日程数据查询服务，以 JSON 数据格式返回日程查询结果。由于 Grails 提供了从 java 到 JSON 数据转换的方法 render <java object> as JSON，大大简化了开发任务。代码清单如下：
清单 2. 查看日程服务方法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| def listAsJson = {
def fcal = Calendar.getInstance()
if(params.start) fcal.setTime(new Date(Long.parseLong(params.start)))
def lcal = Calendar.getInstance()
if(params.end) lcal.setTime(new Date(Long.parseLong(params.end)))
def listOfEvents = CalendarEvent.findAll("from CalendarEvent as \
ce where ce.startDate>:startDate AND ce.endDate<:endDate", \
[startDate: fcal.getTime(), endDate: lcal.getTime()])
def listOfJsEvents = []
listOfEvents.each{ event->
def jsEvent = [:]
jsEvent.id = event.id
jsEvent.title = event.description?.length()>15? \
event.description?.substring(0, 14)+"..." : event.description
jsEvent.description = event.description
jsEvent.start = event.startDate
jsEvent.end = event.endDate
jsEvent.showTime = true
jsEvent.url = "show?id=${event.id}"
jsEvent.className = "scheduled"
jsEvent.allDay = event.allDay
listOfJsEvents.add(jsEvent)
}
render listOfJsEvents as JSON
}
|
当 FullCalendar 插件运行在用户的浏览器上的时候，将会异步地发送 HTTP 查询请求到服务器，查询并展示某时间范围内的日程数据。
- 服务发布的 URL：http://localhost:8080/MyCalendar/calendarEvent/listAsJson，
- 参数：
服务器将查询结果以 JSON 数据格式返回给用户的浏览器。FullCalendar 插件接收并解析返回 JSON 数据，并图形化地将用户日程展现在用户浏览器上。
日程管理服务
为了让用户可以在 FullCalendar 图形化的日程界面上很直观地管理日程。MyCalendar 将提供相应日程管理服务。由于篇幅有限，本文仅以取消日程服务为例，示例开发过程。
在 Grails Controller 中添加 deletedWithJson 方法，并实现取消删除日程服务逻辑。运行在用户浏览器端的 jQuery 及 FullCalendar 插件可以发送取消日程 HTTP 请求到服务器端，服务器接受请求并删除相关日程，并以 JSON 格式数据返回服务器执行结果。代码清单如下：
清单 3. 取消日程服务方法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| def deletedWithJson = {
def resultAsJson = [result: "success", message: "The event has been deleted."]
def calendarEventInstance = CalendarEvent.get( params.id )
if(calendarEventInstance) {
try {
calendarEventInstance.delete()
flash.message = "CalendarEvent ${params.id} deleted"
redirect(action:list)
} catch(org.springframework.dao.DataIntegrityViolationException e) {
resultAsJson.result = "fail"
resultAsJson.message = "Database error, failed to delete the event."
}
} else {
resultAsJson.result = "fail"
resultAsJson.message = "CalendarEvent not found in database."
}
render resultAsJson as JSON
}
|
发布服务如下：
- 服务发布 URL：http://localhost:8080/MyCalendar/calendarEvent/deletedWithJson
- 参数：
当服务请求完成完毕，将会返回执行结果。 |
|
|
|
|
|
