Shulou(Shulou.com)06/02 Report--

Editor to share with you how Flex works, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

How does Flex work

The content of this part of the document is to provide users with a quick overview of how Adobe?Flex works. Through the study of this chapter, you can create your first Flex application and compare it with the Web development techniques you were familiar with in order to understand the meaning and essence of Flex.

Flex Learning Section 1: build and run Flex applications

Flex is an architecture that provides development, design and operational support, which enables developers to create and utilize Adobe?

Flash?Player9 serves as the "rich client Internet application / richInternetapplications/RIA" in the foreground to meet users' more intuitive and interactive online experience.

Typical steps for ◆ to develop Flex applications are as follows (usually like this):

1. Select a series of pre-customized components (such as tables, buttons, etc.) that are used to design the application interface

two。 Lay out components to design the user interface.

3. Use styles and themes to enhance visual design.

4. Add dynamic behavior (such as interactions between program components).

5. Define and connect the required database services.

6. Compile the source code into a SWF file and run it in FlashPlayer.

A typical Flex application in the ◆ Flex Learning Manual includes the following elements:

1.Flexframework

Adobe?Flex2framework contains all the components needed to create a RIA: containers for application layout planning; controls for the user interface and getting data from the user (such as text boxes and buttons); widely supported data binding, data formatting, and valid value validation; and event-driven development patterns. Flexframework is included in the common component library (SWC) file.

2.MXML

Each Flex application contains at least one MXML file, which is used as the main file of the program. MXML is a markup language that is based on an implementation of XML and is used to create Flex applications. You can use it to declare the definition of the tag structure used in the program.

3.ActionScript3.0

You can use ActionScript3.0 to add dynamic behavior to your application, which is an implementation based on ECMAScript, similar to JavaScript. You can add ActionScript as a script block directly in the MXML file, or you can create a separate ActionScript file and import them into the MXML file.

4.CSS

You can change the visual style of components (buttons, list boxes, etc.) by setting the properties of the component.

For example, the button component has a fontFamily property that you can use to set fonts. There are usually four ways to control the properties of a style: through a theme (theme); by defining it in a CSS file; in a style block in a MXML file; and by setting it in an instance of a component.

5. Graphic resources

Like many applications, Flex contains a variety of graphic resources, such as icons and images.

6. data

Some components are used for data display (combobox or datagrid) work. At the same time, you can associate these components with data in a variety of ways, such as using arrays, collecting objects, data models, and external XML data resources, and so on.

How Flex applications are compiled and released:

All elements are compiled or linked to your Flex application. The Flex application is compiled into a SWF file and then run under FlashPlayer. When a source code is compiled, it is converted to an ActionScript class and incorporated into an SWF file with graphics and other resources. This is one of the essence of Flex. At run time, SWF files interact with the required external libraries, services, and data sources.

General Flex applications do not need the support provided on the server side. Therefore, you can compile them on your local computer and publish them to your users in the HTML page of the Web service.

Of course, you can also combine Flex with Adobe?FlexDataServices2, ColdFusionFlashRemotingService, or other Java and J2EEService server technologies to carry out the network application program of Bax S structure.

The development of preface.

MXML: where it all started

You can use the components provided by Flex to define the user interface in MXML. Here is an example of the main MXML program file:

If you are already familiar with XML, you can recognize the format of this example at a glance. The first two lines of the MXML code contain the version number, code, and namespace information, and the body of the document contains the details of the program.

All the details of the Flex application are placed in tag pairs. At the same time, you can also nest other child tag pairs in the parent tag pair.

This example creates a simple program that displays "SayhellotoFlex!" on the screen. The words. In this program, the TextArea and Button components are declared and their corresponding text and label properties are set.

Note: each tag in the MXML file has the prefix mx, which is the design namespace for Flex.

Flex Learning Section 2: connecting data

Remember, the most important thing about manipulating data in a Flex application is that the Flex application does not connect directly to a database. Therefore, Adobe?FlexBuilder2 does not provide a tool to connect data directly. You can manipulate and manage data by using MXML and ActionScript code.

There are several ways you can manipulate and manage data in Flex, most of which are beyond the scope of a brief introduction here (see later sections for more information). In any case, imagine a way to connect to external data, and subsequent examples will demonstrate connecting to data in the XML structure.

Data generation

Because Flex applications do not connect directly to a database, you need to use some type of service to support the use of data. In a subsequent example, you will use the HTTPService component to get data from a XML file generated by PHP.

The first step in connecting to the database is to generate the data that will be used in the Flex program. In the application with PHP, you will take the following steps:

1. Create a database (such as MySQL).

two。 Write a PHP script to connect to the MySQL database and generate data in XML format.

These steps are also suitable for data generated on other working platforms (such as ASP.NET, JSP, etc.).

◆ connects to external data sources

For the XML format data generated by PHP, you can use the HTTPService component to request the data, like this:

...

The HTTPService component defines a request ID that you will use to control the URL that provides the data or the binding between the server and the data.

Binding of external data and data-driven Control in ◆

By binding data to data-driven control (data-drivencontrol), you can process the results of HTTPService (XML data), like this:

The syntax of the data binding is shown in the dataProvider attribute of the data control (in wavy parentheses), which contains the data structure of the HTTPService request ID, the lastResult method, and the XML file. In this example, the data structure of the XML data source looks like this:

MobilePhone $199 CarCharger $34.

By setting the dataField property, the project data (name and price) is used as data for each column in the data grid.

◆ loads data at run time

You can also load data when the Flex program starts running and, as shown later, send a request to a particular URL in HTTPService:

When you add the creationComplete method to the application tag, the data is loaded at run time and handed over to data-driven control (in this case, the data grid).

You can also add a HTTPService request to a control event instead of a tag in the program, as shown below:

Flex provides many ways to connect, manage, format, and validate data. You can manipulate and manage data by using remote program calls, data services, or other enterprise-level technologies.

Flex Learning Section 3: questions about FlashPlayer Security

For security reasons, applications running in the client's FlashPlayer can access remote data sources only if one of the following conditions is met:

1. The SWF file compiled by the application is in the same domain as the remote data source.

two。 Use the agent (proxy), and your SWF file is on the same server as the agent. AdobeFlexDataServices provides a complete agent management system for Flex applications. At the same time, you can create a simple proxy service by using a web scripting language such as ColdFusion, JSP, PHP, or ASP.

3. Install the crossdomain.xml (cross-domain policy / cross-domainpolicy) file on the host Web server of the data source. The crossdomain.xml file allows SWF files located in other domains to access the data source.

The fourth section designs the interface layout for Flex applications

Let's take a closer look at the previous simple example of "SayHellotoFlex". You can control the interface layout of the Flex application by setting the property values of the component, as shown below:

Many container components allow layouts to be created in absolute coordinates, which means that you can use precise x and y coordinates to place components. You can also place components and constrain them relative to their parent containers so that they remain in place with each other as the application's interface zooms in or out.

In this example, the layout property of the panel / Panel component is set to absolute value, while all containers are set to 80% of the size of the application. Two components (TextArea and Button) are placed in specific pixels away from the boundary of the panel container.

◆ uses styles and themes to enhance visual design

If the attribute values of the style / style are not specified, they will be controlled by the theme / theme running throughout the program. By default, Flex applications use Halo themes (as in the example above). Of course, you can change the default theme or simply create one yourself. You can also simply specify a new style definition to change the default theme style, like this:

TextArea {font-size:36px; font-weight:bold;}

By explicitly defining a style for the TextArea component, the application now looks like this:

In this example, a new style is defined in the tag in the MXML file. As we mentioned earlier, you can also set new styles by modifying the theme or applying a new theme, using an external CSS file, or setting separate style properties.

To import a style sheet into the MXML file, you need to add the following code:

Flex Learning Section 5: the use of events and behaviors

The principle of a HTML application is that the client makes a request and gets a response from the server. In contrast, Flex applications are event-based / event-based. For example, when a user clicks a button, an event is triggered. The application itself, not the server, contains logic to identify events and act accordingly.

◆ modifies the properties of a component when an event is triggered

When you operate on a component programmatically, in order to respond to an event, you must first reference it, and you need to give it an ID value, as shown below:

You can then add the behavior / behavior to the application and change the property value of the component when an event is triggered, like this:

When the button is clicked, the visible property value of the panel is set to false.

◆ uses the ActionScript function

You can also do the same by writing the ActionScript function and calling it in the event, in which case the click event for the button component is as follows:

The ActionScript function is defined in a block in the MXML file and then referenced to the click event of the button.

Separate ActionScript code for ◆

To better separate the ActionScript code from the MXML file, you can put them in a separate ActionScript file instead of as a function, and then import them into the MXML file, as follows:

◆ uses behavior and transformation to enhance rich visual interaction

Flex applications are event-driven, which means you can use events to add rich visual interaction while the program is running. To implement it, you use an event trigger to describe a behavior.

In the previous example, the visible property value of the panel component is set to false and is therefore not visible. You can also use behavior to create stronger visual effects.

The following example creates a behavior that first creates an effect and then binds it to the component's hideEffect property (trigger):

When the close button is clicked, the panel component fades out rather than disappears.

Triggers and effects can also be combined into more complex behaviors called transformations / transitions.

Flex Learning Section 6: adding polymorphic pages to an application

There are several ways to create polymorphic pages in a Flex application. You can use ViewStack components, create separate MXML files, or use view state. View state can be thought of as a predefined user interface layout composed of a component or a group of components. You can use the view state to show different visual effects for the program. Each view state is based on a basic state and is inherited and extended.

In a subsequent example, the underlying state changes when the user scrolls the mouse over the component.

When a view state is invoked (an event generated when the user's mouse scrolls over the component), an effect (or a transformation) changes the appearance of the user interface.

Whether you use view-state, ViewStack or MXML files depends on the scope you want to change from one page to another, the complexity of the user interface, and the architecture of the Flex program.

Flex Learning Section 7: start using Flex

Now that you have a basic understanding of the concept of Flex, let's start creating Flex applications.

◆ uses FlexBuilder

Create a Flex project (File > New > FlexProject) by using the new project wizard / NewFlexProjectWizard. All the tools needed to design, compile, and debug Flex applications are included in FlexBuilder.

◆ uses FlexSDK

Create a text file with the filename suffix MXML, add the basic elements of the MXML file (the first two lines of code in the above example), and then use the documentation (especially AdobeFlex2LanguageReference) to study the use of the various components. Compilation and debugging tools are provided on the command line.

These are all the contents of the article "how Flex works". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.