Flex 控件容器等的使用

lenhan12345

贡献于2012-10-15

字数:16558 关键词: Flex开发

Flex 控件的使用 使用基于文本的控件 基于文本的控件用于显示文本和/或接收来自用户的文本输入。 在 Flex 中提供的基于文本的控件有 Label、Text、TextArea、TextInput 和 RichTextEditor 控件。TextInput 和 TextArea 组件既可以显示文本又可以接受用户输入, 而 Label 和 Text 控件仅用于显示文本。 Text 和 TextArea 控件可以显示跨多行的文本, 而 Label 和 TextInput 控件用于显示单行文本。 使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。 所有基于文本的组件都有一个 text 属性, 可用来设置要显示的文本。 示例 使用基于按钮的控件 组件的 Button 系列包括 Button、LinkButton、CheckBox、RadioButton 和 PopupButton 控件。 Button 控件是一个常用的矩形按钮。Button 控件看起来就像被按下一样, 在其面上有一个文本标签、一个图标或全部两者。可以选择为几个 Button 状态的每一个指定图形外观。可以创建一个普通 Button 控件或一个切换 Button 控件。只要在选中之后按下鼠标按钮, 普通 Button 控件就会保持其被按下的状态。切换 Button 控件直到您又一次选中它之后, 才会保持被按下的状态。 当用户选中控件时, 按钮通常使用事件监听器来执行操作。 当用户在 Button 控件上单击鼠标, 且 Button 控件被启用时, 它会发出一个 click 事件和一个 buttonDown 事件。 LinkButton 控件创建一个支持可选图标的单行超文本链接。 它根本上是一个没有边框的 Button 控件。 可以使用 LinkButton 控件在 Web 浏览器中打开 URL。 CheckBox 控件是一个常用的图形控件, 它可以包含一个复选标记或者未被选中 (空)。 在需要收集一组并不相互排斥的 true 或 false 值的地方, 可以使用 CheckBox 控件。 可以给 CheckBox 控件添加文本标签, 并将文本标签置于复选框的左侧、右侧、顶部或底部。 Flex 会裁剪 CheckBox 控件的标签以适合控件的边界。 使用 RadioButton 控件, 用户可以在一组相互排斥的选项内作单一选择。RadioButtonGroup 控件由具有相同组名的两个或更多 RadioButton 控件组成。该组可以指由 标签创建的组。用户一次仅选择该组的一个成员。选择某个未选中的组成员会取消选中该组内当前选中的 RadioButton 控件。 PopUpButton 控件给 Button 控件添加一个灵活的弹出控件界面。它包含一个主按钮和一个辅助按钮, 这个辅助按钮也称为弹出按钮, 当用户单击该弹出按钮时, 它会弹出任何 UIComponent 对象。PopUpButton 控件的一个常见的用途是让弹出按钮打开 List 控件或 Menu 控件, 这两个控件更改主按钮的功能和标签。 示例 使用基于列表的控件 基于列表的控件是在其继承层次结构内的某些点上扩展 ListBase 类的那些控件。它们包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。 几个 Flex 框架组件 (包括所有基于列表的控件) 表示来自某个数据提供程序的数据, 数据提供程序是一个包含控件所需数据的对象。例如, 一个 Tree 控件的数据提供程序确定树的结构和分配给每个树节点的相关联的数据, 而一个 ComboBox 控件的数据提供程序确定控件的下拉列表中的项目。 注意: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也从数据提供程序获取数据。显示应用程序数据的控件有时被称为数据提供程序控件。有关使用数据提供程序的详细信息, 请参阅 Flex 2 开发人员指南*中的“使用数据提供程序和集合”。 您可以使用两种方法设置组件的数据提供程序: 第一种方法是通过将 Array 或 Collection 定义为取得数据提供程序的控件的子标签, 在线上在 MXML 中定义数据提供程序。这种方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。第二种方法是使用数据绑定将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。这后一种方法用于显示由服务器端调用引起的数据及用于绑定到在 ActionScript 中创建的数据结构。这种方法也是这两种方法中较有可伸缩性的。 下面的示例说明这两种方法。 示例 定义状态过渡 通常在响应用户操作时, 视图状态使您可以改变应用程序的内容和外观。 改变视图状态时, Adobe® Flex® 会同时执行对应用程序的所有可视更改。 由于对视图状态的所有更改会同时发生, 用户会看到应用程序从一种状态跳到另一种状态。 而您可能希望定义一个从一种状态到下一种状态的平滑的可视更改, 在其中更改是在一段时间上发生的。 过渡定义如何使对视图状态的更改看起来像是在屏幕上发生的一样。 过渡是当视图状态更改发生时播放的组合到一起的一种或多种效果。 过渡不会替换效果;即, 您仍可以将单一效果应用到一个组件, 并通过使用一个效果触发器或者 playEffect()方法来调用该效果。 您使用 标签来创建过渡并自定义它, 方法是通过使用其 fromState、 toState 和 effect 属性。 fromState 属性指定当应用该过渡时您要更改的视图状态, toState 属性指定您要更改为的视图状态, 而 effect 属性是对要播放的 Effect 对象的引用。 在过渡中, 可以通过使用 标签引发并行或按顺序播放的效果。 在下面的示例中, 您定义了一个任何时候状态发生更改都会使用的过渡。 此过渡是由一种并行效果组成的。 并行效果也是一种复合效果, 因为它包含其他效果。 在此示例中, 并行效果包含一个调整大小效果和一个顺序效果。 并行效果的子效果全部在同时运行。 执行调整大小效果会花费 500 毫秒, 且该效果使用一种简易的功能使得在调整大小时该面板会弹出。 顺序效果也是一种复合效果。 与并行效果不同, 顺序效果的子事件按它们被添加的顺序, 一次运行一个。 下面的示例中的顺序效果包含两个模糊效果。 模糊效果会模糊其目标组件并可以用于创建速度感或表示焦点的增益或损失。 示例                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        使用容器 容器定义 Adobe® Flash® Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。 Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。 在 Flex 应用程序的根部是称为 Application 容器的单一容器, 它代表整个 Flash Player 绘图表面。此 Application 容器容纳所有其他容器和组件。 提示: 不同的容器支持不同的布局规则, 包括 automatic 和 absolute 定位。关于这一点的详细信息, 请参阅 Flex 组件的定位和布局。 使用布局容器 使用导航器 使用布局容器使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器: 使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:   名称 描述 Panel Panel 容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 "absolute" 或 "horizontal"来覆盖此设置。 HDividedBox HDividedBox 容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。 Tile Tile 容器以多行或多列的形式排列其子级。 Form Form 容器以标准的表单格式排列其子级。 ApplicationControlBar ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。 ControlBar ControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。 此外, 该示例使用 Spacer 控件 (它不是一个容器) 来帮助进行界面的布局。 提示: Spacer 控件是用于在自动定位的容器内准确定位元素的一个不可见控件。 在此示例中, Spacer 控件是 ApplicationControlBar 容器中唯一基于百分比的组件。 Flex 调整 Spacer 控件的大小以占据容器中其他组件不需要的所有可用空间。 通过扩展 Spacer 控件, Flex 将 Button 控件推到该容器的右边缘。 示例                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               使用导航容器导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。 导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件;控件必须是导航器容器的子容器的子级。 下面的表格描述下面的示例使用的导航器容器:   名称 描述 Accordion Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。 TabNavigator TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。 ViewStack ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制;您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。 示例                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        Flex中的RPC Services Flex2.0中有三种机制与服务器交互数据:RPC(Remote precedure call), Data Service, publish-subscribe messaging 后面两种需要Flex Enterprise Service的支持. RPC: 发送异步请求到远程服务,并将结果直接返回给Flex应用. RPC服务可以是HTTP URL, SOAP兼容的Web service, Java Web应用的Java对象. 客户端的RPC服务组件是HTTPService, WebService和Remoting Object. HTTPService和WebService的使用不需要Flex Enterprise service的支持. Remoting Object必须有Flex Enterprise service的支持. 缺省情况下,Flash Player不允许跨域访问.因此,RPC服务必须在同一个域中,或者在crossdomain.xml文件中定义. RemoteObject组件使得可以使用服务端对象的方法, 而不需要将其配置成WebService. 你需要将服务端对象配置成远程服务目标. WebService组件使得可以与Web Services交互. Web Services需要在WSDL文件中配置 HTTPService组件可以接收和发送HTTP GET, POST请求. HTTPServie在不能将接口定义为WebSerice和RemotingObject的时候,是一个非常好的选择. 比如: JSP, Servlet, Asp等等. Flex应用将会被编译成二进制的SWF文件,送到客户端. 当Flex应用与外部服务交互时, SWF不需要重新编译,也不需要再次刷新. 可以直接使用Web Services或者HTTP Services, 而不需要在服务器的文件中进行配置. 方法如下: 在HTTPService组件中在url属性中直接引用wsdl值, 而不使用destination属性, 并且将useProxy属性设置为false 或者在Action Script中这样使用: // Import required packages. import mx.rpc.http.HTTPService; import mx.rpc.soap.WebService; // Declare an HTTPService component. private var yahoo_web_search:mx.rpc.http.HTTPService = new HTTPService(); yahoo_web_search.url = "http://api.search.yahoo.com/WebSearchService/V1/webSearch"; empoyeeHTTP.useProxy = false; // Declare a WebService component. private var macr_news:mx.rpc.soap.WebService = new WebService(); macr_news.wsdl = "http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"; macr_news.useProxy = false; RPC Service组件的destination属性引用一个Flex Enterprise Services定义的一个目标.

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 7 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档