The (natural) combination between ROR and flex

Posted on Nov 6, 2009

Well, I have been working with Flex for the past 2 years now. Recently I bought a Mac and started developing Ruby On Rails applications.

I started thinking how does these 2 technologies combine together, Ruby on rails on the server side and flex on the client side, I found the combination to be very natural and easy, you can actually get quite a bit of satisfaction from combining these 2 together.

I know I did, and in this post I will show you how to build a phone book application where you can create new records in your phone book and have an HTML client side and FLEX client side with only just about 10 minutes of work.

What will we create over here?

Well, like I said, we will be creating a phone book application, we will store data on server side and we will consume this data via a flex application on the client side.

The time-frame for creating this application ia about 10 minutes.

So, let’s begin.

First, I’m going to create a new rails project by using the rails command, the “/projects/rails” is just a folder on my computer while you can actually use whatever folder you prefer for this. Here’s the command:

Now we have a rails template project and we are in the folder. We will create a scaffold for our phone_book table like so:

Notice I did not mess with database configuration or anything, I simply used the rails default configuration for this simple project, if you want to use mySQL or any other server you should edit the database.yml file.

now, we have our database ready and because we created a scaffold we also have pages for creating, deleting, updating and listing the phones in our database. Let’s start our server and go to the page.

This is the command for it and the output from the terminal:

Now that we navigate our browser to http://0.0.0.0:3000/phones/ we can see our list page, it is of course empty and we should create a number of sample records in order to have data to work with. I created 2 records in my phone book and this is what my page looks like: Now, this is of course our HTML client side, we can edit the code to make it look nicer and add CSS + JavaScript, because this application is just for learning how easy it is to create a rails back-end for a flex client side. We will not focus on making it look nicer, I promise to write more posts on this issue. OK, so for the flex to consume this list it has to be in a known format like XML or json, lets look at the phones_controller that was generated by the scaffold command we created earlier. Remmember I did not write a single line of code myself, I just used rails commands so this code was written for me. This is what it look like:

What does that mean?

Does it mean that if I type phones.xml instead of /phones I will get an XML representing my phones list, lets give it a go and see what is happening.

Well, yes it does, we have an XML that represents the list of phones in our database, this is of course dynamic and every phone entry we will created in our database will be added to that XML.

Believe it or not we are done with server side, we have created a phone book (basic) application where we can add, delete, update and list our phones, we created an XML file that can be consumed by a number of other applications.

Client side

Now, let’s create a client side for out application. I’ll be using flex builder 3 to create a flex client side.

We will start by creating a new project, just the old regular file–>new–>Project, select a location for you project and open up the main.mxml file of your application.

First, let’s see what we need.

HTTP service for getting the data out of the server
An XML object to cache the data inside the application
Datagrid to show this data

Let’s start

Let’s create a listner for the creationComplete Event, create the HTTP service and attach needed event to it, when the service return result let’s fill our XML from that result.

Your code now looks like this

As you can see our entire application is less then 50 lines of code.

We get sorting, column ordering out of the box when using flex

This is what our application looks like:

That’s it, our application is ready and working, you can go ahead and add some more phones, delete and see how it affects your flex client side.

The options are huge when combining these 2 powerfull technologies together, I love working with these and you will as well, I promise you.

Feel free to comment and let me know what you think, hope you enjoyed.