3ti-Flex技术培训-FLex基础

1、page 1,page 1,3ti技术培训资料,3ti Solutions,,Flex 基础,page 2,page 2,MXML语言 First Application,Flex基础篇,第一部分:,page 3,page 3,基础控件 容器与布局 组件事件 样式 皮肤 状态,效果 提示 光标 渲染 拖放 弹出窗口,Flex基础篇,第二部分:,page 4,page 4,MXML语言 First Application,Flex基础篇,page 5,page 5,Adobe是把Flex作为一个ActionScript类库实现的。这个类库包含了组件（容器和控件），manager类，数据服务类，以及具有其他特性的类。可以通过使用带有类库的MXML和ActionScript语言来开发应用程序。 MXML是一种可以在Adobe Flex中定义和描述用户界面组件的XML语言。用户可以使用MXML声明来定义程序中的非可视化组件，比如对服务器端数据源的访问以及用户界面组件和数据源之间的数据绑定。,MXML语言,page 6,page 6,第一个可视化组件 mx：命名空间 http:/ Button：

2、Button对象 id：组件的独一无二的标志 label： Button实例上的标签内容 第一个可视化应用 ,MXML语言,page 7,page 7,编译与运行 编辑器：notepad、Flex Builder 3 文件名： MyFirst.mxml SDK：Flex运行环境 Flex编译器：mxmlc.exe，存放在$Flex SDK_HOME3.0.0bin 设置$Flex SDK_HOME3.0.0bin到系统变量Path中 mxmlc -strict=true -file-specs MyFirst.mxml strict 选项设为true 来强制编译器执行strict模式。编译器对代码有更严格的检查。比如，检查是否为变量定义了类型 -file-specs用来定义需要编译的MXML文件 编译结果： MyFirst.swf 查看工具：Adobe Flash Player 9,MXML语言,page 8,page 8,MXML语言,page 9,page 9,提示：Adobe Flex Builder 3是一个含有一个可视化设计视图的开发Flex的集成开发环境（IDE）,MXML

3、语言,page 10,page 10,MXML标签与ActionScript类或者类中的属性是相对应的。当编译Flex应用程序的时候，Flex编译器会解析MXML标签并且生成相应的ActionScript类，然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中。 生成ActionScript中间文件 mxmlc -strict=true -keep-generated-actionscript -file-specs MyFirst.mxml mx 中的 mx前缀是一个命名空间。它是通过在Application标签中使用一个独一无二的URL来声明的。mx前缀把在mx命名空间中的每个组件映射到它的完全限定类名。从而Flex编译器可以在找到与mx命名空间中的MXML标签相对应的ActionScript类。,MXML语言,page 11,page 11,使用ActionScript来创建一个Button控件 ,MXML语言,page 12,page 12,提示：基于标签的、而且具有声明式语法的MXML是极大的方便了组件的展现和布局,MXML语言,page 13,pa

4、ge 13,MXML语言 First Application,Flex基础篇,page 14,page 14,XML声明 MXML文件就是一个普通的XML文件 标签 定义了Application容器，是每一个Flex应用程序的根标签。 标签 定义了一个面板容器，包含有一个标题栏，一个标题，一个状态信息，一个边框，以及用来放置子容器或空间的内容区域。 title（标题）属性的值被设定为 “My Application“。 标签 定义了一个Label控件，简单的显示文本的用户界面组件。它的text属性被设定为 “Hello, World!“。标签的fontWeight 和 fontSize 属性改变了字体的样式。也可以使用CSS给组件加上样式。,First Application,page 15,page 15,代码示例： ,First Application,page 16,page 16,First Application,page 17,page 17,基础控件 容器与布局 组件事件 主题样式 皮肤 状态,效果 提示 光标 渲染 拖放 弹出窗口,Flex基础篇,page 18,pag

