View comments | RSS feed
Methods | Properties | Effects | Events | Styles Frames | No Frames

mx.core
Class ScrollView

Inheritance ImageInheritance ImageInheritance Image
Direct Known Subclasses
           mx.controls.TextArea, mx.controls.listclasses.ItemScrollSelectList, mx.controls.listclasses.ScrollSelectList

class ScrollView
extends mx.core.View

The ScrollView class is the base class for controls with scroll bars and a mask. The user interacts with the scroll bar or the developer accesses methods and properties that alter the viewable area. Unlike a View container, which can have multiple children, the ScrollView takes a single child object and positions and masks that object to display the viewable content. All items to be scrolled must be children of that content object. The content object must derive from UIObject or at least support the setSize() and move() methods.

MXML Syntax

The ScrollView class has the following properties: 

 <mx:tagname
   hPosition="0"
   hScrollPolicy="off|on|auto"
   liveScrolling="false|true"
   maxHPosition="No default.
   maxVPosition="No default.
   scrollTipFunction="No default.
   showScrollTips="false|true"
   vPosition="0"
   vScrollPolicy="auto|off|on"
 />


Methods
       childLoaded( obj: MovieClip) :  Void
ScrollView's version of the childLoaded() method also creates a mask.
       createChildren( ) :  Void
Creates objects that are children of this ScrollView, which in this case are the border and mask.
       createChildWithStyles( classOrSymbol, name: String, props: Object, inheritingStyleSheet: mx.styles.CSSStyleSheet, nonInheritingStyleSheet: mx.styles.CSSStyleSheet) :  MovieClip
Creates the content object.
       getViewMetrics( ) :  Object
Returns the ViewMetrics taking into account the scroll bars, if visible.
       init( ) :  Void
Initializes variables and establishes MouseWheel support.
       layoutChildren( ) :  Void
Sets the position and size of the scroll bars and content and adjusts the mask.
       setScrollProperties( colCount: Number, colWidth: Number, rwCount: Number, rwHeight: Number, hPadding: Number, wPadding: Number) :  Void
Informs the ScrollView as to aspects of the content so that it can set up scroll bars as needed.

Methods inherited from class mx.core.View
childLoaded   constructObject2   createChild   createChildren   destroyAllChildren   destroyChild   destroyChildAt   draw   getBorderMetrics   getChildAt   getChildIndex   getViewMetrics   init   layoutChildren   layoutChrome   setChildIndex  

Methods inherited from class mx.core.UIComponent
drawFocus   getFocus   getFocusManager   setEnabled   setFocus  

Methods inherited from class mx.core.UIObject
addEventListener   applyProperties   buildDepthTable   commitProperties   constructObject2   createAccessibilityImplementation   createChildAtDepth   createChildren   createClassChildAtDepth   createClassObject   createEmptyObject   destroyObject   dispatchEvent   doLater   draw   drawRect   executeBindings   fillRect   findNextAvailableDepth   getRepeaterItem   getStyle   handleEvent   init   invalidate   invalidateLayout   invalidateProperties   invalidateSize   invalidateStyle   layoutChildren   measure   move   redraw   removeEventListener   setDepthAbove   setDepthBelow   setMask   setSize   setSizeNoLayout   setStyle   swapDepths  



Properties
       className: String
Name of this class.
       hPosition: Number
The left-most pixel of the content that is displayed in the upper left corner of the ScrollView control.
       hScrollPolicy: String
Whether the horizontal scroll bar is always on, always off, or automatically changes based on the parameters passed to the setScrollProperties() method.
       liveScrolling: Boolean
Determines whether scrolling is "live" as the thumb is moved or the view is not updated until the thumb is released.
       maxHPosition: Number
Maximum value for hPosition.
       maxVPosition: Number    [Read-Only]
Maximum value for vPosition.
       scrollTipFunction: Function
This function is called if the showScrollTips property is set to true and the scroll thumb is being dragged and should return the String that should be used as a ScrollTip.
       showScrollTips: Boolean
Determines whether a tooltip should appear near the scroll thumb when it is being dragged.
staticversion: String
Version string for this class.
       vPosition: Number
The top-most pixel of the content that is displayed in the upper left corner of the ScrollView control.
       vScrollPolicy: String
Whether the horizontal scroll bar is always on, always off, or automatically changes based on the parameters passed to the setScrollProperties() method.

Properties inherited from class mx.core.View
baselinePosition   className   numChildren   version  

Properties inherited from class mx.core.UIComponent
enabled   errorString   tabEnabled   tabIndex   version  

Properties inherited from class mx.core.UIObject
alpha   baselinePosition   className   depth   documentDescriptor   height   heightFlex   id   instanceIndices   isDocument   kStretch   layoutHeight   layoutWidth   maxHeight   maxWidth   minHeight   minWidth   mouseX   mouseY   nestLevel   oldHeight   oldWidth   oldX   oldY   parent   parentApplication   parentDocument   percentHeight   percentWidth   preferredHeight   preferredWidth   repeaterIndices   scaleX   scaleY   styleName   tabEnabled   toolTip   version   visible   width   widthFlex   x   y  



Effects

Effects inherited from class mx.core.UIComponent
focusInEffect   focusOutEffect  

Effects inherited from class mx.core.UIObject
creationCompleteEffect   hideEffect   mouseDownEffect   mouseOutEffect   mouseOverEffect   mouseUpEffect   moveEffect   resizeEffect   showEffect  



Events
scrollBroadcast when the content is scrolled. The event object contains the following properties:
- direction Either vertical or horizontal.
- position Original position.
- delta Change in position.
- target Reference to the component that triggered the event.
- type The name of the event, scroll.

Events inherited from class: mx.core.View
childCreated  childDestroyed  childIndexChanged 

Events inherited from class: mx.core.UIComponent
focusIn  focusOut  invalid  keyDown  keyUp  valid  valueCommitted 

Events inherited from class: mx.core.UIObject
creationComplete  dragComplete  dragDrop  dragEnter  dragExit  dragOver  draw  effectEnd  effectStart  hide  hideToolTip  initialize  load  mouseChangeSomewhere  mouseDown  mouseDownSomewhere  mouseMove  mouseMoveSomewhere  mouseOut  mouseOver  mouseUp  mouseUpSomewhere  move  resize  show  showToolTip  unload 



Styles

Styles inherited from class mx.core.UIComponent
backgroundAlpha   backgroundColor   backgroundDisabledColor   backgroundImage   backgroundSize   barColor   borderCapColor   borderColor   borderSides   borderStyle   borderThickness   cornerRadius   disabledColor   dropShadow   errorColor   fillColors   highlightColor   modalTransparency   scrollTrackColor   selectedFillColors   shadowCapColor   shadowColor   shadowDirection   shadowDistance   symbolBackgroundColor   symbolBackgroundDisabledColor   symbolBackgroundPressedColor   symbolColor   symbolDisabledColor   themeColor  

Styles inherited from class mx.core.UIObject
color   fontFamily   fontSize   fontStyle   fontWeight   horizontalGap   leading   marginLeft   marginRight   textAlign   textDecoration   textIndent   verticalGap  



Method Detail

childLoaded

childLoaded( obj: MovieClip) :  Void

ScrollView's version of the childLoaded() method also creates a mask.

Parameters
    obj: MovieClip - The loaded child

See Also
    View

createChildren

createChildren( ) :  Void

Creates objects that are children of this ScrollView, which in this case are the border and mask. Flex calls this method when the ScrollView is first created. If a subclass overrides this method, the subclass should call the super.createChildren() method so that the logic in the ScrollView.createChildren() method is executed.

createChildWithStyles

createChildWithStyles( classOrSymbol, name: String, props: Object, inheritingStyleSheet: mx.styles.CSSStyleSheet, nonInheritingStyleSheet: mx.styles.CSSStyleSheet) :  MovieClip

Creates the content object.

Note: Unlike the View.createChild() method, only one child is allowed in a the ScrollView class. Subsequent calls to createChild() simply delete the old child and replace it with the new one.

Parameters
    classOrSymbol - Reference to a class, the linkage ID of a symbol, or file path or URL to the external content. Specify the class name without using double quotation marks; do not specify the component as a String.
    name: String - Instance name of the child.
    props: Object - Object that contains initialization properties.
    inheritingStyleSheet: mx.styles.CSSStyleSheet - CSSStyleSheet that contains the inheriting styles to be initialized.
    nonInheritingStyleSheet: mx.styles.CSSStyleSheet - CSSStyleSheet that contains the non-inheriting styles to be initialized.

See Also
    View

getViewMetrics

getViewMetrics( ) :  Object

Returns the ViewMetrics taking into account the scroll bars, if visible.

Returns
     Object with the left, right, top and bottom edges' thickness, in pixels.

See Also
    View

init

init( ) :  Void

