flex4.5从浅入深第一章

### Flex4.5从浅入深第一章：可视化组件运用 #### 一、Flex与组件的基础概念 《Flex4.5从浅入深》这一章节主要介绍了Adobe Flex框架的基础知识，尤其是针对初学者如何快速掌握Flex的基本组件使用方法。Flex是一种用于开发富互联网应用(RIA)的开源框架，它允许开发者使用MXML(一种基于XML的语言)和ActionScript来构建用户界面。 #### 二、Flex文档结构解析 Flex应用程序通常以特定的XML结构为基础，这里介绍了一个简单的Flex文档结构示例： ```xml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> </s:Application> ``` - **`<s:Application>`**：这是Flex应用的根容器，所有可见的UI组件都应放置在这个标签内部。 - **`xmlns:fx`, `xmlns:s`, `xmlns:mx`**：这些是命名空间定义，用于区分不同的库和组件版本。`s`指向Flex 4.5的Spark组件库，而`mx`指向Flex 3的Halcyon组件库。 - **`minWidth` 和 `minHeight`**：定义了应用的最小宽度和最小高度。 - **`<fx:Declarations>`**：此标签用于包含任何非可视元素，例如数据提供者和服务等。 #### 三、Flex组件与可视化 在Flex中，组件是构建用户界面的基本单元。这些组件可以通过拖拽方式或通过编写MXML代码添加到应用程序中。可视化组件是指可以直接在界面上看到的组件，如按钮、文本框等。 #### 四、Button组件详解 本章节详细介绍了Button组件的使用方法，包括其基本属性及其如何在舞台上进行布局。 ##### 1. Button组件的基本使用 - **标签语法**：`<s:Button label="按钮文字"/>` - **`label`**：指定按钮上的文本。 ##### 2. Button组件的位置和尺寸控制 - **位置控制**：通过设置`x`和`y`属性来控制按钮的位置。 - **`x`**：按钮的水平偏移量。 - **`y`**：按钮的垂直偏移量。 - **尺寸控制**：通过设置`width`和`height`属性来控制按钮的大小。 - **`width`**：按钮的宽度。 - **`height`**：按钮的高度。 示例代码： ```xml <s:Button x="100" y="100" width="50" height="50" label="小样"/> ``` 以上代码创建了一个位于舞台坐标(100, 100)，宽高均为50像素的按钮，并设置了按钮文本为“小样”。 #### 五、Button组件的认知 进一步讨论了Button组件的各种特性和用途，以及如何利用Button组件与其他组件进行交互。通过实例演示了如何使用Button组件创建简单的用户界面，并介绍了如何通过编程方式改变Button组件的属性。 通过本章节的学习，读者可以初步了解Flex的基础知识，特别是如何使用可视化组件来构建用户界面。此外，还能够熟悉Flex的基本文档结构和常用组件的使用方法，为后续深入学习打下坚实的基础。