Simple Flex2 Calender with a TileList and a CFC
Here is the main application in Flex:
Main.mxml:
XML:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute"
-
creationComplete="svc.getCalendar()">
-
-
<mx:Canvas id="BaseCanvas" label="Mobile Calendar">
-
<mx:layoutConstraints>
-
<mx:Anchor left="10" right="10" top="10" bottom="10"/>
-
</mx:layoutConstraints>
-
-
<mx:Panel layout="vertical" id="panel_01" title="Mobile Calendar" width="100%" x="10" height="100%" y="10" horizontalAlign="center">
-
<mx:HBox>
-
<mx:Button label="Janurary" id="nextMonthBtn" click="svc.getCalendar(1,2006)">
-
</mx:Button>
-
<mx:Button label="April" id="nextMonthBtn0" click="svc.getCalendar(4,2006)">
-
</mx:Button>
-
<mx:Button label="March" id="nextMonthBtn1" click="svc.getCalendar(3,2006)">
-
</mx:Button>
-
<mx:Button label="Februrary" id="nextMonthBtn2" click="svc.getCalendar(2,2006)">
-
</mx:Button>
-
<mx:Button label="Get Date" id="getDate" click="svc.getDate()">
-
</mx:Button>
-
</mx:HBox>
-
<mx:TileList width="702" height="502" dataProvider="{dateArray}"
-
vScrollPolicy="off"
-
listItemRenderer="DateBox" columnWidth="100" rowHeight="100"></mx:TileList>
-
-
</mx:Panel>
-
</mx:Canvas>
-
-
<mx:Script>
-
<![CDATA[
-
import mx.rpc.events.*;
-
import mx.collections.ArrayCollection;
-
import mx.controls.Alert;
-
import mx.utils.ObjectUtil;
-
-
[Bindable]
-
public var dateArray:ArrayCollection;
-
-
// getString() result handler
-
public function resultHandler(event:ResultEvent):void
-
{
-
dateArray = new ArrayCollection(event.result);
-
}
-
-
// getString() result handler
-
public function getDateResultHandler(event:ResultEvent):void
-
{
-
Alert.show( ObjectUtil.toString( event.result ) );
-
}
-
]]>
-
</mx:Script>
-
-
<!-- CFC interface -->
-
<mx:RemoteObject id="svc" destination="ColdFusionAll"
-
source="flex"
-
showBusyCursor="true"
-
>
-
<mx:method name="getCalendar"
-
result="resultHandler(event)"/>
-
<mx:method name="getDate"
-
result="getDateResultHandler(event)"/>
-
</mx:RemoteObject>
-
-
-
</mx:Application>
DateBox.mxml (the listItemRenderer component):
XML:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:VBox xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
-
borderStyle="solid"
-
verticalAlign="top" creationComplete="onResult( dataObject )">
-
-
<mx:Script>
-
<![CDATA[
-
import mx.controls.Alert;
-
import mx.rpc.events.ResultEvent;
-
import mx.utils.ObjectUtil;
-
-
private function onResult( db:Object ) {
-
if( dataObject.dayofweek == 1 || dataObject.dayofweek == 7 )
-
this.setStyle( "backgroundColor", 0xEEEEEE );
-
//Alert.show( ObjectUtil.toString( db ) );
-
}
-
]]>
-
</mx:Script>
-
-
<mx:HBox width="100%">
-
<mx:Spacer width="100%"/>
-
<mx:Text text="{ dataObject.day }"/>
-
</mx:HBox>
-
-
</mx:VBox>
Finally but not least the CFC file (this example assumes that you setup the Flex/ColdFusion connectivity with a destination named ColdFusionAll).
flex.cfc:
XML:
-
<cfcomponent>
-
-
<cfproperty name="month" type="numeric" />
-
<cfproperty name="year" type="year" />
-
<cfproperty name="calendarDate" type="date" />
-
<cfproperty name="calendar" type="array" />
-
-
<cfscript>
-
this.month = month(now());
-
this.year = year(now());
-
this.calendarDate = createDate(this.year,this.month,1);
-
this.calendar = arrayNew(1);
-
-
init();
-
</cfscript>
-
-
<cffunction name="init" output="false" access="private" returntype="void">
-
-
<cfscript>
-
while (dateCompare(theDay,endDay,"d") NEQ 1)
-
{
-
-
dayObject = StructNew();
-
dayObject.day = day( theDay );
-
dayObject.dayOfWeek = DayOfWeek( theDay );
-
arrayAppend( this.calendar, dayObject );
-
-
theDay = dateAdd("d",1,theDay);
-
}
-
-
</cfscript>
-
</cffunction>
-
-
<cffunction name="getDate" output="false" access="remote" returntype="string">
-
<cfreturn dateFormat(NOW(),"dd mmmm yyyy")>
-
</cffunction>
-
-
<cffunction name="getCalendar" output="false" access="remote" returntype="array">
-
<cfargument name="month" required="no" type="numeric" default="#month(now())#"/>
-
<cfargument name="year" required="no" type="numeric" default="#year(now())#"/>
-
-
<cfscript>
-
this.month = arguments.month;
-
this.year = arguments.year;
-
this.calendarDate = createDate(this.year,this.month,1);
-
-
this.calendar = arrayNew(1);
-
-
init();
-
</cfscript>
-
-
<cfreturn this.calendar />
-
</cffunction>
-
-
-
</cfcomponent>
Now if I can find a place to host the ColdFusion stuff I could put up the example.
Add comment February 28th, 2006
