Perspective - View Canvas

Component Palette Icon:

Description

The View Canvas component can display multiple Perspective views, each positioned on a coordinate based system. The component offers smooth transition animations when views are relocated. Familiarity with CSS is helpful in taking full advantage of the this component.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
instances	Array of views to display in the canvas. position: Mode that defines how the element is positioned within the canvas. For position absolute, the view is placed within the canvas based on its top, left, bottom, right positions. Views that are positioned absolute do not participate in the flow of the document. For position relative, the view is placed within the canvas placed in the normal document flow and then offset by its top, left values. This is the same with left and right.Options are relative or absolute. Default is absolute. Value is string. top: The top position of the view. Value is numeric. left: The left position of the view. Value is numeric. bottom: The bottom position of the view. Note: If both top and bottom are set, bottom is respected only if position is set to absolute and height is unspecified. Value is numeric. right: The right position of the view. Note: If both left and right are set, left is respected only if position is set to absolute and width is unspecified. Value is numeric. zIndex: The z-order position of the view. Value is numeric. width: The width of the view. Value is numeric. height: The height of the view. Value is numeric. viewPath: Path to the view you want to display. If a path is present in the viewPath property field, an Open View icon will appear that will navigate directly to the view when clicked. Value is string. viewParams: The parameters of the view. A dropdown list of parameters is available when the user clicks the AddObject Member icon. This makes it easy to add parameters from the rendered view. style: Sets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	array
transitionSettings	Transition settings on each view. The properties affected by transition settings are top, left, bottom, right, and zIndex. duration: Duration of the transition. Units are seconds or milliseconds. Value is numeric. timingFunction: Mathematical function that defines how fast one-dimensional values change during the transition. The transition can be described as a cubic Bezier or steps function. The presets for cubic Bezier functions are linear, ease, ease-in, ease-in-out, and ease-out. The presets for steps functions are step-start and step-end. Value is string.	value: numeric
enableTransitions	Determines whether transitions should play when transitions are defined.	value: boolean
defaultStyle	Sets a style for all views. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object
style	Sets a style for the canvas. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.	object

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

The View Canvas component also has Component Events associated with it. See the Perspective - View Canvas Scripting page for more information.