Train Scheduler in Flex

This component is developed to illustrate the use and usage of most of the basic components.
The basic components that are used in this application are :

1. Labels
2. Image box
3. Combo box
4. Canvas
5. Check boxes
6. Timer
   
7. and Datagrid

The output of the application gets a look as

This is a simple example which gives us some detailed idea about the data binging between components. The check boxes in the canvas gets exchanged based upon the event of combo box.
A timer runs getting the local time from the system. Then a datagrid gets input from a xml file and shows it.
And the source for the above application comes here.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white" backgroundImage="@Embed(source='background.jpg')" alpha="0.49" cornerRadius="5" themeColor="#1884C9" xmlns:local="*" creationComplete="showTime()">
<mx:XMLList xmlns="" id="trainDetails">
<trains>
<name>bangalore Mail</name>
<number>2352</number>
<picture>vidhana-soudha-in-bangalore.jpg</picture>
</trains>
<trains>
<name>Kovai Express</name>
<number>4545</number>
<picture>kovai.jpg</picture>
</trains>
<trains>
<name>Nizamuddin Express</name>
<number>9320</number>
<picture>nizamiddin.jpg</picture>
</trains>
<trains>
<name>pandyan Express</name>
<number>2548</number>
<picture>panyan.jpg</picture>
</trains>
<trains>
<name>Rockfort Express</name>
<number>5896</number>
<picture>rockfort.jpg</picture>
</trains>
<trains>
<name>Mumbai Express</name>
<number>8569</number>
<picture>mumbai.jpg</picture>
</trains>
<trains>
<name>Cochin Express</name>
<number>1201</number>
<picture>cochin.jpg</picture>
</trains>
<trains>
<name>Secundrabad Express</name>
<number>8523</number>
<picture>secundrabad.jpg</picture>
</trains>
</mx:XMLList>

<mx:Script>
<![CDATA[
import mx.formatters.DateFormatter;
import mx.controls.Alert;

private var arrive:Array;
private var departure:Array;
private var ticker:Timer;
[Bindable] private var time:String;

public function showTime():void
{
var currentTime:Date = new Date();
var timeFormat:DateFormatter = new DateFormatter;
timeFormat.formatString = "KK:NN:SS"; //"HH:NN:SS" for 24hr clock
time=currentTime.hours+":"+currentTime.minutes+":"+currentTime.seconds;
ticker = new Timer(1,1);
ticker.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);
ticker.start();
}

public function onTimerComplete(event:TimerEvent):void{
showTime();
}

private function reshedule(event:Event):void{
arrive=arrivalForm.getChildren();
departure=departureForm.getChildren();
if(schedulerCB.selectedLabel=="Move to Departures"){
for each(var aname:CheckBox in arrive){
if(aname.selected==true){
arrivalForm.removeChild(aname);
departureForm.addChild(aname)
aname.selected=false;
}
}
schedulerCB.selectedItem=action[0];
}
else if(schedulerCB.selectedLabel=="Move To Arrivals"){
for each(var dname:CheckBox in departure){
if(dname.selected==true){
departureForm.removeChild(dname);
arrivalForm.addChild(dname);
dname.selected=false;
}
}
schedulerCB.selectedItem=action[0];
}
}

private function selectAll(event:Event):void{
if(event.currentTarget.id=="arrivalAllLB"){
arrive=arrivalForm.getChildren();
for each(var status:CheckBox in arrive)
status.selected=true;
}
else{
departure=departureForm.getChildren();
for each(var status:CheckBox in departure)
status.selected=true;
}
}

private function selectNone(event:Event):void{
if(event.currentTarget.id=="arrivalNoneLB"){
arrive=arrivalForm.getChildren();
for each(var status:CheckBox in arrive)
status.selected=false;
}
else{
departure=departureForm.getChildren();
for each(var status:CheckBox in departure)
status.selected=false;
}
}
]]>
</mx:Script>

