No I am not announcing the next killer scaffolding framework but I had a couple of hours available today so I just explored some of the cool features or Ruby On Rails and Flex. The part I was most interested in (today) is dynamic user interface creation and not generating and application like several scaffolding frameworks are doing. So I was able to create a UI that adapts to a given model of a Rails application. Of course I didn’t go as far as I wished, but I thought I could share it with my readers as I usually get valuable feedback. Right now the application doesn’t even manage data. That will be the next step.

In a first phase I have adapted RaildRoad Rails model class diagram generation tool to generate an xml definition that the UI would use to create it’s components. I generated an xml model for Sports a sample application provided with Streamlined and Typo a blog server.

The UI generation from the typo model is quite cpu intensive. There is not lazy instanciation of components, when you select the model, all the Tabs, lists and forms are created.

You can run the application and press view source from the context menu. Or you can see the source here. The generated xml can be seen here and here

In a second phase I created a Flex application that generates a UI from the given xml.

I was writing this blog entry while coding, so if you are more curious about how all this works, keep on reading.

Getting the schema of your ActiveRecords

We will generate an xml version of the schema that Flex can use to assemble a UI. So we need to find out info about each ActiveRecord of the application, it’s association with other ActiveRecords, and all it’s attributes. Later on would also be nice to identify the validation rules, so that we can build some validations on the fly without having to do a server round trip for some of the basic validations, (required, length, confirmation, regex). Supporting the various acts_as could also provide lots of functionality that doesn’t need to be coded over and over.

I will use the Streamlined Sports example database to experiment with. Later on we may have a look at Typo a blog server.

Let’s use the community to see how to parse the ActiveRecord. I am now checking out RailRoad (0.4.0) a class diagram generator for Rails. Railroad has the ModelsDiagram class that gather the information we need and then uses the DiagramGraph class to generate a dot format file that in turn is used to generate .svg or .png of the diagram. We are not interested in the dot generation, but will just ‘adapt’ the to_dot method to get the xml we need. So I simply reopened the class and created a new to_dot method as follows:

# http://chadfowler.com/2007/8/3/enumerable-injecting
module Enumerable
  def injecting(s)
    inject(s) do |k, i|
      yield(k, i); k
    end
  end
end

class DiagramGraph

  def to_dot
    return definition.to_xml(:root => 'active_records', :dasherize => false)
  end
  
  #Let organize the data in a way closer to the xml we want to generate.
  def definition
    active_records = {}
    @nodes.each do |node| 
      attributes = node[2].injecting({}) {|accumulator, value| k,v=value.split(" :"); accumulator[k] = v}
      class_name = node[1]
      active_records[class_name] = { :name => class_name, :attributes => attributes, :relations => [] }
    end
    @edges.each do |edge| 
      association_type = edge[0]
      from_class_name = edge[1]
      to_class_name = edge[2]
      active_records[from_class_name][:relations] << {association_type.to_sym => to_class_name}
    end
    active_records
  end  
  
end

The definition method generates a hash map with the information of the model. The to_xml is all that is needed to get an xml version of the data that the map contains.

definition.to_xml(:root => 'active_records', :dasherize => false)

Dynamically Generate a Flex UI

Let looks at the model.

Player has_many Sponsor
Coach has_many Sponsor
Team has_one Coach
           has_many Player
Sponsor has nobody!

The UI generation should be lot smarter and configurable. For now I have taken the approach to create one view for each model. This view shows all the records in a data grid and the detail of the selected record in a form view. All associations of the record are represented by a Tab Navigator. You will notice that this is not very practical for the Typo datamodel. We should have main ActiveRecords that are entry points to the application. Also the depth of the active record view is one association down but could be driven by definition i.e. Team => Coach => Sponsor, similar to the :include option of the find methods. We should be able to flatten a “to one” relation and have all the attributes of the association in the same view than the source ActiveRecord.

You can run the application and view the source.

The main application, FlexScaffolding, adds dynamically a ActiveRecordsView for each ActiveRecord in the model to the Tab navigator. That’s too many tabs for the Typo model…

    private function generateView():void {
          for each (var activeRecord:XML in definition.children()) {
               var arView:ActiveRecordsView = new ActiveRecordsView();
               arView.definition = activeRecord;
               mainView.addChild(arView);
          }        
    }       

The ActiveRecordsView.mxml does the main work of generating the UI. It’s not very big (66 lines), but is also limited for now. I let you check out the source code if you a curious. Next on the list is to map too more data types (ie a “text” ActiveRecord attribute should be mapped to a TextArea, date and datetime should be support). I need to add configuration options where the defaults can be overridden. I need to create a Rails controller that uses the same xml model to expose the data to the view. There shouldn’t be the need to hand code RESTFul controllers. Or maybe the UI should be build from the routes…

That’s all for now. Enjoy!
Daniel Wanja

Not really on the bus but at the onairbustour stop in Denver. Check out Flickr Tags (onairbustour and onair2007denver). Today’s agenda looks quite interested and there will lots of info regarding Adobe’s AIR technology. The Keynote by Ryan Stewart will start in 1 minutes. I’ll take some notes during the day…so check back!

Keynote

Ryan now shows pownce (I am still waiting for my invite…I tried to get one via inviteshare but no success yet!). He shows the nice finetune application that has a nice AIR application to complement their website. He demoes a word processor (buzzword) created in Flex and AIR, ask your preview here.

Now Ryan shows the AIR Roadmap, next big steps is Max 2007. Beta 2 will be release around Max 2007 which will add functionality like Flash AIR Support. An AIR version support Linux appear in the AIR 1.x version.

