spark.core

# IViewport - AS3 Flex

Package | spark.core
Interface | public interface IViewport extends IVisualElement , ILayoutElement , ILayoutDirectionElement , IEventDispatcher
Implementors | GroupBase, RichEditableText

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The IViewport interface is implemented by components that support a viewport. If a component's children are larger than the component, and you want to clip the children to the component boundaries, you can define a viewport and scroll bars. A viewport is a rectangular subset of the area of a component that you want to display, rather than displaying the entire component.

A viewport on its own is not movable by the application user. However, you can combine a viewport with scroll bars so the user can scroll the viewport to see the entire content of the component. Use the Scroller component to add scrolbars to the component.

View the examples

Related API Elements

spark.components.Scroller

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | alpha : Number Indicates the alpha transparency value of the object specified. | IVisualElement
|  | baseline : Object The vertical distance in pixels from the anchor target to the control's baseline position. | ILayoutElement
|  | baselinePosition : Number [read-only] The y-coordinate of the baseline of the first line of text of the component. | ILayoutElement
|  | bottom : Object The vertical distance in pixels from the bottom edge of the component to the anchor target's bottom edge. | ILayoutElement
|  | clipAndEnableScrolling : Boolean If true, specifies to clip the children to the boundaries of the viewport. | IViewport
|  | contentHeight : Number [read-only] The height of the viewport's content. | IViewport
|  | contentWidth : Number [read-only] The width of the viewport's contents. | IViewport
|  | depth : Number Determines the order in which items inside of containers are rendered. | IVisualElement
|  | designLayer : DesignLayer Specifies the optional DesignLayer instance associated with this visual element. | IVisualElement
|  | hasLayoutMatrix3D : Boolean [read-only] Contains true if the element has 3D Matrix. | ILayoutElement
|  | height : Number Indicates the height of the display object, in pixels. | IVisualElement
|  | horizontalCenter : Object The horizontal distance in pixels from the center of the component to the center of the anchor target's content area. | ILayoutElement
|  | horizontalScrollPosition : Number The x coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. | IViewport
|  | includeInLayout : Boolean Specifies whether this component is included in the layout of the parent container. | ILayoutElement
|  | is3D : Boolean [read-only] Contains true when the element is in 3D. | IVisualElement
|  | layoutDirection : String Specifies the desired layout direction for an element: one of LayoutDirection.LTR (left to right), LayoutDirection.RTL (right to left), or null (inherit). | ILayoutDirectionElement
|  | left : Object The horizontal distance in pixels from the left edge of the component to the anchor target's left edge. | ILayoutElement
|  | owner : DisplayObjectContainer The owner of this IVisualElement object. | IVisualElement
|  | parent : DisplayObjectContainer [read-only] The parent container or component for this component. | IVisualElement
|  | percentHeight : Number Specifies the height of a component as a percentage of its parent's size. | ILayoutElement
|  | percentWidth : Number Specifies the width of a component as a percentage of its parent's size. | ILayoutElement
|  | postLayoutTransformOffsets : mx.geom:TransformOffsets Defines a set of adjustments that can be applied to the object's transform in a way that is invisible to its parent's layout. | IVisualElement
|  | right : Object The horizontal distance in pixels from the right edge of the component to the anchor target's right edge. | ILayoutElement
|  | top : Object The vertical distance in pixels from the top edge of the component to the anchor target's top edge. | ILayoutElement
|  | verticalCenter : Object The vertical distance in pixels from the center of the component to the center of the anchor target's content area. | ILayoutElement
|  | verticalScrollPosition : Number The y coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. | IViewport
|  | visible : Boolean Controls the visibility of this visual element. | IVisualElement
|  | width : Number Indicates the width of the display object, in pixels. | IVisualElement
|  | x : Number Indicates the x coordinate of the DisplayObject instance relative to the local coordinates of the parent DisplayObjectContainer. | IVisualElement
|  | y : Number Indicates the y coordinate of the DisplayObject instance relative to the local coordinates of the parent DisplayObjectContainer. | IVisualElement

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event. | IEventDispatcher
|  | dispatchEvent(event:Event):Boolean Dispatches an event into the event flow. | IEventDispatcher
|  | getBoundsXAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number Returns the x coordinate of the element's bounds at the specified element size. | ILayoutElement
|  | getBoundsYAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number Returns the y coordinate of the element's bounds at the specified element size. | ILayoutElement
|  | getHorizontalScrollPositionDelta(navigationUnit:uint):Number Returns the amount to add to the viewport's current horizontalScrollPosition to scroll by the requested scrolling unit. | IViewport
|  | getLayoutBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's layout height. | ILayoutElement
|  | getLayoutBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's layout width. | ILayoutElement
|  | getLayoutBoundsX(postLayoutTransform:Boolean = true):Number Returns the x coordinate that the element uses to draw on screen. | ILayoutElement
|  | getLayoutBoundsY(postLayoutTransform:Boolean = true):Number Returns the y coordinate that the element uses to draw on screen. | ILayoutElement
|  | getLayoutMatrix():Matrix Returns the transform matrix that is used to calculate the component's layout relative to its siblings. | ILayoutElement
|  | getLayoutMatrix3D():Matrix3D Returns the layout transform Matrix3D for this element. | ILayoutElement
|  | getMaxBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's maximum height. | ILayoutElement
|  | getMaxBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's maximum width. | ILayoutElement
|  | getMinBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's minimum height. | ILayoutElement
|  | getMinBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's minimum width. | ILayoutElement
|  | getPreferredBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's preferred height. | ILayoutElement
|  | getPreferredBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's preferred width. | ILayoutElement
|  | getVerticalScrollPositionDelta(navigationUnit:uint):Number Returns the amount to add to the viewport's current verticalScrollPosition to scroll by the requested scrolling unit. | IViewport
|  | hasEventListener(type:String):Boolean Checks whether the EventDispatcher object has any listeners registered for a specific type of event. | IEventDispatcher
|  | invalidateLayoutDirection():void An element must call this method when its layoutDirection changes or when its parent's layoutDirection changes. | ILayoutDirectionElement
|  | removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object. | IEventDispatcher
|  | setLayoutBoundsPosition(x:Number, y:Number, postLayoutTransform:Boolean = true):void Sets the coordinates that the element uses to draw on screen. | ILayoutElement
|  | setLayoutBoundsSize(width:Number, height:Number, postLayoutTransform:Boolean = true):void Sets the layout size of the element. | ILayoutElement
|  | setLayoutMatrix(value:Matrix, invalidateLayout:Boolean):void Sets the transform Matrix that is used to calculate the component's layout size and position relative to its siblings. | ILayoutElement
|  | setLayoutMatrix3D(value:Matrix3D, invalidateLayout:Boolean):void Sets the transform Matrix3D that is used to calculate the component's layout size and position relative to its siblings. | ILayoutElement
|  | transformAround(transformCenter:Vector3D, scale:Vector3D = null, rotation:Vector3D = null, translation:Vector3D = null, postLayoutScale:Vector3D = null, postLayoutRotation:Vector3D = null, postLayoutTranslation:Vector3D = null, invalidateLayout:Boolean = true):void
A utility method to update the rotation, scale, and translation of the transform while keeping a particular point, specified in the component's own coordinate space, fixed in the parent's coordinate space.
ILayoutElement
|  | willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type. | IEventDispatcher

