In this section we will learn how to incorporate widgets in your Flex applications. Unlike the charts from FusionCharts pack, each widget (gauges, charts and graphs) is unique in nature, structure and configuration. Due to this, we create individual section for each widget, explain the features offered by each widget and the XML required to implement the features in Flex applications. Please note that due to the unique XML structure of each widget, FusionWidgets does not support Flex data structures. Widgets can only accept XML data either from a file (URL) or form a String. Each widget section begins with a simple example and then proceeds to explain, in details, various methods to customize the widgets.
The section also provides illustrative examples that are designed to help you learn the method of implementing features such as real-time updates, message loggers and alert managers. The real time updates is perhaps the best feature of the widgets, which allows you to the chart data in real time, without reloading the data. You will also learn about the alert manager and the message logger facility, which are associated with real time updates.
To start off things, we will show you a little example of creating a widget. Creating a widget can be accomplished in three easy steps:
We will be creating a linear gauge for our example. This linear gauge would show "Cost Per Download". Let's begin by creating the XML:
The XML data for the chart would look as under:
<Chart lowerLimit='0' upperLimit='30'
gaugeRoundRadius='5' showGaugeBorder='1' bgColor='FFFFFF'
numberPrefix='$'>
<colorRange>
<color minValue='0' maxValue='30' name='Cost Per Download' />
</colorRange>
<pointers>
<pointer value='17.9' borderColor='000000' borderThickness='0' bgColor='FF5904' toolText='My cost' />
</pointers>
</Chart>
In the above XML, we have:
First, complete the basic setup, as discussed in the installation section. After creating a new project in Flex Builder open the source view, you'll find that the following code has been automatically generated.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*"> </mx:Application>
Next, switch to the Design
view
. Here, you will find a custom component named FusionCharts in the Component Window. Now, follow these steps to create the linear gauge:
FusionWidgets
custom component and drop it onto the stage. You will find that a control with FusionWidgets logo has been created on the stage.Category View
option and then choose the 'FusionWidgets' group.The equivalent code in Source
view should be:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*">
<ns1:FusionWidgets x="10" y="10" FCChartType="HLinearGauge"/>
</mx:Application>
After this, you need to bind the XML to the widget. You can either specify the path of the data using FCDataURL property, or you can bind the a Flex String to the FCDataXML property. Here, we will bind the data to a string. The resultant code should be as follows:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*"> <ns1:FusionWidgets x="10" y="10" width="400" height="100" FCChartType="HLinearGauge" FCDataXML="{dataXML}"/> <mx:Script> <![CDATA[ [Bindable] private var dataXML:String = "<Chart lowerLimit='0' upperLimit='30' " + " numberPrefix='$'>" + "<colorRange>" + " <color minValue='0' maxValue='30' name='Cost Per Download' />" + "</colorRange>" + "<pointers>" + " <pointer value='17.9' bgColor='FF5904' />" + "</pointers>" + "</Chart>"; ]]> </mx:Script> </mx:Application>
Now just run the application and you should get a widget looking like this: