So let's get right into the code and see how it is done.
Here, we are going to use a horinzontal LED graph for our example. We will create an XML file called HLED.xml and place it in our scr folder. The XML would be similar to the one shown below:
<chart chartBottomMargin='5' lowerLimit='0' upperLimit='100' lowerLimitDisplay='Low'
upperLimitDisplay='High' numberSuffix='%25' showTickMarks='1' tickValueDistance='0'
majorTMNumber='5' majorTMHeight='4' minorTMNumber='0' showTickValues='1'
decimalPrecision='0' ledGap='1' ledSize='1' ledBoxBgColor='333333'
ledBorderColor='666666' borderThickness='2' chartRightMargin='20' >
<colorRange>
<color minValue='0' maxValue='30' code='FF0000' />
<color minValue='30' maxValue='50' code='FFFF00' />
<color minValue='50' maxValue='100' code='00FF00' />
</colorRange>
<value>70</value>
<alerts>
<alert minValue='0' maxValue='25' action='callFlex' param='Red zone' />
</alerts>
</chart>
In the above code, we defined an alert to be set off between 0 to 25. The action='callFlex' code states that at every alert the FCAlertEvent will be generated. Also, param='Red zone' declaration makes sure that the string "Red zone" is passed as a parameter with the event.
We track the event and handle it in our Flex code.
We track the FCAlertEvent event like any other event. We attach the event handler alertTrack() to our FCAlertEvent in our FusionWidgets tag. The handler is a simple function, which retreives the parameter from the event and alerts it. Parallely we also update our gauge in real-time as we did in the previous real-time example. The entire MXML code would be similar to the one shown below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns2="com.fusionwidgets.components.*">
<ns2:FusionWidgets id="fw1" x="64" y="95" width="475" FCRenderEvent="rendered(event)" height="120"
FCChartType="HLED" FCDataURL="HLED.xml" FCAlertEvent="alertTrack(event)"/>
<mx:Script>
<![CDATA[
import com.events.FCEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.controls.Alert;
private var time:Timer;
private var isAlert:Boolean=true;
private function rendered(event:FCEvent):void {
time=new Timer(2000);
time.addEventListener(TimerEvent.TIMER, updater);
time.start();
}
private function updater(event:TimerEvent):void {
fw1.FCSetData(Math.random()*100);
}
private function alertTrack(e:FCEvent):void {
Alert.show(e.param);
}
]]>
</mx:Script>
</mx:Application>
After running the application, the alert would be displayed as folows: