Dec 17 2006

Part 2 – Flex Cairngorm/WebORB Issue Tracker Tutorial – Getting Typed Objects from Rails using [RemoteClass]

Tag: Flex and Rails, tutorialDerek Wischusen @ 1:41 am

This is the second post in a series that covers certain features of Issue Tracker sample app that I added to the Flex RoR SDK.

The first post explained how to set up the application.

This post covers how you can get WebORB for Rails to return typed objects to Flex using the [RemoteClass] metadata tag.

One of the many design patterns that comprises the Cairngorm microarchitecture is the Value Object pattern.  Value Objects are used to represent the ‘things’ that you are working with in your application.  For example, in the Issue Tracker sample app (view, source) there are currently Value Objects for Users, Projects, and Issues.  The class definitions for all of these objects can be found in com.rxr.issuetracker.vo package.

Value Objects on the client generally map to server-side objects.  In the Issue Tracker sample app all of the Value Objects listed above map to ActiveRecord classes in Rails, which in turn wrap tables in the database.  For instance, the IssueVO class in Flex maps to the Issue class in Rails (see C:\rails\rails_issue_tracker2\app\models\issue.rb) which wraps the issues table in the database.

This is the IssueVO class in Flex:

package com.rxr.issuetracker.vo
{
         import com.adobe.cairngorm.vo.IValueObject;

  	[Bindable]
 	[RemoteClass(alias="com.rxr.issuetracker.vo.Issue")]
 	public class IssueVO implements IValueObject
 	{
  		public var id : int;
  		public var project_id : String;
  		public var reportedby : String;
  		public var assignedto : String;
  		public var description : String;
  		public var status : String;
  		public var priority : String;
  	}
 }

Which maps to:


class Issue < ActiveRecord::Base
end



Which wraps the issues table:

issue_table2

Prior to WebORB 1.0.9 this mapping was only conceptual, in that Rails would only return untyped objects or ObjectProxys that would have to be 'manually' converted to Value Objects on the client side. Since WebORB 1.0.9 it is now possible to directly map ActiveRecord classes to classes on the Flex side using the [RemoteClass] metadata tag in Flex.

Making this happen is pretty straight-forward:

First, you need to add a [RemoteClass(alias="")] metadata tag just above the class definition of the ActionScript class that you want mapped to an ActiveRecord class.

[Bindable]
[RemoteClass(alias="com.rxr.issuetracker.vo.Issue")]
 public class IssueVO implements IValueObject
{

Next, go to C:\rails\rails_issue_tracker2\config and open weborb-config.xml. In this file you need to specify the mapping between your client-side class and your server-side class. For example, the following xml maps the IssueVO class on the client to the Issue class on the server. Note that you use the string specified in the alias of the [RemoteClass] metadata tag as the value of the clientClass in the class mapping.

<classMapping>
      <clientClass>com.rxr.issuetracker.vo.Issue</clientClass>
      <serverClass>Issue</serverClass>
      <source>Issue</source>
</classMapping>

That's it. Now when you make a service call to a method that returns Issue objects in Rails, those objects are automatically returned as IssueVOs to Flex.

vo_debugger


Dec 11 2006

Part 1 – Flex Cairngorm/WebORB Issue Tracker Tutorial

Tag: Flex and Rails, tutorialDerek Wischusen @ 1:34 am

This is the first in a series of posts/tutorails that will cover certain features of the Issue Tracker sample app that I recently released.

Future posts will cover:

  • How to return typed objects from Ruby on Rails using WebORB.
  • How to use active record associations.
  • How to use dynamic finders inside of Flex.
  • Anything else that you tell me you would like me to cover….

This post will cover how to set up and run the application in Flex.

 

Prerequisites

Recommended

First, if you haven’t already, download the source for the application: http://flexonrails.net/flex_ror_sdk_issue_tracker2.zip. 

Unzip it, then put the rails_issue_tracker2 folder into C:\rails

Next, start up Flex Builder.  Click on the File menu and select New->Flex Project

In the interface that appears, select Flex Data Services and Compile Application locally in Flex Builder. 

Then click Next>

 

Step 1

 

Fill in the next screen as follows:

Then click Next>

 

Step 2

 

On the following screen, enter flex_issue_tracker2 for the Project name.

Click Next>

 

Step 3

 

You need to add the Cairngorm.swc to your libraries for this project.  The Cairngorm.swc was is included in the source files for this project.  You can find it here: flex_ror_sdk_issue_tracker2\Flex_Source\flex_issue_tracker2\cairngorm. 

Take the .swc file and put it in a folder of your choice.

Then click Add SWC and browse to folder that you put the swc in.

 

Step 4 

 

On the same screen, fill in the form as follows:

Click Finish

 

Step 5

 

Next, open the following folder in the source files: flex_ror_sdk_issue_tracker2\Flex_Source\flex_issue_tracker2

Select the folders and files shown below and add them to the flex_issue_tracker2 project that you just created.

That takes care of the Flex side of things.  Now all you need to do is set up the database and tell the Rails app how to access it.

 

Step 6 

 

If you are using MySQL, open up the MySQL Command Line Client and enter:

CREATE DATABASE issue_tracker;

 

Step 7

 

Next, go to the config folder in your Rails app (rails_issue_tracker2\config) and open database.yml.

Fill in your username and password for your database where indicated below.

 

Step 8 

 

Now that your Rails app can access your database, it’s time to create the tables using Rails migrations.  You can see the files that define the tables by going to rails_issue_tracker2\db\migrate.

Open a command line and point it to your Rails app folder (c:rails\rails_issue_tracker2) and enter

rake migrate

Ok, the tables have been created and the app is ready to go.  All that remains to do is to boot up the server and test it out.  On command line enter

ruby script/server (or mongrel_rails start if you are using Mongrel).

 

Step 9

 

Lastly, go back into Flex Builder, click Run Debug(F11), and you should see the screen displayed below.

 

Step 10

 

Let me know if you have any questions, or if anything in this post is unclear or incorrect.


Dec 08 2006

Cairngorm/WebORB Issue Tracker Sample App Up and Running (for real this time)

Tag: Flex and Rails, RailsDerek Wischusen @ 5:24 pm

Ok, this time it should actually work.

http://apps.flexonrails.net/examples/

You can read more about this app in my previous post.

You can get the source for this app, and learn a little about what is going inside, by going to this post: http://flexonrails.net/?p=31
 


Dec 05 2006

Cairngorm/WebORB Issue Tracker Sample App Up and Running

Tag: Flex and RailsDerek Wischusen @ 4:22 am

I’ve set the issue tracker sample application that I recently added to Flex RoR SDK up on my site.

With this sample app you can:

  • Register to create a new account/login to an existing account.
  • Create/update/delete projects.
  • Create/update/delete issues.

You can check it out here: http://apps.flexonrails.net/examples/

Let me know if you have any questions or if you find any bugs.

Note: Once you’ve created a new project you can open it by double-clicking it.


Dec 01 2006

Flex Ruby on Rails Sample App that uses Cairngorm 2.1 and WebORB

Tag: Flex and RailsDerek Wischusen @ 7:37 pm

I recently updated the issue tracker sample application in the Flex RoR SDK so that it uses Cairngorm 2.1 and WebORB for Rails.

Besides showing how WebORB and Cairngorm can work together, this app demonstrates how to:

  • use active record associations.
  • return typed ValueObjects objects from Rails using the [RemoteClass] metadata tag.
  • use dynamic finders inside Flex by directly mapping a Service to a ActiveRecord class.
  • do simple effects in Flex.
  • use states and transitions.

You can get the source here

Let me know if you have any questions or comments, or if you find any bugs.

Credits:

The reflection on the login screen is by Ben Stucki.


Dec 01 2006

Source Code for Flex RoR Image Converter

Tag: UncategorizedDerek Wischusen @ 3:14 am

I’ve finally gotten around to adding the source code for the image converter sample app to the Flex RoR SDK.

You can download the full SDK at the google code site or if you just want source for the image converter then you can get it here.

Please let me know if you have any questions or comments.