Flex Scheduling Framework in Flex 4


Flex Scheduling Framework
Flex Scheduling Framework is a really cool tool that can be use for creating applications with calendar. Unfortunately, the framework does not work with Flex 4.0 framework. How can you fix that?

First of all, you have to download FSF from Adobe Labs. Instead of using swx binary, we will need source code located in src directory. I drag’n'dropped flexlib directory into src folder of my project. I had to modify three files: DottedVerticalLineRenderer.as, DottedHorizontalLineRenderer.as and LineRenderer.as from flexlib.scheduling.scheduleClasses.lineRenderer package. Inside all of those three classes I added a new get method for scaleMode():

		public function get scaleMode() : String
		{
			return this.scaleMode;
		}

I also added draw() method for all classes. For both Dotted*LineRenderer classes it was:

		public function draw(g:Graphics, rc:Rectangle) : void
		{
			GraphicUtils.drawDottedHorizontalLineTo(g, rc.y, rc.x, rc.x + rc.width);
			GraphicUtils.drawDottedHorizontalLineTo(g, rc.y + rc.height, rc.x, rc.x + rc.width);
			GraphicUtils.drawDottedVerticalLineTo(g, rc.x, rc.y, rc.y + rc.height);
			GraphicUtils.drawDottedVerticalLineTo(g, rc.x + rc.width, rc.y, rc.y + rc.height);
		}

for LineRenderer:

		public function draw(g:Graphics, rc:Rectangle) : void
		{
			g.moveTo(rc.x, rc.y);
			g.lineTo(rc.x + rc.width, rc.y);
			g.lineTo(rc.x + rc.width, rc.y + rc.height);
			g.lineTo(rc.x, rc.y + rc.height);
			g.lineTo(rc.x, rc.y);
		}

