Software can also play - MM's display layer solution: flex (2)

zhaozj2021-02-16  60

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.

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.

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:

Function Copy () {

Destination.text = Source.Text = Source.text

}

Create a MXML file, actually created a class. The ActionScript function defined in the tab is the method of this class. You can define an ActionScript function in a MXML file or a separate file. Which method is selected, you can deserve your organization, and the latter approach can make better division of labor for the development team.

转载请注明原文地址:https://www.9cbs.com/read-24947.html

New Post(0)