- 浏览: 78106 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
兩ting:
说实话,我没有装成功。。。
Ubuntu上搭建Flex4的开发环境 -
chenzhou123520:
写得很好,赞一个,不过指出一个小错误引用表 2. IoSess ...
Mina服务器开发入门基础,实例讲解 -
jinx3166:
受益良多!
关于flex不能移除监听器总结 -
兩ting:
Flex太强大了,不过会的人不是很多.精通的人就更少了
Ubuntu上搭建Flex4的开发环境 -
liminjun:
你们平时开发也是用Ubuntu吗?Flex做企业项目还是有很大 ...
Ubuntu上搭建Flex4的开发环境
Flex 组件的定位和布局
大多数 Flex 容器使用预定义的规则集来自动定位您在其内定义的所有子组件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。
在 Flex 应用程序中定位组件的方法有三种:
- 使用自动定位
- 使用绝对定位
- 使用基于限制的布局
使用自动定位对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。
对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。
可以通过指定容器属性控制布局的各个方面。下列属性是最常见的:
layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时, 容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。
horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。
此示例覆盖 Application 容器的 horizontalAlign 属性的 "left" 的默认设置和Application 容器的 verticalAlign 属性的 "top" 的默认设置以分别指定 "center" 和 "middle"。
此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label 和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutAutomatic/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="380" height="150"
- >
- <mx:Panel
- title="My Application"
- paddingTop="10" paddingBottom="10"
- paddingLeft="10" paddingRight="10"
- layout="horizontal" verticalAlign="middle"
- >
- <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
- <mx:Button
- id="myButton" label="Click Me!"
- click="myLabel.text = 'Hello, World!';"
- />
- </mx:Panel>
- </mx:Application>
使用绝对定位
有三个容器支持绝对定位:
如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。
Canvas 容器始终使用绝对定位。
使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局;否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。
此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。
提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutAbsolute/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="280" height="170"
- >
- <mx:Panel
- title="My Application" layout="absolute"
- width="220" height="90"
- >
- <mx:Label
- id="myLabel"
- x="10" y="10" width="180"
- fontWeight="bold" fontSize="24"
- />
- <mx:Button
- id="myButton"
- x="60" y="10"
- label="Click Me!"
- click="myLabel.text = 'Hello, World!';"
- />
- </mx:Panel>
- </mx:Application>
使用基于限制的布局
您可以通过使用基于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。
您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。
您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。
锚定组件的边缘
您可以将组件的一个或多个边缘锚定在其容器的相应边缘的某个像素偏移处。 当容器调整大小时, 锚定的子级边缘保持与父级边缘的距离相同。
top、 bottom、 left和 right 样式属性指定组件侧边与相应的容器侧边之间的距离 (以像素计)。
下面的示例中的 Button 控件具有锚定的底边和右边, 与它所在的 Panel 容器的边相距 10 个像素。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="360" height="200"
- >
- <mx:Panel
- title="My Application" layout="absolute"
- width="300" height="130"
- >
- <mx:Button
- id="myButton"
- label="A button"
- bottom="10"
- right="10"
- />
- </mx:Panel>
- </mx:Application>
拉伸组件 如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutConstraintsEdges/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="360" height="200"
- >
- <mx:Panel
- title="My Application" layout="absolute"
- width="300" height="130"
- >
- <mx:Button
- id="myButton"
- label="A button"
- top="10"
- bottom="10"
- left="10"
- right="10"
- />
- </mx:Panel>
- </mx:Application>
锚定组件的中心
您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。
horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离;一个负数会从中心向左或向上移动组件。
horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutConstraintsCenter/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="360" height="200"
- >
- <mx:Panel
- title="My Application" layout="absolute"
- width="300" height="130"
- >
- <mx:Button
- id="myButton"
- label="A button"
- verticalCenter="0"
- horizontalCenter="0"
- />
- </mx:Panel>
- </mx:Application>
一个更加复杂的示例
下面的这个示例使用基于限制的布局来居中 Label 控件并使 Button 控件拉伸至几乎 Panel 的完全长度。 将 Label 控件的 top 属性设置为 10 以限制它看起来与 Panel 的顶部的距离为 10 像素。 将其 horizontalCenter 属性设置为 10 以完美地将它在 Panel 中居中。
将 Button 控件的 left 和 right 属性设置为 10 以使它拉伸至距离 Panel 的每一边都在 10 像素内。 将其底边属性设置为 10 以限制其底边距离 Panel 的下边为 10 个像素。
下面的图说明您以可视方式设置的属性的效果。 可视布局控件是 Flex Builder 2 的设计视图的组成部分。
提示: 不要使用 verticalCenter 样式属性指定 top 或 bottom 样式属性, verticalCenter 值会覆盖其他属性。 类似地, 不要使用 horizontalCenter 样式属性指定 left 或 right 样式属性。
由基于限制的布局确定的大小会覆盖任何显式或基于百分比的大小规范。 例如, 如果您指定 left 和 right 样式属性, 产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。
示例
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application
- xmlns:mx="http://www.adobe.com/2006/mxml"
- viewSourceURL="src/LayoutConstraints/index.html"
- horizontalAlign="center" verticalAlign="middle"
- width="360" height="200"
- >
- <mx:Panel
- title="My Application" layout="absolute"
- width="300" height="130"
- >
- <mx:Label
- id="myLabel"
- fontWeight="bold"
- fontSize="24"
- top="10"
- horizontalCenter="0"
- />
- <mx:Button
- id="myButton"
- label="Click Me!"
- click="myLabel.text = 'Hello, World!';"
- bottom="10"
- height="22"
- left="10"
- right="10"
- />
- </mx:Panel>
- </mx:Application>
发表评论
-
BlazeDS的功能原理及配置实例
2013-05-01 23:26 1177BlazeDS Test Drive里面示例了主要的功能: ... -
Flex与Severlet(Jsp)通信传递中文参数乱码问题的解决
2013-02-19 15:51 721Java代码 var url ... -
Java与Flex建立Socket连接
2013-02-17 23:42 889Socket与其他的通信技术最大的不同是Socket连接在数 ... -
Ubuntu上搭建Flex4的开发环境
2013-02-15 20:58 1229原文出自:http://www.brighthub.com/ ... -
flex web应用程序生成自定义右键菜单
2013-01-25 17:13 1102屏蔽浏览器的鼠标右键,同时监听鼠标右键,当触发右键点击事件的 ... -
Flex通过HTTPService与servlet通信
2013-01-16 15:03 1031Flex通过HTTPService与servlet通信 ... -
flex摄像头连接视频录制
2012-12-25 23:55 1650Flex提供了3个类实 ... -
Flex中多线程的实现(摘)
2012-12-25 19:49 1286Flex中多线程的实现 最近在网上看到一个工具 ... -
flash builder 4.7 install for windows 8
2012-12-23 01:02 1318之前在自己的win8上集成fb到myecl ... -
flex load map
2012-12-21 15:48 1008ArcGIS Server flex加载google地图 ... -
Flex与JavaScript交互调用函数
2012-12-21 09:43 890一、在JavaScript中调用Flex方法 在 Flex ... -
关于flex不能移除监听器总结
2012-12-20 00:07 1902首先看我从网上转载了一篇文章: <!--------- ... -
Flex中TitleWindow关闭按钮CloseButton的定制问题
2012-11-29 16:01 1206问题:TitleWindow的关闭 ... -
flex学习之联动下拉框实现
2012-11-27 12:55 1314Java代码 TbArea.java ... -
flex中弹出确认对话框
2012-11-22 16:30 855Xml代码 <?xml versi ... -
Flex(ActionScript3)解析XML
2012-11-20 17:21 682正文: 对于如下的一个XML文档,在flash中应该怎么读呢 ... -
MessageBroker /amf
2012-11-20 10:58 924MessageBroker 我们称他为信息经纪人,它职责就是把 ... -
Flex异步令牌AsyncToken的用法介绍
2012-11-15 09:28 731什么是AsyncToken?官方文档是这样描述的:" ... -
Flex布局简介
2012-11-14 14:38 823★设置组件布局 对于所有的继承自UIComponent的组件包 ... -
Flex编程注意之直接获取某个组件的对象(this[]用法)
2012-11-14 13:09 668有这样一个需求:假如你new了一百次Button,同时这 ...
相关推荐
NULL 博文链接:https://shuiyan.iteye.com/blog/634967
综上所述,Flex组件时间轴是一个结合了Flex布局灵活性和时间序列信息展示的高效工具。通过掌握Flex布局原理和实践,开发者可以创建出功能强大且用户体验良好的时间轴组件,满足不同应用场景的需求。在实际开发中,...
标题中的“flex组件”指的是在前端开发中广泛使用的Flex布局技术。Flex布局,全称Flexible Box,是一种用于处理容器中子元素布局的CSS3模块。它允许开发者在不同尺寸的设备上灵活地调整元素的大小和位置,尤其适用于...
Flex3 界面布局是Adobe Flex 3框架中用于组织和定位用户界面元素的重要机制。在Flex3中,布局管理主要是通过不同的布局容器来实现,这些容器提供了多种布局方式,帮助开发者创建美观、高效的用户界面。下面我们将...
这里通常用来初始化组件的内容和结构,但不涉及子组件的布局和定位。而`updateDisplayList()`方法则用于在测量阶段之后,根据组件的尺寸和位置属性来定位和绘制子组件,包括它们的大小和位置。 布局方面的定制,...
- **特点**:这是Flex中最基本的布局方式,采用绝对定位,可以通过指定子组件的`x`和`y`坐标来精确控制其位置。 - **应用场景**:适用于需要精确控制每个元素位置的场景。 2. **HorizontalLayout** - **特点**:...
确保这些元素与Flex Tree组件一起布局,形成直观的交互界面。 2. **事件监听**:为“检索”按钮添加点击事件监听器。当用户点击按钮时,触发定位函数。 3. **数据处理**:在定位函数内部,首先获取文本输入框中的...
它旨在解决传统布局模式(如流式布局、网格布局和定位)在处理复杂单行或多行布局时的局限性。`Flexbox`以容器为中心,每个子元素都可以灵活地调整大小和位置,以适应不同的空间需求。 在`Flex`布局中,有两个主要...
- **Flex 3**:Flex 3作为Flex系列中的一个重要版本,提供了更多的功能和改进,包括增强的UI组件库、更强大的数据绑定能力以及对多媒体的支持等。 - **Flex 3 Beta 1**:这是一个早期测试版本,主要面向开发者进行...
4. **Flex组件**:Flex 3提供了一系列丰富的预定义组件,如Button、Label、Canvas等,源码会展示如何使用这些组件创建复杂的用户界面,并进行自定义。 5. **数据服务**:Flex 3支持与各种后端数据源的集成,如AMF、...
- **交互式调试**:Flex3与Flex4均支持交互式调试,这对于快速定位问题非常有帮助。 ##### 4. 设计视图 - **CSS外观和样式设计**:Flex3与Flex4均提供了CSS样式的设计支持,使得开发者可以更加方便地调整界面的...
11. **Flex应用程序生命周期**:从创建到销毁,Flex组件有其特定的生命周期,理解这个过程对于编写高效且无内存泄漏的代码至关重要。 12. **项目构建和部署**:教程会讲解如何配置和构建Flex项目,以及将应用程序...
6. **Flex组件库**:Flex Builder 3包含大量预定义的UI组件,如按钮、标签、面板等,开发者可以通过拖放方式快速构建界面。此外,还可以自定义组件以满足特定需求。 7. **版本控制集成**:插件支持常见的版本控制...
第四章"ActionScript 3.0语法基础"深入探讨了AS3的关键语法元素,如变量、数据类型、控制流语句和函数,这对于理解Flex组件的行为至关重要。 第五章"事件和事件机制"阐述了事件处理的基本概念,如何定义和处理不同...
Flex组件的生命周期是Adobe Flex应用程序开发中的核心概念,它涵盖了组件从创建到销毁的各个阶段。在Flex中,每个UI组件都有一个明确的生命周期,这个生命周期由一系列的事件和方法组成,开发者可以通过这些事件和...
4. **Flex组件** Flex提供了大量预定义的UI组件,如按钮、标签、列表、面板等,开发者可以通过这些组件快速搭建用户界面。每个组件都有丰富的属性和方法,可自定义样式和行为。 5. **布局管理** Flex支持多种布局...
在移动端Web开发中,Flex布局(Flexible Box布局)是一种强大的CSS布局模式,旨在提供更灵活的盒模型,以便在各种屏幕尺寸和设备上创建响应式布局。本案例将深入探讨Flex布局的应用,以及如何利用它来优化移动端网页...
本教程将全面介绍FlexBuilder 3的使用方法和在实际开发中的应用,尤其注重实践操作,帮助开发者掌握其核心功能和常见控件的运用。 一、FlexBuilder 3简介 FlexBuilder 3是基于Eclipse平台构建的,提供了代码编辑、...
从初始化、布局计算到渲染,Flex应用程序有一套完整的生命周期管理,理解这个过程对于优化性能和解决布局问题至关重要。 八、图形和动画 Flex支持创建复杂的矢量图形和动画效果,通过DisplayObject类和...