《devguide_flex3.pdf》 note (chapter1)

Chapter 1: Developing Applications in MXML

 

The <mx:Application> tag defines the Appli-cation container that is always the root tag of a Flex application

 

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.

 

Flex also provides a command-line MXML compiler:

cd flexInstallDir/bin

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

 

 

MXML和ActionScript类的对应该关系

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: <mx:Button label="Submit"/> When you declare a control using an MXML tag, you create an instance object of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string “Submit”. 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 Adobe Flex Language Reference.

 

correspond to 符合

duplicate your work 重复你的工作

 

Understanding a Flex application structure

you can write an MXML application in a single file or in multiple file。main file contains <mx:Application> tag，you can then reference additional files written in MXML,ActionScript or combination of two language。

Developing applications

In the Flex model-view design pattern, user interface components represent the view.

MXML provides two types of user interface components：Controls and Containers

 

Using XML 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. To use the default namespace, specify no prefix. To use additional tags, specify a tag prefix and a namespace. For example, the xmlns property in the following <mx:Application> tag indicates that tags in the MXML namespace use the prefix mx:. The Universal Resource Identifier (URI) for the MXML namespace is http://www.adobe.com/2006/mxml.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 

 XML namespaces give you the ability to use custom tags that are not in the MXML namespace. The following example shows an application that contains a custom tag called CustomBox. The namespace value containers.boxes.* indicates that an MXML component called CustomBox is in the containers/boxes directory.

<?xml version="1.0"?>

<!-- mxml/XMLNamespaces.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*" >

 

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >

<MyComps:CustomBox/>

</mx:Panel>

</mx:Application>

 

The containers/boxes directory can be a subdirectory of the directory that contains the application file, or it can be a subdirectory of one of the ActionScript source path directories assigned in the flex-config.xml file. If copies of the same file exist in both places, Flex uses the file in the application file directory. The prefix name is arbitrary, but it must be used as declared.

When using a component contained in a SWC file, the package name and the namespace must match, even though the SWC file is in the same directory as the MXML file that uses it. A SWC file is an archive file for Flex components. SWC files make it easy to exchange components among Flex developers. You exchange only a single file, rather than the MXML or ActionScript files and images, along with other resource files. Also, the SWF file inside a SWC file is compiled, which means that the code is obfuscated from casual view.

 

Binding data between components ：

use curly braces {} ，<mx:Binding />

 

Using RPC services

Remote-procedure-call (RPC)

Flex application can connect to a web service that uses the Simple Object Access Protocol (SOAP), a Java object residing on the same application server as Flex using AMF, or an HTTP URL that returns XML

The MXML components that provide data access are called RPC components. MXML includes the following types of RPC components:

•WebService provides access to SOAP-based web services.

•HTTPService provides access to HTTP URLs that return data.

•RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only).

Accessing Server-Side Data with Flex 【Chapter 38】

 

Storing data in a data model

You can use a data model to store application-specific data. A data model is an ActionScript object that provides properties for storing data, and optionally contains methods for additional functionality. Data models provide a way to store data in the Flex application before it is sent to the server, or to store data sent from the server before using it in the application.

 

You can declare a simple data model that does not require methods in an <mx:Model>, <mx:XML>, or <mx:XMLList> tag. The following example shows an application that contains TextInput controls for entering personal contact information and a data model, represented by the <mx:Model> tag, for storing the contact infor-mation:

 

<?xml version="1.0"?>

<!-- mxml/StoringData.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <!-- A data model called "contact" stores contact information. The text property of each TextInput control shown above is passed to a field of the data model. -->

<mx:Model id="contact">

<info>

<homePhone>{homePhoneInput.text}</homePhone>

<cellPhone>{cellPhoneInput.text}</cellPhone>

<email>{emailInput.text}</email>

</info>

</mx:Model>

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- The user enters contact information in TextInput controls. -->

<mx:TextInput id="homePhoneInput" text="This isn't a valid phone number."/>

<mx:TextInput id="cellPhoneInput" text="(999)999-999"/>

<mx:TextInput id="emailInput" text="me@somewhere.net"/>

</mx:Panel>

</mx:Application>

 

 

continue.... (P28 Validating data)