Sexy Flexy Grails

Competition in the RIA space is heating up lately. Adobe Flex is already here for some time, and with the announcement of JavaFX and Microsoft Silverlight recently a real RIA WAR has been started. I had a look af Adobe Flex some time ago and I must say my first impression is WOW! These Flash/Flex applications feel so natural!

With Flex you can create rich internet applications with highly interactive GUI's. It offers various methods for talking with server-side components to retrieve and store data. You can use simple HTTP GET/POST services, WEB services, RPC calls or Flex Data Services.

Using HTTP GET/POST or WEB services gives you the freedom to choose the server-side technology: PHP, Servlets, JSP, Ruby on Rails etc.

Mike Potter already has written a small tutorial about integrating Flex and PHP.

I will use Mike's tutorial to show you how easy it is to integrate Flex and Grails.

Prerequisites: I assume you have basic understanding of Flex and Grails and that you have installed them both already.

Where to start:

1. First read Mike's tutorial about integrating Flex and PHP. After reading it you will understand that a simple PHP page is used to retrieve/return User records in XML data and to store new User records. In the next steps we will do the same, but then using Grails.
2. It's time to create a new Grails application so from the command line type:

   grails create-app sexyflexygrails

3. Create the User domain class:

   grails create-domain-class User

   It's not needed to create the User table like in the PHP tutorial. Grails will automatically create the table when you run the application.


4. Add the Username and Emailaddress properties to the created domain class:

   class User { 
    String username
    String emailaddress
   } 

5. reate a new controller to retrieve and store data:

   grails create-controller User

6. Implement the needed logic in the created UserController:

   class UserController {
       def index = {
           if (params.username && params.emailaddress) {
               def user = new User()
               user.properties = params
               user.save()
           }
   
           def userList = User.list()
           render(contentType:"text/xml") {
               users {
                   for(i in userList) {
                    user {
                        userid(i.id)
                        username(i.username)
                        emailaddress(i.emailaddress)
                       }
                   }
               }
           }
       }
   }

   When the index action is called it will check if the Username and Emailaddress parameters are in request parameters, and if so it will create a new User. In any case, the call to the index action will return all Users in the database as XML. Flex will use this XML to display the Users in a table.
7. That's it for the server-side Grails part. Start the Grails application with:

   grails run-app

8. Open a browser and goto http://localhost:8080/sexyflexygrails/user. You will see no data as there is nothing in the database yet. Try adding a new User with http://localhost:8080/sexyflexygrails/user?username=MyUsername&emailaddress=MyUsername@MyCompany.com. This will create the new User in the database and will render the XML in the browser.
9. Now start Flex Builder and create a new Flex project. Chooser Other/None as Server type.
10. Open the automatically created main mxml file and copy in the MXML code from Mike's tutorial: http://www.adobe.com/devnet/flex/articles/flex2_php_03.html
11. In the MXML code change the HTTPService url to: http://localhost:8080/sexyflexygrails/user
12. Now run the Flex application and it will use Grails for retrieving and storing the data from the back-end.

In the next weeks I will have a further look at Flex, and see if I can create a small Flex CRUD application that uses Grails at the server-side. I will post my findings here, so stay tuned.