<mx:Array id="action">
<mx:Object label="--SELECT--"/>
<mx:Object label="Move To Arrivals"/>
<mx:Object label="Move to Departures"/>
</mx:Array>
<mx:Canvas width="1328" height="658">
<mx:ComboBox x="414" y="109" id="schedulerCB" dataProvider="{action}" change="reshedule(event);" borderColor="#338CCA" color="#E88FA0"/>
<mx:Text x="164" y="43" text="SOUTHERN RAILWAYS TRAIN SCHEDULE " fontSize="36" fontFamily="Georgia" width="803" textDecoration="underline" fontStyle="italic" color="#F56C21" height="58"/>
<mx:Image x="57" y="25" source="Indian_Railways_logo.png"/>
<mx:Panel title="Train Details" paddingTop="10" paddingLeft="10" paddingRight="10" x="817" y="111" height="396" borderColor="#BA8383" width="501">
<mx:DataGrid id="databaseDG" width="450" height="100%" rowCount="5" dataProvider="{trainDetails}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="name"/>
<mx:DataGridColumn dataField="number" headerText="number"/>
</mx:columns>
</mx:DataGrid>

<mx:Form width="455" height="180" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:HBox width="435" height="163" >
<mx:VBox>
<mx:FormItem label="Individual Train Details" fontWeight="bold" fontSize="12">
</mx:FormItem>
<mx:FormItem label="Train Name" fontSize="12">
<mx:Label text="{databaseDG.selectedItem.name}" width="151"/>
</mx:FormItem>
<mx:FormItem label="Train Number" fontSize="12">
<mx:Label text="{databaseDG.selectedItem.number}"/>
</mx:FormItem>
</mx:VBox>
<mx:Image source="{databaseDG.selectedItem.picture}" width="176" height="140"></mx:Image>
</mx:HBox>
</mx:Form>
</mx:Panel>
<mx:Canvas id="arrivalCan" x="146" y="148" width="312" height="460">
<mx:Form id="arrivalForm" x="15" y="89" width="276" height="361" backgroundAlpha="1.0" backgroundColor="gray" borderColor="#B20808" color="#850303">
<mx:CheckBox id="bangloreCB" label="Bangalore Mail" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="kovaiCB" x="52" y="58" label="Kovai Express" color="#FFFFFF" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1"/>
<mx:CheckBox id="nizamCB" x="47" y="217" label="Nizamuddin Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="pandyCB" x="47" y="302" label="Pandyan Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
</mx:Form>
<mx:Label x="78" y="10" text="ARRIVALS" fontSize="27" fontWeight="bold"/>
<mx:Label x="62" y="61" text="Select:" fontSize="12" fontWeight="bold" color="#1C6DBF"/>
<mx:LinkButton id="arrivalAllLB" x="126" y="59" label="All" alpha="0.0" color="#1C6DBF" click="selectAll(event); "/>
<mx:LinkButton id="arrivalNoneLB" x="190" y="59" label="None" alpha="0.0" color="#1C6DBF" click="selectNone(event);"/>
</mx:Canvas>
<mx:Canvas id="departureCan" x="483" y="148" width="326" height="460">
<mx:Form id="departureForm" x="22" y="81" width="284" height="369" backgroundAlpha="1.0" backgroundColor="gray" borderColor="#B20808" color="#850303">
<mx:CheckBox id="rockfortCB" x="53" y="22" label="Rockfort Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="mumbaiCB" x="53" y="103" label="Mumbai Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="cochinCB" x="53" y="185" label="Cochin Express" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
<mx:CheckBox id="secudCB" x="53" y="266" label="Secundrabad Mail" borderColor="#09EB99" fontSize="21" fontFamily="Georgia" color="#FFFFFF" fillAlphas="[1.0, 1.0]" fillColors="[#090202, #090202]" themeColor="#DEF804" cornerRadius="10" alpha="1.0"/>
</mx:Form>
<mx:Label x="52" y="10" text="DEPARTURE" fontSize="28" fontWeight="bold"/>
<mx:Label x="37" y="59" text="Select:" fontSize="12" fontWeight="bold" color="#1C6DBF"/>
<mx:LinkButton id="departureAllLB" x="101" y="57" label="All" alpha="0.0" color="#1C6DBF" click="selectAll(event);"/>
<mx:LinkButton id="departureNoneLB" x="165" y="57" label="None" alpha="0.0" color="#1C6DBF" click="selectNone(event);"/>
</mx:Canvas>
<mx:Label x="949" y="42" text="TIME : {time}" fontSize="34" fontWeight="bold" textDecoration="underline"/>
</mx:Canvas>
</mx:Application>


If you find it difficult to trace the code, download the source of trainscheduler.mxml here and arrange the supporting file like the images for the different trains. Then that example must work fine.

Work it out and dont forget to comment me ..
Add Post To: | | | | | | | | |