flexlib :: library Documentation | All Packages | All Classes | Index | Frames No Frames |
ScheduleViewer

Package | flexlib.scheduling
Class | public class ScheduleViewer
Inheritance | ScheduleViewer mx.core.ScrollControlBase

ScheduleViewer is the main scheduling component. It allows you to render and manipulate schedule entries in an efficient and very customizable way.

ScheduleViewerSample1 - Introduction

The ScheduleViewerSample1.mxml in the example section shows how to setup a ScheduleViewer with default values and 3 entries.

To render schedule entries the dataProvider property by default accepts a collection of flexlib.scheduling.scheduleClasses.IScheduleEntry objects. ScheduleViewerSample1 uses flexlib.scheduling.scheduleClasses.SimpleScheduleEntry, an implementation of IScheduleEntry.

The dataProvider item gets passed into the entryRenderer, which by default is flexlib.scheduling.scheduleClasses.renderers.GradientScheduleEntryRenderer.mxml. You can customize various styles of the entry renderer via the entryStyleName style of ScheduleViewer. In ScheduleViewerSample1, we use the default styles but there is an example CSS inlcuded. Try to assign the included myEntryStyle class selector to the entryStyleName style property of the ScheduleViewer instance.

In addition, for maximum flexibility, you can provide a fully customized entry renderer via the entryRenderer property. The entryRenderer has to implement flexlib.scheduling.scheduleClasses.renderers.IScheduleEntryRenderer.

ScheduleViewer layouts the entries according to the rules of a layout manager. You can specify the layout manager with the entryLayout property. Furthermore, the layout manager can handle any changes that occur to the data provider as any updates, additions, deletions etc to the entries.

By default, the flexlib.scheduling.scheduleClasses.layout.BestFitLayout is used, which assigns entries to the top most rows without causing any overlaps between entries.

ScheduleViewerSample2 - Layout Manager: SimpleLayout

Another supplied layout manager is the flexlib.scheduling.scheduleClasses.layout.SimpleLayout which places entries exactly as defined in the dataProvider. This means, that when using SimpleLayout, each item of the dataProvider is expected to be of type mx.collection.IList since it represents a row. Each row IList collection is expected to contain IScheduleEntry objects. You can write your own layout manager, check the BestFitLayout and SimpleLayout and their base classes and implemented interfaces for how to do that.

The ScheduleViewerSample2.mxml shows how to setup a ScheduleViewer with the supplied SimpleLayout manager. Notice the different structure of the dataProvider, which now exactly determines how entries are being laid out. Furthermore, SimpleLayout does not check entries for overlapping. Therefore, in the second row of ScheduleViewerSample2 you can see one entry overlapping.

Notice that we use a different entry renderer in ScheduleViewerSample2. Instead the default gradient renderer we now use flexlib.scheduling.scheduleClasses.renderers.SolidScheduleEntryRenderer

ScheduleViewerSample3 - Adding Navigation and Zooming

The ScheduleViewerSample3 sample shows how to add a navigation and a zooming tool. In order to achieve maximum flexibility both features are meant to be driven by external components that talk to an API of ScheduleViewer.

Zooming

The ScheduleViewer's zoom property can be manipulated in order to achieve zooming. You could use i.e. a mx:HSlider component that manipulates zoom on each change event as the ScheduleViewerSample3 example shows. A zoom value of 100 always shows the complete dataProvider on the currently visible canvas (no scrollbars have to appear).

Navigation

The ScheduleViewer's xPosition and yPosition properties can be manipulated in order to navigate along ScheduleViewer's content. You could use the scroll events of the Timeline component and the pixelScroll events of ScheduleViewer to connect both components and achieve navigation via Timeline.

ScheduleViewer offers APIs to navigate (and animate) to specific entries or times. See the gotoNow and gotoSelectedEntry methods of ScheduleViewerSample3.

You can select single or multiple entries via the selectedItem and selectedItems property. To switch to the multiple selection mode, set the allowMultipleSelection to true.

Furthermore, in this example, the background color of each schedule entry shall be data provider driven. To make this possible, we've specified another supplied entry renderer; flexlib.scheduling.scheduleClasses.renderers.ColoredGradientScheduleEntryRenderer. This enry renderer accepts only flexlib.scheduling.scheduleClasses.ColoredScheduleEntry objects. We've extracted the creation of schedule entries (of type ColoredScheduleEntry) into a separate class. Check out flexlib.scheduling.samples.ScheduleData in the example section below.

ScheduleViewerSample4 - Adding Background areas

