Adobe Flex 4 用户指南

需积分: 9 181 浏览量更新于2024-07-30 收藏 31.2MB PDF 举报

"Using Adobe Flex 4 英文版用户指南" Adobe Flex 是一个用于创建富互联网应用程序（RIA）的框架，它允许开发者构建交互性强、功能丰富的Web应用。本书"Using Adobe Flex 4"是Adobe Systems官方出版的用户指南，主要针对的是使用Flex 4进行开发的人员。Flex 4版本引入了许多新特性和改进，旨在提高开发效率和应用性能。 1. **Spark组件架构**： Flex 4引入了Spark组件架构，这是对传统的MX组件的升级。Spark组件设计更加灵活，支持自定义样式和主题，使得开发者能够更精细地控制UI的外观和行为。 2. **ActionScript 3.0**： Flex 4基于ActionScript 3.0编程语言，提供了更强大的性能和更严格的类型检查。ActionScript 3.0的类库和面向对象特性使得代码组织和复用更加高效。 3. **Graphical Layout System（Gumbo）**： Flex 4的布局系统称为Gumbo，它提供了一种基于图形的布局管理方式，允许开发者通过声明式方式定义组件的尺寸和位置，提高了界面设计的灵活性。 4. **Skinning and Theming**： Flex 4引入了皮肤和主题的概念，允许开发者轻松改变应用的外观，适应不同品牌和用户体验需求。 5. **MXML**： MXML是一种声明式语言，常用于定义Flex应用的用户界面。在Flex 4中，MXML与ActionScript可以混合使用，提供了一种直观的方式来构建和配置组件。 6. **Flex Builder / Flash Builder**：这本书可能还会涵盖使用Flex Builder（后来被称为Flash Builder）进行开发的相关内容，这是一个集成开发环境（IDE），提供了代码编辑、调试和项目管理工具，极大地提升了开发效率。 7. **数据绑定**： Flex 4的数据绑定机制允许UI组件与数据源直接关联，当数据源发生变化时，UI会自动更新，反之亦然，简化了数据驱动的应用程序开发。 8. **Integration with other Adobe technologies**： Flex 4可以与Adobe的其他产品如Flash Player、Flash Professional和LiveCycle等紧密集成，支持创建跨平台的多媒体和企业级应用。 9. **Error Handling and Debugging**：用户指南可能会讨论如何在Flex 4中处理错误以及使用调试工具来查找和修复问题，这对于任何开发者来说都是至关重要的。 10. **Best Practices and Performance Optimization**：书中可能还包含最佳实践和性能优化技巧，帮助开发者创建高效且响应迅速的应用。请注意，此用户指南受Creative Commons Attribution Non-Commercial 3.0 License保护，允许非商业性使用，但需遵守相应的条款，如正确归因于Adobe并包含许可证信息。对于想要学习或深入理解Adobe Flex 4的读者，这本书提供了宝贵的资源。

USING FLEX 4

Getting started

Last updated 11/5/2010

The following example shows a simple “Hello World” application that contains just an <s:Application> tag and

three child tags, the

<s:Panel> tag and the <s:Label> tags, plus a <s:layout> tag. The <s:Application> tag

defines the Application container that is always the root tag of an application. The

<s:Panel> tag defines a Panel

container that includes a title bar, a title, a status message, a border, and a content area for its children. The

<s:Label>

tag represents a Label control, a very simple user interface component that displays text.

<?xml version="1.0"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:Panel title="My Application">

<s:Label text="Hello World" fontWeight="bold" fontSize="24"/>

</s:Panel>

</s:Application>

Save this code to a file named hello.mxml. MXML filenames must end in a lowercase .mxml file extension.

About XML encoding

The first line of the document specifies an optional declaration of the XML version. It is good practice to include

encoding information that specifies how the MXML file is encoded. Many editors let you select from a range of file

encoding options. On North American operating systems, ISO-8859-1 is the dominant encoding format, and most

programs use that format by default. You can use the UTF-8 encoding format to ensure maximum platform

compatibility. UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and

language-independent.

If you specify an encoding format, it must match the file encoding you use. The following example shows an XML

declaration tag that specifies the UTF-8 encoding format:

<?xml version="1.0" encoding="utf-8"?>

About the <s:Application> tag

In addition to being the root tag of an application, the <s:Application> tag represents a Spark Application container.

A container is a user-interface component that contains other component sets, and uses layout rules for positioning its

child components. By default, the Spark Application container lets that you set the position of its children. In the

previous example, you set the layout of the container to VerticalLayout so that the Application container automatically

lays out its children in a vertical column.

You can nest other types of containers inside an Application container, such as the Panel container shown above, to

position user interface components according to other rules. For more information, see

