2014年FLEX技术之二——控件和容器.pptVIP

FLEX技术之二——控件和容器 1　Flex 3提供哪些控件　 2　Flex 3提供哪些容器　 3　如何设置组件大小 4　组件定位和布局的方法 5　简介数据提供程序和集合 应用实践 知识回顾——FLEX的应用程序框架 FLEX的应用程序框架（一个库、两个语言） Mxml是flex的标记语言，用来描述界面，同Html非常相似，而且mxml更加规范化和标准化。 Mxml最终会被编译器解析为Action Script,然后生成flash的swf文件。 知识回顾——开发Flex应用程序的步骤 开发Flex应用程序的步骤： 1。 布置组件以设计用户界面。 2。 使用样式和主题来增强视觉方面的设计。 3。 添加动态行为（例如程序部件之间的相互作用） 。 4。 将源代码编译成SWF文件 知识回顾——MXML 知识回顾——MXML 知识回顾——MXML使用控件 使用控件 mx:Button/mx:Button 定义一个按钮控件 如果控件中未包含其他子元素可这样写：mx:Button / 知识回顾——MXML使用组件 Panel 容器包括标题栏、标题、边框及其子项的内容区域。通常，您使用 Panel 容器包围顶级应用程序模块。它也是开发中常用的一种容器。 知识回顾——AS脚本处理 知识回顾——应用程序拓展处理P24 ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/2006/mxml layout=absolute horizontalAlign=center verticalAlign=middle mx:Script ![CDATA[ private function btnClick(evt:Event):void { event_txt.text+=\n \n\t Event Target.id:+evt.target.id; if (evt.target.id==button1) event_txt.text+=\n 你按下了button1控件的 Click 事件；; if (evt.target.id==button2) event_txt.text+=\n 你按下了button2控件的 Click 事件；; if (evt.target.id==button3) event_txt.text+=\n 你按下了button3控件的 Click 事件；; } ]] /mx:Script mx:Panel width=360 height=240 layout=absolute title=事件处理 horizontalCenter=0 verticalCenter=6 horizontalAlign=center verticalAlign=middle mx:Button id=button1 label=button1 click=btnClick(event); y=10 x=34/ mx:Button id=button2 label=button2 click=btnClick(event); y=10 x=113/ mx:Button id=button3 label=button3 click=btnClick(event); x=192 y=10/ mx:TextArea id=event_txt y=40 width=100% height=100% enabled=true horizontalCenter=0/ /mx:Panel /mx:Application 知识回顾——应用程序拓展处理P24 ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/2006/mxml layout=absolute horizontalAlign=center verticalAlign=middle mx:Script ![CDATA[ 。。。。]] /mx:Script mx:Panel width=360 height=240 layout=absolute title=事件处理 horizontalCenter=0 verticalCenter=6 horizontalAlign=center verticalAlign=middle mx:Button id=button1 label=button1 click=btnClick(event); y=10 x=34/ mx:Button id=button2 label=button2 click=btnClick(event); y=10 x=113/ mx:Button id=b