You can add customized background areas to ScheduleViewer using the backgroundItems property. backgroundItems expects an Array of BackgroundItem objects. You can specify a time range, a color and a description. The latter will be used as a tool tip when the user mouses over area.

For further customizations of the background area in ScheduleViewer, you could create your customized version of the background layout manager via the backgroundLayout property. Take a look into the default layout manager flexlib.scheduling.scheduleClasses.layout.BackgroundLayout for more information. i.e. you could add a colored current time area, which moves by the current time.

You can also customize the background grid via the supplied styles. See style section. To customize further, you could define custom layout managers via the horizontalLinesLayout and verticalLinesLayout properties. See default implementation is flexlib.scheduling.scheduleClasses.layout.HorizontalLinesLayout and flexlib.scheduling.scheduleClasses.layout.VerticalLinesLayout. i.e. you could add thicker horizontal lines, after certain items.

ScheduleViewerSample5 - Row based schedulers

ScheduleViewerSample5 shows how you can synchronize a List control with ScheduleViewer. The pixelScrollEnabled flag lets ScheduleViewer scroll on rows instead of pixels. Animations are still supported for pixels. The itemScroll and pixelScroll events allow to connect external components to ScheduleViewer such as the List shown in this example.

ScheduleViewerSample6 - Customization of background lines

ScheduleViewerSample6 shows how you can customize vertical and horizontal background lines with the exposed horizontalLinesViewer and verticalLinesViewer properties of ScheduleViewer. The custom viewers used in this example are flexlib.scheduling.samples.AlternatingHorizontalLinesViewer and flexlib.scheduling.samples.SolidVerticalLinesViewer

See also

flexlib.scheduling.scheduleClasses.IScheduleEntry
flexlib.scheduling.scheduleClasses.SimpleScheduleEntry
flexlib.scheduling.scheduleClasses.ColoredScheduleEntry
flexlib.scheduling.scheduleClasses.renderers.GradientScheduleEntryRenderer
flexlib.scheduling.scheduleClasses.renderers.SolidScheduleEntryRenderer
flexlib.scheduling.scheduleClasses.renderers.IScheduleEntryRenderer
flexlib.scheduling.scheduleClasses.layout.BestFitLayout
flexlib.scheduling.scheduleClasses.layout.SimpleLayout
flexlib.scheduling.scheduleClasses.layout.BackgroundLayout
flexlib.scheduling.scheduleClasses.BackgroundItem
flexlib.scheduling.scheduleClasses.layout.HorizontalLinesLayout
flexlib.scheduling.scheduleClasses.layout.VerticalLinesLayout
flexlib.scheduling.controls.Timeline
flexlib.scheduling.util.DateUtil

Public Properties

| Property | Defined By
--- | --- | ---
|  | allowMultipleSelection : Boolean | ScheduleViewer
|  | backgroundItems : IList | ScheduleViewer
|  | backgroundLayout : IFactory | ScheduleViewer
|  | contentWidth : Number | ScheduleViewer
|  | dataProvider : Object | ScheduleViewer
|  | endDate : Date | ScheduleViewer
|  | entryLayout : IFactory | ScheduleViewer
|  | entryRenderer : IFactory | ScheduleViewer
|  | horizontalLinesLayout : IFactory | ScheduleViewer
|  | horizontalLinesViewer : IFactory | ScheduleViewer
|  | minimumTimeRangeWidth : Number | ScheduleViewer
|  | pixelScrollEnabled : Boolean | ScheduleViewer
|  | rowHeight : Number | ScheduleViewer
|  | selectedItem : IScheduleEntry | ScheduleViewer
|  | selectedItems : Array | ScheduleViewer
|  | startDate : Date | ScheduleViewer
|  | timeIndicatorLayout : IFactory | ScheduleViewer
|  | timeIndicators : IList | ScheduleViewer
|  | timeIndicatorViewer : IFactory | ScheduleViewer
|  | timeRanges : IList | ScheduleViewer
|  | verticalLinesLayout : IFactory | ScheduleViewer
|  | verticalLinesViewer : IFactory | ScheduleViewer
|  | xOffset : Number | ScheduleViewer
|  | xPosition : Number | ScheduleViewer
|  | xPositionWithOffset : Number | ScheduleViewer
|  | yOffset : Number | ScheduleViewer
|  | yPosition : Number | ScheduleViewer
|  | yPositionWithOffset : Number | ScheduleViewer
|  | zoom : Number | ScheduleViewer

Protected Properties

