usionWidgets v3 introduces a new concept of streaming. It shows real-time messages in the gauge using "Message Logger". The Message logger is effectively used to show necessary real-time information or live error logs.
In our example we will be providing a real-time data-feed in our XML which provides us with messages at a regular interval. We will also be adding controls to show or hide the message. With this we will learn the the format of the data specified in the data-feed stream. So lets get right into how it's done.
FusionWidgets allow to update your gauge data simply by specifying it in the XML. All you need to do is provide an URL for your application, which acts as a streaming-data source. Also, you need to specify the time interval in which to update your gauges. By performing these two simple things, your gauges will automatically update to reflect real-time data.
In the following XML we create a simple widget application that updates its data from a web page in every 3 seconds. The data stream is also formatted to provide messages. The data source URL provides data in FusionWidgets streaming-data format. The XML looks as follows:
<chart messageGoesToFlex='1' useMessageLog='1'
lowerLimit='0' upperLimit='100' gaugeStartAngle='180' gaugeEndAngle='0'
dataStreamURL='DataFeed.jsp' refreshInterval='3'>
<dials>
<dial value='43'/>
</dials>
</chart>
In the above code, we have specified the refreshInterval and dataStreamURL attributes, which specify the update cycle time and the data source respectively. The data is fetched automatically from the URL provided and refreshes in every 3 seconds.
In order to display the message-logger useMessageLog attribute is enabled. Along with it messageGoesToFlex attribute is also enabled in order to register a FCMessageEvent event in Flex.
The real-time data is provided either by the URL specified as dataStreamURL attribute or by the Flex API. This streaming-data format should essentially be in text format WITHOUT containing any HTML tags or carriage returns. Here, we'll explain the required format.
We use the following format to send messages to our widget:
value=20&msgTitle=Server Time&msgText=Fri Jun 05 09:10:13 IST 2009
Here, we're just sending the current system time as our message-text. The message-text is determined by the msgText parameter. And we also send a message-title "Server Time" with our msgTitle parameter.
To learn more about streaming-data message format please visit the Streaming messages
page in this section
Finally we will be adding contols to our existing application to manipulate the message logger. We will only be adding controls to show or hide the log. To fully exploit the message-logger capabilities of FusionWidgets, visit the "Flex API
" page in this section.
In the following code we add two buttons and also declare the necessary functions to manipulate the update with the buttons.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:fw="com.fusionwidgets.components.*">
<fw:FusionWidgets id="fw" FCDataURL="Data.xml" FCChartType="AngularGauge" x="10" y="10" />
<mx:Button label="Hide Log" click="fw.FCHideLog()" x="10" y="218"/>
<mx:Button label="Show Log" click="fw.FCShowLog()" x="131" y="218"/>
</mx:Application>
If you notice, we declare the id of angular gauge as fw. We also declare two buttons and call upon FCShowLog() and FCHideLog() methods of our widget. These methods directly manipulate the widget object to show or hide the message logger.
The resulting MXML application would look as follows: