Flex 4 容器加滚动效果

Flex SDK 4(Gumbo)里面把滚动条看成了一个独立的容器来对待，即Scroller。
因此容器如有滚动需要，需要单独加Scroller组件才可以实现滚动效果。
在Flex4里面Scroller是一个地地道道可视化组件，其地位与spark其他的组件（如Group、Button等是一样的地位） ,这样做的好处：
1、把容器的滚动属性单独封装成一个单独的容器。
2、这样做可以使各种spark组件功能更加的单一化。
3、由于继承了SkinnableComponent，我们可以很容器对其skin进行修改（即使用sparkSkin等方式）
4、可以对任意可视化组件的滚动条样式进行自定义。

通过这样的设定后，看起来的效验与Flex SDK 3一摸一样了。
虽然看似增加了一些代码量（需要加入<s:Scroller>的缘故）但是spark给我们带来了更单一的组件功能封装、更好的扩展性。：）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Declarations>
   <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
   <![CDATA[
    import mx.controls.Image;
    import mx.skins.halo.ScrollArrowSkin;
   
    import spark.components.Group;
    import spark.components.Scroller;
   
    private function init():void
    {
     var sler:Scroller = new Scroller(); 
     //sler.horizontalScrollBar
     sler.width = 100;
     sler.height = 100;
     var group:Group = new Group();
     var image:Image = new Image();
     image.width = 50;
     image.height =400;
     image.source = "../assets/globe.png";
     group.addElement(image);
     group.styleName = "state";


     sler.viewport = group;


     this.addElement(sler);
    
    }
   ]]>
</fx:Script>
<!--<s:Scroller width="100" height="100">
   <s:Group> 
    <mx:Image width="50" height="400" 
       source="../assets/logo.png')"/> 
   
   </s:Group>        
</s:Scroller> --> 
</s:Application>

http://hi.baidu.com/gis%C0%ED%CF%EB/blog/item/01460a1f38fd3204314e150a.html