| Property | Defined By
--- | --- | ---
|  | collection : ICollectionView | ScheduleViewer

Public Methods

| Method | Defined By
--- | --- | ---
|  | ScheduleViewer() | ScheduleViewer
|  | gotoEntry(entry:IScheduleEntry):void | ScheduleViewer
|  | gotoTime(milliseconds:Number):void | ScheduleViewer
|  | moveToEntry(entry:IScheduleEntry):void | ScheduleViewer
|  | moveToTime(milliseconds:Number):void | ScheduleViewer

Protected Methods

| Method | Defined By
--- | --- | ---
|  | mouseWheelHandler(event:MouseEvent):void [override] | ScheduleViewer
|  | scrollHandler(event:Event):void [override] | ScheduleViewer

Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | itemScroll |  | ScheduleViewer
|  | pixelScroll |  | ScheduleViewer

Styles

| Style | Description | Defined By
--- | --- | --- | ---
|  | dottedGridLines | Type: Boolean CSS Inheritance: yes The color of the horizontal grid lines. The default value is`0x666666`. | ScheduleViewer
|  | entryStyleName | Type: String CSS Inheritance: yes Name of CSS style declaration that specifies styles for the schedule entries | ScheduleViewer
|  | horizontalGridLineAlpha | Type: Number CSS Inheritance: yes | ScheduleViewer
|  | horizontalGridLineColor | Type: uint Format: Color CSS Inheritance: yes | ScheduleViewer
|  | horizontalGridLineThickness | Type: Number Format: Length CSS Inheritance: yes | ScheduleViewer
|  | moveDuration | Type: Number Format: Time CSS Inheritance: yes Length of the transition when moving around the canvas. The default value is`250`. | ScheduleViewer
|  | moveEasingFunction | Type: Function CSS Inheritance: yes An easing function to control the canvas movment transition. Easing functions can be used to control the acceleration and deceleration of the transition. The default value is`undefined`. | ScheduleViewer
|  | verticalGridLineAlpha | Type: Number CSS Inheritance: yes | ScheduleViewer
|  | verticalGridLineColor | Type: uint Format: Color CSS Inheritance: yes | ScheduleViewer
|  | verticalGridLineThickness | Type: Number Format: Length CSS Inheritance: yes | ScheduleViewer

Property Detail

allowMultipleSelection | property

`allowMultipleSelection:Boolean`

This property can be used as the source for data binding.

Implementation
`public function get allowMultipleSelection():Boolean`
`public function set allowMultipleSelection(value:Boolean):void`

backgroundItems | property |

`backgroundItems:IList`

This property can be used as the source for data binding.

Implementation
`public function get backgroundItems():IList`
`public function set backgroundItems(value:IList):void`

backgroundLayout | property |

`backgroundLayout:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get backgroundLayout():IFactory`
`public function set backgroundLayout(value:IFactory):void`

collection | property |

`protected var collection:ICollectionView`

contentWidth | property |

`contentWidth:Number`

This property can be used as the source for data binding.

Implementation
`public function get contentWidth():Number`
`public function set contentWidth(value:Number):void`

dataProvider | property |

`dataProvider:Object`

Implementation
`public function get dataProvider():Object`
`public function set dataProvider(value:Object):void`

endDate | property |

`endDate:Date`

This property can be used as the source for data binding.

Implementation
`public function get endDate():Date`
`public function set endDate(value:Date):void`

entryLayout | property |

`entryLayout:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get entryLayout():IFactory`
`public function set entryLayout(value:IFactory):void`

entryRenderer | property |

`entryRenderer:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get entryRenderer():IFactory`
`public function set entryRenderer(value:IFactory):void`

horizontalLinesLayout | property |

`horizontalLinesLayout:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get horizontalLinesLayout():IFactory`
`public function set horizontalLinesLayout(value:IFactory):void`

horizontalLinesViewer | property |

`horizontalLinesViewer:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get horizontalLinesViewer():IFactory`
`public function set horizontalLinesViewer(value:IFactory):void`

minimumTimeRangeWidth | property |

`minimumTimeRangeWidth:Number`

This property can be used as the source for data binding.

Implementation
`public function get minimumTimeRangeWidth():Number`
`public function set minimumTimeRangeWidth(value:Number):void`

pixelScrollEnabled | property |

`pixelScrollEnabled:Boolean`

This property can be used as the source for data binding.

Implementation
`public function get pixelScrollEnabled():Boolean`
`public function set pixelScrollEnabled(value:Boolean):void`

rowHeight | property |

