标题: 使用 Grails 与 jQuery 创建 Web Calendar（3）主要步骤 [打印本页]

---

作者: look_w    时间: 2018-9-14 16:44     标题: 使用 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 CalendarEvent

1 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，
• 参数：
  • start：查询起始时间
  • end：查询结束时间

服务器将查询结果以 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
• 参数：
  • id：要取消的日程 id

当服务请求完成完毕，将会返回执行结果。

---

欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)

Powered by Discuz! 7.0.0