That sounds cool. Read all about it here…

http://www.techcrunch.com/2007/12/12/adobe-releases-blaze-ds-open-source-version-of-livecycle-data-services/

Maybe not. Techcrunch released this message on their blog but no text was attached and comments where closed. Maybe somebody clicked the submit button to quickly. Now I am curious…

UPDATE: 10:17pm Denver time…it’s official: http://www.adobe.com/aboutadobe/pressroom/pressreleases/200712/121307BlazeDS.html

I started playing with Anthony Eden’s ActiveWarehouse and followed his excellent tutorial on how to analyze the Ruby On Rails Svn Commit Log with the ActiveWarehouse framework. Of course this made me want to try to do the same with the new mx:OLAPCube and mx:OLAPDataGrid provided by Flex 3 as part of the DataVisualization components. Let me just say this…I am not done playing with either the Flex OLAPCube nor the Rails ActiveWarehouse framework as these are pretty complex beasts. Both of these frameworks are overlapping and complementary. There are overlapping as both can digest raw data and perform aggregation of that data. They are complementary in the sense that a server side warehouse needs a good visualization front-end. Maybe the OLAPCube and OLAPDataGrid can be this front-end. In my initial trials I haven’t come up with a compelling way to integrate both, but by using some simple SQL I could extract the data from the ActiveWarehouse and pass it to the OLAPCube.

Before going on you may want to read Anthony’s blog and check his presentation on Data Warehouses with ActiveWarehouse. I didn’t find much information on the Flex OLAPCube besides these: Feature_Introductions:_OLAPDataGrid on Adobe’s labs, Flex 3: Feature Introduction Video for OLAP Support, and these Flex examples.

So I create the following sample application. You can try it out here. Note it’s pretty slow, it takes up to a minute to aggregate 10000 values. The Flex team mentioned they didn’t optimize this component yet. I can confirm this. But I may also have messed something up as these are only my initial steps with that component. The application displays the Author dimension with the Author Name as rows and the Time dimension with the Year and Quarter as columns. The facts is the File Change count during that period. Flex calls the “facts” a measure.

Run the applicaiton

To extract the data from the ActiveWarehouse I created this SQL to join the facts table with all the dimensions table. I need to find out if the ActiveWarehouse doesn’t just return this data in xml format by using it’s build-in classes.

  def report_as_xml
    sql = <<-EOSQL
    SELECT
     date.calendar_year,
     date.calendar_quarter,
     date.calendar_month_name,
     author.name,
     file_revision_facts.file_changed AS `file_changed`
    FROM
     file_revision_facts
    JOIN date_dimension as date
     ON file_revision_facts.date_id = date.id
    JOIN author_dimension as author
     ON file_revision_facts.author_id = author.id
    WHERE 
      date.calendar_year > '2005'
    EOSQL

    @@xml ||= ActiveRecord::Base.connection.select_all(sql).to_xml(:dasherize => false)
    render :text => @@xml
  end

In Flex the OLAPCube can be loaded with the XML

    var data:ICollectionView = new ArrayCollection(result.records.record); // is Array
    cube.dataProvider = data;
    cube.addEventListener(CubeEvent.CUBE_COMPLETE, creationCompleteHandler);
    cube.refresh();        

Once the cube is loaded you can slice and dice it in many ways by using an OLAPQuery. I still need to figure out all the possibilities which are offered.

    [Bindable]
    private var cubeResult:IOLAPResult;

    private function creationCompleteHandler(event:CubeEvent):void
    {
        //Cube was created, let's query it
        var query:OLAPQuery = new OLAPQuery;

        // TIME DIMENSION            
        var yearSet:IOLAPSet = new OLAPSet;
        yearSet.addElements(cube.findDimension("Time").findAttribute("Year").members);

        var quarterSet:IOLAPSet = new OLAPSet;
        quarterSet.addElements(cube.findDimension("Time").findAttribute("Quarter").members);

        //year-quarter
        var newTimeSet:IOLAPSet = yearSet.crossJoin(quarterSet);

        // AUTHOR    DIMENSION    
        var authorSet:IOLAPSet = new OLAPSet;
        authorSet.addElements(cube.findDimension("Author").findAttribute("Name").members);

        // ROW/COLUMNS        
        var rowAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
        rowAxis.addSet(authorSet.hierarchize(true));
        var colAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
        colAxis.addSet(newTimeSet.hierarchize(true));

        // QUERY CUBE
        var token:AsyncToken = cube.execute(query);
       token.addResponder(new AsyncResponder(displayResult, olapFaultHandler));
    }
    private function displayResult(result:Object, token:Object=null):void
    {
        cubeResult = result as IOLAPResult;
    }

The cube result is the dataProvider of the Cube which in it’s simplests form can be defined as follows:

<mx:OLAPDataGrid id="olapGrid" dataProvider="{cubeResult}" />

I’ve then added a change listener for the grid to create the dataProvider for the ColumnChart.

    [Bindable]
    private var chartData:Array;

    private function gridSelectionChanged():void {
        if (!(olapGrid.selectedItem is OLAPAxisPosition)) return;
        var rowIndex:Number = olapGrid.selectedIndex;
        var axis:IOLAPQueryAxis = cubeResult.query.getAxis(OLAPQuery.COLUMN_AXIS);
        var columnLength:Number = cubeResult.getAxis(OLAPQuery.COLUMN_AXIS).positions.length;
        var newChartData:Array = [];
        for (var i:int=0;i<columnLength;i++) {
            var tuple:OLAPTuple = axis.tuples[i];
            var key:String = tuple.explicitMembers.toArray().join(",");
            if (key.indexOf("(All)") > -1) continue;            newChartData.push({key:key, value:cubeResult.getCell(rowIndex, i).value});
        }
        chartData = newChartData;
    }

<mx:ColumnChart id="chart" width="100%" height="30%" dataProvider="{chartData}">
        <mx:series>
            <mx:ColumnSeries yField="value" />
        </mx:series>
        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="key" />
        </mx:horizontalAxis>
</mx:ColumnChart>

This are my first tribulations with both frameworks. Over the next few month I will have to dive more deeply into the possibilities which are offered. Thanks to both teams as this is pretty cool.

Enjoy! Daniel.

I am currently preparing a demo using an mx:OLAPCube and OLAPDataGrid which analyze the Rails svn commit log. however I don’t want to deploy a specific server side application as the Cube can load data from XML. So I have an report.xml that is 4.1MB. I created the following AIR application (ZlibCompressor.mxml) that use the standard compression provided by the ByteArray class to compress this file down to 20Kb. The application that consumes this file (UnzipTest.mxml) uses the URLLoader to read this file straight into a ByteArray and uncompress the data. It’s fast!

The key code for compression is the ‘compress’ and ‘uncompress’ method provided by the ByteArray. Note the URLLoader dataFormat is set to “binary”.

ZlibCompressor.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    nativeDragDrop="onDrop(event)"
    nativeDragEnter="onDragIn(event)"     >
<mx:Script>
    <![CDATA[
    import flash.desktop.ClipboardFormats;    
    import flash.utils.CompressionAlgorithm;
    public function onDragIn(event:NativeDragEvent):void {
        var transferable:Clipboard = event.clipboard;
        if (transferable.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
                DragManager.acceptDragDrop(this);
        }      
    }
    public function onDrop(event:NativeDragEvent):void {
        var fileList:Array = event.clipboard.dataForFormat(ClipboardFormats.FILE_LIST_FORMAT) as Array;
        if (fileList.length==0) return;

        var inFile:File = fileList[0];
        var fileStream:FileStream = new FileStream();
        fileStream.open(inFile, FileMode.READ);
        var ba:ByteArray = new ByteArray();
        fileStream.readBytes(ba, 0, fileStream.bytesAvailable);
        fileStream.close();

        var newFileName:String = inFile.nativePath+".zlib";
        ba.compress();

        var outFile:File = new File(newFileName);
        fileStream = new FileStream();
        fileStream.open(outFile, FileMode.WRITE);
        fileStream.writeBytes(ba, 0, ba.length);
        fileStream.close();        
    }                    
    ]]>
</mx:Script>    
</mx:WindowedApplication>

UnzipTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="loadData()">
<mx:Script>
    <![CDATA[
    import mx.rpc.events.ResultEvent;
    import flash.utils.ByteArray;

    import flash.events.*;
    import flash.net.*;    

    private function loadData():void {
         var loader:URLLoader = new URLLoader();
         loader.dataFormat = "binary";
         loader.addEventListener(Event.COMPLETE, completeHandler); 
         var request:URLRequest = new URLRequest("../data/report.xml.zlib");
         loader.load(request);
    }
    private function completeHandler(event:Event):void {
        var loader:URLLoader = URLLoader(event.target);
        var ba:ByteArray = loader.data;
        ba.uncompress();
        var s:String = ba.toString();
        var xml:XML = new XML(s);
    }
    ]]>
</mx:Script>    
</mx:Application>

class Category < ActiveRecord::Base
  acts_as_nested_set
end

class CategoriesController < ApplicationController
  def index
     Category.result_to_attributes_xml(Category.root.full_set)
  end
end

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    applicationComplete="categories.send()">
<mx:HTTPService id="categories" url="http://localhost:3000/categories" resultFormat="e4x" />
<mx:Tree dataProvider="{categories.lastResult}" 
    labelField="@name"
    width="100%" height="100%" />    
</mx:Application>

Result:

<node name="Main Category" id="15" description="">
  <node name="Cameras &amp; Photo" id="16" description="">
    <node name="Bags" id="17" description=""/>
    <node name="Accessories" id="18" description=""/>
    <node name="Analog Cameras" id="19" description=""/>
    <node name="Digital Cameras" id="20" description=""/>
  </node>
  <node name="Cell Phones" id="21" description="">
    <node name="Accessories" id="22" description=""/>
    <node name="Phones" id="23" description=""/>
    <node name="Prepaid Cards" id="24" description=""/>
  </node>
  <node name="Dvds" id="25" description="">
    <node name="Blueray" id="26" description=""/>
    <node name="HD DVD" id="27" description=""/>
    <node name="DVD" id="28" description=""/>
  </node>
