Flex Development & Deployment Model
To develop and deploy this app, generally go through the following steps:
1. Write the hellowold.mxml file with the "Wanwu" development tool you are familiar with the IDE or Flex.
2. Deploy this file to the application server. It can generally be copied to the WAR file by copying helloworld.mxml to a part of a web application, or packing a part of the helporld.mxml into the WAR file.
When a user requests HelloWorld.mxml for the first time, the server compiles the MXML code into the Flash bytecode (a SWF file). Then the server will send the generated SWF file to the client and let the flash player execute. For concurrent requests for the same MXML document, the server will skip the compilation process and return directly to the same compilation results.
If you are familiar with JavaServer Pages, you will find that their models are very similar. Just like JSPS is compiled as a Java Bytecode (servlets), the MXML file will be compiled as a Flash byte code. The main difference between the two is that in Flex, the generated bytecode is executed on the client, while the JAVA bytecode generated by JSP is performed on the server. With Flex, you can use complex clients to apply seamless integration into existing business logic.
Use MXML user interface components
Have a rich user component is a big feature of Flex. In addition to traditional data input controls (TextInput, TextArea, Checkbox, Radiobutton, ComboBox, etc.), MXML also includes some advanced components for maintaining structured data (TREE components) and big data sets (DataGrid components). For clear organizational data and its processing, FLEX also provides navigation components (Tab, Viewstack, Accordion, etc.).
In order to organize the user interface, the Flex container also defines a layout management policy to indicate a component relative to another component. The Flex component library provides a large number of containers that enable different layout strategies. For example, the components in HBox will be arranged horizontally, while components in VBox are vertically arranged vertically, and components in Grid will be arranged in a row, just like HTML TABLE. Any layout management policy is not defined in the View container, so you can specify the location of the component with x, y coordinates.
A traditional E-mail interface with three panels is given in the Flex environment. The Tree in the HBox container is horizontally arranged, while DataGrid and Textarea in the VBox container are vertical arrangement.
Xml Version = "1.0" encoding = "ISO-8859-1"?>
mx: vbox>
mx: hbox>
mx: Application>
Figure 2. A E-mail application created with flex.
Write an ActionScript code
The Flex language is an event-driven. MXML uses the event as the attribute of the label, you can write event listeners for it. For example, the Button component has a Click property, the ComboBox, List, and Tree components have a Change property, and so on. For simple interactions, you can write a ActionScript statement directly on the tag event attribute. For example, in the HelloWorld application, there is an ActionScripts statement in the Button's Click event listener that copies the contents of the Source TextInput to the Destination TextInput.
Xml Version = "1.0" encoding = "ISO-8859-1"?>
mx: Application>
When logic is more complicated, you can define a stand-alone ActionScript function and then call in the component's event listener. For example, you can rewrite the HelloWorld application as the following:
Xml Version = "1.0" encoding = "ISO-8859-1"?>
Function Copy () {
Destination.text = Source.Text = Source.text
}
mx: script>
mx: Application>
Create a MXML file, actually created a class. The ActionScript function defined in the