Rails

Back to -Tutorials -Sapphire (Ruby In Steel) Tutorials -Archives -Rails

Ruby On Rails With Flex Builder and Ruby In Steel

How to Create a Flex Front End To a Rails Application

If you are bored with HTML front ends to your Rails applications, you may want to trying giving them a Flex makeover. Flex is the name of Adobe’s web framework and one of its specialities is that it can use Flash graphics to create a good-looking, browser-based interactive interfaces.

The good news for Rails developers is that Flex and Rails work well together - with a little bit of effort, anyhow. The real secret is to get Rails to format data as XML. It can then send that XML to Flex which can parse it into chunks (corresponding to the original ‘data fields’) and display it in a Flash user interface.

To show you how simple this is, try out this tutorial. This uses Ruby In Steel Developer to manage the Ruby and Rails side of the equation and Adobe’s Flex Builder 3 to manage the Flex side. You can, in fact, create Flex applications without Flex Builder (using the tools in Adobe’s Flex SDK). However, it is much easier with Flex Builder. Both Ruby In Steel and Flex Builder 3 are available for 60-day trial periods.

- Go To Download Page for Ruby In Steel Developer
- Go To Download Page for Adobe Flex Builder 3

In this tutorial, we’ll create a ToDo List browser. My aim here is not to demonstrate elegant or clever programming techniques but, rather, to keep everything as simple as possible. OK, so let’s get started...

- Start Visual Studio with Ruby In Steel installed. Also start Flex Builder 3.

Create Rails Project In Ruby In Steel

- In Visual Studio, select File, New Project. Select Ruby In Steel as Project Type and click the Rails Project icon. Name the project ‘ToDoApp’. Browse to a location (here I’m going to assume the directory C:\RailsApps). Make sure ‘Create New Directory For Solution’ is checked. Click OK.

- In the Database Setup Dialog, enter the details shown below (but use your actual MySQL user name - the default is ‘root’ - and password):

database: tododb
user: root
password: yourpassword
host: localhost

- Click ‘Test Connection’. If this succeeds, click OK.

Note: If you cannot make a connection to MySQL: Verify that all the database setup details are correct (check your MySQL user name, password and host name). Or, if MySQL cannot be found, you need to set up a path to mysql.exe in Tools/Options/Projects and Solutions/Ruby In Steel, then try to create a Rails project again).

- A dialog appears giving details of this project. Click ‘Proceed’.
- The Rails project will be created and a number of files and folders will appear in the Solution Explorer.
- In the Solution Explorer...

  • Right click the \app folder. Select Add/New Folder. Name the folder flex.
  • Right click the \public folder. Select Add/New Folder. Name the folder bin.

- Generate a simple ‘scaffold’. Select Ruby/Generate. Choose scaffold in the ‘Ruby Actions’ list. Edit the text in the field at the bottom of the dialog to the following:

ruby script/generate scaffold todo item:string description:text

- Click Go.
- Update the database. Select Ruby/Rake. Select the db:migrate Rake Action. Click Go.

- Wait until the Rake completes (It will say ‘1 CreateTodos: migrated’ in the Script Console).
- Test the application. Press F5 to start the server and run (or debug) the application. Wait a few seconds until the Ruby Console shows that the server has started. Load up a web browser (or press CTRL-W, W to load the integrated browser). Enter the address:

http://localhost:3000/todos

(Note: The above assumes you are running the server on the default port, 3000. Edit this number if you are using a different port).

- Now create some sample data. Click the ‘New todo’ link.

- Enter the item heading and some text for the description.

- Click the Create button. Click the ‘back’ link. Repeat the process a few times to add two or three more database records.

- Finally, stop the application by clicking Debug/Stop Debugging.

Create Flex Project In Flex Builder

Up to now, our front end has been formed from plain HTML web pages. We’ll now begin work on a new front end rendered using Adobe’s Flex rendered in Flash.
- In Flex Builder, select File/New/Flex ProjectToDoApp.
- Give the project the same name used in Ruby In Steel. In this case I used, ‘ToDoApp’.
- Uncheck ‘Use default location’ and Browse to same location used in Ruby In Steel (i.e. the ‘top-level’ directory above \app, \public etc.). For me that’s C:\RailsApps\ToDoApp\ToDoApp (Visual Studio repeats the directory name - once for the Solution, again for the Project!).
- Make sure the selected Application type is ‘Web application (runs in Flash Player)’ . Click Next.

