1、FLEX技术之四界面布局和导航,康玉忠 KYZEAL 广东科学技术职业学院,知识回顾布局的容器和控件,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 A。基于文本的控件 B。基于按钮的控件 C。基于列表的控件 D。加入资源的控件,知识回顾布局的容器和控件,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 A。 基于文本的控件(Text controls):Label(单行文本显示)、 Text(多行文本显示)、 TextInput(单行文本显示与输入)TextArea(多行行文本显示与输入)RichTextEditor (富文本显示与输入),用于显示文本和/或
2、接收来自用户的文本输入，都有一个 text 属性用于设置要显示的文本。 使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。,知识回顾布局的容器和控件,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 基于按钮的控件 Button(激活时会发出click和buttonDown事件) LinkButton(用于打开URL) CheckBox(复选标签） RadioButton(单选标签创建的组) PopupButton 控件(常用于打开List控件或Menu
3、控件签),激活时会发出click和buttonDown事件，用于 URL 链接，单选、多选、菜单选择。,知识回顾布局的容器和控件,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 基于列表的控件 ComboBox、 List、 HorizontalList、 DataGrid、 Tilelist、Tree 控件,从某数据提供程序的数据，获得数据 使用Bindable元数据标签(属性非默认绑定,必须明确的声明被绑定的属性)，将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。,布局的容器和控件加入IMAGE案例,常用可视控件: 使用可视控
4、件组织界面，可以定义组件属性供外部访问 D。加入资源(图片,音频,视频,程序): Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。 加入MP3音频: 您可以在 Flex 应用程序中通过使用Embed元数据标签嵌入MP3文件并播放它。 加入视频FLV: 在 Flex 应用程序中加入视频组件。,运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序
5、的负担(体积变大，且图片编辑后需要重新编译),Image(图画)控件：/简单地内嵌一个富媒体.png /在脚本中定义富媒体对象，在MXML中可以多次嵌入 ,布局的容器和控件加入SWF案例,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 D。加入资源(图片,音频,视频,程序): Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。 加入MP3音频: 您可以在 Flex 应用程序中通过使用E
6、mbed元数据标签嵌入MP3文件并播放它。 加入视频FLV: 在 Flex 应用程序中加入视频组件。,运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译),SWFLoader控件: /外载入SWF程序/内嵌入SWF程序 ,布局的容器和控件加入FLV视频案例,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 D。加入资源(图片,音频,视频,程序): Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) SWFLoader
7、控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。 加入MP3音频: 您可以在 Flex 应用程序中通过使用Embed元数据标签嵌入MP3文件并播放它。 加入视频FLV: 在 Flex 应用程序中加入视频组件。,运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译),布局的容器和控件加入MP3音频案例,常用可视控件: 使用可视控件组织界面，可以定义组件属性供外部访问 D。加入资源(图片,音频,视频,程序): Image(图画)控件
8、: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。 加入MP3音频: 您可以在 Flex 应用程序中通过使用Embed元数据标签嵌入MP3文件并播放它。 加入视频FLV: 在 Flex 应用程序中加入视频组件。,运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译),加入MP3音频:,知识回顾布局的容器,1。布局容器: 使用
9、布局容器可进行用户界面布局。 2。 导航容器: 使用导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。,知识回顾布局的容器,1。布局容器: 使用布局容器可进行用户界面布局。 A。 面板(Panel)容器显示一个标题栏、一个标题、一个边框及其子级。 B。 HDividedBox容器 、 HBox 容器、 VDividedBox 、V HBox 容器HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 C。表单(Form)容器 以标准的表单格式排列其子级。 D。平铺(Tile)容
10、器 以多行或多列的形式排列其子级。 E。 ApplicationControlBar 容器 提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。 F。 ControlBar容器 将控件置于 Panel 或 TitleWindow 容器的下边缘。 G。Spacer控件来辅助布局。Spacer控件并非容器，而是基于百分比的可用于挤占留空以准确定位的一个不可见控件。,知识回顾布局的容器,2。 导航容器: 使用导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。 A，手风琴(Accordion)容器 定义一个子面板序列,
11、 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。 B, TabNavigator容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。 C, ViewStack容器 由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切
12、换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。,知识回顾布局的容器,A . 面板(Panel)容器 显示一个标题栏、一个标题、一个边框及其子级。默认情况下, Panel 容器会对子组件进行垂直布局, 并且可以通过将布局属性设置为 “absolute“ 或 “horizontal“来覆盖此设置。,FLEX技术之四实例之一HDividedBox容器组件,B. HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割
13、线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。,FLEX技术之四实例之一HDividedBox容器组件,B. HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。,你来试一试！,通过moveDivider()和getDividerAt()函数，在程序代码中动态改变HDividedBox容器部分大小,FLEX技术之四实例之一HDividedBox容
14、器组件,B. HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。,你来试一试！,通过moveDivider()和getDividerAt()函数，在程序代码中动态改变HDividedBox容器部分大小,FLEX技术之四实例之一HDividedBox容器组件,B. HDividedBox容器 对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂
15、直布局, 而且也在子级之间插入一个可调整的分割线。,你来试一试！,moveDivider() getDividerAt(),FLEX技术之四实例之二TabNavigator容器组件,TabNavigator容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。,FLEX技术之四实例之二TabNavigator容器组件,TabNavigator容器 创建和管理一组选项卡, 使用它们可在其子级中间导航。 Tab
16、Navigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。,你来试一试！,FLEX技术之四实例之三DateField日期组件,DateField,你来试一试！,实战任务,1 实例之一HDividedBox容器组件 2 实例之二TabNavigator容器组件 3 实例之三DateField日期组件 4 如何创建不可拖动的TitleWindow容器 64 5 如何利用HorizontalList控件创建相册 67 6 如何实现自定义中文日期选择 69 7 如何为List控件项添加图标 72,
