ScheduleViewer is the main scheduling component. It allows you to render and manipulate
schedule entries in an efficient and very customizable way.
<p><b>ScheduleViewerSample1 - Introduction</b></p>
<p>
The ScheduleViewerSample1.mxml in the example section shows how to setup
a ScheduleViewer with default values and 3 entries.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
By default, the flexlib.scheduling.scheduleClasses.layout.BestFitLayout
is used, which assigns entries to the top most rows without causing any overlaps
between entries.
</p>
<p><b>ScheduleViewerSample2 - Layout Manager: SimpleLayout</b></p>
<p>
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.
</p>
<p>
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.
</p>
<p>
Notice that we use a different entry renderer in ScheduleViewerSample2.
Instead the default gradient renderer we now use
flexlib.scheduling.scheduleClasses.renderers.SolidScheduleEntryRenderer
</p>
<p><b>ScheduleViewerSample3 - Adding Navigation and Zooming</b></p>
<p>
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.</p>
<p><i>Zooming</i></p>
<p>
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).</p>
<p><i>Navigation</i></p>
<p>
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.
</p>
<p>
ScheduleViewer offers APIs to navigate (and animate) to specific entries or times.
See the gotoNow and gotoSelectedEntry methods of ScheduleViewerSample3.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p><b>ScheduleViewerSample4 - Adding Background areas</b></p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.</p>
<p><b>ScheduleViewerSample5 - Row based schedulers</b></p>
<p>
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.</p>
<p><b>ScheduleViewerSample6 - Customization of background lines</b></p>
<p>
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</p>
allowMultipleSelection:BooleanThis property can be used as the source for data binding.
Implementation public function get allowMultipleSelection():Boolean public function set allowMultipleSelection(value:Boolean):voidbackgroundItems:IListThis property can be used as the source for data binding.
Implementation public function get backgroundItems():IList public function set backgroundItems(value:IList):voidbackgroundLayout:IFactoryThis property can be used as the source for data binding.
Implementation public function get backgroundLayout():IFactory public function set backgroundLayout(value:IFactory):voidprotected var collection:ICollectionViewcontentWidth:NumberThis property can be used as the source for data binding.
Implementation public function get contentWidth():Number public function set contentWidth(value:Number):voiddataProvider:Object Implementation public function get dataProvider():Object public function set dataProvider(value:Object):voidendDate:DateThis property can be used as the source for data binding.
Implementation public function get endDate():Date public function set endDate(value:Date):voidentryLayout:IFactoryThis property can be used as the source for data binding.
Implementation public function get entryLayout():IFactory public function set entryLayout(value:IFactory):voidentryRenderer:IFactoryThis property can be used as the source for data binding.
Implementation public function get entryRenderer():IFactory public function set entryRenderer(value:IFactory):voidhorizontalLinesLayout:IFactoryThis property can be used as the source for data binding.
Implementation public function get horizontalLinesLayout():IFactory public function set horizontalLinesLayout(value:IFactory):voidhorizontalLinesViewer:IFactoryThis property can be used as the source for data binding.
Implementation public function get horizontalLinesViewer():IFactory public function set horizontalLinesViewer(value:IFactory):voidminimumTimeRangeWidth:NumberThis property can be used as the source for data binding.
Implementation public function get minimumTimeRangeWidth():Number public function set minimumTimeRangeWidth(value:Number):voidpixelScrollEnabled:BooleanThis property can be used as the source for data binding.
Implementation public function get pixelScrollEnabled():Boolean public function set pixelScrollEnabled(value:Boolean):voidrowHeight:NumberThis property can be used as the source for data binding.
Implementation public function get rowHeight():Number public function set rowHeight(value:Number):voidselectedItem:IScheduleEntryThis property can be used as the source for data binding.
Implementation public function get selectedItem():IScheduleEntry public function set selectedItem(value:IScheduleEntry):voidselectedItems:ArrayThis property can be used as the source for data binding.
Implementation public function get selectedItems():Array public function set selectedItems(value:Array):voidstartDate:DateThis property can be used as the source for data binding.
Implementation public function get startDate():Date public function set startDate(value:Date):voidtimeIndicatorLayout:IFactoryThis property can be used as the source for data binding.
Implementation public function get timeIndicatorLayout():IFactory public function set timeIndicatorLayout(value:IFactory):voidtimeIndicators:IListThis property can be used as the source for data binding.
Implementation public function get timeIndicators():IList public function set timeIndicators(value:IList):voidtimeIndicatorViewer:IFactoryThis property can be used as the source for data binding.
Implementation public function get timeIndicatorViewer():IFactory public function set timeIndicatorViewer(value:IFactory):voidtimeRanges:IListThis property can be used as the source for data binding.
Implementation public function get timeRanges():IList public function set timeRanges(value:IList):voidverticalLinesLayout:IFactoryThis property can be used as the source for data binding.
Implementation public function get verticalLinesLayout():IFactory public function set verticalLinesLayout(value:IFactory):voidverticalLinesViewer:IFactoryThis property can be used as the source for data binding.
Implementation public function get verticalLinesViewer():IFactory public function set verticalLinesViewer(value:IFactory):voidverticalScrollBar:ScrollBar [read-only]
Implementation schedule_internal function get verticalScrollBar():ScrollBarxOffset:NumberThis property can be used as the source for data binding.
Implementation public function get xOffset():Number public function set xOffset(value:Number):voidxPosition:NumberThis property can be used as the source for data binding.
Implementation public function get xPosition():Number public function set xPosition(value:Number):voidxPositionWithOffset:NumberThis property can be used as the source for data binding.
Implementation public function get xPositionWithOffset():Number public function set xPositionWithOffset(value:Number):voidyOffset:NumberThis property can be used as the source for data binding.
Implementation public function get yOffset():Number public function set yOffset(value:Number):voidyPosition:NumberThis property can be used as the source for data binding.
Implementation public function get yPosition():Number public function set yPosition(value:Number):voidyPositionWithOffset:NumberThis property can be used as the source for data binding.
Implementation public function get yPositionWithOffset():Number public function set yPositionWithOffset(value:Number):voidzoom:NumberThis property can be used as the source for data binding.
Implementation public function get zoom():Number public function set zoom(value:Number):voidpublic function ScheduleViewer() public function gotoEntry(entry:IScheduleEntry):void Parameters
public function gotoTime(milliseconds:Number):void Parameters
override protected function mouseWheelHandler(event:MouseEvent):void Parameters
public function moveToEntry(entry:IScheduleEntry):void Parameters
public function moveToTime(milliseconds:Number):void Parameters
override protected function scrollHandler(event:Event):void Parameters
Mercredi Juillet 6 2011, 09:45 PM +02:00