Simple Flex2 Calender with a TileList and a CFC

Posted on February 28, 2006 | Comments Off

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>

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>

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>

Now if I can find a place to host the ColdFusion stuff I could put up the example.