Flex Chart inside GWT Page

Hello All, Today i want to talk about getting GWT to Work with Flex Charts.

We are going to tackle this from two sides. We will first talk about creating simple Flex Chart and then we will embed that in to GWT module.

In order to create a simple Flex Chart you would be needing Flex Builder from Adobe. You can download latest trial version from here. Flex Builder is built on eclipse platform, so if you are comfortable with eclipse, you should feel comfortable with Flex Builder. When i evaluated it, it only took me an hour to get familiar with.

Once you have it up an running, Create new Flex Project from File-> New-> Flex Project.

This will create a sample .mxml file, this is basically where you code your flex Chart.

I am first going to spit the content for .mxml file and then our Gwt Module to access this chart.

Note : As my intention here is to talk about GWT and show how Flex Chart can be used with GWT. So i am not going to explain this code below in detail, Just Play closer attention to Highlighted code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" styleName="myApplication" xmlns:ns1="bridge.*">
<mx:Script>
<![CDATA[
import mx.collections.*;
<!-- [Bindable] basically is saying we are binding the variable below to some component. In our case its Column Chart -->
[Bindable]
public var stateArray:ArrayCollection;

public function initData():void {
stateArray=new ArrayCollection( [
{ Profit: getRandomUint(100), Expenses: getRandomUint(10) },
{ Profit: getRandomUint(100), Expenses: getRandomUint(10) },
{ Profit: getRandomUint(100), Expenses: getRandomUint(10) } ]);
}
private function getRandomUint(max:uint):uint {
return Math.round(Math.random() * max);
}

]]>
</mx:Script>
<!-- Define custom colors for use as plot point fills. -->
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>


<!-- Define custom Strokes. -->
<mx:Stroke id="s1" color="blue" weight="1"/>
<mx:Stroke id="s2" color="red" weight="1"/>
<mx:Stroke id="s3" color="green" weight="1"/>

<mx:SeriesSlide
id="slideIn"
duration="1000"
direction="up"
/>
<mx:SeriesSlide
id="slideOut"
duration="1000"
direction="down"
/>
<mx:SeriesInterpolate
id="interpol"
duration="1000"
elementOffset="0"
minimumElementDuration="200"
/>

<mx:ApplicationControlBar dock="true">
<mx:Button label="Change Data"
click="initData();" />
</mx:ApplicationControlBar>

<mx:ColumnChart name="columnchart" x="73" y="55" id="columnchartid" width="519" height="211" dataProvider="{stateArray}">
<mx:series>
<mx:ColumnSeries displayName="Plot 1" yField="Profit" xField="Expenses" fill="{sc1}" stroke="{s1}" showDataEffect="{slideIn}"
hideDataEffect="{slideOut}"/>
</mx:series>
</mx:ColumnChart>
<ns1:FABridge/>
</mx:Application>

When you execute above code in flex builder from Run Menu, it will create bunch of files. Couple that we are interested are .mxml and .swf, copy them in to your GWT module that you are creating. Refer to my previous post on how to create a basic GWT Module.

Now Lets see what goes in to GWT Module.

In order to use Flex Charts, you would basically need to use gwt-fabrdge.jar, this internally depends on gwt2swf-0.6.0.jar, Add them to your GWT module Classpath.

Lets first list out package structure and then i will explain in detail.

com/gwtbasics/gwtflex/gwtFlash.gwt.xml
com/gwtbasics/gwtflex/public/flexChart.mxml
com/gwtbasics/gwtflex/public/flexChart.swf
com/gwtbasics/gwtflex/client/GwtFlexModule.java
war/flexCharts.html

First lets talk gwtFlash.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtflex'>
<inherits name='com.google.gwt.user.User' />
<inherits name="pl.rmalinowski.gwt2swf.GWT2SWF"/>
<inherits name='org.argunet.gwt.fabridge.FABridge' />

<!-- Specify the app entry point class. -->
<entry-point class='com.gwtbasics.gwtflex.client.GwtFlexModule'/>
</module>

Most important is that the module inherits two packages namely GWT2SWF and FABridge.

Next in list is GwtGlexModule.java

package com.gwtbasics.gwtflex.client;

import org.argunet.gwt.fabridge.client.SWFABridgeWidget;

import pl.rmalinowski.gwt2swf.client.ui.SWFSettings;
import pl.rmalinowski.gwt2swf.client.utils.PlayerVersion;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class GwtFlexModule implements EntryPoint {
public void onModuleLoad() {
SWFSettings swfSettings = new SWFSettings();
swfSettings.setMinPlayerVersion(new PlayerVersion(9,0,124));
SWFABridgeWidget swfbridge = new SWFABridgeWidget("gwtflex/flexChart.swf", 800, 500, swfSettings, "sample");
swfbridge.setVisible(true);
VerticalPanel outer = new VerticalPanel();
outer.add(swfbridge);
RootPanel.get("flexChartWidget").add(outer);
}
}

All we need now is the html file to call this GWT module.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
</style>
<title>Flex GWT Module Demo Starter Project</title>
<script type="text/javascript" language="javascript" src="gwtflex/gwtflex.nocache.js"></script>
</head>
<body>
<h1>Simple Column Chart from Flex</h1>
<div align=" center" id="statusLabel"></div>
<div align=" center" id="flexChartWidget"></div>
</body>
</html>

For this example you need to get gwtflex/gwtflex.nocache.js that gets created when you compile using GWT compiler.

If you are using Google Plugin for Eclipse, just right click on the project and run/debug as Web Application and you will see the result.
But if you have generated your application through webAppCreator, you can use ant build.xml to execute. Execute hosted ant task to invoke your app in hosted mode.

I hope you were able to successfully used flex chart inside GWT Page and enjoyed the experience of it.

Please stay tuned to my blog for more advanced implementation of GWT Flex Integration. In next Blog i will talk about passing dynamic content to Flex Chart from GWT Application.