Initializes variables and establishes MouseWheel support. Flex calls this method when the object is first created. If a subclass overrides this method, the subclass should call the super.init() method, so that the logic in ScrollView.init gets executed.

layoutChildren

layoutChildren( ) :  Void

Sets the position and size of the scroll bars and content and adjusts the mask.

See Also
    View

setScrollProperties

setScrollProperties( colCount: Number, colWidth: Number, rwCount: Number, rwHeight: Number, hPadding: Number, wPadding: Number) :  Void

Informs the ScrollView as to aspects of the content so that it can set up scroll bars as needed. Note that this method does not change which portion of the content is viewable.

There are three common uses cases: if the content consists of a set of rows and columns like in a List or DataGrid control, and all columns have the same width and all rows have the same height, set the parameters as follows:

If the content's are all the same height but the columns have different widths: If the content is a swfs, jpgs, or anything being scrolled strictly based on "physical" size: Note that for better scrolling experience, if you set rowHeight or columnWidth to 1, you should set the lineScrollSize of hScroller and/or vScroller, so they scroll in more than 1-pixel increments with each arrow button click.
The padding params are optional, and allow the ScrollView to contain a non-scrollable area in one or both dimensions.
An example is the column/row headers of a DataGrid container, which only scroll in one dimension, and shouldn't be taken as part of the scrollBars' calculations of position.

Parameters
    colCount: Number - Number of units to scroll horizontally.
    colWidth: Number - Width in pixels of each of those units.
    rwCount: Number - Number of units to scroll vertically.
    rwHeight: Number - Height in pixels of each of those units.
    hPadding: Number - Pixels on the left edge that are not scrolled (for row headers).
    wPadding: Number - Pixels on the top edge that are not scrolled (for column headers).



Property Detail

className

className: String  

Name of this class.

hPosition

hPosition: Number  

The left-most pixel of the content that is displayed in the upper left corner of the ScrollView control. The default value is 0.

hScrollPolicy

hScrollPolicy: String  

Whether the horizontal scroll bar is always on, always off, or automatically changes based on the parameters passed to the setScrollProperties() method. Allowed values are on, off, auto. The default value is off.

liveScrolling

liveScrolling: Boolean  

Determines whether scrolling is "live" as the thumb is moved or the view is not updated until the thumb is released. The default value is true.

maxHPosition

maxHPosition: Number  

Maximum value for hPosition. Note that this is not the width of the content because the maxHPosition is the width of the content minus the width of the displayable area.

maxVPosition

maxVPosition: Number   [Read-Only]

Maximum value for vPosition. Note that this is not the height of the content because the maxVPosition is the height of the content minus the height of the displayable area.

scrollTipFunction

scrollTipFunction: Function  

This function is called if the showScrollTips property is set to true and the scroll thumb is being dragged and should return the String that should be used as a ScrollTip. The function is passed two parameters. the first is the direction of the scroll bar. The second is its scrollPosition. E.g.,
function scrollTipFunction(direction:String, position:Number) : String
{
  if (direction == "vertical") return myToolTips[position];
  else return "";
}

showScrollTips

showScrollTips: Boolean  

Determines whether a tooltip should appear near the scroll thumb when it is being dragged. The default value is false

version

static  version: String  

Version string for this class.

vPosition

vPosition: Number  

The top-most pixel of the content that is displayed in the upper left corner of the ScrollView control. The default value is 0.

vScrollPolicy

vScrollPolicy: String  

Whether the horizontal scroll bar is always on, always off, or automatically changes based on the parameters passed to the setScrollProperties() method. Allowed values are on, off, auto. The default value is auto.


Comments


alon said on Nov 28, 2005 at 2:38 PM :
I believe that the docs for hPosition are wrong for HorizontalScroll list. In my tests the value for hPosition is the index of the item in the list that should be shown in the far left position of the list.

Try it with this simple test:

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Script>
var items:Array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function scrollIt(event)
{
trace("Scroll from " + list.hPosition + " to "
+ event.target.selectedItem);
list.hPosition = event.target.selectedItem;
trace("Result is " + list.hPosition);
}
</mx:Script>

<mx:HorizontalList id="list"
dataProvider="{ items }"
change="scrollIt(event);"/>

</mx:Application>
smgilson said on Nov 30, 2005 at 2:09 PM :
You are correct in your description of hPosition. We will update the doc for the next release.

Stephen Gilson
Flex Doc

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/asdocs_en/mx/core/ScrollView.html