Explore the use of Flex applications

Source: Internet
Author: User

This article focuses on the concept of a Flex application, including the use of time and behavior, how to add multiple pages to a Flex application, and how to use Flex, I hope this article will help you gain some benefits.

I. Use of events and Behaviors

The principle of an HTML application is that the client sends a request and obtains a response from the server. Unlike this, Flex applications are event-based/event-based. For example, when you click a button, an event is triggered. An application itself, not a server, contains the logic for identifying events and taking corresponding actions.

Modify the attributes of a widget when an event is triggered.

When a component is operated programmatically, you must first reference it to respond to an event. In this case, you need to assign it an ID value, as shown below:
 

 
 
  1. height="80%"x="122"y="24"> 


Then you can add the behavior/behavior to the application. When an event is triggered, the attribute value of the component is changed, as shown in the following figure:
 

 
 
  1. click="myPanel.visible=false"/> 

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

Use the ActionScript Function

You can also compile the ActionScript function and call it in the event to achieve the same purpose. In this case, the Click Event of the button component is as follows:
 

 
 
  1.  
  2. layout="absolute"> 
  3.  
  4.  
  5.  
  6. &nbsp;</li><li>publicfunctionclose():void{ &nbsp;</li><li class="alt">myPanel.visible=false; &nbsp;</li><li>} &nbsp;</li><li class="alt"> 
  7.  
  8.  
  9. height="80%"x="122"y="24"> 
  10. left="10"right="30"/> 
  11. click="close();"/> 
  12.  
  13.  
  14.  

The ActionScript function is in the MXML file. Block, and then reference it to the Click Event of the button.

Separate ActionScript code

To better separate the ActionScript code from the MXML file, you can put them in a separate ActionScript file rather than as a function, and then import them into the MXML file, as shown below:

 
 
  1.  

Use Behavior and transformation to enhance visual interaction

Flex applications are event-driven, which means you can use events to add rich visual interactions when running programs. To implement it, you use an event trigger to describe an action.
In the previous example, the visible attribute value of the Panel component was set to false and thus invisible. You can also use behavior to create stronger visual effects.
The following example creates an action. This action first creates an effect and binds it to the hideEffect attribute of the component ):
 

 
 
  1.  
  2. height="80%"hideEffect="{myFade}"> 

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, which are called transform/transitions.

2. Add the polymorphism page to the application

There are several ways to create a polymorphism page in a Flex application. You can use the ViewStack component, create a separate MXML file, or use the view status. View status can be viewed as a predefined user interface layout composed of components or component groups. You can use the view State to show different visual effects for programs. Each view State is based on a basic state and inherited and expanded.
In the following example, the basic status changes when you scroll the mouse over the component.

An event generated when a view status is called and rolled over the component with the user's mouse), an effect or a change) changes the appearance of the user interface.
The use of view status, ViewStack, or MXML files depends on the scope of changes from one page to another, the complexity of the user interface, and the framework for implementing the Flex program.

Iii. Start using Flex

Now, you must have a basic understanding of the concept of Flex. Let's start to create a Flex application.

◆ Use FlexBuilder

Use the New project wizard/NewFlexProjectWizard to create a Flex Project File> New> FlexProject ). All tools required to design, compile, and debug the Flex application are included in FlexBuilder.

◆ Use FlexSDK

Create a text file with a filename Suffix of MXML, add the basic elements of the MXML file to the first two lines of code in the above example), and then use documents, especially adobeflex2?agereference) to study the usage of various components. The compilation and debugging tools are provided using the command line method.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.