Now back to Mike Chambers that will provide a technical introduction on AIR and will create a Hello World application. At the end of the presentation Mike points to http://code.google.com/p/onairbustour/ where the post the various applications they are building on the tour about the tour.

Kevin Hoyt – AIR application with javascript

What a slacker Kevin is…only two slides :-) No it’s pretty cool, Kevin is a hands on guys and is building some AIR javascript application live and shows some nice tricks.

I won’t transcode all the code he show, but there is a tight integration between javascript and actionscript. He shows how to call directly actionscript methods from javascript.

Javascript calling Actionscript
function doSave() {
  var file = air.File.desktopDirectory.resolve("denver.txt")
  air.FileStream().open (...) // some code left out.
}

So this is javascript and the air object allows access to Actionscript. In this case he is saving some text entered in htm l to the file system. Cool.

He presents Aptana and shows that they have some AIR integration. Check out Kevin’s blog

Kevin Hoyt – Another session on script bridging.

Kevin now builds a web browser in AIR/Flex that uses the mx:HTML component.

web.htmlControl.load(new URLRequest(address.text))
<mx:HTML id="web" />

The following provides access to any public actionscript class described in library.swf to javascript.

<script src="library.swf" />

Lunch!!!

All right, I didn’t catch up the beginning of Daniel Dura’s talk…Sorry, I was playing with my EVDO card.

Daniel Dura – AIR API Overview

Daniel describes the various apis and shows lots of code. He starts showing the different options the Window API offers (transparent, system, dialog, lightweight). He shows the Drag and Drop API (AIR to AIR, AIR to OS, OS to AIR, Desktop to AIR). It’s pretty cool to see all these APIs in action. The Service Monitoring allows to detected network connection changes.
Database Support: just added SQL integration to the new beta. Fully local database. Can be used to sync data with an online application. You can store data while being offline. He demonstrates an example written by Christophe Conraets show the SQLite integration (SQLQueue, SQLStatement).

Salesforce.com

Salesforce and Flex was used to improve the User Experience they where providing before.

Contest to give away schwag

Yea, Kevin Hoyt got taped at the back of bus…I rememberd that…answered Mike Chambers question..and won the following 7 books:

Yahoo Media Innovation Group – Jason

Some demos of what Yahoo is doing with AIR. One application is Minibar, a Dashboard like widget.

Developing AIR Applications with Ajax Components – Andre Charland from Nitobi

Why Ajax in AIR?

• Code Reuse, Skills Reuse, HTML is REALLY good at some things, Maintain UI Patterns, Javascript is growing.

I recompiled the Log Visualizer with Adobe AIR. You can download it here.

I tried it under Windows XP (Parallels) and it seems that the File.browseForOpen doesn’t fire the Event.SELECT event under Windows. So the bug is that you can open a file, but the application doesn’t know when you selected it. I was contacted by Logan today who wanted to know if there is a Windows version. So sorry for the Windows users out there for the moment. Note that the Apollo version of the Log Visualizer was working under windows.

Download: RailsLogVisualizer0.5.air

The invitations are going out! So, if you haven’t yet, go signup for the eBay Desktop beta (code name Project “San Dimas”“) at ”http://www.projectsandimas.com/">http://www.projectsandimas.com/.

The eBay Desktop is an Apollo Application, oops, Adobe AIR application, that is developed by our friends Tony Hillerson and Sean Christmann from EffetiveUI for eBay. As they had their hand full applying the finishing touch to the beta, they asked Lee and myself to help with the beta Signup program and administration site which is a Ruby on Rails application. How cool is that! Thanks guys for the opportunity to work on such a visible project…

Now if you know Sean you will understand why using the eBay Desktop is fun. When Sean is not coding he is playing games, and he want’s any application to be fun and playful. Even when he gives talks he manages to demonstrates how to program a WII controller. It’s cool that Alan Lewis gave them the creative freedom to create some new user experience concepts on top of the existing eBay apis.

Ken, my desk neighbor at one of my clients asked why would you need something like Adobe AIR? Well in the case of the eBay Desktop, you are provided with an immersive experience, having a dedicated application will encourage the user to stay within that application and not get (too) distracted. The desktop also allows to save custom searches and additional information locally, thus providing functionality that may not be available by the existing eBay apis. It could also allow for functionality like drag&drop of images and text from the file system to create online auctions, use a connected camera to snap pictures, scan bar codes to retrieve product information, and so on…

PS: Hey Sean what’s your blog…or are you too busy coding?

The new version of SearchCoders is not just a pretty face, Tom and Robert also worked hard adding quite some neat and useful functionality like chatroom, notes and favorites. Searching is faster than ever. The new Searchcoders.com Dashboard is Still the best way to find useful Flex related information on the net.

This simple Apollo Application takes 200×150 thumbnails of a Web page.

UPDATE: See Web Snapshot – a simple Adobe AIR application

//1. Load the page (asynchronously)
var html:HTMLControl = new HTMLControl();
html.width = 400;
html.height = 300;
html.load(new URLRequest(url));

//2. Draw and scale the rendered html into a bitmap
var snapshot:BitmapData = new BitmapData(200, 150);				
var matrix:Matrix = new Matrix();
var scaleX:Number = 0.5;
var scaleY:Number = 0.5;
matrix.scale(scaleX, scaleY);
snapshot.draw(htmlContent, matrix);

//3. Save as JPEG
var jpegEnc:JPEGEncoder = new JPEGEncoder(75); 
var jpegData:ByteArray = jpegEnc.encode(snapshot);		
var stream:FileStream = new FileStream() 
stream.open(file, FileMode.WRITE); 
stream.writeBytes(jpegData);
stream.close();