- For the output folder, browse to \public\bin in your project directory. Click Next.
- Browse to set the main source folder to \app\flex under your project directory. Click Finish.

Design The Flex Interface

In Flex Builder you should now see a blank design surface (assuming the ‘Design’ tab is selected at the top-left of the workspace) representing the user interface defined by the file ToDoApp.mxml in the \app\flex directory.

- We’ll now add some controls which we’ll use to display the ToDo items. In the Components palette, find DataGrid under Controls). Click this, drag and drop it onto the design area.

- In a similar way, drag and drop one TextInput control and one TextArea control.
- Drag and drop two labels and position them (approximately) as shown below:

You could now continue refining your design using either the design or the source view. For the purposes of this tutorial, we’ll now switch to the source view.

- Click the Source tab to switch to the code editor. You will find that the layout is all defined in XML. We don’t need the third column of the data grid so we’ll delete it. We can also make alterations to visual design elements such as the colours and fonts. For reasons which I’ll explain shortly, we also need to add id attributes to the controls (names such as “item_text” which can be used to identify the text field which will be used to display the ‘item’ data from one of our records). To ensure that your design is an exact match of mine, delete all the XML from the source view of ToDoApp.mxml and copy and paste the code below into the file. Then save:

There are a couple of things in the code above that are not involved in the visual design - namely the text attributes of the TextInput and TextArea controls, the dataProvider attribute of the DataGrid and the dataField attributes of the data grid columns. These are all involved in interacting with data provided by the Rails application.

So how does Flex get this data from Rails in the first place? Essentially, what it does is send a request to Rails. It does this by making use of an HTTPService to access a url (here “\todos” and sending a GET request). To do this, add this code just above the opening <mx:DataGrid... tag which you pasted in a moment ago:

<mx:HTTPService id="listToDosService"
        url="/todos"
        method="GET" />

This will (when we have made one more edit in our Ruby code) cause Rails to return a list of ToDo records formatted as XML. We can access this data by referring to the id of the HTTPService followed by .lastResult. Then we can find the todo section of the todos items and use this as a data source for the dataGrid:

dataProvider="{listToDosService.lastResult.todos.todo}"

Each data field in the grid can now access specific XML sections of each record - here these are the item and description sections.

In order to populate the TextInput and TextArea fields when an item in the grid is selected, we just set their text to the item and description fields of the selectedItem of the DataGrid (with the id todos_dg).

Finally, in order to populate the data grid when the application is starred, we need to edit the Application tag by executing (that is, by ‘sending’) the HTTP Service request when the Application creation completes. Edit the Application tag to the following:

The complete contents of the file ToDoApp.mxml should now be as shown below:

Connect Rails to Flex

In order to communicate with Flex, the Rails controller needs to return data in XML format. A bit of code editing will do this. Back in Ruby In Steel...
- Open \app\controllers\todos_controller.rb
- Edit the index method to the following:

def index
  @todos = Todo.find(:all)
  render :xml => @todos
end

Now, in Flex Builder...
- Click Project/Build All.

In Ruby In Steel...

- Click Ruby/Synchronize to add all the files created by Flex Builder to the Solution Explorer.
- Press F5 to run the server.

Tip: If you want to see exactly what XML is sent from Rails to Flex, just enter the url used in the GET request directly into a web browser. In this case, the address is http://localhost:3000/todos and this is what I see when I do that...

- Now, the moment of truth. We’ll try the finished Flex-based front-end. Open a web browser and enter this address:

http://localhost:3000/bin/ToDoApp.html

All being well, you should see the Flex front end with the data-grid populated with data from the records you entered earlier. When you select a row in the grid, the two fields (Text and TextArea) above the grid should display the data of the selected item:

And that’s it. I’ll come back to look at ways of adding data to Rails using a Flex front-end in a future tutorial.

Bookmark and Share   Keywords:  Flex  rails  tutorial
© SapphireSteel Software 2014