Juixe Techknow

In a Ruby on Rails web application you can do some fancy client-side effects using AJAX and RJS via remote links and remote forms. But toggling and fading HTML elements is a far cry from Rich Internet Application controls. In this article I will demonstrate how to connect a Flex 2 UI on the client-side with Ruby on Rails application on the server end. This example is loosely ported from Integrating Adobe Flex and PHP by Mike Potter of Adobe.

Flex applications can read in xml documents from a web server and display it’s contents in a tabular format. To demonstrate this let us first define a new action that will list all the users in a rails application.

def listusers
  @users = User.find :all
  render :layout => false
end

For this action, create a listusers.rxml view. To create an xml document that lists the known users in the system add the following xml builder code in the listusers.rxml file:

xml.users do
  @users.each do |user|
    xml.user do
      xml.id user.id
      xml.username user.user
      xml.since user.created_at
      xml.email user.email
    end
  end
end

Use your favorite browser, i.e. Firefox, to make sure that the listusers action and view are correctly working. At this point we are ready to start developing the Flex UI. To continue with the sample code you will need to install the Flex 2 SDK.

To write the Flex portion of the application we will use MXML. MXML is like Mozilla’s XUL, basically you define UI widgets and their attributes in an XML document. In our example, we want to display the known users in a tabular form so we will use a mx:DataGrid widget. We will have a button from which to request the the xml document generated by the listusers rails action. And we will require a few lines of ActionScript 3.0 code to populate the mx:DataGrid with the contents from the xml document. I’ll first post the Flex code for the UI and then try to explain each element.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal" horizontalAlign="center" verticalAlign="middle"
>
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent

      private function getback( event:ResultEvent ):void {
        dgUsers.dataProvider = event.result.users.user
       }
    ]]>
  </mx:Script>

  <mx:HTTPService
    id="reqUsers" url="http://localhost:3000/mycontroller/listusers"
    useProxy="false" method="GET" result="getback(event);"
  />

  <mx:Panel title="System Users" paddingBottom="10" paddingTop="10"
    paddingLeft="10" paddingRight="10"
  >
    <mx:DataGrid id="dgUsers">
      <mx:columns>
        <mx:DataGridColumn headerText="User ID" dataField="id"/>
        <mx:DataGridColumn headerText="User Name" dataField="username"/>
        <mx:DataGridColumn headerText="User Since" dataField="since"/>
        <mx:DataGridColumn headerText="User Email" dataField="email"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:Button label="Search" click="reqUsers.send();"/>
  </mx:Panel>
</mx:Application>

As mentioned earlier, the mx:DataGrid element will render a table. The dataField attributes in the mx:DataGridColumn element needs to match the xml elements generated by our rxml view. The headerText attribute is used to display the column header in the table. The click attribute on the button acts as onclick event handler. When the ‘Seach’ button is pressed the send() method will be executed on the element identified as reqUsers. In this case, reqUsers represents an HTTPService object which will be used to send our request and for which rails will resolve to our listusers action. If you examine the mx:HTTPService element you will notice the url and method attributes and the result event handler.

And finally, lets examine the getback ActionScript method. The users.user portion of the right hand value is related to the elements in the xml document created in rails. In the left hand side, we use the dataProvider property of the mx:DataGrid element to set it’s data to the users returned in the xml reponse. Stay tuned to see how to post data from Flex to rails.

Technorati Tags: flex, adobe flex, actionscript, ruby, ruby on rails, rubyonrails