5、e 18,在Adobe Flex 模型-视图设计模式中，视图是由用户界面组件展现的。MXML语言支持两种类型的用户界面组件：控件（control）和容器(container)。容器是屏幕上包含控件或者其他容器的矩形区域。控件是表单元件，比如按钮，文本域，以及列表框。,基础控件,page 19,page 19,说明 用来显示文本并/或接收用户的文本输入； text：基于属性，用来设置要显示的文本； 常用类型 Label Text TextArea TextInput RichTextEditor,基础控件-基于文本的控件,page 20,page 20,基础控件-基于文本的控件,page 21,page 21,基础控件-基于文本的控件,page 22,page 22,基础控件-基于文本的控件,page 23,page 23,说明 用来接受用户的界面操作，产生事件； 常用类型 Button LinkButton CheckBox RadioButton PopupButton,基础控件-基于按钮的控件,page 24,page 24,Button控件 经常被使用的矩形按钮; 文本标签/图标

6、/两者都有 普通Button控件在鼠标按在它上面的时候会一直处在被按下的状态； 开关Button控件在被点击之后处于被按下的状态，直到再次被点击； 鼠标点击会触发一个click事件和一个buttonDown事件 LinkButton控件 支持图标的单行超文本链接 没有边框的Button控件 打开一个URL,基础控件-基于按钮的控件,page 25,page 25,CheckBox控件 选中标记/未选中标记 值不相互排斥 一个文本标签作为标签显示 RadioButton控件 选中标记/未选中标记 值相互排斥 同一groupName的两个或两个以上RadioButton控件组成 PopUpButton控件 常用用法是使弹出按钮弹出一个列表框或者一个Menu控件来改变主按钮的功能或者标签。,基础控件-基于按钮的控件,page 26,page 26,基础控件-基于按钮的控件,page 27,page 27,基础控件-基于按钮的控件,page 28,page 28,说明 用来一组数据，以列表形式展现 ListBase ：基于类控件 从数据提供器（data provider）来获得数据 常用类型

7、ComboBox/List/HorizontalList/DataGrid/TileMenu 数据提供器 定义一个Array或者Collection作为该控件的子标签在MXML中内联地定义数据提供器，对静态数据和创建原型来说很适用； 将列表控件通过数据绑定的形式和ActionScript创建好的Array或者Collection建立关联，用来显示从服务器端获取的数据和绑定；,基础控件-基于列表的控件,page 29,page 29,Bindable private var subscriptions:ArrayCollection = new ArrayCollection ( data:0, label:“Print“, data:1, label:“Website“, data:2, label:“RSS (text)“, data:3, label:“Podcast“ ); ,基础控件-基于列表的控件,page 30,page 30,基础控件-基于列表的控件,page 31,page 31,基础控件 容器与布局 组件事件 主题样式 皮肤 状态,效果 提示 光标 渲染 拖放 弹出窗

8、口,Flex基础篇,page 32,page 32,Flex容器是Adobe Flash Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 包括简单的框、面板、表单以及在子容器之间的导航组件 (如折叠式导航器或选项卡式导航器)。 Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。,容器与布局,page 33,page 33,常见布局容器 Hbox：其内的每一个控件或容器只能按照水平的顺序排列 Vbox：其内的每一个控件或容器只能按照垂直的顺序排列 Panel：是一个具有标题和边框等的容器，常常用来容纳其他的容器 HDividedBox：对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线 Tile：以多行或多列的形式排列其子级 Form：以标准的表单

9、格式排列其子级 ApplicationControlBar：容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘 ControlBar：将控件置于 Panel 或 TitleWindow 容器的下边缘。,容器与布局,page 34,page 34,容器与布局,page 35,page 35,容器与布局,page 36,page 36,常见导航容器 Accordion ：定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。 TabNavigator：创建和管理一组选项卡, 使用它们可在其子级中间导航。 其子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。 ViewStack：由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。,容器与布局,page 37,page 37,Flex容器用来自动定位其中的定义的所有的子组件。如果使用Canvas容器，或者layout属性被设定 “absolute“ 的Application或Panel容器，可以为它们的子组件进行绝对定位，或者使用基于约束的布局。 三种方法来定位组件 使用自动定位 使用绝对定位 使用基于约束的布局,容器与布局,page 38,page 38,多数容器 按照该容器的布局规则自动定位它的子组件 布局方向/容器的补白（padding）/容器中子组件之间的间隔 自动定位的容器， 直接设定子组件的x属性或y属性：无效 调用move()方法：无效 设定layout属性:有效“horizontal”, “vertical” 和 “a

《3ti-Flex技术培训-FLex基础》由会员开***分享，可在线阅读，更多相关《3ti-Flex技术培训-FLex基础》请在金锄头文库上搜索。