Integrating Flex 2 and Ruby on Rails

Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3. In this article you will learn how to integrate Flex 2 with Ruby on Rails and a MySQL database by building a simple issue tracker application. By following the steps in this tutorial, you will also learn how to add functionality to the application, such as adding a new bug to the database, reading existing bugs, updating a bug, and deleting a bug. Prerequisite knowledge: Basic understanding of ActionScript, MXML, and Flex Builder.

Why Rails? When using Flex you have several options to choose from for back-end server software. So why might you want to choose Rails? Ruby on Rails, like Flex, is a well thought out, elegantly simple framework. As you will see, Rails uses code generation and metaprogramming to make it incredibly easy to integrate with a database using almost no SQL code. Furthermore, when you use Rails, you also get to use Ruby, a programming language that is both extremely powerful and easy to use. Using Flex and Ruby on Rails, you will be able to get more done with less code. Flex + Rails + Ruby = RIA Nirvana. Building the user interface To get started, you'll create the user interface for displaying the data. Open Flex Builder and go to File > New > Flex Application to create a new Project called ex_issuetracker. Once the project has been created, open ex_issuetracker.mxml and add the following code: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ [Bindable] private var statusArray:Array = ["Opened", "Assigned", "Closed"]; [Bindable] private var priorityArray:Array = ["Blocker", "Critical", "Major", "Minor", "Trivial"]; ]]> </mx:Script> <mx:VDividedBox x="0" y="0" height="100%" width="100%">
1

Integrating Flex 2 and Ruby on Rails

<mx:Panel width="100%" height="376" layout="absolute" title="Create/Update Bugs"> <mx:Form x="10" y="10" width="930" height="280"> <mx:FormItem label="Reported by"> <mx:TextInput width="220" id="reportedby" text="{bugs_dg.selectedItem.reportedby}"/> </mx:FormItem> <mx:FormItem label="Assigned to"> <mx:TextInput width="220" id="assignedto" text="{bugs_dg.selectedItem.assignedto}"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:TextArea width="336" height="111" id="description" text="{bugs_dg.selectedItem.description}"/> </mx:FormItem> <mx:FormItem label="Status" width="287"> <mx:ComboBox width="199" id="status" selectedIndex="{statusArray.indexOf(bugs_dg.selectedItem.status)}"> <mx:dataProvider> {statusArray} </mx:dataProvider> </mx:ComboBox>h </mx:FormItem> <mx:FormItem label="Priority"> <mx:ComboBox width="199" id="priority" selectedIndex="{priorityArray.indexOf(bugs_dg.selectedItem.priority)}"> <mx:dataProvider> {priorityArray} </mx:dataProvider> </mx:ComboBox> </mx:FormItem> </mx:Form> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Clear" /> <mx:Button label="Update" /> <mx:Button label="Create" /> </mx:ControlBar> </mx:Panel> <mx:Panel width="100%" height="444" layout="absolute" title="Bugs"> <mx:DataGrid x="0" y="0" width="100%" height="100%" id="bugs_dg" > <mx:columns> <mx:DataGridColumn headerText="Reported by" dataField="reportedby"/> <mx:DataGridColumn headerText="Assigned to" dataField="assignedto"/> <mx:DataGridColumn headerText="Description" dataField="description"/> <mx:DataGridColumn headerText="Status" dataField="status"/> <mx:DataGridColumn headerText="Priority" dataField="priority"/> </mx:columns> </mx:DataGrid>
2

Integrating Flex 2 and Ruby on Rails

<mx:ControlBar horizontalAlign="right"> <mx:Button label="Delete" /> </mx:ControlBar> </mx:Panel> </mx:VDividedBox> </mx:Application> The code in this MXML le does several things: 1. It creates a basic form for submitting new bugs and editing existing bugs. Note: The values in the FormItems are updated automatically using databinding based on the values of the selected item in the datagrid discussed in the following sections. The form is wrapped inside of a Panel component. Using a Panel component has two benets: a. It generally produces a nicer looking interface and provides a label for you to describe the content/purpose of the panel. b. You can attach a ControlBar to your panel so that you can add additional controls that work with the content. The ControlBar at the bottom of this panel has three buttons. One that creates new bugs, another for updating an existing bug, and lastly a button for clearing the form. Currently these buttons do not do anything. They are just placeholders for now, at least until you set up your Rails back end for the application.

