| 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 | 
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.
Related API Elements
| 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 | |
| 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 | |
|  | 
	Dispatches an event into the event flow. | IEventDispatcher | |
|  | 
      Returns the x coordinate of the element's bounds at the specified element size. | ILayoutElement | |
|  | 
      Returns the y coordinate of the element's bounds at the specified element size. | ILayoutElement | |
| 
      Returns the amount to add to the viewport's current 
      horizontalScrollPosition to scroll by the requested scrolling unit. | IViewport | ||
|  | 
      Returns the element's layout height. | ILayoutElement | |
|  | 
      Returns the element's layout width. | ILayoutElement | |
|  | 
      Returns the x coordinate that the element uses to draw on screen. | ILayoutElement | |
|  | 
      Returns the y coordinate that the element uses to draw on screen. | ILayoutElement | |
|  | 
      Returns the transform matrix that is used to calculate the component's
      layout relative to its siblings. | ILayoutElement | |
|  | 
      Returns the layout transform Matrix3D for this element. | ILayoutElement | |
|  | 
      Returns the element's maximum height. | ILayoutElement | |
|  | 
      Returns the element's maximum width. | ILayoutElement | |
|  | 
      Returns the element's minimum height. | ILayoutElement | |
|  | 
      Returns the element's minimum width. | ILayoutElement | |
|  | 
      Returns the element's preferred height. | ILayoutElement | |
|  | 
      Returns the element's preferred width. | ILayoutElement | |
| 
      Returns the amount to add to the viewport's current 
      verticalScrollPosition to scroll by the requested scrolling unit. | IViewport | ||
|  | 
	Checks whether the EventDispatcher object has any listeners registered for a specific type 
	of event. | IEventDispatcher | |
|  | 
          An element must call this method when its layoutDirection changes or
          when its parent's layoutDirection changes. | ILayoutDirectionElement | |
|  | 
	Removes a listener from the EventDispatcher object. | IEventDispatcher | |
|  | 
      Sets the coordinates that the element uses to draw on screen. | ILayoutElement | |
|  | 
      Sets the layout size of the element. | ILayoutElement | |
|  | 
      Sets the transform Matrix that is used to calculate the component's layout
      size and position relative to its siblings. | ILayoutElement | |
|  | 
      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 | |
|  | 
	Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type. | IEventDispatcher | |
| 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):voidRelated API Elements
| 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):voidRelated API Elements
| 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):voidRelated API Elements
| 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:
 LEFTorRIGHT.
      To scroll to the first or last column, useHOMEorEND. | 
| Number— The number of pixels to add tohorizontalScrollPosition. | 
Related API Elements
| 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:
 UPorDOWN.
      To scroll to the first or last row, useHOMEorEND. | 
| Number— The number of pixels to add toverticalScrollPosition. | 
Related API Elements
<?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>
Thu Dec 4 2014, 05:50 PM -08:00