JQuery Validation UI Plugin 1.4 Released - Client Side Validation without writing JavaScript

I would like to announce the JQuery Validation UI Plugin 1.4 released. If you are new to the JQuery Validation UI Plugin, the plugin brought Javascript Validator, Custom Constraints, Remote Constraints, JQuery Validation plugin and qTip (jQuery tooltip plugin) under the same root and deliver comprehensive client-side validation solution.

What's New:

• Set onkeyup default to false to fix issue reported at this thread.
• Major code refactoring: move shared codes from JQueryValidationUiTagLib.groovy to JqueryValidationService.groovy.
• Fixed Issue #4: In JQueryValidationUiTagLib.groovy, improve String concatenation using org.codehaus.groovy.grails.web.pages.FastStringWriter.
• Initial jquery-metadata support via jqueryValidationService.getValidationMetadatas and jqueryValidationService.createJavaScriptConstraints.

Find Out More:

• Source code: https://github.com/limcheekin/jquery-validation-ui
• Documentation: http://limcheekin.github.com/jquery-validation-ui
• Support: https://github.com/limcheekin/jquery-validation-ui/issues
• Older Issues: http://code.google.com/p/jquery-validation-ui-plugin/issues/list
• Discussion Forum: http://groups.google.com/group/jquery-validation-ui-plugin

Simplifying JQuery Grid (jqGrid) and Master-Detail Form in Grails

What if you can incorporate the powerful JQuery Grid (jqGrid) component like the following screen into your Grails application in just 3 steps?

First of all, the features and codes to be discussed in this blog post was implemented by a Grails plugin known as "jquery-grid" which using jqGrid 4.4.0 released, it don't have any dependency and relationship with Grails jqGrid plugin.

Let's look at how it can be done:
1. In the person/list.gsp, specified the following code block before the </head> tag to import jqGrid resources:

<r:require module="jquery-grid-en"/>

(en is for English, the plugin support internationalization)
2. Render the JQuery Grid in the person/list.gsp using <g:jqueryGrid> tag, for example:

<g:jqueryGrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" columnWidth="50,150,100,100,350" />

3. Implement the corresponding server-side operation which render data as JSON. In the future, server-side code writing will be eliminated as it will be implemented with the help of dynamic-controller plugin like the Flexigrid example.

Done! You will see the person list render as JQuery Grid component in the picture above after you run "grails run-app".

A great feature of the plugin is embedded-inline-editable grid support which allowed you to use the grid component in detail section of the Master-Detail form, for example the Communication List in the following screen:
The embedded-inline-editable grid support add new row to the grid as well as delete multiple selected rows. The <g:jqueryGrid> tag syntax is similar to the previous one with additional type attribute, please see the sample code below:
<g:jqueryGrid for="com.vobject.addressbook.Communication" properties="type, value" type="embedded-inline-editable" rowNum="5" width="595" />

The jquery-grid plugin implemented the following features:

• Sort by column
• Delete selected rows
• Filter by column(s)
• Advance search
• Select all rows
• embedded-inline-editable grid with "Add Row" and "Delete Row(s)" button and jquery-validation-ui plugin integration.
• Show AJAX dialog and submit AJAX form (eg: Create Person and Edit Person screen)

(You can see the features above in the slides I published to slideshare)

I'd love to hear your comments!

Twitter Bootstrap: Multiple Columns Form Layout Examples

I tried to search Twitter Bootstrap examples for multiple columns form layout. I was surprised that I couldn't found any, so I cook my own and publish my work here. I hope it will save you some times. :)

My work was based on the Twitter Bootstrap's fluid layout example.

First, I try to create the following form layout based on my requirements:

fluid-layout.html

Then, I fill-in the layout columns with form elements/components. Two most common form layouts created for the Person Form: standard form and horizontal form.

fluid-person-form.html (Standard Form)

fluid-person-horizontal-form.html (Horizontal Form)

You can download the source code of the examples above at bootstrap-2.1.0-examples.zip.

I hope my sharing is useful to you.

JQuery Validation UI Plugin 1.3 Released - Client Side Validation without writing JavaScript

I would like to announce the JQuery Validation UI Plugin 1.3 and JQuery Validation Plugin 1.9 released. This feature release increase the flexibility of error message display and tip-based message (qtip) is disabled by default to support non-obtrusive error message display and the use of the plugin in mobile HTML5 application.

