Amethyst Tutorials

Back to -Tutorials -Amethyst Tutorials

Flex On Rails With Amethyst and Ruby In Steel

How to Create a Flex Front End To a Rails Application

By combining Adobe’s Flex with Ruby On Rails, you can easily create great-looking web page interfaces (provided by Flex’s Flash graphics) with all the power of Rails manipulating the data at the back end. Using SapphireSteel Software Flex and Ruby IDEs (Amethyst and Ruby in Steel) you can create a single Visual Studio solution to integrate your Rails and Flex projects and develop your ‘Flex On Rails’ applications seamlessly. In this tutorial, I’ll show you how...

In this tutorial we will use Ruby In Steel with Amethyst to create and run a Rails application with an Adobe Flex ‘front end’ all inside one fully integrated development environment

First Install Ruby In Steel and Amethyst

To follow this tutorial, you must have working copies of Ruby In Steel, Amethyst and all their prerequisites (such as Ruby, Rails and the Flex SDK) installed. You may either use our professional Ruby IDE, Ruby In Steel Developer (which is available for a 60 day free trial), our entry-level IDE, Ruby In Steel Text Edition or our free IDE, Ruby In Steel PE (Personal Edition). These may be installed into a regular edition of Visual Studio (standard or above). They cannot be installed into a VS Express Edition. Alternatively, if you need a free copy of Visual Studio 2008, you may install the Visual Studio Shell which we supply with our All-in-One installer and with Ruby In Steel PE. Amethyst may be installed into the same version of Visual Studio used for Ruby In Steel.

- Download Page for the Commercial (and Trial) editions of Ruby In Steel
- Download Page for the free Personal Edition of Ruby In Steel
- Download page for Amethyst (beta)

If you don’t already have Rails installed, our All-in-One installer will install that for you. In this tutorial we assume that you will be using the MySQL database and this too may be set up using our All-in-one installer. To use Amethyst you must have the Flex SDK installed. Please refer to the installation instructions on the Amethyst download page.

IMPORTANT: If you are using Rails 2.2 (or later), refer to our article on using MySQL with Rails.

In this tutorial I will explain how to create a simple ‘ToDo’ application in which the database, the data entry and most of the program logic is controlled by Rails while the public ‘front end’ (the display of the ToDo items) is handled by the Adobe Flex framework and displayed using Flash graphics in a web page.

Create A 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 Solution’ and ‘Create directory for solution’ are both selected. Click OK.

- In the Database Setup Dialog, select a database server. In this tutorial I will assume you have chosen ‘MySQL’ (the options shown may vary according to the version of Ruby In Steel being used). Now enter database settings. For MySQL, you may enter details similar to those below (but, of course, use your actual MySQL user name - the default is ‘root’ - and your password or leave that field blank if you aren’t using a 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 the project you are about to create. Click ‘Proceed’.
- The Rails project will be created and a number of files and folders will appear in the Solution Explorer.
- Now generate a simple ‘scaffold’. If you are using Ruby In Steel Developer, 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.

When the script completes, the newly generated files and folders will be automatically added to the Solution Explorer.

NOTE: The instructions for running scripts in this tutorial assume that you are using the built-in tools of Ruby In Steel Developer. If you are using the Ruby In Steel Text or Personal edition (only) you will need to run the scripts from the command line. As an example, follow the instructions below to create the scaffold described above...

Right-click the Project branch (in this project this will be labelled ‘ToDoApp’) in the Solution Explorer. From the menu, choose ‘Command Prompt’. At the system prompt, enter:

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

When the script has completed, go back into Visual Studio and select Ruby, Synchronize to add the new files and folders to the Solution Explorer. Follow similar steps to run any other scripts in this tutorial.

- Update the database. In Ruby In Steel Developer 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). (Alternatively, if you are using the Text or PE edition, run the script rake db:migrate at the command prompt and then synchronize as described previously).

- 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 (or, in Ruby In Steel PE, press CTRL+C in the Ruby console).

Create Flex Project In Amethyst

Up to now, our front end has been formed from plain HTML web pages. We’ll now begin work on a new Flash front end using Adobe’s Flex.

- Create a new Amethyst application. Select File, New, Project.
- In the New Project Dialog, select Amethyst then Flex Application.

- Give the project the name ‘FlexToDo’.
- Select Add To Solution.
- Use the location C:\RailsApps\ToDoApp.

If you have followed all my suggested options, you will end up with a ‘top-level solution directory, C:\RailsApps\ToDo containing the Visual Studio Solution files and two subdirectories: \ToDoApp for Rails and \FlexToDo for Flex.

- Click OK.
- The Solution Explorer should now show your Flex (Amethyst) project along with your Rails (Ruby In Steel) project...

Now Build this Amethyst Flex project (select Build, Build FlexToDo. When you build or compile a Flex application, you will create a Flash (swf) file and web (html) page to contain it. We need to make a copy of these files in a folder beneath the Rails application’s \public directory. First, create a suitable folder. Using the Solution Explorer, right-click the public folder in your Rails project and select Add, New Folder. name the folder bin.

Now, select your Flex project (FlexToDo) in the Solution Explorer and click the Project menu then Properties. We can automate the file copying by adding a ‘post-build event’ - that is, a command that will be run after the Flex project is built. Select the Build tab then Post-build Event (right at the top). We want to copy the files from the Flex bin\Debug folder into the Rails \public\bin folder which we just created. For me, that command is:

copy C:\RailsApps\ToDoApp\FlexToDo\bin\Debug\*.* C:\RailsApps\ToDoApp\ToDoApp\public\bin\

Tip: For a quick way to enter path names, you may select files and folders in the Solution Explorer. To get the path to the Flex compiled files, click the ‘Show All Files’ icon to display the \bin\Debug folder in Amethyst:

Select a file beneath \bin\Debug and double-click its File Path in the Properties window. Press CTRL+C to copy this. You can similarly select and copy the path to the \bin folder in your Rails project.

Be sure to save all your changes!

Create The Flex User Interface

Make sure that the file FlexToDo.mxml is loaded into the editor. If you have experience creating MXML designs you could now create the user interface in code (note that Amethyst Professional will also have a visual designer to let you do this by dragging, dropping, moving and resizing controls interactively). For simplicity, however, we suggest you just delete the code in FlexToDo.mxml and copy the following in its place:

Notice that I’ve added id attributes to the controls in this code (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). There are also a couple of other things here which 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). This is the relevant bit of code:

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 Flex application is started, we need to send the HTTP Service request when the Application creation completes. This is defined in the Application tag:

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 your Ruby In Steel project...

- Open \app\controllers\todos_controller.rb
- Delete the index method and replace it with the following:

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

- Now, rebuild the Amethyst project. Select the FlexToDo project node and click the Build menu then Rebuild FlexToDo. This will recompile the application to recreate the SWF file and (thanks to our post build event) copy this into the Rails \public\bin folder. To verify that these files have been copied, select the \public\bin\ folder and press the Synchronize button in the Solution Explorer (or select the Synchronize item from the Ruby menu):

If the files haven’t been copied into \public\bin\, check that you have saved all your changes in both the Rails and Flex projects, correctly set up the post-build event for your Amethyst project (as described earlier) and rebuilt your Amethyst project.

- Now select the Rails ToDoApp project in the Solution Explorer.
- Press F5 to run it.

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

- 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/FlexToDo.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:

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