28 September 2007
Most of the standard Flex data controls display content sequentially, as does the List component, or as a table, as does DataGrid component. The
Pan|Zoom component displays content spatially, as a two-dimensional surface that users can navigate around or zoom in and out to view the content. The
Pan|Zoom component allows you to display spatial content types that the standard Flex controls don’t support well, such as maps and large images and diagrams.
To download and view the full source, right-click the Flex application and select View Source from the context menu. Otherwise, you can use the download link below.
Note: This component is licensed as Sample Code as defined in the Flex End User License Agreement. You may use the sample code in your products, commercial or not.
Pan|Zoomcontrol to allow users to navigate within large amounts of spatially organized data.
Pan|Zoomcontrol when users will mostly want to focus on a subset of the spatial information.
Pan|Zoomcontrol with the Callout control to show important details in place on the spatial surface.
Pan|Zoomcontrol when users will want to see the content all at once. Instead, simply render the content as an Image.
The features of the component are as follows:
Pan|Zoom component functionality is built around a Command Design Pattern. The Command Design Pattern classically consists of five elements.
The Command Design Pattern encapsulates functionality into a Command Class. The Commands are then driven from the Client to the Receiver through an Invoker class. This decoupling of the Client from the Receiver allows for a range of features that would be difficult to implement otherwise and offers flexibility in development.
Pan|Zoom component implementation differs slightly in that the Invoker class implements an ICommandMode interface. While not used in this example, this interface allows the developer to activate or deactivate the
Pan|Zoom component controls as a whole, which would be necessary in any real-world usage.
This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.