Thursday, July 26, 2007

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() = params

    def userList = User.list()
    render(contentType:"text/xml") {
    users {
    for(i in userList) {
    user {
    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& 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:
  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.


Paulo said...

Hi Marcel,
I am in the same track as you. After trying many possibilities (the most closed was Rails and Flex) I am now trying to put to work together Flex and Grails.
I will try to do an exercise like yours during my next 15 days of vacations :-)
We can then change some ideas.
Good luck on your work.
Paulo Jorge Dias

Marcel Overdijk said...

Hi Paulo,

Good luck with your exercise. I would be more then happy to change ideas. Please check my blog, because I will post shortly another article related to Grails and Flex. I' mworking on full CRUD example for a single domain class.


Paulo said...

Hi Marcel,
After I sent my comment I was digging on Grails download page and I saw an OpenLazlo plug-in to Grails. I think that a similar plug-in is needed for Flex. What you think?
Paulo Jorge Dias

Marcel Overdijk said...

Hi Paulo,

I looked at OpenLazlo some time ago and I was not as impressed as I was with Flex. But if the plugin suits your needs, why not use it.


Mark said...

Hi Marcel! Thanks so much for your post on using Grails and Flex together. I got it to work right away. That's the good news. The bad news is that my colleague has been unable to get it to work from his system + I can't figure out how it works exactly. I tried to hook up another Grails app that we have already worked on and I can't get Flex hooked up as the UI for the Grails app. I think my confusion is what happens in your last steps from the post:

" 1. In the MXML code change the HTTPService url to: http://localhost:8080/sexyflexygrails/user
2. Now run the Flex application and it will use Grails for retrieving and storing the data from the back-end. "

How does the Flex app "use Grails"? So much happens automagically in Grails that I can't figure it out. Do you have any tips?

Thanks! Mark

Marcel Overdijk said...

Hi Mark,

In fact there is no coupling between Flex and Grails in this example. Grails is the server-side which contains an action that renders (=returns) xml and check if a new User needs to be created.

Flex, the front-end, is just calling a HTTP service (in this case Grails, but could also be a Servlet, JSP or PHP) that returns the xml. The Flex application uses this xml to populate the grid.

I guess your problem is that your existing application is not returning xml, but just renders html using a GSP view (that's what Grails by default generates for you). Take a look at step 6 from the tutorial; here you can see that the action is rendering xml.

Keep in mind that the Flex application - has nothing to do - with the Grails application. So for the Flex part no *magic* is happening.

Hope this help. If you are unsure let me know.

PS: 'automagically' sounds cool ;-)