Monday, March 11, 2013

Web Development in Firefox using Lightweight Code Editor: Scripted

Do you think of writing code in Firefox and see the code changes reload automatically and instantly after you save change? I think such code editor is very helpful for live code session.

I did some research and found the following tool set supports the scenario above and working fine in Firefox 19.0.2 (Linux):














Note: You need to unchecked "Reload active tab only" setting in AutoReload Preferences, otherwise auto reload will not work.

Friday, February 22, 2013

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

I would like to announce the JQuery Validation UI Plugin 1.4.1 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:
  • Fixed Issue #14: No such property: request for class: org.grails.jquery.validation.ui.JqueryValidationService. (by bluesliverx)
  • Fixed Issue #15: i18n Messages that have single quotes in them are not escaped properly. (by bluesliverx)
  • Fixed Issue #22: Mixing private and public/protected methods… error. (by Michael Kimsal)
Find Out More:

Monday, September 3, 2012

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:

Friday, August 31, 2012

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!

Sunday, August 26, 2012

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.