Thoughts from a code junkie....

Long Delay....

2011-04-23T17:23:00.003-05:00

I had almost totally forgot about my blog. It's been a long time since I've posted something and I will try to fix that shortly.

I've been working a lot on native mobile apps lately (iPhone and Android) with Grails as the backend web layer. That has been a very interesting (and fun) journey.

If there is anything specific people would like me to cover from a Grails, Andoir, iPhone/iPad perspective just let me know and I'll add it to my list.

Grails Jasper Plugin with Sub Reports

2010-09-25T17:51:00.007-05:00

Reporting is one thing that I never seem to escape. Grails apps are no different. In normal Java apps I've used Jasper/iReports to handle reporting so I wanted to see if the Grails Jasper plugin was up to the task. Man was I glad to find out it was.

The requirements are fairly simple.

Data for the report comes from my domain model, not SQL queries
Sub Reports had to be supported

Domain Objects

For this example I'm only using two domain objects. I have an 'Artist' object that has a 'name' property and a 'hasMany' 'Album' definition. The 'Album' object has only a 'name' property, but 'belongsTo' 'Artist'. (Download the project to view the full source)

iReport

iReport lets you visually design your *.jrxml files. Plus you can precompile the jrxml files so you don't take the compilation hit when the reports are requested. I'm not going to go into a lot of detail on using iReport. There are plenty of resources on the net for that, plus the tool is pretty simple. I will point out some important settings that are needed so everything works.

When you create the report file, don't specify a datasource. The Jasper plugin will use a 'JRBeanCollectionDataSource' for the information that is passed in. To access the fields in the datasource that is passed in you must create some fields in iReport. For this example we have two fields off the 'Artist' domain object we want to use in the report

name (string )
albums (collection)

When you create these fields in iReport, make sure the 'Description' value on the field is the exact name of the field you want to show. It doesn't seem to be enough that the 'Name' field holds the path. The 'name' field will display in one band, while the 'albums' field will get passed to the sub-report so we can cycle over all the items.

When you create the Sub Report element for the 'albums' field you need to have the following settings:

Connection Type: 'Use a datasource expression'
Data Source Expression: new net.sf.jasperreports.engine.data.JRBeanCollectionDataSource($F{albums})

This tells Jasper that when the report is populated and the sub report is called, use the 'albums' collection field off the 'Artist' object as the datasource for the sub report.

Controller

The controller logic is pretty simple. We want to pull all 'Artists' from the database and pass that collection as the datasource for the report. The code is listed below


def artistList = {

    def reportDetails = Artist.listOrderByName([fetch:[albums: 'join']]);

    // Set params that will be passed to Jasper
    params.SUBREPORT_DIR = "${servletContext.getRealPath('/reports')}/"
    params.IMAGE_DIR = "${servletContext.getRealPath('/images')}/"

    chain(controller: 'report', action: 'generateReport', model: [data: reportDetails], params: params)
  }

Since we are using sub reports we need to pass in the location where the sub reports are located. Also, since we are using the grails-logo image in the header so we need to pass in the location where the image can be found.

You will notice that the 'chain' call references the report.generateReport method. Normally you would send things to the 'jasper' controller, but I noticed an issue with using custom attachment filenames in the current JasperController code. I have created a Jira issue for the problem: http://jira.codehaus.org/browse/GRAILSPLUGINS-2516

View

The view changes are very simple. Run 'grails generate-views reporting.Artist' and edit the 'list.gsp' file. At the end of the file we add the following so the report can be downloaded:

<g:jasperReport
   jasper="artists.jasper"
   name="artists-list-${new Date().format('MMddyy')}"
   controller="report"
   action="artistList"
   format="pdf"
   description="Download Artist List"
   delimiter=" "/>

And that is it. We can now download a pdf report using our data from grails.

Resources

Source: http://sites.google.com/site/aoathout/reporting-post.tgz

Grails JQGrid Plugin Released

2010-09-20T20:07:00.002-05:00

The Grails JQGrid Plugin has been officially released. To make things easy the code for this plugin is no longer being maintained on github. It has now moved to the main Grails Plugin SVN repo (I don't really care for svn, but since I have 'git svn' I'm not gonna complain too loud ;) You can find the plugin information here: http://grails.org/plugin/jqgrid

Since the plugin is done and released (for now), and I have finally started to settle into my new job, I should have some more time to put info up. The next two things I'll talk about are WireFrames (using the http://wireframesketcher.com/ eclipse plugin) and Jasper reports (using from grails, including subreports. No SQL datasources, you can find plenty of info on that with a simple google search).

Using Grails Datasources Plugin

2010-09-06T12:34:00.003-05:00

If you're like me, then it is very rare that all of the information you need to access is in a single database. Things seem to be partitioned by department, etc. and the app you are working on needs to integrate all of this information. The standard Grails datasource doesn't support binding different domain classes to different databases, but fortunately, Burt Beckwith has created a plugin to solve that problem. http://www.grails.org/plugin/datasources

In this post I'll show you how simple it is utilize the plugin to handle those integration issues. We'll create a very simple Contacts application where the State and Country domain objects pull their info from one database, while our Contact and Address domain objects will store/retrieve things from another.

First things we need todo is create the project, intall the datasources plugin and create some domain classes.

grails create-app contacts
grails install-plugin datasources
grails create-domain-class contacts.app.Contact
grails create-domain-class contacts.app.Address
grails create-domain-class contacts.common.Country
grails create-domain-class contacts.common.State

The domain classes are listed below:

class Country {

String name

String code

static constraints = {

name(blank: false, unique: true)

code(blank: false, unique: true)

}

String toString() {

name

}

class State {

String name

String code

Country country

static constraints = {

name(blank: false, unique: true)

code(blank: false, unique: true)

country(nullable: false)

}

String toString() {

name

}

class Address {

String line1

String line2

String city

Long stateId

String zip

static belongsTo = Contact

static constraints = {

line1(blank: false)

line2(nullable: true)

city(blank: false)

stateId(nullable: false)

zip(blank: false, matches: "^\\d{5}(-\\d{4})?")

}

class Contact {

String firstName

String middleName

String lastName

String email

String phone

Address address

static constraints = {

firstName(blank: false)

middleName(nullable: true)

lastName(blank: false)

email(blank: false, email: true)

phone(nullable: true, matches: "^\$?(\\d{3})\$?[- .]?(\\d{3})[- .]?(\\d{4})\$")

address(nullable: false)

}

String toString() {

"${firstName} ${lastName}"

}

One thing to note about the Address class is it uses Long stateId instead of binding to the State object. Since State is stored in a different database we only want to store the id of the State object. When we need to access the State object we can simply look it up.

Finally we need to add to configure the datasources we are going to use. Add a Datasources.groovy file to the contacts/grails-app/conf folder. The contents of the file are listed below

datasources = {

datasource(name: 'common') {

pooled(true)

domainClasses([contacts.common.Country,

contacts.common.State])

readOnly(false)

driverClassName('org.hsqldb.jdbcDriver')

url('jdbc:hsqldb:mem:commonDB')

username('sa')

password('')

dbCreate('create-drop')

logSql(false)

}

And that is it. Our Country and State objects will use the common datasource while all other objects use the default datasource. The source for this post has a few modifications to the view files for Contact along with some default data in BootStrap.groovy. One thing I should point out is the default database will have tables defined for both Country and State. This is noted on the datasources plugin page.

Source: https://sites.google.com/site/aoathout/contacts.tgz

Datasources Plugin: http://www.grails.org/plugin/datasources

Grails Tutorial - Part 4

2010-08-26T21:46:00.002-05:00

This post is gonna be fairly brief. I'm gonna introduce the Grails jqgrid
plugin and replace the current Instrument, Member and Band list page with the jqgrid plugin
taglib. This will reduce the amount of code we have to write from well over 100 lines
to about 50 lines (with formatting/spacing ;)

Why use the jqGrid plugin?

Well, frankly I hate to repeat myself. While jquery/jquery-ui/jqgrid
are easy enough to use on their own, I don't like to type/copy-paste
a bunch of code when there are easier ways todo things. That is why
I created the jqgrid plugin and why I am going to introduce it here.

Where can I find the plugin?

The plugin work has just started but so far it handles 90% of everything
I need todo for a grid. I plan on implementing every feature of jqgrid
but for now it is a good start.

You can find the code here:
Grails JQGrid Plugin. It should handle most things you need todo, but
in the case where it doesn't, feel free to email me, or better yet, fork
the project off github! (It is good to be a social programmer!)

Installing the plugin

Installation is fairly simple. Download the grails jqgrid plugin, run
"grails package-plugin" inside the grails-jqgrid/jqgrid project. Then
inside the myband app run "grails install-plugin "<path-to-grails-jqgrid-plugin-zip>"
** Once the plugin is officially released you will be able to download
from the main grails plugin site

Project Modifications

The first we do is remove alot of <g:javascript/>
from our main.gsp file. The following is what our final main.gsp page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="PRAGMA" content="NO-CACHE">
   <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
   <meta http-equiv="EXPIRES" content="Mon, 22 Jul 2002 11:12:01 GMT">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <title><g:layoutTitle default="MyBand" /></title>

   <link rel="stylesheet" href="${resource(dir:'css/menu', file:'fg.menu.css')}" />
   <link rel="stylesheet" href="${resource(dir:'css', file:'main.css')}" />
   <link rel="stylesheet" href="${resource(dir:'css', file:'site.css')}" />
   <link rel="stylesheet" href="${resource(dir:'css', file:'messages.css')}" />

   <jq:resources />
   <jqui:resources />
   <!-- tooltip is still alpha/beta so not included in jquery-ui grails plugin
        Tooltip is needed for live validation -->
   <g:javascript library="jquery-ui/jquery.ui.tooltip"/>
   <g:javascript library="menu/fg.menu" />

   <g:javascript library="app/application" />
   <g:javascript library="app/menu" />

   <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

   <g:layoutHead />
 </head>
 <body class="ui-widget-content">
     <div id="header" class="ui-widget-header">
        <!-- Site banner / include should go here -->
     </div>

     <g:render template="/layouts/includes/menu" />

     <!-- We need some type of top level menu (fgMenu) -->
     <div id="bodyContent">
       <div id="switcher" style="margin-top: 5px;"></div>
       <div id="sidebar">
         <!-- Provide some sidebar navigator (accordian) here -->
         <g:render template="/layouts/includes/leftnav" />
       </div>

       <div id="main">
         <!-- Main Body section. Other views will define the content -->
         <g:layoutBody/>
       </div>
     </div>

     <div id="footer" class="ui-widget ui-widget-header">
       <!-- Put some footer / copyright info here -->
       <div id="footerContent">
         MyBand <g:meta name="app.version"/> on Grails <g:meta name="app.grails.version"/>.
       </div>
     </div>

 </body>
</html>

Next lets look at the tag contents for the band page.

 <jqgrid:grid
         id="band"
         listUrl="${createLink(action: 'listJSON')}"
         editUrl="${createLink(action: 'editJSON')}"
         colNames="'Name', 'Members', 'id'"
         colModel="{name:'name', editable: true},
                   {name:'members', editable: false, sortable: false},
                   {name:'id', hidden: true}"
         sortName="name"
         caption="Band List"
         height="300"
         filterToolBar="true"
         onDblClickRow="onDblClickRow"
         searchOnEnter="false"
         viewRecords="true">

         <jqgrid:deleteButton
             id="band"
             url="${createLink(action: 'editJSON')}"
             messageId="message"/>

         <jqgrid:editButton
             id="band"
             url="${createLink(action: 'edit')}"
             messageId="message"/>

         <jqgrid:addButton
             id="band"
             url="${createLink(action: 'create')}"
             messageId="message"/>

         <jqgrid:searchButton id="band" />

     </jqgrid:grid>

Pretty simple. If you want more info on jqGrid or the jqGrid tag-lib
you can find links in the resource section.

The last point I should mention is the Grid service for the Band list page.

    class BandGridService extends GridService {

       boolean transactional = true

       def processor = { results ->
           def cells = results.collect {
               [
                   cell: [
                       it.name,
                       it.members*.toString()
                   ],
                   id: it.id
               ]
           }
           return cells
       }

       @Override
       Map generate(Map params, String entity) {
           generate(params, entity, processor)
       }


       @Override
       List query(Map params, Integer maxRows, Integer rowOffset,
                  String sortIndex, String sortOrder, String domain) {
           def instance = grailsUtilService.createDomainInstance(domain)
           def results = instance.createCriteria().list(max: maxRows, offset: rowOffset) {
               and {
                   // case insensitive, term can be anywhere
                   if (params.name)
                       ilike('name', '%' + params.name + '%')

                   if (params.members) {
                       members {
                           or {
                               ilike('firstName', '%' + params.members + '%')
                               ilike('lastName', '%' + params.members + '%')
                           }
                       }
                   }
               }
               order(sortIndex, sortOrder).ignoreCase()
               resultTransformer(CriteriaSpecification.DISTINCT_ROOT_ENTITY)
           }
           results
       }
   }

Other Stuff

If you run the application you will see that the Member edit/create page
uses the multi-select list jquery plugin. It is pretty simple to use
(One line of jquery code) so I figure there is no point getting deep into
it. One thing though, I did modify the ui.multiselect.js file so the
available list shows on the left instead of the right. (It would be nice to
see a this become an option instead of changing code)

Alright, short post, but you should download the source and checkout the details.
I probably won't add much more for jqGrid and formular. The next post will
probably cover adding spring-security-core so we can authenticate users

Resources

Source: https://sites.google.com/site/aoathout/myband-part4.zip
** After downloading, rename the folder to "myband".
Grails: http://www.grails.org
jQuery: http://jquery.com
jQuery UI: http://jqueryui.com
jqGrid: http://www.trirand.com/blog
JqGrid Grails Plugin: http://aoathout.github.com/grails-jqgrid
fgMenu: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Multi-Select List: http://quasipartikel.at/multiselect/
Formular: http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular
Git: http://git-scm.com

Gotta love changes

2010-08-04T19:13:00.004-05:00

Just like everything in life, code changes all the time. JQGrid has released 3.8 which has some pretty cool features. Grails is set to release 1.3.4 early next week (Man, how can we keep up?). MyBand post is sidelined for the moment while I upgrade the grails jqgrid plugin to 3.8 (and because I'm doing some cool iphone development). I'll get things up as soon as I can. Sorry for the delay.

While you wait you should check out the following grails plugins:

iWebKit Plugin - Great plugin for mobile website development (Yeah, iPhone haters can say what they want, but face it, great phone/ui/platform)

GSParse Plugin - No more inline javascript! Plus you can use server-side script in your CSS!! (About time somebody provided this. Thank you!!!!)

JQTouch JQuery Plugin - Wish I would have seen this a long time ago.

Always good plugins by Burt Beckwith (Thanks man. You really help keep this stuff going!!)
Spring Security (Check out the UI/ACL/CAS plugins as well)

Grails JQGrid Plugin Update

2010-07-29T00:00:00.003-05:00

I've added code to enable the default navigation bar and the ondblClickRow event listener. There is a lot more todo. Hopefully I will get time to add more features in the next day or so.

Follow the instructions here: http://aoathout.blogspot.com/2010/07/jqgrid-grails-plugin.html to build and install things.

JQGrid Grails Plugin

2010-07-25T14:53:00.002-05:00

I have posted the initial code for the Grails JQGrid plugin. Currently it only supports JSON data and doesn't include things like inline editing or navigation bar controls. I hope to add those features this week.

There are two projects for this plugin. One is the plugin code itself, the other is a demo app that shows how to use the taglib. To run the demo app you must first package the plugin.

cd grails-jqgrid/jqgrid
grails package-plugin

Then in the demo application you must install the plugin (uninstalling any previous versions)
cd grails-jqgrid/jqgrid-demo
grails uninstall-plugin jqgrid
grails install-plugin ../jqgrid/grails-jqgrid*.zip

At this point you should be able to launch the application. If you navigate to the AuthorController you can view the list page as a jqgrid.

You can find the code here: http://aoathout.github.com/grails-jqgrid. I'm always open to suggestions and if you feel like helping with the project be my guest.

Missing Dependency in MyBand Application

2010-07-20T14:51:00.002-05:00

It has been brought up that there is a missing dependency in the MyBand application (oracle jdbc driver). To fix this issue, simply edit the BuildConfig.groovy file and comment out the following line: "compile 'com.oracle:ojdbc6:11.2.0.1.0'". I will make sure the next post doesn't have this issue.

Grails Tutorial - Part 3

2010-07-13T20:15:00.000-05:00

In part one we created the domain layer and generated the controllers.
In part two we changed our layout, css, added jquery and jquery-ui, theme
switcher and changed the homepage. In this post I'll cover changing the
generated list page. We will add the jqgrid component and modify the
Controllers to return json for our ajax requests.

Why the jqGrid component?
I've chosen the jqGrid component because of the features. We'll start
with the basic jqGrid. (The band view will include some other options for the grid).

Changing the list.gsp page
We'll start with something that has no relationships.
Open the "myband/grails-app/views/instrument/list.gsp" file and replace
all of the content with the following.


            <html>
              <head>
                <meta name="layout" content="main" />

                <g:set var="entityName" value="${message(code: 'instrument.label', default: 'Instrument')}" />

                <script type="text/javascript">
                    // URL values used for list interaction
                    // Defined here so we don't inline all of the javascript
                    var listSourceUrl = "${createLink(action: 'listJSON')}";
                    var listEditUrl = "${createLink(action: 'editJSON')}";
                    var showUrl = "${createLink(action: 'show')}";
                    var editUrl = "${createLink(action: 'edit')}";
                    var createUrl = "${createLink(action: 'create')}";
                </script>

                <g:javascript library="app/instrument/list" />

              </head>
              <body>
                <div class="body">
                  <g:if test="${flash.message}">
                    <div id="message" class="message ui-widget-header ui-corner-all">${flash.message}</div>
                  </g:if>

                  <div id="gridWrapper" class="ui-widget-header ui-corner-all" style="overflow: auto;">
                    <h3 class="ui-widget-header ui-corner-all" style="text-align: center;">${entityName}s</h3>
                    <!-- table tag will hold our grid -->
                    <table id="instrumentGrid" class="scroll jqTable" style="width: 100%;" cellpadding="0" cellspacing="0"></table>
                    <!-- pager will hold our paginator -->
                    <div id="instrumentGridPager" class="scroll" style="text-align:center;"></div>
                  </div>
                </div>

                <!-- the dialog div we will populate if nothing is selected for edit or delete -->
                <div id="noSelection" style="display: none;" />
              </body>
            </html>

All we have done here is create some global javascript variables to hold the URL values for our controller actions.
We could have skipped this and put all of our javascript inline but my personal preference is to keep things separated.
The next piece to look at is the <div id="gridWrapper">. We created an empty table to hold the jqGrid
and we have created a div to hold the pagination elements for the table. Pretty simple. Before we look at the javascript file
for this page we need to modify the InstrumentController so we can return JSON data for our grid columns / rows.
Modifying the Controller for the list.gsp page
Since a lot of grid list processing is the same for all controllers I have extracted the main logic into a service (covered next). There
are only a few modifications we need to make to our InstrumentController.

Add the following import to your ImageController:


            import grails.converters.JSON

Add the following line right under class InstrumentController:


            def gridService

Finally we need to add two closures for our list and edit process


            def listJSON = {
                // Instead of repeating this code in all controllers, all logic is handled
                // in a service
                render gridService.generate(params, "Instrument") as JSON
            }

            def editJSON = {
                // Instead of repeating this code in all controllers, all logic is handled
                // in a service
                render gridService.edit(params, "Instrument") as JSON
            }

GridService.groovy
Since most tables (at least in this example) have the same configuration
for Grids all logic has been moved from Controllers to this service. The code is
pretty well documented so I won't really talk about what is going on.


            package myband

            class GridService {

                // Utility service that will create a domain instance based off
                // the short name of the object.
                def grailsUtilService
                def messageSource
                boolean transactional = true

                // Default closure that collects the "name" field off the results passed in
                def defaultFields = {results ->
                    // Collect the row data for the grid
                    def cells = results.collect {
                        [
                            cell: [ it.name ], // Only displaying the "Name" field
                            id: it.id   // Always need to pass the id down for the grid
                        ]
                    }
                    return cells
                }

                // Default edit closure. Used for form / inline editing, form adding and row
                // delete
                def defaultEdit = { instance ->
                    def result
                    def message = ""
                    def state = "FAIL"
                    def id

                    // determine our action. Grid will pass a param called "oper"
                    switch (params.oper) {
                        // Delete Request
                        case 'del':
                            result = instance.get(params.id)
                            if (result) {
                                result.delete()
                                message = "${entity} ${result.name} Deleted"
                                state = "OK"
                            }
                            break;
                        // Add Request
                        case 'add':
                            instance.properties = params
                            result = instance
                            break;
                        // Edit Request
                        case 'edit':
                            // add or edit instruction sent
                            result = instance.get(params.id)
                            result.properties = params
                            break;
                    }

                    // If we aren't deleting the object then we need to validate and save.
                    // Capture any validation messages to display on the client side
                    if (result && params.oper != "del") {
                        if (!result.hasErrors() && result.save(flush: true)) {
                            message = "${entity}  ${result.name} " + (params.oper == 'add') ? "Added" : "Updated"
                            id = result.id
                            state = "OK"
                        } else {
                            message = "<ul>"
                            result.errors.allErrors.each {
                                message += "<li>${messageSource.getMessage(it)}</li>"
                            }
                            message += "</ul>"
                        }
                    }

                    return [message:message, state:state, id:id]
                }

                /**
                 * Generate our Grid rows/cells using the default closure and no parameters
                 *
                 * @param entity The Domain object shortname (no package definition)
                 * @return The map of information that can be converted to JSON
                 */
                Map generate(String entity) {
                    generate([:], entity)
                }

                /**
                 * Generate our Grid rows/cells using the default closure and any parameters
                 * that were passed in.
                 *
                 * @param params The map of parameters to use
                 * @param entity The Domain object shortname (no package definition)
                 * @return The map of information that can be converted to JSON
                 */
                Map generate(Map params, String entity) {
                    generate(params, entity, defaultFields)
                }

                /**
                 * Generate our Grid rows/cells using the parameters passed in. Use the supplied
                 * closure (processor) to handle gathering the cells to display from the query
                 * results.
                 *
                 * @param params The map of parameters to use
                 * @param entity The Domain object shortname (no package definition)
                 * @param processor The closure to use when processing query results
                 * @return The map of information that can be converted to JSON
                 */
                Map generate(Map params, String entity, processor) {
                    def result

                    // The field we are sorting on
                    def sortIndex = params.sidx ?: 'name'
                    // The sort order
                    def sortOrder  = params.sord ?: 'asc'
                    // Deal with any pagination values passed in
                    def maxRows = Integer.valueOf(params.rows ?: 25)
                    def currentPage = Integer.valueOf(params.page ?: 1)
                    def rowOffset = (currentPage == 1) ? 0 : (currentPage - 1) * maxRows

                    // Query the datastore for the requested information
                    def results = query(params, maxRows, rowOffset,
                                        sortIndex, sortOrder, entity)

                    // Grid needs to know the total rows and pages
                    def totalRows = results.totalCount
                    def numberOfPages = Math.ceil(totalRows / maxRows)

                    // Call the closure to pull the rows/cells from the query results
                    def jsonCells = processor(results)

                    // Grid requires the following information to be returned
                    [rows: jsonCells,
                     page: currentPage,
                     records: totalRows,
                     total: numberOfPages]
                }

                /**
                 * Perform editing on the object based on grid values
                 *
                 * @param params The map of parameters to use
                 * @param entity The Domain object short name (no package)
                 * @return The map of information that can be converted to JSON
                 */
                Map edit(Map params, String entity) {
                    edit(params, entity, defaultEdit)
                }

                /**
                 * Perform editing on the object based on grid values
                 *
                 * @param params The map of parameters to use
                 * @param entity The Domain object short name (no package)
                 * @param processor The closure to use for edit processing
                 * @return The map of information that can be converted to JSON
                 */
                Map edit(Map params, String entity, processor) {
                    def instance = grailsUtilService.createDomainInstance(entity)
                    processor(instance)
                }

                /**
                 * Queries the data store for the given object using the information passed in
                 * ** Override this method if you want to search by things other then name
                 *
                 * @param params The map of parameters to use
                 * @param maxRows The maximum number of rows to return
                 * @param rowOffset Where we should start with the results
                 * @param sortIndex The field we are sorting on
                 * @param sortOrder The sorting order
                 * @param domain The Domain object short name (no package)
                 * @return The list of objects from the data store
                 */
                List query(Map params, Integer maxRows, Integer rowOffset,
                           String sortIndex, String sortOrder, String domain) {
                    // Stay generic and call util service to create an instance of the
                    // domain object we are working with
                    def instance = grailsUtilService.createDomainInstance(domain)
                    // Perform query dealing with pagination params
                    def results = instance.createCriteria().list(max: maxRows, offset: rowOffset) {
                        // case insensitive, term can be anywhere
                        if (params.name)
                            ilike('name', '%' + params.name + '%')

                        order(sortIndex, sortOrder).ignoreCase()
                    }

                    // Return the results (last statement is always the return value (unless there
                    // is a specific return statement)
                    results
                }
            }

GrailsUtilService.groovy
To help keep things generic we need a way to create a Domain class by name. I don't really want
to pass in the package name, just a short name for the domain object.


            package myband

            import org.codehaus.groovy.grails.commons.GrailsClass

            class GrailsUtilService {

                boolean transactional = false

                def grailsApplication

                static Map domainCache = new HashMap()

                /**
                 * Create an instance of the Domain class. Since we aren't passing in package
                 * names we need to loop over the artefacts and find the one we are looking for.
                 * If we were passing in package names we could just call the getDomainClass method
                 *
                 * @param name The short name of the Domain class we want to create
                 * @return Instance of the requested Domain class
                 */
                Object createDomainInstance(String name) {
                    if (domainCache[name])
                        return domainCache[name].newInstance()

                    def artefacts = grailsApplication.getArtefacts("Domain")
                    def result = artefacts.find { item ->
                        item.name == name
                    }

                    if (!domainCache[name])
                        domainCache[name] = result

                    return result.newInstance()
                }
            }

The javascript code to configure our grid is pretty simple. I've documented
things pretty well so it should pretty self explanatory.
myband/web-app/js/app/instrument/list.js


            // Use fluidGrid to handle browser resizing so the grid isn't a static width
            function resize_the_grid() {
                $('#instrumentGrid').fluidGrid({
                    base:'#gridWrapper',
                    offset: -2
                });
            }

            $(document).ready(function () {
                // when the page has finished loading.. execute the following
                // Fade any message that may be shown
                $('#message').show().fadeOut(5000);

                // Setup our grid
                var instrumentGrid = jQuery("#instrumentGrid").jqGrid({
                    url: listSourceUrl,  // The URL that provides our row data
                    editurl: listEditUrl,  // The URL to call when we submit an edit/add/delete operation
                    datatype: "json",
                    colNames:['Name', 'id'],  // We are only showing the Name field. Id must also be defined
                    colModel:[
                        {name:'name'}, // The field to pull from our JSON data for our Name column
                        {name:'id', hidden: true} // The field to pull from our JSON data for our ID column (hidden)
                    ],
                    autowidth: true,
                    sortname: 'name',  // Need to have a default sort field
                    sortorder: 'asc',  // Need to have a default sort order
                    scrollOffset: 0,   // Remove the screen space used for the scroll bar
                    height: 300,       // Height of the table
                    rowNum: 25,        // Number of rows to show
                    rowList: [25,50,75,100],    // Values to show in dropdown for number of rows to display
                    pager: jQuery('#instrumentGridPager'), // The element that will hold our pagination info
                    viewrecords: true,
                    gridview: true,
                    ondblClickRow: function(id) {
                        // Double Click the row to navigate to the "show" page
                        if (id) {
                            var url = showUrl;
                            $(location).attr('href', url + "/" + id);
                        }
                    }
                });

                // jqGrid will give us a toolbar that we can add buttons to. There are default buttons
                // but we need to tell the library which ones to display
                $('#instrumentGrid').navGrid('#instrumentGridPager',
                {
                    add: false,  // Don't show the default 'add' button (form based)
                    edit: false, // Don't show the default 'edit' button (form based)
                    del: false,  // Don't show the default 'delete' button
                    search: false, // Don't show the default 'search' button (form based)
                    refresh: true // Show the 'refresh' button so we can reload data
                });

                // Add a custom 'delete' button.
                $('#instrumentGrid').navButtonAdd('#instrumentGridPager', {
                    caption:"",         // The caption to show (none for us)
                    position: "first",  // The position in the toolbar for our custom button
                    buttonicon:"ui-icon-trash", // The jquery-ui theme icon to use
                    onClickButton:function() {
                        // Custom javascript handler that is executed when our button is clicked
                        // Get the row that is selected
                        var rowid = $("#instrumentGrid").getGridParam("selrow");
                        // User must select a row for delete to work
                        if (rowid != null) {
                            // Post to our controller for the delete operation
                            $.post(listEditUrl, {id: rowid, oper: "del"}, function(data){
                                // Server returned success so show message and set it to fade
                                if (data.state == "OK") {
                                    // Tell the Grid to remove the selected row from the view
                                    $("#instrumentGrid").delRowData(rowid);
                                    $('#message').html(data.message);
                                    $('#message').show().fadeOut(5000);
                                } else {
                                    // Server reported failure. Show message and set to fade
                                    $('#message').html(data.message);
                                    $('#message').show().fadeOut(10000);
                                }
                            });
                        } else {
                            // User did not select a row. Show a dialog telling them what is wrong
                            $("#noSelection").html("You must select a row to delete.");
                            $("#noSelection").dialog({
                                modal: true,
                                title: "Invalid Selection"
                            });
                        }
                    }
                });

                // Create a custom 'edit' button in our toolbar
                $('#instrumentGrid').navButtonAdd('#instrumentGridPager', {
                    caption:"",  // No caption for this
                    position: "first", // Make first in list
                    buttonicon:"ui-icon-pencil", // Use the pencil icon from the theme
                    onClickButton:function() {
                        // Get selected row
                        var rowid = $("#instrumentGrid").getGridParam("selrow");
                        // Must select a row to edit
                        if (rowid != null) {
                            // direct browser to our 'edit' page
                            $(location).attr('href', editUrl + "/" + rowid);
                        } else {
                            // No row selected, can't edit. Show a dialog
                            $("#noSelection").html("You must select a row to edit.");
                            $("#noSelection").dialog({
                                modal: true,
                                title: "Invalid Selection"
                            });
                        }
                    }
                });

                // Create a custom 'add' button for the toolbar
                $('#instrumentGrid').navButtonAdd('#instrumentGridPager', {
                    caption:"", // No caption
                    position: "first", // First in list
                    buttonicon:"ui-icon-plus", // use the 'plus' icon from the theme
                    onClickButton:function() {
                        // direct browser to our 'create' page
                        $(location).attr('href', createUrl);
                    }
                });

                // Create a custom 'search' button for the toolbar
                $('#instrumentGrid').navButtonAdd('#instrumentGridPager', {
                    caption:"", // No caption
                    buttonicon:"ui-icon-search", // use the 'search' icon from the theme
                    onClickButton:function() {
                        // We are doing inline search/filtering so when the user clicks
                        // search either display or hide the filter/search row
                        instrumentGrid[0].toggleToolbar();
                    }
                });

                // jqGrid allows for inline searching/filtering. Configure filter row to work
                // like autocomplete
                $('#instrumentGrid').filterToolbar({
                    autosearch: true,
                    searchOnEnter: false
                });
            });

            // Resize the grid when the browser is resized
            $(window).resize(resize_the_grid);

At this point our list page for Instrument is done. A good amount of code,
not excessive but still a good amount. Nothing really complicated, just
a mixture of both client and server-side logic. We will go through
adding Formular to our edit / create page next so we have a full stripe
complete.

Form validation with Formular
Formular is a nice little library that handles real-time client-side validation.
There are no annoying javascript popups, just simple tooltips that let the user
know what is wrong.
For the Instrument create/edit pages we only have a few rules to follow
when it comes to client-side validation. We want to ensure the following
for the "Name" field:


              Required
              More then 4 Characters
              Only alphabetic characters and spaces allowed

To use Formular we don't need todo anything to our edit/create pages except
add the required javascript libraries and css files. You can find the edit.gsp
and create.gsp in the source download for this post. We will take a look
at the javascript needed to make everything work.

The instrument validation.js file holds the client side validation rules we want
to apply.
myband/web-app/js/app/instrument/validation.js


            $(document).ready(function() {
                // Create the validator for our form
                var formular = $("#form").formValidator({
                    forms: {
                        // Validate the name field
                        name: {
                            // The validation rules
                            rules: {
                                required: true, // Do required check
                                lengthMin: 4,   // Do length check
                                regEx: /^[A-Za-z ]+$/ // Do alpha and space check.
                                                      // Not a very good regex pattern but shows concept
                            },
                            // The messages to show (name of message must match validation rule
                            msg: {
                                required: "Name is required",
                                lengthMin: "Name must be at least 4 characters long",
                                regEx: "Only alphabetic and spaces are allowed"
                            }
                        }
                    },
                    validateLive: true,
                    validateOn: "",     // Hide some content formular puts on the page
                    validateOff: "",    // Hide some content formular puts on the page
                    submitHowTo: "post",    // Formular will submit the form if everything passes
                    submitUrl: validationUrl,   // The URL to submit the form values to
                    customError: customError    // We are showing tooltips next to fields, define handler
                })
            });

The app validation.js file holds the custom error handler we use to show
tooltips next to fields in error.
myband/web-app/js/app/validation.js


            var customError = function(event, data){
                // Iterate over any errors we may have and show if needed
                for (var error in data["errors"]){
                    // New error, show tooltip with message
                    if (data.errors[error] == "new") {
                        // did we already set a tooltip?
                        if (!data.tooltip) {
                            // If the field we are validating is hidden (maybe library like multiselect)
                            // then we need to make it visible so we can calculate tooltip location
                            var vis = data.element.is(":visible");
                            if (!vis)
                                data.element.show();

                            // we need to check for a context which is not a checkbox so we use to the parent element (which is div.pair)
                            var selector = (data.type == "group") ? data.element.first().parent() : data.element; // jquery 1.4.x

                            data.tooltip = selector.tooltip({
                                content: function() {
                                    // use the error message
                                    return data.msg[error];
                                },
                                // ui.position settings
                                position: {
                                    my: "left top",
                                    at: "right top",
                                    offset: "35 0",
                                    of: selector
                                },
                                tooltipClass: "ui-widget-content",
                                noHover: true
                            });
                            // Show tooltip next to the element
                            data.tooltip.tooltip("open", selector);
                            // We may have shown a hidden element so we could get position info
                            // Hide it now if it was hidden before
                            if (!vis)
                                data.element.hide();

                        }
                    } else if (data.errors[error] == "corrected") {
                        // Close the tooltip, validation error was corrected
                        data.tooltip.tooltip("close");
                        data.tooltip.tooltip("destroy");
                        data.tooltip = false;
                    }
                }
            }

Ok, that about does it for this post. We've got a jqGrid working, Formular
validation working and everything is using jquery-ui themes. Not to bad. I'll
introduce a few more components in the next post.
Resources

Source: Grails Tutorial - Part 3
** After downloading, rename the folder to "myband".
Grails: http://www.grails.org
jQuery: http://jquery.com
jQuery UI: http://jqueryui.com
jqGrid: http://www.trirand.com/blog
fgMenu: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus
Multi-Select List: http://quasipartikel.at/multiselect/
Formular: http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular
Git: http://git-scm.com

Next Post Soon

2010-07-10T23:33:00.002-05:00

I have been very busy with the day job (JSF/Liferay, not so fun). The code for the next post has been done for a very long time. Just need to document it and write the content.

Grails Tutorial - Part 2

2010-06-24T23:15:00.000-05:00

In the first post we covered creating our Project and local Git

repository. We created our Domain objects and generated all of the
Controllers and views. At this point we have written very little
code and we have a working application. As stated in my comment on
the blog I have since upgraded things to grails 1.3.2. To upgrade
the code simply download grails 1.3.2, set your path and type
grails upgrade in the
myband folder. That's it.
Easy upgrade.

In this post we will change the main layout, add some style sheets,
add jquery / jquery-ui javascript libraries and add the ThemeSwitcher.

Changing the main layout
Grails uses SiteMesh
for layout and decoration. This makes things dead simple. Simply
change the myband/grails-app/views/layouts/main.gsp file.
There are also some CSS changes to make for the site.
All the files are listed below

myband/grails-app/views/layouts/main.gsp


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
          <html>
            <head>
              <meta http-equiv="PRAGMA" content="NO-CACHE">
              <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
              <meta http-equiv="EXPIRES" content="Mon, 22 Jul 2002 11:12:01 GMT">
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title><g:layoutTitle default="MyBand" /></title>
              <link rel="stylesheet" href="${resource(dir:'css/theme', file:'jquery-ui-1.8.2.custom.css')}" />
              <link rel="stylesheet" href="${resource(dir:'css/menu', file:'fg.menu.css')}" />
              <link rel="stylesheet" href="${resource(dir:'css', file:'main.css')}" />
              <link rel="stylesheet" href="${resource(dir:'css', file:'site.css')}" />
              <link rel="stylesheet" href="${resource(dir:'css', file:'messages.css')}" />
              <g:javascript library="menu/fg.menu" />

              <g:javascript library="app/application" />

              <g:layoutHead />

          </head>
          <body class="ui-widget-content">
            <div>
              <div id="header" class="ui-widget-header">
                <!-- Generally would include the header section -->
              </div>
        
              <!-- Include the menu definitions. -->
              <g:render template="/layouts/includes/menu"/>
        
              <!-- Theme Switcher Component will show here -->
              <div id="switcher" style="margin-top: 5px;"></div>
        
              <div id="bodyContent">
                <div id="sidebar">
                  <!-- Include the accordion sidenav -->
                  <g:render template="/layouts/includes/leftnav" />
                </div>
        
                <div id="main">
                  <g:layoutBody/>
                </div>
              </div>
        
              <!-- Footer that always shows at bottom of page -->
              <div id="footer" class="ui-widget-header">
                  <div id="footerContent">
                    MyBand <g:meta name="app.version"/> on Grails <g:meta name="app.grails.version" />.
                  </div>
              </div>
            </div>
          </body>
        </html>

Im including two gsp template files that hold the menu links and

the sidebar links. The contents of both files are listed below

myband/grails-app/views/layouts/includes/_menu.gsp


      <div id="nav" class="ui-widget-header ui-corner-all">
        <a class="ui-widget-header ui-corner-all" href="${createLinkTo(url: '/')}" id="homeMenu">Home</a>
        <a class="ui-widget-header ui-corner-all" href="#" id="bandMenu">Band</a>
        <a class="ui-widget-header ui-corner-all" href="#" id="gigMenu">Gig</a>
        <a class="ui-widget-header ui-corner-all" href="#" id="adminMenu">Admin</a>
      </div>

      <div id="bandMenuContent" style="display:none;">
        <ul>
            <li style="height: 15;"><a href="${createLink(controller: 'band')}">Band Information</a></li>
            <li style="height: 15;"><a href="${createLink(controller: 'member')}">Band Members</a></li>
            <li style="height: 15;"><a href="${createLink(controller: 'song')}">Songs</a></li>
        </ul>
      </div>

      <div id="gigMenuContent" style="display:none;">
        <ul>
          <li><a href="${createLink(controller: 'gig')}">Gig Information</a></li>
          <li><a href="${createLink(controller: 'setList')}">Set Lists</a></li>
        </ul>
      </div>

      <div id="adminMenuContent" style="display:none;">
        <ul>
          <li><a href="${createLink(controller: 'instrument')}">Instruments</a></li>
        </ul>
      </div>

Notice the style definitions for the anchors. When running in IE8
the menu code will not work unless it can pull height and width. (at
least that is what I have observed on my Win7 VM)

myband/grails-app/views/layouts/includes/_leftnav.gsp


      <div id="leftnav">
        <h3><a href="#">What would you like todo?</a></h3>
        <div>
          <a href="${createLink(controller: 'band')}">View My Bands</a><br />
          <a href="${createLink(controller: 'member')}">View Band Members</a><br />
          <a href="${createLink(controller: 'song')}">View Songs</a><br />
          <a href="${createLink(controller: 'gig')}">View Gigs</a><br />
          <a href="${createLink(controller: 'setList')}">View Set Lists</a><br />
        </div>
      </div>

The details of using the two included templates will be shown later.
The style sheets being used can be found in the source code download
in the Resources section. (You will need some of the javascript libraries
from the source code later in this post)

This doesn't give us much more then a basic layou. This will change as we add more components. The important things to take from this section is the "ui-widget-*" classes.
These are jQueryUI css/theme items. Adding these allows us to change the
full site look-n-feel.

Adding jQuery and jQuery UI

There are currently two Grails plugins to help with adding jQuery and

jQuery UI javascript to projects. You can find them on the main Grails
plugins page. We will just download and use the standard javascript
files for this app. (Trying to keep
dependencies down and people may have a certain version of jquery /
jquery-ui they need to use)

Create a "jquery" and "jquery-ui" directory in your

myband/web-app/js directory.
Download the library files if you don't already have a copy.
(See the Resources section
for site urls). I'm using jquery 1.4.2 and jquery-ui 1.8.2 for
this project.

Once everything is download and installed, modify your

myband/grails-app/views/layouts/main.gsp
file so it includes the following code before the
<g:layouthead> tag


          <g:javascript library="jquery/jquery-1.4.2"/>
          <g:javascript library="jquery-ui/jquery.ui.core"/>
          <g:javascript library="jquery-ui/jquery.ui.widget"/>
          <g:javascript library="jquery-ui/jquery.ui.mouse"/>
          <g:javascript library="jquery-ui/jquery.ui.button"/>
          <g:javascript library="jquery-ui/jquery.ui.position"/>
          <g:javascript library="jquery-ui/jquery.ui.draggable"/>
          <g:javascript library="jquery-ui/jquery.ui.dialog"/>
          <g:javascript library="jquery-ui/jquery.ui.autocomplete"/>
          <g:javascript library="jquery-ui/jquery.ui.accordion"/>

The jQuery UI ThemeSwitcher

is a nice little component that will allow us to change the
look and feel of our site using packaged themes from
ThemeRoller. To
add this to the site there are two things we have to-do.

Modify myband/grails-app/views/layouts/main.gsp.

Add the following before the <g:layouthead> tag


      <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

Change your myband/web-app/js/app/application.jsso it only has the following


          $(document).ready(function () {
              $('#switcher').themeswitcher();
          });

Pretty simple. Once we have the menu and accordion components in

place you will see the beauty of the theme switcher component.

Adding the Menu (fgMenu)

Every site needs a menu. This will be no different. I've choose

a menu from the
Filament Group
. According to the filament group site and the jQuery UI site
the code has been donated to jQuery UI and may (should) become
part of jQuery UI core.

The main.gsp file and _menu.gsp files took care of defining our
menu content. The only thing left to-do is add the javascript
to make the menu work. For this we will add a menu.js file. The
contents of that file are listed below

myband/web-app/js/app/menu.js


  /*
   * Provides all the javascript / jquery code for our top flyout menu
   */
  $(document).ready(function() {
      // Original fg menu script calls component Menu. This causes issues with other
      // jQuery UI components. I renamed to fgMenu. Search the script for "fgMenu"
      // to see what I have changed.

      // Band Menu
      $('#bandMenu').fgMenu({
          content: $("#bandMenuContent").html(),
          flyOut: true,
          width: 200,
          maxHeight: 200
      });
      /* If you need to dynamically create the menu you can call a controller
       * that will return the data for you (in html or build a json parser for the
       * menu. Example code for calling ajax service is below

      // bandMenuUrl would be the URL of the correct action on a Controller
      // If you want to use createLink() then you can create a global javascript
      // variable in your gsp view that is assigned the output of createLink()
      $.get(bandMenuUrl,
          function(data){
              // grab content from another page
              $('#bandMenu').fgMenu({
                  content: data,
                  flyOut: true,
                  width: 200,
                  maxHeight: 200
              });
          });
      */

      // Gig Menu
      $('#gigMenu').fgMenu({
          content: $("#gigMenuContent").html(),
          flyOut: true,
          width: 200,
          maxHeight: 200
      });

      // Admin Menu
      $('#adminMenu').fgMenu({
          content: $("#adminMenuContent").html(),
          flyOut: true,
          width: 200,
          maxHeight: 200
      });

  });

Adding the SideBar (Accordion)

The accordion is one of the easiest widgets to use. Just for fun

we will add one for the sidenav div. The main.gsp and _leftnav.gsp
files took care of adding the content, we just need to add some
javascript. The modified application.js file is below


$(document).ready(function () {
  $('#switcher').themeswitcher();
  $("#leftnav").accordion({
      fillSpace: true
  });
});

Changing the main index page

So we don't want our users to see the list of controllers and

plugins that we are using. We aren't going to create anything
fancy, just something functional (this is just an example).


      <html>
        <head>
          <meta name="layout" content="main" />
        </head>
        <body>
          <div class="ui-widget-content ui-corner-all">
            <h3 class="ui-widget-header ui-corner-all" style="text-align: center;">
               Welcome to MyBand
            </h3>
            <p>
                MyBand is a site that will help you keep track of you Bands. You can keep track
                of who is in the band and what instruments they play. You can also keep track of
                the songs your band has. <br /><br />

                When it comes to Gigs we've got you covered.
                Keep track of when and where you are playing. Create set lists from songs
                you have stored.
            </p>
          </div>
        </body>
      </html>

Ok. We didn't really use any grails in this post. Basically alllayout and prep work for the rest of the app. The next post will

cover changing the generated views/controllers and adding jqGrid for the list
page.

Resources

Source: Grails Tutorial - Part 2

** After downloading, rename the folder to "myband".
Grails: http://www.grails.org
jQuery: http://jquery.com
jQuery UI: http://jqueryui.com
jqGrid: http://www.trirand.com/blog
fgMenu: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Formular: http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular
Git: http://git-scm.com

Grails Tutorial - Part 1

2010-06-19T15:12:00.004-05:00

I've spent a lot of time going through many blogs and tutorials on grails. Many of them are very good, but none of them seemed to address integrating Grails with jQuery components. Specifically jQuery UI/jqGrid/Formular components. So I decided I would put together a tutorial that would show how to integrate these great frameworks.

The plan is to divide the tutorial into 4 or 5 parts. This part will cover creating the project and creating the domain layer. Other posts will cover the UI and Controller layers.

The sample app for this tutorial will be a site for bands to keep track of the following:

Band
Member
Instrument
Song
Set List
Gig

For this little project I will be using Git for source control, Grails 1.2.2, and all development is being done on a Mac.

I like Git because it lets me have local repositories and if I'm work from a clone of a remote repository I can commit locally to track changes when I'm not connected to the net for some reason.

Creating the project
I'm not going to cover installing grails or git. If you don't have them installed and configured check out the Resources.

There are a few things we need todo before we get into the actual code. Specifically we need to create out local git repo, create the grails project and commit the initial project structure to the repo.

From a terminal type the following:


cd ~/
mkdir -p Repo/myband.git
cd Repo/myband.git
git --bare init

cd ~/
mkdir Projects
cd Projects
git clone ~/Repo/myband.git

grails create-app myband
cd myband

git add .
git commit -m "Initial Project Creation"

Ok, now that all of that is complete we can get down to business. Lets create the domain objects for the project.


grails create-domain-class Band
grails create-domain-class Member
grails create-domain-class Instrument
grails create-domain-class Song
grails create-domain-class SetList
grails create-domain-class Gig

Here is the code for the domain objects


package myband
class Band {

    String name
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static hasMany = [members: Member, songs: Song, gigs: Gig]

    static constraints = {
        name(blank: false, unique: true)
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    static mapping = {
        members joinTable: [name: "BAND_MEMBER", column: "MEMBER_ID", key: "BAND_ID"]
        songs joinTable: [name: "BAND_SONG", column: "SONG_ID", key: "BAND_ID"]
        gigs joinTable: [name: "BAND_GIG", column: "GIG_ID", key: "BAND_ID"]
    }

    String toString() { name }
}

package myband
class Member {

    String firstName
    String lastName
    String phoneNumber
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static hasMany = [instruments: Instrument]

    static constraints = {
        firstName(blank: false)
        lastName(blank: false)
        phoneNumber(blank: false, matches: "^\\(?(\\d{3})\\)?[- .]?(\\d{3})[- .]?(\\d{4})\$")
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    static mapping = {
        instruments joinTable: [name: "MEMBER_INSTRUMENT", column: "INSTRUMENT_ID", key: "MEMBER_ID"]
    }

    String toString() { "${firstName} ${lastName}" }
}

package myband
class Instrument {

    String name
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static constraints = {
        name(blank: false, unique: true)
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    String toString() { name }
}

package myband
class Song {

    String name
    byte[] content
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static belongsTo = Band

    static constraints = {
        name(blank: false, unique: true)
        content(nullable: true)
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    String toString() { name }
}

package myband
class SetList {

    String name
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static hasMany = [songs: Song]

    static constraints = {
        name(blank: false, unique: true)
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    static mapping = {
        songs joinTable: [name: "SET_LIST_SONG", column: "SONG_ID", key: "SET_LIST_ID"]
    }

    String toString() { name }
}

package myband
class Gig {

    String venue
    Date startTime
    Date dateCreated // grails will auto timestamp
    Date lastUpdated // grails will auto timestamp

    static hasMany = [setLists: SetList]
    static belongsTo = Band

    static constraints = {
        venue(blank: false)
        startTime(nullable: false, attributes: [precision: 'minutes'])
        dateCreated(display: false)
        lastUpdated(display: false)
    }

    static mapping = {
        setLists joinTable: [name: "GIG_SET_LIST", column: "SET_LIST_ID", key: "GIG_ID"]
    }

    String toString() { "${venue} - ${startTime.format('MM/dd/yyyy h:m a')}"}
}

Now lets get the controller / view creation out of the way since we have defined our domain objects.


grails generate-all myband.Band
grails generate-all myband.Member
grails generate-all myband.Instrument
grails generate-all myband.Song
grails generate-all myband.SetList
grails generate-all myband.Gig

The last piece is to add some data to the BootStrap.groovy file so we have some data to work with.


import grails.util.Environment
import myband.Band
import myband.Member
import myband.Instrument
import myband.Song
import myband.SetList
import myband.Gig

class BootStrap {

     def init = { servletContext ->
         // Only want to insert for dev testing
         if (Environment.isDevelopmentMode()) {
             def acousticGuitar = new Instrument(name: "Acoustic Guitar").save()
             def electricGuitar = new Instrument(name: "Electric Guitar").save()
             def drums = new Instrument(name: "Drums").save()
             def piano = new Instrument(name: "Piano").save()

             def singer = new Member(firstName: "Joe",
                                     lastName: "Singer",
                                     phoneNumber: "515.595.1234",
                                     instruments: [electricGuitar]).save()

             def guitarist = new Member(firstName: "Tim",
                                        lastName: "Guitarist",
                                        phoneNumber: "515.595.1235",
                                        instruments: [acousticGuitar, piano]).save()

             def drummer = new Member(firstName: "Adam",
                                      lastName: "Drummer",
                                      phoneNumber: "515.595.1236",
                                      instruments: [drums]).save()

             def song1 = new Song(name: "Long Lost").save()
             def song2 = new Song(name: "No Home").save()

             def gig1 = new Gig(venue: "Valair Ballroom", startTime: new Date()).save()

             def myBand = new Band(name: "My Band",
                                   members: [singer, guitarist, drummer],
                                   songs: [song1, song2],
                                   gigs: [gig1]).save()

         }
     }
     def destroy = {
     }
}

Ok, not to bad. We created a few domain classes, defined some relationships and changed the database mappings for our join tables. Now we can type "grails run-app" from the terminal to start things up.

Once the app has been started grails will give you the URL for the site (http://localhost:8080/myband). This presents us with the default index page that lists our controllers that were generated. Click through the controllers to pull up the generated views (list/edit/create/show).

Now we just need to commit our changes to our git repo:


cd ~/Projects/myband
git commit -a -m "Domain and Controllers created"
git push origin master

That's probably enough for this first post. The next post will cover changing the views and main layout. We will also integrate jQuery-UI theme css into our layout so we can use the themeswitcher tool.

Resources
Source: Grails Tutorial - Part 1
** After downloading, rename the folder to "myband".
Grails: http://www.grails.org
jQuery: http://jquery.com
jQuery UI: http://jqueryui.com
jqGrid: http://www.trirand.com/blog
Formular: http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular
Git: http://git-scm.com

Grails jquery-ui plugin

2010-06-13T00:38:00.000-05:00

I have started a grails plugin for the jquery-ui widgets.

The goal of this project is to provide grails taglibs for the jquery-ui library. While the jquery-ui api has decent documentation and isn't hard to learn / use, it would be nice to have some tags that make things very simple (and can eventually be used in scaffolding). Also I think it would be good to have a working demo of using these widgets in a grails application.

The project source can be found on github.

Grails jqGrid Plugin

2010-06-12T22:29:00.000-05:00

I have started a grails plugin for the wonderful jquery jqgrid component.

The goal of this project is to provide grails taglibs for the jqgrid library. While the jqgrid library api has very good documentation and isn't hard to learn / use, it would be nice to have some tags that make things very simple (and can eventually be used in scaffolding).

The project source can be found on github.

If you haven't seen jqgrid, check it out.