“Visual components” on

page 279.

About namespaces

In an XML document, tags are associated with a namespace. XML namespaces let you refer to more than one set of

XML tags in the same XML document. The

xmlns property in an MXML tag specifies an XML namespace.

In Flex, you typically define three namespaces:

• xmlns:fx="http://ns.adobe.com/mxml/2009" The namespace for top-level ActionScript elements, such as

Object and Array, and for tags built into the MXML compiler, such as

<fx:Script>.

• xmlns:mx="library://ns.adobe.com/flex/mx" The namespace for the MX component set.

USING FLEX 4

Getting started

Last updated 11/5/2010

• xmlns:s="library://ns.adobe.com/flex/spark" The namespace for the Spark component set.

In general, you include the Spark and MX component namespaces so that you can use any components from those

sets. Where possible, use the Spark components. However, not all MX components have Spark counterparts, so the

components in the MX namespace are also sometimes necessary.

You can define additional namespaces for your custom component libraries. For more information on namespaces,

see

“Using XML namespaces” on page 16.

About MXML tag properties

The properties of an MXML tag, such as the text, fontWeight, and fontSize properties of the <s:Label> tag, let

you declaratively configure the initial state of the component. You can use ActionScript code in an

<fx:Script> tag

to change the state of a component at run time. For more information, see

“Using ActionScript” on page 38.

Compiling MXML to SWF Files

If you are using Flash Builder, you compile and run the compiled SWF file from within Flash Builder. After your

application executes correctly, you deploy it by copying it to a directory on your web server or application server.

You can deploy your application as a compiled SWF file, as a SWF file included in an AIR application or, if you have

Adobe LiveCycle Data Services ES, you can deploy your application as a set of MXML and AS files.

End users of the application do not typically reference the SWF file directly in an HTTP request. Instead, you embed

the application SWF file in an HTML page. The HTML page then uses a script to load the SWF file. Collectively, the

HTML page and the script are known as the wrapper.

When the SWF file is embedded in the HTML page, users then access the deployed SWF file by making an HTTP

request to the HTML page, in the form:

http://hostname/path/filename.html

For more information on wrappers, see “Creating a wrapper” on page 2423.

Flex also provides a command-line MXML compiler, mxmlc, that lets you compile MXML files. You can use mxmlc

to compile hello.mxml from a command line, as the following example shows:

cd flex_install_dir/bin

mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml

In this example, flex_install_dir is the Flex installation directory, and app_dir is the directory containing hello.mxml.

The resultant SWF file, hello.swf, is written to the same directory as hello.mxml.

For more information about mxmlc, see “Flex compilers” on page 2037.

The relationship of MXML tags to ActionScript classes

Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and

controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the

MXML and ActionScript languages with the class library.

MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF

file that contains the corresponding ActionScript objects. For example, Flex provides the ActionScript Button class

that defines the Flex Button control. In MXML, you create a Button control by using the following MXML statement:

<s:Button label="Submit"/>

When you declare a control using an MXML tag, you create an instance of that class. This MXML statement creates a

Button object, and initializes the

label property of the Button object to the string "Submit".

USING FLEX 4

Getting started

Last updated 11/5/2010

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class.

Class names begin with an uppercase letter, and uppercase letters separate the words in class names. Every MXML tag

attribute corresponds to a property of the ActionScript object, a style applied to the object, or an event listener for the

object. For a complete description of the Flex class library and MXML tag syntax, see the

ActionScript 3.0 Reference for

the Adobe Flash Platform.

Understanding the structure of an application built with Flex

You can write an MXML application in a single file or in multiple files. You typically define a main file that contains

the

<s:Application> tag. From within your main file, you can then reference additional files written in MXML,

ActionScript, or a combination of the two languages.

A common coding practice is to divide your Flex application into functional units, or modules, where each module

performs a discrete task. In Flex, you can divide your application into separate MXML files and ActionScript files,

where each file corresponds to a different module. By dividing your application into modules, you provide many

benefits, including the following:

Ease of development Different developers or development groups can develop and debug modules independently of

each other.

Reusability You can reuse modules in different applications so that you do not have to duplicate your work.

Maintainability You can isolate and debug errors faster than if your application is developed in a single file.

In Flex, a module corresponds to a custom component implemented either in MXML or in ActionScript. These

custom components can reference other custom components. There is no restriction on the level of nesting of

component references in Flex. You define your components as required by your application.

You can also use sub-applications rather than modules to develop applications that are not monolithic.

Developing applications

MXML development is based on the same iterative process used for other types of web application files such as HTML,

JavaServer Pages (JSP), Active Server Pages (ASP), and ColdFusion Markup Language (CFML). Developing a useful

