Flex on grails : How flex interacts with controllers/services

Hello friends,

I have recently started learning Flex and the backend is grails. After playing with following 3 grails plugins which supports flex, I chose gdsflex and have seriously started learning it.

1. flex-scaffold
2. flex
3. gdsflex 0.5 ver


In this blog we would discuss about gdsflex. I tried the programs given in the blog(http://www.grails.org/plugin/gdsflex) but I had to make some changes to the code, which I am going to share now.

Install plugin :

grails install-plugin gdsflex

To be on the safer side, run the following command as there were some issues with initial versions of gdsflex.

grails gas3

Create a domain classes

class Person {
Long id;
Integer version
String uid
String firstName
String lastName
Set contacts = []
static hasMany = [contacts:Contact]
static mapping = {
 contacts cascade:"all,delete-orphan"
}
}

class Contact {
Long id;
Integer version
String uid
Person person
String email
static belongsTo=Person
}

Create a people controller :

import org.granite.tide.annotations.TideEnabled

@TideEnabled
class PeopleController {
List people
def list = {
       people = Person.list();   
}
}

Create a mxml file in flex folder a sub directory of view folder :

< mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns="*"
        xmlns:gv="org.granite.tide.validators.*"
        layout="vertical"
        backgroundGradientColors="[#0e2e7d, #6479ab]"
        preinitialize="Spring.getInstance().initApplication()" >

    < mx:Script > < ![CDATA[ import mx.collections.ArrayCollection;
    import org.granite.tide.spring.Spring;
    import org.granite.tide.events.TideResultEvent;
    import org.granite.tide.events.TideFaultEvent;
    import Person;
    import Contact;

    [Bindable]
    [In]
    public var peopleController:Object;

    [Bindable]
    [In]
    public var people:ArrayCollection;

    public var dummyPerson:Person;
    public var dummyContact:Contact;

    private function getList():void {
        peopleController.list();
    } ]]>
    < /mx:Script >

        < mx:VBox width="100%" >
        < mx:HBox >
             < mx:Button id="bList" label="Get list" click="getList()"/ >
        < /mx:HBox >

        < mx:HBox width="100%" >
             < mx:DataGrid id="dgPeople" dataProvider="{people}"
                         change="dgContacts.dataProvider = dgPeople.selectedItem.contacts" >
                < mx:columns >
                    < mx:DataGridColumn dataField="firstName"/ >
                < /mx:columns >
            < /mx:DataGrid >

            < mx:DataGrid id="dgContacts" >
                < mx:columns >
                    < mx:DataGridColumn dataField="email"/ >
                < /mx:columns >
            < /mx:DataGrid >
        < /mx:HBox >
    < /mx:VBox >

< /mx:Application >

To create dummy data to test the application, you may write the following code in init closure of booStrap.groovy file

   Person person
   Contact contact
   (0..10).each {
      person = new Person(firstName:'Amit' + it, lastName:'Jain' + it)
      person.save(flust:true)
      contact = new Contact(email:'amitjain1982@gmail.com_'+ it,person: person)
      contact.save(flush:true)
   }

To run the application, firstly execute

grails run-app applicationName

grails mxmlc           //to compile all mxml files as gdsflex 0.5 version doesn't auto compile file

Execute the following url in the browser
http://localhost:8080/appName/fileName.swf    //here fileName is the name of mxml file.

You are ready to go. You have implemented lazy initialization using flex on grails.

Cheers!
~~Amit Jain~~
amitjain1982@gmail.com