Simple Flex2 Calender with a TileList and a CFC
Here is the main application in Flex:
Main.mxml:
<?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>
<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 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>
<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:
<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>
<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.
Recent Comments