Flex application is as easy as opening your favorite text editor, typing some XML tags, saving the file, requesting the

file’s URL in a web browser, and then repeating the same process.

Flex also provides tools for code debugging. For more information, see “Command-line debugger” on page 2080.

Laying out a user interface using containers

In the Flex model-view design pattern, user interface components represent the view. The MXML language supports

two types of user interface components: controls and containers. Controls are form elements, such as buttons, text

fields, and list boxes. Containers are rectangular regions of the screen that contain controls and other containers.

You use container components for laying out a user interface, and for controlling user navigation through the

application. Examples of layout containers include the HGroup container for laying out child components

horizontally and the VGroup container for laying out child components vertically. Examples of navigator containers

include the MX TabNavigator container for creating tabbed panels and the MX Accordion navigator container for

creating collapsible panels. Typical properties of a container tag include

id, width, and height. For more information

about the standard Flex containers, see

“Introduction to containers” on page 324.

The following example application contains a Spark List control on the left side of the user interface and an MX

TabNavigator container on the right side. Both controls are enclosed in a Spark Panel container:

USING FLEX 4

Getting started

Last updated 11/5/2010

<?xml version="1.0"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:Panel title="My Application">

<s:HGroup>

<s:List>

<s:dataProvider>

<mx:ArrayCollection>

<fx:String>Item 1</fx:String>

<fx:String>Item 2</fx:String>

<fx:String>Item 3</fx:String>

</mx:ArrayCollection>

</s:dataProvider>

</s:List>

<mx:TabNavigator borderStyle="solid">

<s:NavigatorContent label="Pane1" width="300">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:TextArea text="Hello World"/>

<s:Button label="Submit"/>

</s:NavigatorContent>

<s:NavigatorContent label="Pane2" width="300" height="150">

</s:NavigatorContent>

</mx:TabNavigator>

</s:HGroup>

</s:Panel>

</s:Application>

The List control and TabNavigator container are laid out side by side because they are in an HGroup container. The

controls in the TabNavigator container are laid out from top to bottom because they are in a NavigatorContent

containers that use the VerticalLayout class.

For more information about laying out user interface components, see “Visual components” on page 279.

Adding user interface controls

Flex includes a large selection of user interface components, such as Button, TextInput, and ComboBox controls. After

you define the layout and navigation of your application by using container components, you add the user interface

controls.

The following example contains an HGroup (horizontal group) container with two child controls, a TextInput control

and a Button control. An HGroup container lays out its children horizontally.

USING FLEX 4

Getting started

Last updated 11/5/2010

<?xml version="1.0"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Script>

<![CDATA[

private function storeZipInDatabase(s:String):void {

// event handler code here

}

]]>

</fx:Script>

<s:HGroup>

<s:TextInput id="myText"/>

<s:Button click="storeZipInDatabase(myText.text);"/>

</s:HGroup>

</s:Application>

Typical properties of a control tag include id, width, height, fontSize, color, event listeners for events such as

click and change, and effect triggers such as showEffect and rollOverEffect. For information about the standard

Flex controls, see

“UI Controls” on page 580.

Using the id property with MXML tags

With a few exceptions (see “MXML tag rules” on page 38), an MXML tag has an optional id property, which must be

unique within the MXML file. If a tag has an id property, you can reference the corresponding object in ActionScript.

The following example uses the trace() function to write the value of the text property of a TextInput control to the

log file:

<?xml version="1.0"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Script>

<![CDATA[

private function writeToLog():void {

trace(myText.text);

}

]]>

</fx:Script>

<s:VGroup id="myVGroup">

<s:TextInput id="myText"

text="Hello World!" />

<s:Button id="mybutton"

label="Get Weather"

click="writeToLog();"/>

</s:VGroup>

</s:Application>

This code causes the MXML compiler to generate a public variable named myText that contains a reference to the

TextInput instance. This variable lets you access the component instance in ActionScript. You can explicitly refer to

the TextInput control’s instance with its

id instance reference in any ActionScript class or script block. By referring to

a component’s instance, you can modify its properties and call its methods.

剩余2445页未读，继续阅读

lidaoshen006

粉丝: 1
资源: 74

Adobe Flex 4 用户指南

Flex Adobe 官方电子书 PDF

Using_Flex_4.pdf

Using_Flex_4.rar

ArcGIS_Server_9_3_for_Flex_API_初级教程.pdf

Wrox.Professional.Adobe.Flex.2.May.2007

用MyEclipse搭建flex+j2ee开发环境.pdf

用MyEclipse搭建flex+j2ee开发环境[归纳].pdf

Flex 4 API

arcgisapiforflex开发入门.pdf

flex as资料

最新资源