第16讲：Flex中的界面布局和导航(上).ppt

目录 1、容器简介及分类 2、布局容器 2.1、Canvas布局 2.2、HBox、VBox布局 2.3、ControlBar、ApplicationBar 3、Divided Box 、HDividedBox、VDividedBox 4、表单、表单头、单元格布局容器 5、格栅布局容器(Grid Layout Container) 6、导航容器(Navigator Container) 6.1、视窗堆栈导航容器 6.2、列表导航容器 6.3、折叠导航容器 1、容器简介及分类 容器简介 Flex容器的定位方式 容器的分类 按其使用方式又可以分为:布局和导航两种方式 1、布局容器(Layout Container) 这类容器用于对子类组件进行定位和限定尺寸。 如：HBox,VBox等 2、导航容器(Navigator Container) 这类容器用于控制用户对于多个子容器的导航和转移.如：TabNavigator… 不论是布局容器还是导航容器都是基于最基本的容器—应用容器. 布局容器 2.1、Canvas容器 2.1、HBox 等价于： s:BorderContainer x=70 y=117 width=200 height=200 s:layout s:HorizontalLayout/ /s:layout /s:BorderContainer 2.2、VBox 等价于： s:BorderContainer x=70 y=117 width=200 height=200 s:layout s:VerticalLayout/ /s:layout /s:BorderContainer 控制条布局容器（ControlBar LayOut Contrainer） 应用控制条容器(Application ControlBar Layout Container) 3、Divided Box 、HDividedBox、VDividedBox 如（HDividedBox.mxml）： 4、表单、表单头、单元格布局容器 (Form、FormHeading、FormItem Layout Container) 如(FormSample.mxml): 如(FormSave.mxml)： fx:Script ![CDATA[ private function processValues(zip:String, pn:String):void { // Validate and process data. lblmsg.text = zip+ +pn; } ]] /fx:Script mx:Label id=lblmsg / mx:Form id=myForm defaultButton={mySubmitButton} mx:FormItem label=姓名 required=true mx:TextInput id=myName/ /mx:FormItem mx:FormItem label=电话号码 mx:TextInput id=phoneNumber/ /mx:FormItem mx:FormItem mx:Button label=提交 id=mySubmitButton click=processValues(myName.text, phoneNumber.text);/ /mx:FormItem /mx:Form 如：(FormModel.mxml) fx:Declarations !-- 将非可视元素（例如服务、值对象）放在此处 -- !-- 定义数据模型. -- fx:Model id=myFormModel userInfo myNameModel{myName.text}/myNameModel phoneNumberModel{phoneNumber.text}/phoneNumberModel /userInfo /fx:Model !-- 定义数据确认. -- mx:StringValidator source={myFormModel} property=myNameModel requiredFieldError=请输入姓名 trigger={mySubmitButton} triggerEvent=click listener={myName}/ mx:PhoneNumberValidator source={myFormModel} property=phoneNumberModel trigger={mySubmitButton} triggerEvent=click listener={phoneNumber}/ /f