Flex 4 beta中的视口和滚动功能介绍
Flex 4
beta提供了接口IViewport（被所有可滚动组件实现）和组件Scroller（为视口添加滚动条，实现交互时的功能功能）。这里所谓视口（viewport），即可滚动组件，要实现IViewport接口。交互式滚动，是所有图形用户界面（GUI）工具的基本特性之一。Flex
4 beta之所以采用这种方法，是为了比Flex 3的实现更有效率，具体请参阅Comparison
with MX scrolling
。
在List和TextArea等很多Flex组件中，Scroller和视口均是它们皮肤的一个组成部分，无需开发者考虑如何实现滚动功能。本文将介绍IViewport接口的工作原理，并提供一个简单的Scroller例子。如果你想知道如何创建自己的交互式滚动组件，或需深入理解Flex
4中滚动特性的工作原理，请阅读本文。
要求
为了更好理解本文的内容，你需准备如下软件和文件：
Flash Builder 4 beta
下载（InfoQ中文站独家高速下载）
深入学习
示例文件：
flex4_viewport_scrolling.mxml
(MXML, 2 KB)
预备知识
熟悉ActionScript、Flex3和基本的2D图形概念，将有利于理解本文内容。
滚动与视口概述
GUI通过滚动，可以显示比用户屏幕空间更大的文档。
在Spark（Flex 4 beta新增的组件和皮肤架构）中，IViewport接口定义了用一个矩形小裁剪窗口（clipping
window）每次滚动一定距离、逐步展示大文档的具体行为。这里所说“滚动”，是指改变与大文档关联的裁剪窗口的位置。
Spark中的Scroller组件为交互式滚动视口提供了一个通用的GUI。它显示一对分别呈纵向和横向的滚动条，其滚动条的滑块位置定义了裁剪窗口的位置(X,Y)。缺省情况下，滚动条仅在需要时才显示。图1解释了IViewport接口的相关属性（width、height、contentWidth、contentHeight、horizontalScrollPosition和verticalScrollPosition）及其几何结构。
图1
，IViewport的几何结构和相关属性
视口的contentWidth和contentHeight属性，定义了视口中内容被绘制时的横向和纵向最大尺寸。width和height属性定义视口中部分内容的尺寸，即在屏幕上出现的内容的尺寸，或说视口的裁剪矩形窗口的大小。horizontalScrollPosition和verticalScrollPosition属性则表示上述裁剪窗口的位置。通过改变这些属性，应用程序可以实现视口的滚动。
Scroller类
Spark的Scroller类是一个内置视口的容器，和Group和DataGroup组件相仿。
Scroller能显示纵向和横向滚动条，其滚动位置由视口的horizontalScrollPosition和verticalScroll
相关文档：
<?xml version="1.0"?>
<!-- charts/GradientFills.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<!--[CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection=new Arra ......
第一种，使用{}绑定
<mx:TextInput
id=
"input"
/>
<mx:Label
text=
"{input.text}"
/>
第二种，<mx:Binding> 绑定
<mx:Application
xmlns:mx=
"http://www.adobe.com/2006/mxml"
layout=
"vertical"
>
<mx:TextInput
i ......
FLEX 程序设计基础
【基础】
Adobe Flex编码指南
什么是mx_internal
delete关键字和类成员
我所理解的AS,Flex,AIR,Flex Builder和Flash
【事件】
Flex中的事件传播
关于flex事件的讲解
【性能】
使用Flex Builder 3.x 分析工具
理解Flash Player 9垃圾回收机制
【组件开发】
用ActionScript 开发高级可视化� ......
flex library project : create swf , not swc , code: -locale=en_US -directory=true -output=../bin/
create zh_CN language package : bin\compc -locale=zh_CN -source-path=frameworks/projects/framework/bundles/zh_CN/src -include-resource-bundles=collections,containers,controls,core,ef ......
