Experimenting with the ILog Elixir Components for Flex

I spent some time playing with the ILog Elixir components for Flex. If you haven’t checked them out they are definitely worth looking at. Live samples are available here: http://www.ilog.com/products/elixir/

I experimented with the 3D charts components which definitely provide a good example of the expressiveness of the Flex platform. Looking at the sample code, it looks like you can’t simply enable the 3D mouse interactivity (click and drag to rotate, mouse wheel to zoom in / zoom out) by setting a component property: you actually have to write some code, capture mouse events, etc… In my own experimentation, I isolated that code in a reusable Chart3DControl component that makes it easy to provide this kind of mouse interactivity in any component in your application.

Click here to launch my simple test application… an AdvancedDataGrid (providing row grouping) and a 3D ColumnChart: Click an item in the AdvancedDataGrid to visual drill-down using the 3D column chart. This application works with just 35 lines of code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
	creationComplete="srv.send()">

	<mx:HTTPService id="srv" url="catalog.xml" result="gc.refresh()"/>

	<mx:AdvancedDataGrid id="dg" width="100%" height="40%">
                <mx:dataProvider>
                        <mx:GroupingCollection id="gc" source="{srv.lastResult.catalog.product}">
                             <mx:Grouping>
                                  <mx:GroupingField name="series"/>
                             </mx:Grouping>
                        </mx:GroupingCollection>
                </mx:dataProvider>
                <mx:columns>
			<mx:AdvancedDataGridColumn dataField="name"/>
			<mx:AdvancedDataGridColumn dataField="price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>

	<local:Chart3DControl chart="{chart}"/>

	<ilog:ColumnChart3D id="chart" width="100%" height="60%"
		dataProvider="{dg.selectedItem.revenue}">
		<ilog:horizontalAxis>
			<mx:CategoryAxis categoryField="month"/>
		</ilog:horizontalAxis>
		<ilog:series>
			<ilog:ColumnSeries3D yField="europe"/>
			<ilog:ColumnSeries3D yField="na"/>
			<ilog:ColumnSeries3D yField="asia"/>
		</ilog:series>
    </ilog:ColumnChart3D>

</mx:Application>

Click here to download the source code.

I’m also thinking about integrating the Org Chart component into Salesbuilder.