<mx:Panel width="100%" height="376" layout="absolute" title="Create/Update Bugs"> <mx:Form x="10" y="10" width="930" height="280"> <mx:FormItem label="Reported by"> <mx:TextInput width="220" id="reportedby" text="{bugs_dg.selectedItem.reportedby}"/> </mx:FormItem> <mx:FormItem label="Assigned to"> <mx:TextInput width="220" id="assignedto" text="{bugs_dg.selectedItem.assignedto}"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:TextArea width="336" height="111" id="description" text="{bugs_dg.selectedItem.description}"/> </mx:FormItem> <mx:FormItem label="Status" width="287"> <mx:ComboBox width="199" id="status" selectedIndex="{statusArray.indexOf(bugs_dg.selectedItem.status)}"> <mx:dataProvider> {statusArray} </mx:dataProvider> </mx:ComboBox>h </mx:FormItem> <mx:FormItem label="Priority">
3

Integrating Flex 2 and Ruby on Rails

<mx:ComboBox width="199" id="priority" selectedIndex="{priorityArray.indexOf(bugs_dg.selectedItem.priority)}"> <mx:dataProvider> {priorityArray} </mx:dataProvider> </mx:ComboBox> </mx:FormItem> </mx:Form> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Clear" /> <mx:Button label="Update" /> <mx:Button label="Create" /> </mx:ControlBar> </mx:Panel> 2. This code creates a DataGrid component that both displays information about existing bugs and allows you to select a bug record to update or delete. The app uses the dataField parameter in the columns to specify the name of the attribute in the dataprovider that your application will use to populate this column. You do not have any data yet, but it is important to keep in mind that the column names in your table should match the values specied here. The DataGrid component is also wrapped in a panel with a control bar. This control bar has one button that will be used for deleting the bug that is currently selected in the DataGrid component. <mx:Panel width="100%" height="444" layout="absolute" title="Bugs"> <mx:DataGrid x="0" y="0" width="100%" height="100%" id="bugs_dg" > <mx:columns> <mx:DataGridColumn headerText="Reported by" dataField="reportedby"/> <mx:DataGridColumn headerText="Assigned to" dataField="assignedto"/> <mx:DataGridColumn headerText="Description" dataField="description"/> <mx:DataGridColumn headerText="Status" dataField="status"/> <mx:DataGridColumn headerText="Priority" dataField="priority"/> </mx:columns> </mx:DataGrid> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Delete" /> </mx:ControlBar> </mx:Panel> 3. The panels are wrapped inside of a VDividedBox component, which allows you to dynamically resize the area that is allotted to the form or the DataGrid component using a divider that the user can drag. 4. The code declares two arrays that are used as data providers to populate the ComboBox components that are part of the form [Bindable] private var statusArray:Array = ["Opened", "Assigned", "Closed"]; [Bindable] private var priorityArray:Array = ["Blocker", "Critical", "Major", "Minor", "Trivial"];
4

Integrating Flex 2 and Ruby on Rails

Setting up your Rails application

Now that you've coded the interface, the next step is to set up your Rails application. First, you need to create a new database. This tutorial uses MySQL, but Rails is capable of supporting many other databases, too. Open your MySQL Command Line Client and enter the following line: CREATE ex_issue_tracker_development That is all the SQL you are going to need to write. Rails will take care of the rest. To create your Rails application, open up a command-line window and change the directory to the location that you would like to use for your application. I generally use C: \Dev. Once you're in your desired location on your server, enter the following line: rails issue_tracker This command generates all of the folders and les that you will need for your Rails application. Part of the power of Rails is that it promotes consistency across projects by ensuring that all Rails applications have the same structure. Next, create the model for this application. In Rails, the model is the code that wraps a table in your database. To create your model, enter the following line: cd issue_tracker To change the directory to your Rails app. Next, enter the following line: ruby script/generate model bug Finally, you'll create the controller. The controller contains the logic for interacting between the view (in this case Flex) and the model. To create your controller enter the following line: ruby script/generate controller bugs Now, inside your Rails application folder, go to app > controllers. You will see the bugs_controller.rb le that you just generated. Open this le and add the following code:

Integrating Flex 2 and Ruby on Rails

