MiniViewport

Overview

Small viewport designed to help the user navigate scrollable viewports.

The MiniViewport displays a bitmap representation of the linked viewport. The area that is visible within the viewport is indicated via a rectangular overlay. Users can update the scroll position of the viewport by dragging the visible rectangle overlay in the MiniViewport.

When the scroll position of the viewport changes for any reason, for example through scrollbars or resizing, the MiniViewport's visible rectangle overlay will update automatically.

Creating the MiniViewport Component

The MiniViewport extends the Flex SkinnableComponent class which means that it can be added to any container that implements IVisualElementContainer.

Using the MiniViewport Component

To create the link between the scrollable viewport and the MiniViewport, simply send a reference to the viewport to the MiniViewport's 'viewport' property.

In addition, the scroll position of the viewport can be changed via dragging within the MiniViewport. However, to update the image of the viewport, E.G. the bitmap representation of the viewport, one must manually call the update(true) method of the MiniViewport.

Performance Considerations

This component does not listen for changes to the bitmap representation of the viewport automatically. Calling update(true) is necessary to update the bitmap representation of the viewport and must be called manually. Update intelligently to prevent pointless updates.

The viewport's bitmap representation is scaled to vastly improve performance.

Transformations and Scaling

The bitmap representation of the viewport will lose any transformations and scaling applied directly to the viewport. Elements within the viewport with matrix transformations will retain them. However, it would be unusual to apply matrix transformations directly to a viewport, so this limitation should rarely affect applications.

Virtualized Layouts

Elements with virtualized layouts will not work properly with this component. This includes lists that use virtualized vertical layouts, and any TLF text component that supports scrolling because scrollable TLF virtualizes textlines.

To use with lists, do not use virtualization in the layout.

Selected Custom Events

CHANGE_SCROLL
ardisia.components.miniViewport.events.MiniViewportEvent
Dispatched when the user updates the viewport's scroll positions via mouse interaction using this component.

DRAG_START
ardisia.components.miniViewport.events.MiniViewportEvent
Dispatched when the user starts dragging the visibleRectPart skin part.

DRAGGING
ardisia.components.miniViewport.events.MiniViewportEvent
Dispatched when the user is dragging the visibleRectPart skin part.

DRAG_END
ardisia.components.miniViewport.events.MiniViewportEvent
Dispatched when the user finishes dragging the visibleRectPart skin part.

Selected Custom Styles

See the MiniViewport ASDocs.

Themes & Skinning

A skin is provided for the Spark theme.

Example

See the MiniViewport demo application for example code.

Back To Top