- 浏览: 25602 次
- 性别:
- 来自: 广州
最新评论
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 1165MySQL默认字符编码为latin1,因此用Grails写入数 ... -
Register multiple date format for binding properities
2011-10-12 20:55 1719Grails可以自动把params里面的参数绑定到domain ... -
Grails - binding a customized date format
2011-09-26 18:26 1301It has been possible to bind a ... -
Changing last login date in Grails with Spring Security
2011-09-06 14:31 1182在使用grails spring security core ... -
Grails, spring-security-core plugin:使用email登录
2011-09-06 14:27 27321. Implement the first requirem ... -
Run a Java web application within grails
2011-08-27 13:22 954Ever needed to run an existing ... -
Execute SQL Scripts in Grails Bootstrap or Integration Tests
2011-08-12 15:45 1705I recently had to execute some ... -
Grails - Logging from a Controller or Service
2011-08-11 14:55 1030Logging informational messages ... -
grails taglib修改datePicker格式
2011-08-10 17:07 1964grails的datePicker标签很好,但是并不能设置成y ... -
grails使用build-test-data插件准备测试数据
2011-08-10 11:30 905什么?!还有专门负责 ... -
Grails, p6spy and Sql Profiler
2011-08-09 23:05 1134There are several ways to have ...
相关推荐
无论是DOM操作、事件处理、动画效果,还是Ajax通信,JQuery都能为你的Grails应用带来更优秀的交互体验。不过,要注意保持代码组织的清晰,避免过度依赖JQuery,适时考虑使用现代JavaScript库或框架,如React或Vue.js...
描述中的"javascript and ajax using in grails"强调了JavaScript在Grails应用中的重要性。JavaScript是实现Ajax交互的主要语言,通常用于处理用户交互和动态更新页面。Grails提供了与jQuery等流行JavaScript库集成...
Grails是一个基于Java平台的全栈式框架,它简化了Web应用的开发过程,而jQuery则是一款强大的JavaScript库,能够帮助我们实现高效的DOM操作、事件处理以及Ajax交互。 首先,Grails的MVC架构使得开发者可以快速搭建...
在Grails中,可以通过在`head`标签内引入jQuery库,然后使用jQuery的`.ajax()`, `.post()`, `.get()`等方法进行Ajax请求。 4. **示例1:远程函数调用** 一个简单的例子是使用`<g:remoteFunction>`标签更新页面元素...
这可以使用jQuery或其他Ajax库来实现,通过异步发送请求,获取和显示数据。 在实际应用中,多对多关系可能会更复杂。比如,书中提到的合同(Contract)类,它可以用来表示作者与书之间的具体协议,包含额外的属性如...
在Grails中,我们可以利用AJAX技术实现这种交互,AJAX即异步JavaScript和XML,它允许页面在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容。这正是实现联动效果的关键,因为它能让用户体验更加流畅,...
- **AJAX in Grails**:书中会介绍如何使用jQuery或其他库实现异步更新,提升用户体验。 - **Remote Function Calls (RFC)**:通过AJAX调用控制器的方法,实现页面部分更新。 6. **Java平台集成**: - **...
Pjax是一个jQuery插件,它使用ajax和pushState通过真正的永久链接,页面标题和后退按钮提供快速浏览体验。 查看更多或访问 ##为什么要用Pjax? 只是使用ajax从远程加载容器? 是的,但不仅如此。 不再加载css和js...
2. **JavaScript库和框架**:Ajax技术离不开JavaScript的支持,书中可能会讨论jQuery、Prototype、MooTools等流行的JavaScript库,以及它们在处理Ajax请求和简化DOM操作上的应用。 3. **Java后端框架**:作为标题中...
在JavaScript方面,Grails 2支持AJAX和JSON,使得前后端交互更加顺畅,提高了用户体验。它可以与各种JavaScript库和框架如jQuery、AngularJS等无缝集成,让Web应用的动态功能更加强大。 开发TekDays.com的过程中,...
市场模型 Web 应用程序(Java、Groovy / Grails、GSP、AJAX、Javascript (Jquery)、HTML / CSS)。 存储模型 Web 应用程序。 算法 商店有一定数量的收银机。 每个结账处都有一个客户队列,这些客户拥有一定数量的...
在这个系统中,JavaScript可能被用于处理用户输入验证、实时更新视图以及通过AJAX与服务器进行异步通信,这极大提升了用户体验。例如,用户可能可以无需刷新页面就能提交问题报告或者查看状态更新。 从...
同时,该插件可能还包含了对其他流行库如 jQuery 或 AngularJS 的集成,使得开发者能够利用这些库的强大功能。 总的来说,"richui-two" 是一个针对 Grails 2.3.4 平台设计的前端增强插件,它提供了一系列 ...
在Grails项目中,可以使用诸如jQuery、React或Vue.js这样的JavaScript库或框架来提升用户体验。 在这个项目中,可能包含以下JavaScript相关技术: 1. **AJAX**:用于异步通信,使用户在后台加载数据,提高响应速度...
根据描述,它是在Grails和jQuery框架下构建的,这表明该系统利用了Groovy语言的Grails web开发框架以及JavaScript库jQuery,用于前端交互和动态功能。 **Grails框架** Grails是一个基于Groovy语言的开源Web应用框架...
1. **动态更新**:通过AJAX(Asynchronous JavaScript and XML)技术,JavaScript可以实现页面的无刷新更新,提高用户体验。 2. **表单验证**:前端JavaScript验证可以及时反馈用户输入错误,减少服务器负载。 3. ...
1. **jQuery**:作为最流行的JavaScript库,jQuery简化了DOM操作、事件处理和动画效果,常用于Grails应用的前端开发。 2. **React或Vue**:如果项目中使用了现代前端框架如React或Vue,那么JavaScript代码将负责...
4. **JavaScript库和框架**:虽然具体包含哪些JavaScript库未在描述中明确,但通常Grails项目会集成jQuery、React、Angular或Vue等流行JavaScript框架,用于构建复杂的前端应用。 5. **Grails与JavaScript的集成**...
4. **jQuery**:一种广泛使用的JavaScript库,简化DOM操作、事件处理、动画和Ajax交互。 5. **ES6+特性**:包括箭头函数、模板字符串、Promise、async/await等,提高了代码的可读性和可维护性。 6. **React**或Vue....
JavaScript是该项目的一个标签,表明网站可能使用了JavaScript来增强用户体验,例如通过AJAX实现异步数据更新,或者使用库如jQuery来处理DOM操作和事件绑定。JavaScript也可能被用来验证用户输入,提供动态效果,...