Build a Flex CRUD application in 15 minutes with the Grails GraniteDS plugin

A few month ago, I've shown how to build a simple CRUD application with Flex, Grails and the GraniteDS plugin. That was not overly complex but there was still room for improvement in the quantity of code that was needed to make things work.
Grails itself provides a feature called scaffolding that allows to build extremely easily a simple working application skeleton from constraints defined on the domain classes.

Doing the same with Flex is a bit more complex because there are two runtimes involved: the Flash client and the Java server. There are thus three main possible options:

Generation and compilation of static Flex code on the server. Its advantages are static typing and full customizability. Its drawbacks are the quantity of code to maintain (even if it's generated, it's still here) and a relative difficulty to do incremental development (once the generated app has been customized, it's harder to update it when the source model changes). This is the option taken by the GFS plugin for example.

Dynamic generation of domain metadata on the server used by a Flex framework to build the UI dynamically. This has the big advantage of being completely driven by the server, so changes on the domain classes are immediately visible on the UI without requiring a recompilation of the client, and moreover there is relatively little client code. The corresponding drawback is that the generated application is not typed (client side data would be represented as XML for example) and is more difficult to maintain and customize.

Generation of a static Flex domain model and dynamic generation of the Flex UI. This is the approach taken by the GraniteDS plugin, its advantages are a limited amount of client code and a strongly typed client application. The drawbacks are that it's less dynamic than option 2 (changes on the Grails domain class require a recompilation of the Flex application), and less easily customizable than option 1.

After this short introduction, let's see how this works with the latest release of gdsflex (0.7.1).

First we create a new Grails application, once again a book manager (maybe next time I'll find some more original example). Assuming you have grails 1.1.1 installed, type from the command line :

grails create-app gdsexample2

cd gdsexample2

grails install-plugin gdsflex

As before, the main part is to define the domain model. Let's start this time by a simple Author class.

grails create-domain-class com.myapp.Author

Author.groovy

package com.myapp

class Author {
   
    static constraints = {
        name(size:0..50, blank:false)
        birthDate(format:'DD/MM/YYYY')
        picture(nullable:true, widget:'image')
    }
   
    String uid
   
    String name
   
    Date birthDate
   
    java.sql.Blob picture
}

This is a relatively simple domain class, you can notice the constraints that drive Grails scaffolding. So let's add a simple controller :

grails create-controller com.myapp.Author

AuthorController.groovy

package com.myapp

@org.granite.tide.annotations.TideEnabled
class AuthorController {

    def index = { redirect(action:list, params:params) }
    
    def scaffold = Author
}

Then run :

grails generate-flex-app

grails mxmlc

grails run-app

And go to http://localhost:8080/gdsexample2/gdsexample2.swf.

You should have a basic working Flex application that allows to create and edit authors. So what happened here :

The gas3 generator has generated ActionScript 3 classes for each domain class (as that was the case before), this time incuding the existing Grails constraints.

A new scaffolding template for controllers has been installed in src/templates/scaffolding that includes the necessary actions for the Flex application.

The Flex UI builder classes (org.granite.tide.uibuilder) have been installed in grails-app/views/flex.

A main mxml has been generated in grails-app/views/flex/gdsexample2.mxml that includes a menu to access all domain classes.

This is a simple example, but we can see how the constraints have been used : the Grails constraints in Author.groovy have been translated to the following block in Author.as :

public static const meta_constraints:Array = [
    { property: "name",
        blank: "false", size: "0..50"
    }, 
    { property: "birthDate",
        format: "DD/MM/YYYY"
    }, 
    { property: "picture",
        widget: "image"
    }
]

Even if you don't want to use the GraniteDS UI builder framework, you could still use these as3 constraints from any custom framework.

You can check that the blank and size constraints have been mapped to Flex client-side validators, and that the date format has been used in the author table. The 'image' widget is simply a component that appears in edit mode and allows to upload an image from Flex.

Now that we have seen a basic domain class, let's see how it works with associations.

grails create-domain-class com.myapp.Book

grails create-domain-class com.myapp.Chapter

grails create-controller com.myapp.Book

Book.groovy

package com.myapp

class Book {
    
    static constraints = {
        title(size:0..100, blank:false)
        category(inList:["Fiction", "Non-fiction", "Biography"])
        author()
        description(size:0..2000, widget:"textArea")
        chapters()
    }
    
    String uid
    
    String title
   
    String category
    
    Author author
    
    Set chapters
   
    String description
    
    static hasMany = [ chapters:Chapter ]   
    static mapping = {
        author fetch:"join"
        chapters cascade:"all-delete-orphan"
    }
}

Chapter.groovy

package com.myapp

class Chapter {
   
    static constraints = {
        title(size:0..50, blank:false)
    }
   
    String uid
   
    Book book
   
    String title
   
    String summary
    
    static mapping = {
        book fetch:"join"
    }
}

BookController.groovy

package com.myapp

@org.granite.tide.annotations.TideEnabled
class BookController {

    def index = { redirect(action:list, params:params) }
    
    def scaffold = Book
}

An important thing is that ManyToOne associations must be marked fetch:"join" or lazy:false. GraniteDS does not support transparent lazy loading for single ended associations, and most likely never will (it would generate unacceptable network and database traffic, one http request and one SQL query for each uninitialized entity). Lazy collections are supported, so OneToMany and ManyToMany associations do not have to be marked lazy:false.

Let's regenerate the Flex application to add the Book menu to the main mxml.

grails generate-flex-app

grails mxmlc

You can notice that the main mxml has been overwritten. This is quite annoying if you made some changes to the generated file but the previous file is backuped and in general you would have added the entity manually in the mxml. If you have a look to the mxml, only two lines have been added for the new entity :

<mx:LinkButton label="Books" width="100%" textAlign="left"
  click="mainStack.selectedChild = bookUI" />

<ui:EntityUI id="bookUI" 
  entityClass="{Book}" 
  width="100%" height="100%"/>

The EntityUI is a Flex component and can just be used anywhere in a Flex application (provided the Tide framework initialization has been done correctly).

We can now create and edit books, and see how many-to-one and one-to-many associations are displayed in the generated application.

As you eventually tried to add chapters, you will see that it does not work. There are indeed two minor changes to do manually in the AS3 classes to help the UI builder make the link between the associated oneToMany entities: initialize the Chapters collection in the Book.as class, and add a constructor in Chapter.as :

public function Book():void {
    chapters = new ArrayCollection();
}

public function Chapter(book:Book = null):void {
    this.book = book;
}

Once these changes are made, just refresh the browser and check that you can add chapters to your books.

Now we're almost finished, we'll just add a final improvement to this simple app:

grails html-wrapper

As the command name indicates, this will generate a html wrapper and allow the application to use Flex deep linking, and to use Grails url mapping on the flex application now located at flexindex.gsp.

Now you can go to http://localhost:8080/gdsexample2/flexindex.gsp#book/list to access the book list directly.

The documentation on the plugin page gives more information on what constraints are supported by the builder and how to override the behaviour of the generated application. Anyway the sources of the UI builder are also present in the grails-app/views/flex folder and can be used as a template to build your customized UI.

It should be easy to add security and data push to the generated application by following the previous blog entry here.

Hopefully this new feature of the gdsflex Grails plugin is a useful tool to get started quickly with Flex and GraniteDS and to quickly build prototype applications.
As always, feedback and comments are welcome.