- 浏览: 25081 次
- 性别:
- 来自: 广州
最新评论
By now, you’re probably under the impression that I love Grails, and you wouldn’t be far off from the truth. Ever since I started using it almost a year ago, I’ve continually been amazed by just how darn productive I can be. One of the aspects I want to touch on today is how Grails helps you build rich internet applications (RIA).
Grails out of the box uses Prototype for its JavaScript framework, which means that developers have a number of GSP taglibs available which will automatically generate Prototype code to make AJAX-y calls.
Unfortunately, I “grew up” using JQuery, and thus feel more comfortable using JQuery as my JS framework. Luckily, Grails “has a plugin for that.” This means that if you’ve been using the Grails taglibs to generate your remote calls, you can install the plugin and it will generate JQuery code instead. Great for when you switch out your JS frameworks midstream…am I right?
Anyway, back on topic. First, let’s install the JQuery plugin. The official documentation is here, but, as you’ll soon see, they are a little incomplete. There are a number of ways to get your plugin installed.
1. From the command prompt, you can type in grails install-plugin jquery
2. From STS, you can press ctrl+shift+alt+g to open up the integrated Grails command line and type install-plugin jquery
3. From STS, you can select your project and press alt+g+m and install the jquery plugin from the UI manager
There is some bug preventing the plugin installation process from copying over the requisite jquery-1.4.4.js and jquery-1.4.4.min.js files over to your /web-app/js directory so you’ll then need to run the following:
grails InstallJQuery
You should see something like:
Once that’s done, add the following to your Config.groovy:
Then, in the layouts (or individual pages) that you’re going to use JQuery:
Now comes the fun stuff. When doing AJAX calls, you can either use the Grails tag of remoteFunction or just do everything using JQuery’s $.ajax. I find that if you want to do simple stuff like refreshing a div with callback data, remoteFunction works just fine. When you start wanting to do more complex stuff, I actually find working with JQuery directly easier (but less portable). Your arch will have to make that executive decision.
Anyway, let’s do a simple example. You have a select box with id “topic” that when you select an option, you want to go find a list of books related to that topic. Your remote function might look something like:
To break it down, the remoteFunction has several components:
1. The controller determines which controller you’ll be hitting (in a MVC world)
2. The action defines which action on the controller you’ll be calling
3. The update field determines what div will be updated, either on success or failure
4. The params define the data you pass back. You’ll note that you have to do escaping of single quotes and a lot of random crap. This is one of the reasons why for more complicated stuff, I favor straight up JQuery.
5. The onComplete calls a JS function after everything is finished (whether it errored out or not)
In the example above, I made the remoteFunction actually query for the selected value on the “topic” selector. I can actually embed the remoteFunction directly on the selector’s onchange. If I do, the params would change to:
On the controller side you would have a function such as:
This example is simple, so I haven’t done any validation of the params passed in, but I think you get the idea. Also, if you’ve never experience the magic of Groovy, I’m sure that line just blew your mind. Essentially, through GORM (think groovified Hibernate), I find all Book objects by the Topic field, which I find via the topicId. Then, I loop through the list that’s returned back to me and return a list of names, which I then render. The rendered list is then updated in the “bookList” div. Mind. Blown.
But what happens when you want to do more complex things, like get a list of JSON objects back which you can then manipulate using JQuery?
Fairly straightforward JQuery. What about our controller?
Mind. Blown. Again. Grails can just convert your list of objects into a list of JSON objects and pass it back to your view. Then, you can iterate through your data and do as you please on the front end.
Hopefully, after my long-winded babbling, you can see how powerful Grails and JQuery can be together in building rich internet applications.
Referrence Link:
http://alexduan.com/2011/02/17/grails-jquery-and-ajax/
Grails out of the box uses Prototype for its JavaScript framework, which means that developers have a number of GSP taglibs available which will automatically generate Prototype code to make AJAX-y calls.
Unfortunately, I “grew up” using JQuery, and thus feel more comfortable using JQuery as my JS framework. Luckily, Grails “has a plugin for that.” This means that if you’ve been using the Grails taglibs to generate your remote calls, you can install the plugin and it will generate JQuery code instead. Great for when you switch out your JS frameworks midstream…am I right?
Anyway, back on topic. First, let’s install the JQuery plugin. The official documentation is here, but, as you’ll soon see, they are a little incomplete. There are a number of ways to get your plugin installed.
1. From the command prompt, you can type in grails install-plugin jquery
2. From STS, you can press ctrl+shift+alt+g to open up the integrated Grails command line and type install-plugin jquery
3. From STS, you can select your project and press alt+g+m and install the jquery plugin from the UI manager
There is some bug preventing the plugin installation process from copying over the requisite jquery-1.4.4.js and jquery-1.4.4.min.js files over to your /web-app/js directory so you’ll then need to run the following:
grails InstallJQuery
You should see something like:
引用
Downloading JQuery 1.4.4 ...
[mkdir] Created dir: D:\Development\redShoe\live\web-app\js\jquery
[get] Getting: http://code.jquery.com/jquery-1.4.4.js
[get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.js
.................
[get] Getting: http://code.jquery.com/jquery-1.4.4.min.js
[get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.min.js
........
JQuery 1.4.4 installed successfully
[mkdir] Created dir: D:\Development\redShoe\live\web-app\js\jquery
[get] Getting: http://code.jquery.com/jquery-1.4.4.js
[get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.js
.................
[get] Getting: http://code.jquery.com/jquery-1.4.4.min.js
[get] To: D:\Development\redShoe\live\web-app\js\jquery\jquery-1.4.4.min.js
........
JQuery 1.4.4 installed successfully
Once that’s done, add the following to your Config.groovy:
grails.views.javascript.library="jquery"
Then, in the layouts (or individual pages) that you’re going to use JQuery:
<g:javascript library="jquery" plugin="jquery"/>
Now comes the fun stuff. When doing AJAX calls, you can either use the Grails tag of remoteFunction or just do everything using JQuery’s $.ajax. I find that if you want to do simple stuff like refreshing a div with callback data, remoteFunction works just fine. When you start wanting to do more complex stuff, I actually find working with JQuery directly easier (but less portable). Your arch will have to make that executive decision.
Anyway, let’s do a simple example. You have a select box with id “topic” that when you select an option, you want to go find a list of books related to that topic. Your remote function might look something like:
${remoteFunction( controller: 'book', action:'ajaxFindBooksByTopic', update:[success:'bookList', failure: 'errors'], params:'\'topicId=\'+$(\'#topic\').val()', onComplete:'somefunction();' )}
To break it down, the remoteFunction has several components:
1. The controller determines which controller you’ll be hitting (in a MVC world)
2. The action defines which action on the controller you’ll be calling
3. The update field determines what div will be updated, either on success or failure
4. The params define the data you pass back. You’ll note that you have to do escaping of single quotes and a lot of random crap. This is one of the reasons why for more complicated stuff, I favor straight up JQuery.
5. The onComplete calls a JS function after everything is finished (whether it errored out or not)
In the example above, I made the remoteFunction actually query for the selected value on the “topic” selector. I can actually embed the remoteFunction directly on the selector’s onchange. If I do, the params would change to:
params:'\'topicId=\'+this.value'
On the controller side you would have a function such as:
def ajaxFindBooksByTopic = { render Book.findAllByTopic(Topic.get(params.topicId))*.name }
This example is simple, so I haven’t done any validation of the params passed in, but I think you get the idea. Also, if you’ve never experience the magic of Groovy, I’m sure that line just blew your mind. Essentially, through GORM (think groovified Hibernate), I find all Book objects by the Topic field, which I find via the topicId. Then, I loop through the list that’s returned back to me and return a list of names, which I then render. The rendered list is then updated in the “bookList” div. Mind. Blown.
But what happens when you want to do more complex things, like get a list of JSON objects back which you can then manipulate using JQuery?
$.ajax({ url:"${request.contextPath}/book/ajaxFindBooksByTopic", dataType: 'json', data: { topicId: $('#topic').val(), }, success: function(data) { data.each(function() { doSomething(); } }, error: function(request, status, error) { }, complete: function() { doSomethingElse(); } });
Fairly straightforward JQuery. What about our controller?
def ajaxFindBooksByTopic = { render Book.findAllByTopic(Topic.get(params.topicId)) as JSON }
Mind. Blown. Again. Grails can just convert your list of objects into a list of JSON objects and pass it back to your view. Then, you can iterate through your data and do as you please on the front end.
Hopefully, after my long-winded babbling, you can see how powerful Grails and JQuery can be together in building rich internet applications.
Referrence Link:
http://alexduan.com/2011/02/17/grails-jquery-and-ajax/
发表评论
-
Fedora 14 下grails中文乱码问题(解决方法)
2011-10-20 18:25 1145MySQL默认字符编码为latin1,因此用Grails写入数 ... -
Register multiple date format for binding properities
2011-10-12 20:55 1689Grails可以自动把params里面的参数绑定到domain ... -
Grails - binding a customized date format
2011-09-26 18:26 1272It has been possible to bind a ... -
Changing last login date in Grails with Spring Security
2011-09-06 14:31 1160在使用grails spring security core ... -
Grails, spring-security-core plugin:使用email登录
2011-09-06 14:27 26951. Implement the first requirem ... -
Run a Java web application within grails
2011-08-27 13:22 933Ever needed to run an existing ... -
Execute SQL Scripts in Grails Bootstrap or Integration Tests
2011-08-12 15:45 1678I recently had to execute some ... -
Grails - Logging from a Controller or Service
2011-08-11 14:55 999Logging informational messages ... -
grails taglib修改datePicker格式
2011-08-10 17:07 1925grails的datePicker标签很好,但是并不能设置成y ... -
grails使用build-test-data插件准备测试数据
2011-08-10 11:30 876什么?!还有专门负责 ... -
Grails, p6spy and Sql Profiler
2011-08-09 23:05 1109There are several ways to have ...
相关推荐
将Grails与JQuery集成起来
使用 Grails 和 jQuery 快速开发一个 Web Calendar 程序。
It is javascript and ajax using in grails, it is very useful
介绍了使用ajax的几个常用标签,欢迎志同道合的朋友来看看
Ajax Development With Grails Dojo www.grails-exchange.com © Sven Haiges, Yahoo! Inc. GRAILS & DOJO 3 Goals You know how to get started! You know how AJAX is supported by Grails Tags, Libraries...
Grails Grails Grails Grails Grails
精通Grails 之用 JSON 和Ajax 实现异步Grails。书中包含了全部代码。免费下载
极好的资源,这里边对用Ajax实现多对多关系讲的非常清楚 。
Grails权威指南Grails权威指南Grails权威指南Grails权威指南Grails权威指南Grails权威指南
begining groovy and grails
Grails is a Java- and Groovy-based web framework that is built for speed. First-time developers are amazed at how quickly you can get a page-centric MVC web site up and running thanks to the ...
Grails Persistence with GORM and GSQL
Grails的出现并不是偶然的,而是随着Web应用的日趋复杂及Web2.0和Ajax的悄然兴起发展起来的。不过在我们继续介绍Grails之前,有必要先探究一下如今其他的Java框架及他们的用户体验,因为正是他们的积累,才会产生...
在学习任何东西之前,最重要的是培养兴趣,Groovy世界最耀眼的技术之一--Grails相信大家早已耳闻,我将通过Grails实战系列文章 向您展现Grails的迷人风采,使您感受到Grails的魅力,以至疯狂地爱上Grails,并坠入...
Grails项目的应用越来越多,而对于初学者来说,在Eclipse下搭建Grails项目是一个难题,这个文档将教会你如何搭建Grails项目,希望对你有所帮助。
Grails入门指南中文pdf -- 针对grails1.0.4更新,附加idea8 开发grails的流程
第1章 寻找grails之旅 1.1 java的困惑 1.2 webc2.0时代 1.3 java的力量 1.4 什么是grails 1.4.1 与java集成 1.4.2 简单而强大 1.4.3 吸取的经验教训 1.5 使用grails的原因 ...
Grails1.1中文文档