`rowHeight:Number`

This property can be used as the source for data binding.

Implementation
`public function get rowHeight():Number`
`public function set rowHeight(value:Number):void`

selectedItem | property |

`selectedItem:IScheduleEntry`

This property can be used as the source for data binding.

Implementation
`public function get selectedItem():IScheduleEntry`
`public function set selectedItem(value:IScheduleEntry):void`

selectedItems | property |

`selectedItems:Array`

This property can be used as the source for data binding.

Implementation
`public function get selectedItems():Array`
`public function set selectedItems(value:Array):void`

startDate | property |

`startDate:Date`

This property can be used as the source for data binding.

Implementation
`public function get startDate():Date`
`public function set startDate(value:Date):void`

timeIndicatorLayout | property |

`timeIndicatorLayout:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get timeIndicatorLayout():IFactory`
`public function set timeIndicatorLayout(value:IFactory):void`

timeIndicators | property |

`timeIndicators:IList`

This property can be used as the source for data binding.

Implementation
`public function get timeIndicators():IList`
`public function set timeIndicators(value:IList):void`

timeIndicatorViewer | property |

`timeIndicatorViewer:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get timeIndicatorViewer():IFactory`
`public function set timeIndicatorViewer(value:IFactory):void`

timeRanges | property |

`timeRanges:IList`

This property can be used as the source for data binding.

Implementation
`public function get timeRanges():IList`
`public function set timeRanges(value:IList):void`

verticalLinesLayout | property |

`verticalLinesLayout:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get verticalLinesLayout():IFactory`
`public function set verticalLinesLayout(value:IFactory):void`

verticalLinesViewer | property |

`verticalLinesViewer:IFactory`

This property can be used as the source for data binding.

Implementation
`public function get verticalLinesViewer():IFactory`
`public function set verticalLinesViewer(value:IFactory):void`

verticalScrollBar | property |

`verticalScrollBar:ScrollBar` [read-only]

Implementation
`schedule_internal function get verticalScrollBar():ScrollBar`

xOffset | property |

`xOffset:Number`

This property can be used as the source for data binding.

Implementation
`public function get xOffset():Number`
`public function set xOffset(value:Number):void`

xPosition | property |

`xPosition:Number`

This property can be used as the source for data binding.

Implementation
`public function get xPosition():Number`
`public function set xPosition(value:Number):void`

xPositionWithOffset | property |

`xPositionWithOffset:Number`

This property can be used as the source for data binding.

Implementation
`public function get xPositionWithOffset():Number`
`public function set xPositionWithOffset(value:Number):void`

yOffset | property |

`yOffset:Number`

This property can be used as the source for data binding.

Implementation
`public function get yOffset():Number`
`public function set yOffset(value:Number):void`

yPosition | property |

`yPosition:Number`

This property can be used as the source for data binding.

Implementation
`public function get yPosition():Number`
`public function set yPosition(value:Number):void`

yPositionWithOffset | property |

`yPositionWithOffset:Number`

This property can be used as the source for data binding.

Implementation
`public function get yPositionWithOffset():Number`
`public function set yPositionWithOffset(value:Number):void`

zoom | property |

`zoom:Number`

This property can be used as the source for data binding.

Implementation
`public function get zoom():Number`
`public function set zoom(value:Number):void`
Constructor Detail

ScheduleViewer | () | Constructor

`public function ScheduleViewer()`

Method Detail

gotoEntry | () | method

`public function gotoEntry(entry:IScheduleEntry):void`

Parameters

| `entry:IScheduleEntry`

gotoTime | () | method |

`public function gotoTime(milliseconds:Number):void`

Parameters

| `milliseconds:Number`

mouseWheelHandler | () | method |

`override protected function mouseWheelHandler(event:MouseEvent):void`

Parameters

| `event:MouseEvent`

moveToEntry | () | method |

`public function moveToEntry(entry:IScheduleEntry):void`

Parameters

| `entry:IScheduleEntry`

moveToTime | () | method |

`public function moveToTime(milliseconds:Number):void`

Parameters

| `milliseconds:Number`

scrollHandler | () | method |

`override protected function scrollHandler(event:Event):void`

Parameters

| `event:Event`

Event Detail

itemScroll | Event

Event Object Type: `flexlib.scheduling.scheduleClasses.LayoutScrollEvent`

pixelScroll | Event |

Event Object Type: `flexlib.scheduling.scheduleClasses.LayoutScrollEvent`

Mercredi Juillet 4 2012, 09:36 PM +02:00