</node>

I used the http://wiki.rubyonrails.org/rails/pages/BetterNestedSet plugin.

Too cool!

UPDATE: The BetterNestedSet plugin doesn’t work out of the box with Rails 2.0 RC1. Thanks Joel for that info. Read more in the comment of this blog entry.

UPDATE2: Thanks Fabien, BetterNestedSet now works with Rails 2.0!

Install RailsLogVisualizer0.7.air

Install Manually

For time.onrails.org the log file is currently 98Mb and is loaded and process in less than a minute. Here are the loading details:

Loaded 98571986bytes in 28093 milliseconds.
Parsing file. Please Wait this may take some time....
Parsing. Split 1639453entries in 1447 milliseconds.
found:220767 in 1925 milliseconds.
Aggregating data.
	aggregated:220767 in 13426 milliseconds.
	Aggregated:89135
	aggregated String :4440464(bytes) in 2790 milliseconds.

Using ActiveResources from Flex? Using FlexUnit? Here is a nice way to write your tests.

package tests
{
    import flexunit.framework.*;    
    import mx.rpc.AsyncToken;
    import mx.rpc.events.ResultEvent;
    import resources.Raffles;

    public class TestRaffles extends BaseTestCase
    {    
        private var raffles:Raffles;        
        public function TestRaffles(name : String = null)
        {
            super(name);
            fixtures(["raffles"]);
             raffles = new Raffles();
        }            
        public function testRemoteFindRaffle():void
        {
            assertRemote(raffles.show(1));
        }
        public function assertRemote_testRemoteFindRaffle(data:Object):void
        {
            Assert.assertTrue("Raffle show successfully called", data is ResultEvent);  
            assertEquals("MyString", data.result.name);
        }        

    }
}

Note this code is not yet a plugin and is using code you can find here: http://code.google.com/p/flexonrails/source. I was starting to use it on multiple projects so I thought it was to time find a home for it. Also it is using the org.onrails.rails.ActiveResourceClient Flex class. I would recommend that you use Alex MacCaw’s ActvieResrouce for Actionscript. I still need to talk with Alex and integrate this fixture loading code with his code.

The BaseTestCase Flex class is an extended TestCase that provides support for fixtures. Now in your constructor you can define which fixtures you want to reload between each test. Only tests methods starting with “testRemote” will trigger refreshing the fixtures. As you know, when using AMF or HttpService remote invocations are asynchronous and you cannot test the result of a remote call in the same method than where the call is made from. That’s why I added the assertRemote method which takes an AsyncToken as parameters. This will automatically invoke a method whos name starts with assertRemote_ followed by the test method name. This simplifies greatly writing asynchronous tests. FlexUnit provides the addAsync method, we just add the convenience assertRemote function to setup all the callbacks.

To make this work for you Flex with Rails project. You need to fixtures_controller.rb to your controllers and setup the following routes:

  if RAILS_ENV == "test"
    map.resources :fixtures, :new => { :test_results => :post }
    map.crossdomain '/crossdomain.xml', :controller => 'fixtures', :action => 'crossdomain'
  end

You need to extend your Flex TestCase from tests.BaseTestCase.

Enjoy, Daniel.

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.

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" />

<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.

• What more can we do than the browser?
  • Files, Windows & Chrome, Drag&Drop, Copy&Paste, Offline, Background process, notifications, keyboard shortcuts.
• Demo APP
  • Ajax Fisheye Menu (mac like dock)
  • Offline Sales Force

eBay San Dimas – Sean Chirstmann from EffectiveUI

San Dimas is eBay on the Desktop build with AIR. Why? What’s the point? This is a big question for many AIR applications. New experience for customers and new functionality AIR provides. For example alerts, notifications and the live nature of Flash is a big deal to the user.

• Development Pattern
  • San Dimas is built on Cairngorm
  • Assets externalized to allow for new skins
  • String externalized for internationalization
• eBay SDK Overview*
  • AS3 classes generated from eBay WSDL
  • Objects in AS3 are serialized into XML and sent to server
  • XML received from server is assembled into corresponding AS3 objects
  • Benefit from working with typed native objects that are bindable
• Upcoming Features
  • eBay: Browsing, Selling
  • AIR: SQL database integration for category/attribute info
  • OS Alerts, System Tray

see http://projectsandimas.com

Transitioning to the Desktop – Lee from frog design

The presentation will mostly focus on design. Lee also likes Microsoft products, so he can provide some perspective. Lee did the bus wrap for the tour. Some interactive part of the onAir website. His blog is the theflexblog.com

Lee is actually showing some cool stuff done with AIR just to highlight animation and custom chrome performance. He will post these examples on his blog.

Buzzword

Cool I just go my invite. Man just logged in and it’s refreshing to see such such a cool word processor. Hehe, bye-bye word! Well, I don’t use Word anymore anyhow.

The Schedule for the rest of the onAIR tour

The bus in the bus!!!

The Kevin in the bus!!!

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