With those methods Flex Scheduling Framework becomes fully available. I slightly modified the most sophisticated example from Adobe Labs to Flex 4.0 AIR application:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:flexlib="http://code.google.com/p/flexlib/" xmlns:scheduling="flexlib.scheduling.*" creationComplete="onCreationComplete();">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
  <fx:Script>
      <![CDATA[
         import flexlib.scheduling.samples.ScheduleData; // was   import com.adobe.ac.scheduling.samples.ScheduleData;
         import flexlib.scheduling.scheduleClasses.SimpleScheduleEntry; // was import com.adobe.ac.controls.scheduleClasses.SimpleScheduleEntry;
         import flexlib.scheduling.scheduleClasses.BackgroundItem; // was import com.adobe.ac.controls.scheduleClasses.BackgroundItem;
         import flexlib.scheduling.util.DateUtil; //was import com.adobe.ac.util.DateUtil;
         import flexlib.scheduling.scheduleClasses.LayoutScrollEvent; // was import com.adobe.ac.controls.scheduleClasses.LayoutUpdateEvent;
         import mx.collections.IList;
         import mx.collections.ArrayCollection;
         import mx.controls.Alert;
         import mx.events.ScrollEvent;
         import mx.events.ScrollEventDirection;         

         [Bindable]
         private var dataProvider : IList;
         [Bindable]
         private var rowDataProvider : IList;
         [Bindable]
         private var startDate : Date;
         [Bindable]
         private var endDate : Date;
         [Bindable]
         private var zoom : Number;
         [Bindable]
         private var scheduleViewerWidth : Number = 600;
         [Bindable]
         private var scheduleViewerHeight : Number = 400;

         private function onCreationComplete() : void
         {
            setTimeframe();
            initDataProvider();
            initBackgroundColors();
            zoom = 250;
         }

         private function setTimeframe() : void
         {
            startDate = DateUtil.clearTime( new Date() );
            endDate = getEndDate( startDate );
         }

         private function getEndDate( startDate : Date ) : Date
         {
            var duration : Number = DateUtil.DAY_IN_MILLISECONDS * 1;
            var endDate : Date = new Date( startDate.getTime() + duration );
            return endDate;
         }

         private function initDataProvider() : void
         {
            dataProvider = new ScheduleData().createRowsOfSequentialColoredEntries( 150, 15 );
            rowDataProvider = new ArrayCollection();
            for( var i : int = 0; i <dataProvider.length; i++ )
            {
               rowDataProvider.addItem( { label: "Row " + ( i + 1 ) } );
            }
         }

         private function onZoom( value : Number ) : void
         {
            zoom = value;
         }

         private function onScrollTimeline( position : Number ) : void
         {
            scheduleViewer.xPosition = position;
         }

         private function onScrollScheduleViewer( event : ScrollEvent ) : void
         {
            if( event.direction == ScrollEventDirection.HORIZONTAL )
            {
               timeline.xPosition = event.position;
            }
         }

         private function scrollList( event : LayoutScrollEvent ) : void
         {
            if( event.direction == ScrollEventDirection.VERTICAL )
            {
               rowsList.verticalScrollPosition = event.position;
            }
         }         

         private function gotoNow() : void
         {
            var time : Date = new Date();
            scheduleViewer.moveToTime( time.getTime() - startDate.getTime() );
         }

         private function gotoSelectedEntry() : void
         {
            if( scheduleViewer.selectedItem != null )
            {
               scheduleViewer.moveToEntry( scheduleViewer.selectedItem );
            }
            else
            {
               warnAboutNoSelection();
            }
         }

         private function warnAboutNoSelection() : void
         {
            Alert.show( "Please select an entry." );
         }

         private function initBackgroundColors() : void
         {
            var result : ArrayCollection = new ArrayCollection();

            var duration : Number = endDate.getTime() - startDate.getTime();
            var days : Number = duration / DateUtil.DAY_IN_MILLISECONDS;

            for( var i : int; i <days; i++ )
            {
               var currentDate : Number = DateUtil.DAY_IN_MILLISECONDS * i;
               var backgroundItem : BackgroundItem;
               backgroundItem = createBackgroundItem( "office closed", 0xD5D4D0,
                                                   currentDate, 0, 0, 24, 0 );
               result.addItem( backgroundItem );

               backgroundItem = createBackgroundItem( "generell office hours", 0xFFFFFF,
                                                      currentDate, 9, 0, 17, 0 );
               result.addItem( backgroundItem );

               backgroundItem = createBackgroundItem( "lunchtime", 0xEEEDE9,
                                                      currentDate, 12, 0, 13, 0 );
               result.addItem( backgroundItem );
            }
            scheduleViewer.backgroundItems = result;
         }

         private function createBackgroundItem( description : String,
                                                color : Number, currentDate : Number,
                                                startHours : Number, startMinutes : Number,
                                                endHours : Number, endMinutes : Number ) : BackgroundItem
         {
            var backgroundItem : BackgroundItem = new BackgroundItem();
            backgroundItem.description = description;
            backgroundItem.color = color;
            backgroundItem.startDate = new Date( currentDate + createTime( startHours, startMinutes ) );
            backgroundItem.endDate = new Date( currentDate + createTime( endHours, endMinutes ) );
            return backgroundItem;
         }

         private function createTime( hours : Number, minutes : Number ) : Number
         {
            var result : Number = (( hours * 60 ) + minutes ) * 60 * 1000;
            return result;
         }
      ]]>
   </fx:Script>

   <mx:VBox verticalGap="0">
      <mx:VBox height="{ timeline.height }" verticalGap="0">
         <mx:Label text="Rows"/>
      </mx:VBox>
      <mx:List
         id="rowsList" width="60" height="{ scheduleViewerHeight }"
         dataProvider="{ rowDataProvider }"
         rowHeight="{ scheduleViewer.rowHeight }"
         verticalScrollPolicy="off"/>
   </mx:VBox>

   <mx:VBox verticalGap="0">
      <scheduling:Timeline
         id="timeline"
         width="{ scheduleViewerWidth }" borderStyle="none"
         startDate="{ startDate }" endDate="{ endDate }"
         zoom="{ zoom }"
         scroll="onScrollTimeline( event.position );"
         />

      <scheduling:ScheduleViewer
         dottedGridLines="true"  // new
         horizontalGridLineColor="#000000" // new
         verticalGridLineColor="#000000" // new
         horizontalGridLineAlpha="100"  // new
         horizontalGridLineThickness="1"  // new
         verticalGridLineThickness="1" // new
         verticalGridLineAlpha="100" // new
         id="scheduleViewer"
         width="{ scheduleViewerWidth }" height="{ scheduleViewerHeight }" borderStyle="none"
         dataProvider="{ dataProvider }"
         startDate="{ startDate }" endDate="{ endDate }"
         zoom="{ zoom }"
         horizontalScrollPolicy="off"
         entryRenderer="flexlib.scheduling.scheduleClasses.renderers.ColoredGradientScheduleEntryRenderer"
         entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout"
         pixelScroll="onScrollScheduleViewer( event );" itemScroll="scrollList( event )"
         />
      <mx:HBox width="{ scheduleViewerWidth }" paddingTop="6">
         <mx:Label text="Goto:"/>
         <mx:Button label="Now" click="gotoNow();"/>
         <mx:Button label="Selected" click="gotoSelectedEntry();"/>
         <mx:Spacer width="100%"/>
         <mx:Label text="Zoom:"/>
         <mx:HSlider
            id="zoomSlider"
            minimum="0" maximum="1000" value="{ zoom }"
            snapInterval="1" liveDragging="true"
            change="onZoom( zoomSlider.value );" />
      </mx:HBox>
   </mx:VBox>