If you are new to the JQuery Validation UI Plugin, the plugin brought Javascript Validator, Custom Constraints, Remote Constraints, JQuery Validation plugin and qTip (jQuery tooltip plugin) under the same root and deliver comprehensive client-side validation solution.

What's New:

• Fixed Issue #7: Links in jquery.qtip.css are not correct.
• Added errorContainer, errorLabelContainer, errorElement, errorWrapper(wrapper), highlight, unhighlight, onkeyup and qtip attributes for renderValidationScript tag and configuration items. qtip = false (disabled), onkeyup = true (enabled) by default.
• As qtip disabled by default, created jquery-validation-ui-qtip resource module to include qtip resources.
• Remove install-sampleapp script and sample app codes.
• Two sample applications created for Grails 1.3.9 with Grails standard theme and Grails 2.1.0 with Twitter Bootstrap theme. 

Sample App in Grails 1.3.9

Sample App in Grails 2.1.0

Find Out More:

• Source code: https://github.com/limcheekin/jquery-validation-ui
• Documentation: http://limcheekin.github.com/jquery-validation-ui
• Support: https://github.com/limcheekin/jquery-validation-ui/issues
• Older Issues: http://code.google.com/p/jquery-validation-ui-plugin/issues/list
• Discussion Forum: http://groups.google.com/group/jquery-validation-ui-plugin

My First Grails Presentation Slides

I had been in discussion with a local training provider on possibility of conducting a 3-days Grails training course recently. Unfortunately, the plan didn't materialized as I have other work commitment.

I published the slides here is the partial course content of the introduction section. It is my first presentation slides about Grails.

I'd love to hear your comments about the slides above and the Grails training course!

JQuery Validation UI Plugin 1.2.4 Released - Client Side Validation without writing JavaScript

I would like to announce the JQuery Validation UI Plugin 1.2.4 Released.

The JQuery Validation UI Plugin will bring Javascript Validator, Custom Constraints, Remote Constraints, jQuery Validation plugin and qTip (jQuery tooltip plugin) under the same root and deliver comprehensive client-side validation solution.

What's New:

• Fixed Issue #8: Added backslash escaping for regex matches and updated version. (by bluesliverx)
• Fixed Issue #12: 'jQueryValidatorUI is not defined' error. (by Kevin Stricker)
• Fixed Issue #13: Failed to resolve dependencies net.sf.json-lib:json-lib:2.4.

Find Out More:

• Source code: https://github.com/limcheekin/jquery-validation-ui
• Documentation: http://limcheekin.github.com/jquery-validation-ui
• Support: https://github.com/limcheekin/jquery-validation-ui/issues
• Older Issues: http://code.google.com/p/jquery-validation-ui-plugin/issues/list
• Discussion Forum: http://groups.google.com/group/jquery-validation-ui-plugin

Simplifying Grails Flexigrid Integration

Would you like to incorporate the great Flexigrid component like the following picture into your Grails application?

Let's look at how it can be done easily in just 3 steps:
1. In the person/list.gsp, specified the following code block before the </head> tag to import flexigrid resources:

<r:require module="flexigrid"/>

2. Render the flexigrid in the person/list.gsp using <g:flexigrid> tag, for example:

<g:flexigrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" />  

3. Enabled the Flexigrid support for the PersonController by adding the following configuration to the Config.groovy file:

grails.plugins.dynamicController.mixins = [
 'com.vobject.flexigrid.FlexigridControllerMixin':'com.vobject.addressbook.PersonController'
]

Done! You will see the person list render as Flexigrid component in the picture above after you run "grails run-app".  The <g:flexigrid> tag will render the first column as link and all columns with equal width by default.

Let's do some customization, I want to enabled link for the First Name column instead of Title column and custom width for each column like the following picture:

It is as simple as specify the linkProperty and columnWidth attribute, please see the following code:

<g:flexigrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" linkProperty="firstName" columnWidth="30, 150, 100, 70, 300"/>

Behind The Scene

The codes above was implemented by a Grails plugin known as "flexigrid" by refer to the blog post "Using Flexigrid in Grails Web Applications " to further simplifying Grails Flexigrid integration. It was depends on dynamic-controller plugin. Many thanks to kindness of Ronillo Ang for the writing and Burt for the creation of dynamic controller plugin.

The Grails Activiti Plugin 5.9 Released

I would like to announce the Grails Activiti Plugin 5.9 released.

Grails Activiti Plugin was created to integrate Activiti BPM Suite and workflow system to Grails Framework. With the Grails Activiti Plugin, workflow application can be created at your fingertips!