def create @bug = Bug.new(params[:bug]) @bug.save render :xml => @bug.to_xml end def list @bugs = Bug.nd :all render :xml => @bugs.to_xml end def update @bug = Bug.nd(params[:id]) @bug.update_attributes(params[:bug]) render :xml => @bug.to_xml end def delete @bug = Bug.nd(params[:id]) @bug.destroy render :xml => @bug.to_xml end These methods implement basic CRUD functionality, where the list method corresponds to read. The following is a brief explanation of the key parts of this code: 1. params: This variable is a hash that is automatically populated with the values that you pass an argument to the Rails method. 2. Bug: This refers to the ActiveRecord that you created when you generated your model. Note that it is a convention in Rails for the table name to be the plural of the model's name. Using this convention, when Rails encounters a model called "Bug" it looks for a table called "bugs" in the database. 3. nd: The nd method searches the records in a database for the specied table. Bug.nd :all returns all of the records for the bugs table. Bug.nd(params[:id]) returns the rst record in the bugs table whose id matches the value contained in the params hash. Please note that it is also a convention in Rails for each table to have column named id that is the primary key. 4. new: This creates a new ActiveRecord instance. 5. save: This saves the record to the database. 6. update_attributes: This updates the record using the values provided in the hash. 7. destroy: This deletes a record from the database. 8. to_xml: This builds XML document from the model. 9. Lastly, it is important to note that all methods in Ruby return a value. When you do not use return, Ruby methods return the value of the last line inside the method. Now you must specify to your Rails application how to access the database that you just created. To do this, go to your Rails application folder (e.g., C:\Dev\issue_tracker) and open up the cong folder. Locate the database.yml le and open it. Edit this le so that it reads as follows: development:
6

Integrating Flex 2 and Ruby on Rails

adapter: mysql database: ex_issue_tracker_development username: <your username here> password: <your password here> host: localhost Be sure to ll in your own username and password. For this tutorial, you are only going to be running Rails in development mode, so you do not need to worry about the production and test sections of the le. Now that your Rails app can access your database, your next step is to add a table to your database for storing your bugs. The easiest way to do this is to use Rails migrations. Migrations virtually eliminate the need for using SQL statements to set up your database. Using migrations also has many other benets, such as being database agnostic; a discussion of the benets is beyond the scope of this tutorial. To implement the migration for your app, go to db > migrate. You will see a le called 001_create_bugs.rb that was automatically created when you created your model. Edit this le to look like the following: class CreateBugs < ActiveRecord::Migration def self.up create_table :bugs do |t| t.column :reportedby, :string t.column :assignedto, :string t.column :description, :text t.column :status, :string t.column :priority, :string end end def self.down drop_table :bugs end end The up method creates a table called bugs with six columns: * id (automatically generated primary key) * reportedby * assignedto * description * status * priority Note that the column names correspond to the values in the dataField attributes in the DataGrid column that you created in your Flex interface. The down method removes the table.
7

Integrating Flex 2 and Ruby on Rails

To run the migration, go to the command line and enter: rake migrate Now, if you go back to your MySQL Command Line Client and type: USE ex_issue_tracker_development DESCRIBE bugs; You will see the following in the command-line window:

The command-line window Figure 1. The command-line window Finally, set up your Rails app to boot up the server. Ruby comes with its own handy server called WEBrick. To start WEBrick go to the command line and enter: ruby script/server Note that the server defaults to running on port 3000. This will be important in the next section. That's it. Your Rails app is all ready. If you open up an Internet browser and type http://localhost:3000 you will see the Rails welcome page.

Integrating Flex 2 and Ruby on Rails

Integration