</s:WindowedApplication>
  1. #1 by AJIT DIXIT at January 27th, 2010

    Thank you for this post
    Excellent

    Can you have some good posts on Examples & Usages (Advanced) if scheduling framework with sample projects

    Regards ,

    AJIT

  2. #2 by AJIT DIXIT at January 28th, 2010

    I have tried this example with latest build of Flex SDK I am getting following errors

    escription Resource Path Location Type
    1044: Interface method createGraphicsStroke in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedHorizontalLineRenderer. DottedHorizontalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method createGraphicsStroke in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedVerticalLineRenderer. DottedVerticalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method createGraphicsStroke in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:LineRenderer. LineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 40 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get joints in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedHorizontalLineRenderer. DottedHorizontalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get joints in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedVerticalLineRenderer. DottedVerticalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get joints in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:LineRenderer. LineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 40 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get miterLimit in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedHorizontalLineRenderer. DottedHorizontalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get miterLimit in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:DottedVerticalLineRenderer. DottedVerticalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1044: Interface method get miterLimit in namespace mx.graphics:IStroke not implemented by class flexlib.scheduling.scheduleClasses.lineRenderer:LineRenderer. LineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 40 Flex Problem
    Description Resource Path Location Type
    1144: Interface method apply in namespace mx.graphics:IStroke is implemented with an incompatible signature in class flexlib.scheduling.scheduleClasses.lineRenderer:DottedHorizontalLineRenderer. DottedHorizontalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1144: Interface method apply in namespace mx.graphics:IStroke is implemented with an incompatible signature in class flexlib.scheduling.scheduleClasses.lineRenderer:DottedVerticalLineRenderer. DottedVerticalLineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 42 Flex Problem
    Description Resource Path Location Type
    1144: Interface method apply in namespace mx.graphics:IStroke is implemented with an incompatible signature in class flexlib.scheduling.scheduleClasses.lineRenderer:LineRenderer. LineRenderer.as FlexLibTestAIR/src/flexlib/scheduling/scheduleClasses/lineRenderer line 40 Flex Problem

    I am learning scheduling framework and apply in Flex 4
    Can you suggest solution?

    Regards ,

    AJIT

  3. #3 by Elvis Fernandes at February 3rd, 2010

    Hi!

    Do you know what happened to the FSF? It seems that there are issues oppened since 2007 (http://code.google.com/p/flexlib/issues/list?cursor=44&q=label:SchedulingFramework&colspec=ID%20Type%20Status%20FlexLib%20Priority%20Milestone%20Owner%20Summary%20Opened), and the problems didn’t got fixed.

    Thank you for your post!

  4. #4 by Sebastien Arbogast at February 6th, 2010

    The page on Adobe Labs is now empty, and the code on flexlib doesn’t seem to give me the same errors as you.
    Would it be possible for you to send me your modified version?

  5. #5 by Christoper at January 18th, 2015

    I constantly emailed this website post pzge to all my associates, because if like to read it
    afterward my contacts will too.

  6. #6 by ty le ma cao at July 23rd, 2015

    Thanks you for the post!
    Schedule is important for me

  7. #7 by fifa 17 crack pc at November 17th, 2016

    If you are reading this short article, probabilities are you have
    just started your Fifa 17 career mode and are looking for a small bit of inspiration in the transfer marketplace in the form of the
    feted wonderkids.

  8. #8 by Earle at July 6th, 2017

    What’s up friends, nice article and good urging commented here, I am in fact
    enjoying by these.

  9. #9 by Norton Internet Security Login at November 1st, 2018

    Points you raised very valid points in your post. It really happened some person do not have the right idea. But with your awesome tips, one can easily identify it. You should check Norton Support for any help related to Antivirus or your PC suffering from a virus

  10. #10 by Service host superfetch at November 1st, 2018

    Points you raised very valid points in your post. It really happened some person do not have the right idea. But with your awesome tips, one can easily identify it.

(will not be published)
  1. No trackbacks yet.