What's New:

• Release Spring Security Integration plugin 0.4.8 to support latest version of Spring Security Core plugin 1.2.7.3.
• Upgrade Activiti's jar files to 5.9. Start from this version, the plugin required Grails 2.0 or above.
• Change to Grails dependency management from putting Activiti's jar files in lib directory.
• Fixed navigation bar to fit Grails 2.x layout.
• Fixed Issue 4: install-vacation-request-sampleapp script was broken in Grails 2.x
• Move the code of install script to activiti-quickstart
• Improve text display on console.

Find Out More:

• Project Documentation: http://code.google.com/p/grails-activiti-plugin/
• Source Code: https://github.com/limcheekin/activiti
• Support: https://github.com/limcheekin/activiti/issues
• Discussion Forum: http://groups.google.com/group/grails-activiti-plugin

The Grails Activiti Evolution

In the end of April, I published a message to the Grails Activiti plugin's discussion forum, the plugin development progress will shift to low gear. An active plugin user from US semiconductor firm saw my message and contacted me for a consulting work opportunity related to the plugin, unluckily the deal was not materialized. So, my priority for development of the plugin remain the same.

I would like to see the plugin keep evolving, even I can't promise I will be always active in development and super responsive in community support, you will see me there :). Hence, I write about the future of the Grails Activiti I envisioned in this blog post. You can assume it is evolution roadmap of the plugin, your feedback and comments are very much appreciated.

Business Process Management 101

What is Business Process Management (hereafter called "BPM")? Let's look from BPM as business practice perspective, the following diagram is the BPM process itself:

Diagram 1: taken from slide 12 of slides by Gregor polan

As Grails Activiti plugin is built on top of Activiti BPM suite, let's look at the support of Activiti BPM for the BPM processes above. In my opinion, Activiti BPM had great support the process modeling process with BPMN 2.0 (Eclipse-based Activiti Designer and Web-based Activiti Modeler) and process execution (Activiti Engine) with basic process management and simulation (Activiti Explorer).

Diagram 2: taken from slide 6 of slides by David Noble

Let's look at similar diagram above, the bigger text above are business practices, and the smaller one below are computerized systems.

What is Missing in Activiti BPM?

I break down the BPM Processes and Systems from Diagram 1 and 2 into the following DevOps table:

The black color text is Business BPM and red color text is Technical BPM

I think Activiti BPM has great support for process modeling (Activiti Designer/Modeler) and process execution (Activiti Engine), but the following items have much room to improve:

1. Process simulation: I think the user interface of Activiti Explorer is not user-friendly enough for production use. Users should able to use the deployed processes for their daily operation works after process engineer deployed the process resources (process definitions, form definitions, etc) to Activiti Engine. This will greatly shorter the process development and management cycle.
2. Better integration to Business Rule Engine such as Drools and OpenL Tablets
3. Better integration with Mule ESB or other EAI platforms
4. Better integration with Portal using Grails Portlets plugin.
5. Better monitoring and reporting features (which currently unavailable and can be implemented using HistoryService API)

In my opinion, the Grails Activiti Plugin can further expand and evolve quickly to deliver the improvements above by leverage the Grails Framework and it's richness of plugins. I think item #1 and #5 above will create greatest value to the customer business, what do you think?

Going Forward

I think most improvements above will be implemented as separate Grails plugins. When there is enough interest, creating a Grails Activiti Organization in github is more appropriate to host Grails projects/plugins that related to Grails Activiti such as Spring Security Integration plugin and Shiro Security Integration plugin and other upcoming plugins.

Lastly, if you are interested to join the Grails Activiti Organization or your company is user of the Activiti BPM and would like to see these improvements implemented, I'd love to hear from you!

Edited on 11 July 2012:  Great discussion about this blog post in Activiti Forum.

My Blog Hits 50K Pageviews

When I check the stats of audience of my blog (My first time to do so), I was surprise to find out that one third of the readers of my blog is from United States. The diagram above is showing countries that have greater than 1,000 pageviews.

Many thanks for your interest to my blog posts and I hope the information I shared here is useful to you.

The followings are the most popular blog posts (above 1,000 pageviews) of my blog:

• Kick Off JQuery Form Builder Plugin Project (12,387 Pageviews)  
• Request For Comment: JQuery Form Builder Plugin (3,197 Pageviews) 
• JQuery and Grails Form Builder Plugin 0.1 Coordinated Released (1,439 Pageviews)  
• FreeMarker vs. GSP for Dynamic Template Rendering (1,291 Pageviews)  
• JQuery Validation UI Plugin 1.2 Released - Client Side Validation without writing JavaScript (1,210 Pageviews)

