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

This article mainly introduces the Flex modular application development example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Flex modular application development

If you haven't read the article on Module in RogerGonzalez's Blog, you should go there to learn the details and ideas behind the Flex2 feature. I don't want to talk too much about why, but I want to show you a simple Flex program that uses Module, from which you can get inspiration.

Module (Modules)

Module is a solution for creating large Flex applications that allow you to divide your user interface into many scattered pieces for their own purposes. For example (from the Flex2 document below), an insurance company may have hundreds of forms-for each domain, for various request types, for various applications, and so on. Creating a Flex application that contains all these forms will result in a huge SWF file, and there will be a lot of problems:

? The larger the application, the more complex the development process.

? The larger the application, the more complex the testing process is.

? The larger the application, the more complex the deployment process

The larger the SWF file, the longer it takes to load.

My sample program is based on a program in the Flex2 documentation, but I made some changes to it to illustrate several common problems. This example shows a main program and three other modules that share public data (Module).

One of the design elements is the use of an interface, which is essentially a contract between the interface implementer and the user. This example will illustrate what I mean. Although the interface part of the Module is not necessary, it can greatly simplify future development and maintenance. For example, if the developer has one team responsible for the report section and another team for the chart section, if they initially use the interface, then as long as necessary, the implementation of the interface can do enough distortion without affecting the project results. The interface also plays another role in the Module, which I will reveal later.

The module (Module) is used instead of the MXML file (or ActionScript file) as the root tag. You can look at the tagged program as a program, but it doesn't work.

This example has a main program file and two modules with an interface. Open the main program file and you will see:

Program code

* Panel contains the RadioButtons that controls the loading and unloading of the module (Module) in the example. The second Panel is where the tag loading module (Module) is used. Notice the ModuleLoader whose id is currentModule, which has an event handler for ready events. ModuleLoader dispatches ready events (or ModuleEvent.READY) when the module SWF files in Flex modularization are loaded enough to get started.

Here is a readyModule function, which is in the block:

Program code

PrivatefunctionreadyModule (event:ModuleEvent): void {varml:ModuleLoader=event.targetasModuleLoader; varichild:IExpenseReport=ml.childasIExpenseReport; if (ichildstones null) {ichild.expenseReport=expenses;}}

Notice how the child property of ModuleLoader is converted to the IExpenseReport class. IExpenseReport is an interface implemented by all modules (Module). As long as each module implements this interface, it can easily adapt to the application. In other words, imagine what it does when you need to create another form or report. There is no need to change the main program to add IF statements to the new module, as long as you implement the IExpenseReport interface in the new module, it can run in the program.

IExpenseReport interface:

Program code

PublicinterfaceIExpenseReport {functionsetexpenseReport (ac:ArrayCollection): void;}

Each module (Module) implements this interface, defining its own set function named expenseReport. The following is the root tag of ChartModule and the implementation of interface IExpenseReport:

Program code

...

Let's go back to the main program. The click event of RadioButton unloads any currently loaded modules and loads a new one. Here is the RadioButton tag for ChartModule:

Program code

This click event calls the readyModule event listed above.

Compile and run the program

If you use FlexBuilder2, be sure to change the project's Properties to include the module (Module) as "Applications". So FlexBuilder2 compiles them into a SWF file and places them in the bin folder.

FlexBuilder Note: to create a project that uses a module (Module), use the project's Properties to use the module file as "Applications". This causes them to be compiled into SWF files.

Once the SWF file is created, you can run the main program and click RadioButtons to switch between modules (Module).

FlexBuilder Note: FlexBuilder does not save any dependency information about the module (Module) and the main program. As long as you make changes to a module (Module), you may need to recompile the main program or other dependent module (Module).

Make the SWF file *

If you look at the SWF file of the main program and the SWF file of the module in Flex modularization, you will find that they are about the same size. This means that there are many of the same component definitions in the module's SWF and the main program SWF.

FlashPlayer does not save a copy of the component (symbol). For example, if the main program has a Button component and a module (Module) also has a Button component, FlashPlayer will not load Button from the module because it is already defined in the main program.

Use-link-report=report.xml to compile the main program, which creates a file linked to the main program that contains all the component information. That report.xml file is then used when compiling the module (Module).

Program code

Mxmlc-load-externs=report.xmlChartModule.mxml

When ChartModule is compiled, all components listed in the report.xml file will be omitted from its SWF. When I compiled ChartModule.swf without using the report.xml file, its size was 202K. When I use the report.xml file, the SWF is only 68K in size. This greatly reduces the loading time of the module (Module).

At the beginning of the article to the Module, I mentioned that the interface has another function. Suppose you do not use the interface but refer to the class of the module in the main program. When you run link-report, your module class will appear in report.xml. When you use the link-report compiler module (Module), your module is not included in its own SWF! This will not be a problem at first, although the main program becomes large because it contains the definition of the module. However, it is important what happens when you change your module. If you do not recompile the main program, the SWF file of your main program will contain the old definition of the module (Module)-not the one you have changed.

Program code

Mxmlc-link-report=report.xmlMain.mxml mxmlc-load-externs=report.xmlChartModule.mxml / / etc.

If you decide to use this technique to reduce the size of the Module, use the interface to ensure that the end user is always using the * version of the module (Module).

FlexBuilder Note: FlexBuilder has no way to do this in a project. If you are sure you are going to create a project that uses modules (Module), consider putting common classes and interfaces (including event classes) into a SWC (FlexLibraryProject) and then separating modules (Module) into their respective projects.

Alternatively, you can create everything as a single Flex project and then turn * * into a pre-production or pre-test deployment step outside of FlexBuilder.

Thank you for reading this article carefully. I hope the article "sample Analysis of Flex Modular Application Development" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.