Now that you've got your Flex interface, your Rails app, and your database all set up, the next step is to get Flex talking with Rails. Fortunately, this is really easy. You are going to be using the HTTPService to call the create, list, update, and delete methods that you added to the bugs_controller.rb le in your Rails application. Add the following code to your Flex application: <mx:HTTPService id="listBugs" url="http://localhost:3000/bugs/list" useProxy="false" method="GET"/> <mx:HTTPService id="updateBug" url="http://localhost:3000/bugs/update" useProxy="false" method="POST" result="listBugs.send()"/> <mx:HTTPService id="deleteBug" url="http://localhost:3000/bugs/delete" useProxy="false" method="POST" result="listBugs.send()"/> <mx:HTTPService id="createBug" url="http://localhost:3000/bugs/create" useProxy="false" method="POST" result="listBugs.send()" contentType="application/xml"> <mx:request xmlns=""> <bug> <reportedby>{reportedby.text}</reportedby> <assignedto>{assignedto.text}</assignedto> <description>{description.text}</description> <status>{status.text}</status> <priority>{priority.text}</priority> </bug> </mx:request> </mx:HTTPService> Each of the four HTTPServices that you just added calls one of the methods in your Rails application. Notice that the url attribute in each HTTPService follows the structure: http:// <server address>/<controller name>/<method name>. Note: When you are ready to deploy your application, change these URLs from absolute to relative (for instance, url="http://localhost:3000/bugs/list" becomes url="bugs/list")and move the SWF les and HTML les that are generated by Flex into the public folder in your Rails app. Next, edit the Clear, Update, and Create buttons that are under your form to look like the following: <mx:Button label="Clear" click="clearForm()"/> <mx:Button label="Update" click="sendBugUpdate(); clearForm()"/> <mx:Button label="Create" click="createBug.send(); clearForm()"/> Then, edit the Delete button under your DataGrid component to look like the following: <mx:Button label="Delete" click="deleteBug.send({id:bugs_dg.selectedItem.id}); "/>
9

Integrating Flex 2 and Ruby on Rails

Go to the opening tag of the DataGrid component and add a dataProvider that binds to the value of the last result returned by the listbugs HTTPService, as follows: <mx:DataGrid x="0" y="0" width="100%" height="100%" id="bugs_dg" dataProvider="{listBugs.lastResult.bugs.bug}"> Now go to the top of your application and add a creationComplete event that calls the listBugs HTTPService using the send() method.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="listBugs.send()"> Lastly, add the following two functions inside the <mx:Script> block, just below the two arrays: private function clearForm():void { reportedby.text = "" assignedto.text = ""; description.text = ""; status.selectedIndex = 0; priority.selectedIndex = 0; } private function sendBugUpdate():void { var bugUpdate:Object = new Object(); bugUpdate['id'] = bugs_dg.selectedItem.id; bugUpdate['bug[reportedby]'] = reportedby.text; bugUpdate['bug[assignedto]'] = assignedto.text; bugUpdate['bug[description]'] = description.text; bugUpdate['bug[status]'] = status.text; bugUpdate['bug[priority]'] = priority.text; updateBug.send(bugUpdate); } That's it. With surprisingly little code, your issue tracker is ready to roll. You now have an interface and a back end that support basic CRUD operations. To test it out, click run inside Flex Builder. Once the app launches, ll in the form with some data for a new bug. Click the Create button and you will see a new entry appear in the datagrid. Add a few more bugs, and then close the application. Go back in to Flex Builder and click run again. This time, when the application launches, you will see the bugs that you already entered appear in the datagrid. You can now update these bugs, delete them, or create new bugs and your changes will automatically be persisted to your database.
10

Integrating Flex 2 and Ruby on Rails

Where to go from here

Now that you know the basics of how to integrate Flex with Rails I encourage you to dive in deeper into Flex, Rails, and Ruby to see what is possible when you combine these technologies. Get a copy Flex Builder 2 and RadRails (both use Eclipse, so they work nicely together), and check out the Flex Quick Starts and the Flex 2 LiveDocs site to learn more about Flex. To learn more about Rails, take a look out the Howtos site and Rails API. If you want to get a better understanding of Ruby, there are two excellent books available online. One is the often strange, but highly entertaining why's (poignant) guide to Ruby, and the other is Programming Ruby: The Pragmatic Programmer's Guide. Also, be sure to sign up for the Ruby on Rails RIA Mailing list. Comments (2) * Crystal Shadow(May 11, 2008) Great article! For rails 2.0.2, there is a little bug : I can't create bugs. I had to comment the line 9 in the le issue_tracker/app/controllers/application.rb * Kevin Kohrt(July 15, 2008) Thanks for the quick demo. All the one line additions above imply they are special and have a specic purpose beyond boiler plate, but you are just telling us to insert some parameter of a certain type (e.g. a 'dataProvider'), without explaining why that particular type is needed at that particular location, and what and how it does the needful. So I think you could make a good write up even better by adding some more about 'why?', but I am grateful for what you have to date.

11