May I know what topics would you like to see more in my writing? I'd love to hear your comments!

Application Skeleton of Vaadin, Spring, JPA and Liferay

I have chance to pick up Vaadin last week, I start with their official tutorial: Address Book Sample. Thanks to Vaadin community created such a great tutorial. The tutorial mainly focus on Vaadin front-end only, this blog post is about integration to Spring technology stack as the back-end that run independent from or in Liferay Portal 6.

The back-end code such as PersonService, PersonRepository and configurations such as persistence.xml, applicationContext.xml, Maven's pom.xml, etc. was generated by Spring Roo. The Spring-Vaadin integration was enabled by Spring Stuff add-on, many thanks to Archie Cobbs created this add-on.

Vaadin Address Book Standalone Sample

Picture above is how the sample look like when it run standalone. You are welcome to fork the code at github, any changes contribute back to the main code base is very much appreciated. Bear in mind that the sample code is far from perfect, but it works. Many works need to be done to become a great application skeleton, you are encourage to look at the outstanding issues, or create one for bug or enhancement.

Edited on 22-Jun-2012: Many thanks to Iwein Fuld for his fixes to enabled the sample run with in-memory HSQLDB instead of MySQL DB.

Vaadin Address Book Sample In Liferay

Picture above is how the sample look like when it run in Liferay. You are welcome to fork the code at liferay branch here.

I hope the sample code is useful to you. I'd love to hear your comments!

Grails Adoption In Malaysia

In my opinion, Grails Framework is great, matured and the most productive technology stack for web application development in Java platform.

I still remembered that I conducted a demo session for Grails in a training room to my fellow developers in 2007, the framework was version 0.6, but I saw it great potential to make web development in Java platform so much simple compares to other alternatives available at that time. It is a big leap forward, not a small improvement. I agreed with the tagline of Grails, "the search is over". Now, my thought remain the same.

What is the reality out there? The reality of Java technology adoption in Malaysia was slow and dominated and lead by big technology companies like IBM and Oracle. I find out that the current status of Grails adoption in Malaysia is like SpringFramework in 2003. It is cool technology that adopted by minority. As per today, SpringFramework is mainstream technology stack that adopted by many Java shops after I spoken to few software managers.

As my base was in Malaysia and I have no plan for relocation or to work oversea, I being forced to stick with SpringFramework and pick up Spring Roo recently even I think Grails is a superior framework for web application development in Java platform in term of simplicity and productivity. I'd love hear your comments if you have different opinions.

The challenge is "How do we, as lead developer, project manager or team lead improve the adoption of new technology stack like Grails in Malaysia?". What do you think?

Lastly, thanks for taking your time to read this post and if you have plan to launch a web application project and free of choice for technology stack [you know my preference ;-)], I'm ready to listen to your plan and happy to work with you. Kindly contact me at limcheekin@vobject.com.


Note: A discussion topic related to this post at OSDC.my Mailing List.
Disclaimer: I am not working for SpringSource and have no association with SpringSource.

JQuery Validation UI Plugin 1.2.3 Released - Client Side Validation without writing JavaScript

I would like to announce the JQuery Validation UI Plugin 1.2.3 Released.

The JQuery Validation UI Plugin will bring Javascript Validator, Custom Constraints, Remote Constraints, jQuery Validation plugin and qTip (jQuery tooltip plugin) under the same root and deliver comprehensive client-side validation solution.

Special thanks to Brian Saville, the release of 1.2.3 for items of What's New section below is his kindly contribution, otherwise you won't see this release news. Brian, welcome you to the project team!

What's New:

• Fixed Issue #19: Allow overriding of submitHandler in generated validation block.
• Fixed Issue #20: Add module definitions to use with the resources plugin.
• First published with the project code at GitHub.
• Converted documentation to Grails Docs (no longer at Google Code).

Known Issue:

• The Person Sample Application is broken in Grails 2.0.0.

Find Out More:

• Source code: https://github.com/limcheekin/jquery-validation-ui
• Documentation: http://limcheekin.github.com/jquery-validation-ui
• Support: https://github.com/limcheekin/jquery-validation-ui/issues
• Older Issues: http://code.google.com/p/jquery-validation-ui-plugin/issues/list
• Discussion Forum: http://groups.google.com/group/jquery-validation-ui-plugin