back

The Kap Lab: Playing with
free Flex components

by Michael Chaize

Kap IT is a Flex development company in France. I met the founders in 2006, and I was amazed by their love for Flex and R&D. Two years later, Kap IT has launched the Kap Lab, where you can download free Flex components to enhance data visualization, diagramming, and productivity as a developer. In this article, I show you how to integrate them into your projects. It's easy thanks to the Flex components architecture.

Kap Inspect: Firebug for Flex coders

All web developers use Firebug to test their code within a browser. Now all Flex coders should use the Kap Inspect component. Associated with the Flex Builder debug perspective, it's the best tool for quickly testing and debugging Flex applications at runtime.

Once the Kap Inspect component is included in your project, you can launch the debug window using a keyboard shortcut (see Figure 1).

The Visualizer component.

Figure 1. The Kap Inspect component.

A tree view represents the display list of your application. You can drill down into the display list and select the component of your choice to see its properties. You can also use the capture tool to highlight a specific component and click it. Once a component is selected, you can inspect its properties, change its style, display statistics, and log all the events dispatched by this object. And at runtime, you can inspect your application. What's even more amazing is that you can do everything live.

Kap Inspect can be integrated into a project either statically or using a module loader.

The first method gives more features but significantly increases the size of your application. You may want to consider using static integration during development stages. Although the module loader integration provides less information, it only adds 2KB to your final application size. This is the preferred mode for preproduction or live testing.

To add the Kap Inspect component to your application, follow these steps:

  1. In Flex Builder, add KapInspect.swc to your library path.
  2. Change your MXML file to add the Kap IT namespace and a Kap Inspect tag:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:kapit="fr.kapit.*">
    	...
    	<kapit:KapInspect/>	
    </mx:Application>
    
  3. Run your application, and give focus to Adobe Flash Player. Then hit Ctrl+Alt+F12. You should see Kap Inspect pop up.

To dynamically load the Kap Inspect component, follow these steps:

  1. Within the Flex Builder IDE, add the KapInspectModuleLoader.swc to your Library path.
  2. Modify the namespaces, and add the component:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:kapit="fr.kapit.*">
    	...
    	<kapit:KapInspect/>	
    </mx:Application>
    
  3. Deploy KapInspectModule.swf in the folder that holds your main SWF application file.
  4. Run your application, and then hit Ctrl+Alt+F12.

If you're a Flex developer, you should consider using the Kap Inspect component to improve the debug experience of your Flex applications.

Data visualization components: Professional representations of your data

Today, Kap Lab provides three data visualization components: Treemap, Kiviat, and the Visualizer.

The Treemap component provides a compact view of large hierarchical collections of quantitative data. It displays hierarchical data in an amazing way. The eye can easily analyze the nodes and relationships between items using different areas and colors (see Figure 2).

The Treemap component.

Figure 2. The Treemap component.

The second component is a radar chart called Kiviat, which is a two-dimensional chart that can represent three or more variables. All the axes start from the same point and share the same origin. This kind of chart is useful when you need to look at several different factors that are all related to one item (see Figure 3).

The Kiviat component.

Figure 3. The Kiviat component.

The last component — the Visualizer — demonstrates the power of Flex and how Flash Player 9 can handle complex algorithms on the client side. Indeed, the Visualizer component provides powerful ways to browse large hierarchies of data by combining visual effects and graph layouts (see Figure 4).

The Visualizer component.

Figure 4. The Visualizer component.

To integrate these components into your application, download the SWC and follow these simple steps:

  1. Add the SWC file to your library folder.
  2. In the MXML file, declare the namespace and add the MXML tag within your view.

To show you how these components work, let's code a prototype for a rich sales manager dashboard.

First, you'll need to download the three components: Kiviat, Treemap, and Visualizer. Then, create a DataVisualizationTest project in Flex, and add the SWC files to the libs folder (see Figure 5).

Creating a test project for the data visualization components.

Figure 5. Creating a test project for the data visualization components.

Then add the following code, which I wrote from scratch, to create a fake dataProvider:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:KapVisualizer="com.kapit.visualizer.*"
	xmlns:Treemap="fr.kapit.components.treemap.*"
	xmlns:RadarChart="fr.kapit.radarchart.*"
	backgroundColor="#9097A2">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var myDataProvider:ArrayCollection = new ArrayCollection([
  {name:"Southwest", Actual:290060, Estimate:270000, children: [
     {name:"Arizona", Actual:68750, Estimate:70000, children: [ 
        {name:"Barbara Jennings", Actual:38865, Estimate:40000}, 
        {name:"Dana Binn", Actual:29885, Estimate:30000}]},  
     {name:"Central California", Actual:29134, Estimate:30000, children: [ 
        {name:"Joe Smith", Actual:29134, Estimate:30000}]},  
     {name:"Nevada", Actual:52888, Estimate:45000, children: [ 
        {name:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
     {name:"Northern California", Actual:94303, Estimate:80000, children: [ 
        {name:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
        {name:"T.R. Smith", Actual:55498, Estimate:40000}]},  
     {name:"Southern California",  Actual:44985, Estimate:45000, children: [ 
        {name:"Alice Treu", Actual:44985, Estimate:45000}, 
        {name:"Jane Grove", Actual:44913, Estimate:45000}]}
  ]}
]);		

[Bindable]
private var myKiviatProvider:ArrayCollection = new ArrayCollection(
    [ 
        {value:"Actual", value1:38865, value2:29885, value3:29134, value4:52888, value5:38805, value6:55498, value7:44985, value8:44913},
        {value:"Estimate", value1:40000, value2:30000, value3:30000, value4:45000, value5:40000, value6:40000, value7:45000, value8:45000}
    ]);

public function getVizualizerColor(data:Object):int
{
    if (data.Actual >= data.Estimate)
        return 0x47e056;
    return 0xd67b99;
}

public function getTreemapColor(data:Object):Number
{
    return (data.Actual / (2*data.Estimate));
}

]]>
</mx:Script>	
<mx:VBox left="0" top="0" right="0" bottom="0">
	<mx:Label x="0" y="0" text="Sales Dashboard" width="100%" textAlign="center" fontFamily="Arial" fontSize="18" color="#1049EC" fontWeight="bold"/>
    <KapVisualizer:Visualizer 
        backgroundColor="0xFFFFFF" 
        id="visualizer" 
        layout="{com.kapit.visualizer.LayoutConstants.HIERARCHICAL_TREE_LAYOUT}"
        labelFields="['name','Actual','Estimate']"
        labelTitles="['Name:','Actual:','Estimate:']"
        dataProvider="{myDataProvider}" 
        coloringFunction="getVizualizerColor"
        width="100%" height="100%"/>	
    <mx:HBox width="100%" height="100%">
    <Treemap:Treemap
    	id="treemap"
    	dataProvider="{myDataProvider}"
    	labelField="name"
    	areaField="Estimate"
    	colorFunction="getTreemapColor"
    	colorPolicy="monochromatic"
    	firstColor="0x47e056"
     width="100%" height="100%"/>
    <mx:VBox width="100%" height="100%" backgroundColor="0xFFFFFF">
    <RadarChart:RadarChart id="radarchart" seriesField="value" showGraduations="false" dataProvider="{myKiviatProvider}" width="100%" height="100%">
        <RadarChart:series>
            <RadarChart:RadarChartSeries id="actualSeries"  name="Actual" label="Actual" color="0x47e056"/>
            <RadarChart:RadarChartSeries id="estimateSeries" name="Estimate" label="Estimate" color="0xd67b99"/>
        </RadarChart:series>
        <RadarChart:axes>
            <RadarChart:RadarChartAxis id="axis1" min="0" max="50000" name="value1" label="Barbara Jennings"/>
            <RadarChart:RadarChartAxis id="axis2" min="0" max="50000" name="value2" label="Dana Binn"/>
            <RadarChart:RadarChartAxis id="axis3" min="0" max="50000" name="value3" label="Joe Smith"/>
            <RadarChart:RadarChartAxis id="axis4" min="0" max="50000" name="value4" label="Bethany Pittman"/>
            <RadarChart:RadarChartAxis id="axis5" min="0" max="50000" name="value5" label="Lauren Ipsum"/>
            <RadarChart:RadarChartAxis id="axis6" min="0" max="50000" name="value6" label="T.R. Smith"/>
            <RadarChart:RadarChartAxis id="axis7" min="0" max="50000" name="value7" label="Alice Treu"/>
            <RadarChart:RadarChartAxis id="axis8" min="0" max="50000" name="value8" label="Jane Grove"/>
        </RadarChart:axes>
    </RadarChart:RadarChart>
    <RadarChart:RadarChartSeriesLegend radarChart="{radarchart}" />
    </mx:VBox>	
   </mx:HBox>
</mx:VBox>		
</mx:Application>

If you compile this code, you should see the dashboard in Figure 6.

The dashboard of the sales manager prototype.

Figure 6. The dashboard of the sales manager prototype.

To improve this prototype, you can:

Diagrammer: SVG is back for good

I have some good news. SVG is back. I discovered that the Kap IT Diagrammer component uses SVG to define sprites. That means you can easily integrate complex shapes, created with Adobe Illustrator software for instance, into the Diagrammer. On the other side, this component enables you to export a diagram to SVG for printing (see Figure 7). The Kap Lab site has a complete tutorial that explains how to create an SVG shapes library, paste that library into your Flex project as an XML tag, and use the Diagrammer component to display the library. This is nothing short of amazing.

The Diagrammer component.

Figure 7. The Diagrammer component.

Get started

This is just an overview of what you can do with Kap Lab components. I am happy to use components developed by the community, especially when they meet developer and business expectations. And the Kap Lab team welcomes your feedback, so check out the new lab, and let them know what you think.

‹ Back


Based in Paris, Michael Chaize is an Adobe systems engineer who specializes in Adobe LiveCycle and Flex development.