Simple Flex2 Calender with a TileList and a CFC

February 28th, 2006

Here is the main application in Flex:

Main.mxml:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute"
  3.     creationComplete="svc.getCalendar()">
  4.    
  5.     <mx:Canvas id="BaseCanvas" label="Mobile Calendar">
  6.         <mx:layoutConstraints>
  7.             <mx:Anchor left="10" right="10" top="10" bottom="10"/>
  8.         </mx:layoutConstraints>
  9.        
  10.         <mx:Panel layout="vertical" id="panel_01" title="Mobile Calendar" width="100%" x="10" height="100%" y="10" horizontalAlign="center">
  11.             <mx:HBox>
  12.                 <mx:Button label="Janurary" id="nextMonthBtn" click="svc.getCalendar(1,2006)">
  13.                 </mx:Button>
  14.                 <mx:Button label="April" id="nextMonthBtn0" click="svc.getCalendar(4,2006)">
  15.                 </mx:Button>
  16.                 <mx:Button label="March" id="nextMonthBtn1" click="svc.getCalendar(3,2006)">
  17.                 </mx:Button>
  18.                 <mx:Button label="Februrary" id="nextMonthBtn2" click="svc.getCalendar(2,2006)">
  19.                 </mx:Button>
  20.                 <mx:Button label="Get Date" id="getDate" click="svc.getDate()">
  21.                 </mx:Button>
  22.             </mx:HBox>
  23.             <mx:TileList width="702" height="502" dataProvider="{dateArray}"
  24.                 vScrollPolicy="off"
  25.                 listItemRenderer="DateBox" columnWidth="100" rowHeight="100"></mx:TileList>
  26.    
  27.         </mx:Panel>
  28.     </mx:Canvas>
  29.    
  30.     <mx:Script>
  31.         <![CDATA[
  32.             import mx.rpc.events.*;
  33.             import mx.collections.ArrayCollection;
  34.             import mx.controls.Alert;
  35.             import mx.utils.ObjectUtil;
  36.                        
  37.             [Bindable]
  38.             public var dateArray:ArrayCollection;
  39.  
  40.             // getString() result handler         
  41.             public function resultHandler(event:ResultEvent):void
  42.             {
  43.                 dateArray = new ArrayCollection(event.result);
  44.             }
  45.  
  46.             // getString() result handler         
  47.             public function getDateResultHandler(event:ResultEvent):void
  48.             {
  49.                 Alert.show( ObjectUtil.toString( event.result ) );
  50.             }         
  51.         ]]>
  52.     </mx:Script>
  53.  
  54.     <!-- CFC interface -->
  55.     <mx:RemoteObject id="svc" destination="ColdFusionAll"
  56.                     source="flex"
  57.                     showBusyCursor="true"
  58.                     >
  59.         <mx:method name="getCalendar"
  60.                     result="resultHandler(event)"/>     
  61.         <mx:method name="getDate"
  62.                     result="getDateResultHandler(event)"/>   
  63.     </mx:RemoteObject>
  64.  
  65.    
  66. </mx:Application>

DateBox.mxml (the listItemRenderer component):

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:VBox xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
  3.     borderStyle="solid"
  4.     verticalAlign="top" creationComplete="onResult( dataObject )">
  5.  
  6.      <mx:Script>
  7.          <![CDATA[
  8.              import mx.controls.Alert;
  9.              import mx.rpc.events.ResultEvent;
  10.              import mx.utils.ObjectUtil;
  11.  
  12.              private function onResult( db:Object ) {
  13.                 if( dataObject.dayofweek == 1 || dataObject.dayofweek == 7 )
  14.                     this.setStyle( "backgroundColor", 0xEEEEEE );
  15.              //Alert.show( ObjectUtil.toString( db ) );
  16.        }
  17.          ]]>
  18.      </mx:Script>
  19.    
  20.     <mx:HBox width="100%">
  21.         <mx:Spacer width="100%"/>
  22.         <mx:Text text="{ dataObject.day }"/>   
  23.     </mx:HBox>
  24.    
  25. </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:

PLAIN TEXT
XML:
  1. <cfcomponent>
  2.  
  3.     <cfproperty name="month" type="numeric" />
  4.     <cfproperty name="year" type="year" />
  5.     <cfproperty name="calendarDate" type="date" />
  6.     <cfproperty name="calendar" type="array" />
  7.    
  8.     <cfscript>
  9.             this.month = month(now());
  10.             this.year = year(now());
  11.             this.calendarDate = createDate(this.year,this.month,1); 
  12.             this.calendar = arrayNew(1);
  13.            
  14.             init();
  15.     </cfscript>
  16.    
  17.     <cffunction name="init" output="false" access="private" returntype="void">
  18.    
  19.         <cfscript>
  20.             while (dateCompare(theDay,endDay,"d") NEQ 1)
  21.             {
  22.                
  23.                 dayObject = StructNew();
  24.                 dayObject.day = day( theDay );
  25.                 dayObject.dayOfWeek = DayOfWeek( theDay );
  26.                 arrayAppend( this.calendar, dayObject );
  27.            
  28.                 theDay = dateAdd("d",1,theDay);
  29.             }
  30.        
  31.         </cfscript>
  32.     </cffunction>   
  33.    
  34.     <cffunction name="getDate" output="false" access="remote" returntype="string">
  35.         <cfreturn dateFormat(NOW(),"dd mmmm yyyy")>
  36.     </cffunction>
  37.    
  38.     <cffunction name="getCalendar" output="false" access="remote" returntype="array">
  39.         <cfargument name="month" required="no" type="numeric" default="#month(now())#"/>
  40.         <cfargument name="year" required="no" type="numeric" default="#year(now())#"/>
  41.        
  42.         <cfscript>
  43.             this.month = arguments.month;
  44.             this.year = arguments.year;
  45.             this.calendarDate = createDate(this.year,this.month,1); 
  46.            
  47.             this.calendar = arrayNew(1);
  48.            
  49.             init();
  50.         </cfscript>
  51.        
  52.         <cfreturn this.calendar />
  53.     </cffunction>
  54.  
  55.  
  56. </cfcomponent>

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

Entry Filed under: Adobe Flex, ColdFusion MX 7

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Disclaimer: I work as a Flash/Flex Developer for Adobe Systems Incorporated. The opinions expressed here represent my own and not those of my employer.

My Amazon.com Wish List

Calendar

February 2006
S M T W T F S
« Dec   Mar »
 1234
567891011
12131415161718
19202122232425
262728  

Most Recent Posts


Flex.org - The Directory for Flex