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.

Comments

• 
  
• • RSS

• Recent Posts

  • Sneak Peek of the New Flex/Spring Integration at FlexCamp Boston Tomorrow
  • Adobe Collaborates with SpringSource for Enhanced Flex / Spring Integration
  • “Model Driven Development using Flex and LCDS Next” at FlexCamp Boston on Dec 12th
  • MAX Europe New Session: Model Driven Development using Flex Builder 4 and LCDS Next
  • Using the SQLite Database Access API in AIR… Part 3: Annotation-Based ORM Framework

• Categories

  • Air
  • BlazeDS
  • Collaboration
  • Conference
  • Flash Media Server
  • Flex
  • hibernate
  • Java
  • LCDS
  • LiveCycle Data Services
  • MAX
  • Spring
  • SQLite

• Archives

  • December 2008
  • November 2008
  • September 2008
  • May 2008
  • April 2008
  • February 2008
  • December 2007
  • November 2007
  • October 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • February 2007
  • January 2007
  • November 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006

• Blogroll

  • Adobe Consulting
  • Alistair McLeod
  • Ely Greenfield
  • Manish Jethani
  • Matt Chotin
  • Mike Chambers
  • Narcisso Jaramillo
  • Roger Gonzalez
  • Sho Kuwamoto
  • Steven Webster
• 

• Email Subscription

  Enter your email address to be notified when I post a new article on this blog:

  Delivered by FeedBurner