Property Detail

### clipAndEnableScrolling

property

`clipAndEnableScrolling:Boolean`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

If `true`, specifies to clip the children to the boundaries of the viewport. If `false`, the container children extend past the container boundaries, regardless of the size specification of the component.

The default value is `false.`

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

Related API Elements

spark.layouts.supportClasses.LayoutBase.updateScrollRect
verticalScrollPosition
horizontalScrollPosition

### contentHeight

property

`contentHeight:Number` [read-only]

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The height of the viewport's content. If `clipAndEnabledScrolling` is true, the viewport's `contentHeight` defines the limit for vertical scrolling and the viewport's actual height defines how much of the content is visible. To scroll through the content vertically, vary the `verticalScrollPosition` between 0 and `contentHeight - height`.

Implementations of this property must be Bindable and must generate events of type `propertyChange`.

Implementation
`public function get contentHeight():Number`

### contentWidth

property

`contentWidth:Number` [read-only]

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The width of the viewport's contents. If `clipAndEnabledScrolling` is true, the viewport's `contentWidth` defines the limit for horizontal scrolling and the viewport's actual width defines how much of the content is visible. To scroll through the content horizontally, vary the `horizontalScrollPosition` between 0 and `contentWidth - width`.

Implementations of this property must be Bindable and must generate events of type `propertyChange`.

Implementation
`public function get contentWidth():Number`

### horizontalScrollPosition

property

`horizontalScrollPosition:Number`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The x coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. If `clipAndEnableScrolling` is `true`, setting this property typically causes the viewport to be set to:

          new Rectangle(horizontalScrollPosition, verticalScrollPosition, width, height)

Implementations of this property must be Bindable and must generate events of type `propertyChange`.

The default value is `0.`

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

Related API Elements

target
verticalScrollPosition

### verticalScrollPosition

property

`verticalScrollPosition:Number`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

The y coordinate of the origin of the viewport in the component's coordinate system, where the default value is (0,0) corresponding to the upper-left corner of the component. If `clipAndEnableScrolling` is `true`, setting this property typically causes the viewport to be set to:

          new Rectangle(horizontalScrollPosition, verticalScrollPosition, width, height)

Implementations of this property must be Bindable and must generate events of type `propertyChange`.

The default value is `0.`

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

Related API Elements

horizontalScrollPosition
Method Detail

### getHorizontalScrollPositionDelta

()
method

`public function getHorizontalScrollPositionDelta(navigationUnit:uint):Number`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

Returns the amount to add to the viewport's current `horizontalScrollPosition` to scroll by the requested scrolling unit.

Parameters

| `navigationUnit:uint` — The amount to scroll. The value must be one of the following spark.core.NavigationUnit constants:

- `LEFT`
- `RIGHT`
- `PAGE_LEFT`
- `PAGE_RIGHT`
- `HOME`
- `END`

To scroll by a single column, use `LEFT` or `RIGHT`. To scroll to the first or last column, use `HOME` or `END`.

Returns

| `Number` — The number of pixels to add to `horizontalScrollPosition`.

Related API Elements

spark.core.NavigationUnit

### getVerticalScrollPositionDelta

()
method

`public function getVerticalScrollPositionDelta(navigationUnit:uint):Number`

Language Version: | ActionScript 3.0

Product Version: | Flex 4

Runtime Versions: | Flash Player 10, AIR 1.5

Returns the amount to add to the viewport's current `verticalScrollPosition` to scroll by the requested scrolling unit.

Parameters

| `navigationUnit:uint` — The amount to scroll. The value of unit must be one of the following spark.core.NavigationUnit constants:

- `UP`
- `DOWN`
- `PAGE_UP`
- `PAGE_DOWN`
- `HOME`
- `END`

To scroll by a single row use `UP` or `DOWN`. To scroll to the first or last row, use `HOME` or `END`.

Returns

| `Number` — The number of pixels to add to `verticalScrollPosition`.

Related API Elements

spark.core.NavigationUnit
Examples How to use this example
IViewportExample.mxml
Copy

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Simple example to demonstrate Spark IViewport interface -->
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark" >
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:Panel title="IViewport Component Example"
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">

            <s:Label text="The Group container implements IViewport. Therefore, you can clip its contents and use it with scrollbars."
                color="blue"
                top="10"/>
            <s:Group id="myGroup" width="100" height="100"
                clipAndEnableScrolling="true"
                horizontalScrollPosition="50" verticalScrollPosition="50"
                left="100" top="40">
                <mx:Image width="300" height="400"
                    source="@Embed(source='/assets/logo.jpg')"/>
            </s:Group>
            <s:VScrollBar viewport="{myGroup}" height="100" left="210" top="40"/>
            <s:HScrollBar viewport="{myGroup}" width="100" left="100" top="150"/>

        </s:Panel>
    </s:Application>

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00