4. Using the DateChooser component in Flash MX 2004
We just need the pre-installed DateChooser component in our flash movie. Nothing more.
So, drag the DateChooser component from the UI component of your Flash mx 2004 program and give it the instancename of "calendar" .
Now create 3 layers above the current: "AMFPHP","syles" and "listener". I prefer to separate the different actions in different layers.
4.1 Customize the Component
In the "styles" layer just put some code for customize the component:
this.calendar.setStyle("fontSize", "10")
this.calendar.setStyle("embedFonts", false)
this.calendar.setStyle("fontFamily", "Georgia")
this.calendar.setStyle("fontWeight ", "bold")
this.calendar.setStyle("borderColor ", 0xFFFFFF)
this.calendar.setStyle("borderStyle", "none")
this.calendar.setStyle("themeColor", "haloBlue")
this.calendar.setStyle("disabledColor", 0x999999)
this.calendar.setStyle("color", 0x000000)
4.2 Add a Event Listener to the Calendar
// -----------------------
// Calendar EVENT Listener
// -----------------------
objInit = new Object();
// When month cnages
objInit.scroll = function(obj){
callServ(obj.target.displayedMonth,obj.target.displayedYear);
}
// click on a date item
objInit.change = function(obj){
var d:Date = obj.target.selectedDate
var mm = d.getMonth() + 1
mm = mm < 10 ? "0" add mm : mm
var yy = d.getFullYear()
var dd = d.getDate()
dd = dd < 10 ? "0" add dd : dd
// open the browser passing the selected date as GET param
getURL("/index.php?blogId=" add yy add "_" add mm add "_" add dd add "_weekly.html")
}
// ---------------------------------
// Make the remoting call
// ---------------------------------
function callServ(m,y){
serv.findBlogByDatePK(m + 1, y);
this.calendar.enabled = false
}
// ---------------------------
// call the service first time
// ---------------------------
callServ(this.calendar.displayedMonth, this.calendar.displayedYear);
// ----------------------
// add the event listener
// ----------------------
this.calendar.addEventListener("scroll", objInit);
this.calendar.addEventListener("change", objInit);
-------
So first we've created an Object listener "objInit" for the DateChooser Component events, and at the end we've assigned to the component itself with the command addEvetListener.
This object event has 2 methods:
- scroll: this make an action when user click on the arrows for change the month displayed. This just call the remoting service passing as params the month and year to be displayed
- change: a day in the compoonent has been selected. This check the date selected and compose an URL string to be passed as GetURL
The callServ function make calls the findBlogByDatePK on the remoting service and makes the calendar disabled in the meantime. We increase the month param by one because flash starts from '0' to calculate month values, while the files saved in our blog directory has the standard month values, starting fom 1 to 12.
4.3 AMFPHP services
#include "NetServices.as"
#include "NetDebug.as"
// -----------------------
// AMFPHP Object Responder
// -----------------------
myDC = {};
myDC.scope = this
// listener for findBlogByDatePK service call
myDC.findBlogByDatePK_Result = function(data){
// enable the calendar again
this.scope.calendar.enabled = true
// disabled dates array
var dRanges = new Array();
// enabled dates array - lenght 31
var eRanges = new Array(31);
for(var a in data){
// put the date available as key in the enabled dates array
eRanges[int(data[a])] = true;
}
// walk in the enabled array
for(var a = 1; a <= eRanges.length; a++){
// format a new date
var sDate = new Date(this.scope.calendar.displayedYear, this.scope.calendar.displayedMonth, int(a));
// if value is not true this date is not available
if(eRanges[a] != true){
dRanges.push({rangeStart: sDate, rangeEnd: sDate});
}
}
// apply disabled dates
this.scope.calendar.disabledRanges = dRanges;
}
// ----------------------------
// Make the Remoting Connection
// ----------------------------
if(gatewayURL == undefined){
gatewayURL = "http://localhost/flashservices/gateway.php";
}
NetServices.setDefaultGatewayUrl (gatewayURL);
conn = NetServices.createGatewayConnection ();
// select the service to be consumed
serv = conn.getService ("DateChooser", myDC);
Ok, analyze it now!
First create a default responder for any remoting call "myDC" and assign it the current scope with myDC.scope = this .
In fact we will assign this responder to the current remoting service at the end:
serv = conn. getService (" DateChooser ", myDC);
This means that all the response request to the DateChooser.php file will be redirected to the myDC functions.
This function :
myDC.findBlogByDatePK_Result = function ( data ){
will be called when the server get a result response due to a call to the remote method findBlogByDatePK. and it's in this function that we will enable/disable certain dates in our calendar.
In fact:
first create two different arrays:
var dRanges = new Array ();
the array containing all the disabled dates
var eRanges = new Array (31);
the array (lenght = 31) of all the enabled dates
Now, get all the data argument passed values and assign them as key of our eRanges array (giving them the value true)
for ( var a in data ){
eRanges[ int ( data [a])] = true ;
}
For every element of the eRanges array (31 elements... max length of a month days), create a new Date variable and set its value corrsponding to the key number of the current eRanges array. This means: for every key of the eRanges arra (from 1 to 31) create a Date variables with the data value from 1 to 31.
if the current key element, in the eRanges array (we populated it in the previoius for loop, remember?) is not true, we append this value in the dRanges array:
for ( var a = 1; a <= eRanges. length ; a++){
var sDate = new Date ( this .scope.calendar.displayedYear, this .scope.calendar.displayedMonth, int (a));
if (eRanges[a] != true ){
dRanges. push ({rangeStart: sDate, rangeEnd: sDate});
}
}
So, finally we can assign to the component the disabled dates, using a property of the component itself:
this .scope.calendar.disabledRanges = dRanges;
