Flex Quick starts Chinese translation (i)

Chinese

Objective

Adobe Flex 2.0 is a new technology that is based on a powerful, already mature Java EE platform with some powerful and fascinating features such as Flash performance, rich media and off-line capabilities, and more. Flex 2.0 Although in front of the performance
For Flash, it is more oriented to developers (developer) than designers (designer). All you have to do is write code to use a variety of controls to make something beautiful, which is something that many developers who are missing arty are longing for. And Flex eliminates some of the things that are confusing to many people in Flash, for example, frames, components and so on (I myself how hard can not learn to Flash, depressed), the interface design and the logical realization of the separation, so that art and programmers focus on their own things, I believe this is what we want to see.

In fact   flex  2.0  is also not a very new thing, before   flex  2.0  already have   macromedia  flex  1.0&NB Sp and macromedia  flex  1.5, but few people in the country are concerned. The performance of flex  1.0 and 1.5 is not very good, the compiled SWF file is very large, and   Flex Builder 1.5 is a similar to Dreamweaver editor, crazy-occupied memory, my machine configuration is not too advanced, with a miserable, Debugging often have to wait for a period of time the page can be compiled and displayed. For these reasons, most people just wait and see for Flex. But after Adobe acquired the Macromedia Flex 2.0 is a completely new version of Flex 1.5, which is the real starting point for flex. It uses strong object-oriented, powerful ActionScript 3.0 to replace the previous version of ActionScript, making it much more efficient and a much smaller volume of compiled SWF files. And Adobe abandoned the previous flex  Builder, made a new base
in Eclipse Flex Builder 2.0, improved the development environment, improved the developer experience (it's really much more comfortable to use, code hints and so on. I can prove   ^_^).

Adobe Flex 2.0 can be called the most powerful RIA (Rich Internet application, rich Internet application) development tool. But because the domestic relatively backward, many new technologies seem to have to wait a few years to reach the domestic and popular. Do  Strengthen the economic construction, speed up reform and opening-up, so that China hastened to become developed countries, let people do software research technology issued by the Chinese version of ... However, these seem to be pure fantasy, at least in the near future, there is no way, have to chew English documents. However, on the flex of the English information is not many, Flex comes with the help is the best document, and the efficiency of reading English documents is very low, far less than to see the carefree mother tongue. I know the pain, so I want to translate some introductory articles for your reference, and the best introductory articles are these Quick starts at the Adobe Flex Developer Center. Later I will gradually translate them out, may all translate, also may only translate one part, I will translate all these to make the PDF file to put on the net, is the help of the beginner, is also to own one kind of experience (said so many messy, now only then said the key point, found oneself nonsense also enough). Some examples in the original text can not be embedded in the PDF, so if you want to see the code run, please go to the original text to find. In addition, because of my English level and technical level is extremely limited, the revision work also did not good, the book appears the mistake or the improper place is unavoidable, implored and warmly welcome everybody criticism correction, first thanked everybody.

Although only a few articles sent out, the reader may be very few, but I still want to thank a few people here (vanity, MO Strange ^_^), they are my brothers: Wax gourd, Xiao Hou, Lei Zi, Bob. Although they do not make any contribution to the translation and may ask Flex is not very good, but they are my spiritual pillar and the important part of life. Thank you, I'm proud of you.

Programming with MXML and ActionScript
The adobe® is implemented as a ActionScript class library by Flex. This class library contains components (containers
and controls), the manager class, the data service class, and the classes that have other attributes. You can develop applications by using the MXML and ActionScript languages with class libraries.

MXML

MXML is an XML language that lets you lay out user interface components in adobe®flex™. You can also use the MXML declaration to define non-visual components in your program, such as access to server-side data sources and data binding between user interface components and data sources.
For example, you can use the tag to create an instance of a Button control as follows:

This gives the Button instance a unique name by setting the id attribute, and you can use that name later to refer to the instance. The Label property is used to set the label content that is displayed on the Button instance.

The following example shows the complete code to create a Flex program that displays the Button control:
xmlns:mx= " http://www.adobe.com/2006/mxml"
horizontalalign= "Center" verticalalign= "center"

When you have finished writing a flex program, you must compile it using the Flex compiler. The Flex compiler is a small executable file called MXMLC, which is in the Flex SDK 2.0\bin folder under your Flex 2 installation directory.
Hint: Please make sure the Flex 2 installation directory \ Flex SDK 2.0\bin folder is in your system variable. Setting the Flex compiler to your system variable allows you to get straight from the command line regardless of the folder
Call it.

Steps:

1. Create a new file (Notepad, for example) with your favorite text editor and save it as
Myfirst.mxml.

2. Write the code in the previous example to Myfirst.mxml and save the file.

3. Open a command line window by selecting Start > All Programs > Attachment > Command prompt.
4. Change the current directory and point it at the same folder as the Flex program you saved in the first step.
5. Call the Flex compiler by typing the following command:
MXMLC--strict=true--file-specs Myfirst.mxml
The two elements on the command line that begin with two dashes are so-called compiler options that are used to define the behavior of the Flex compiler. In the previous example, you set the –STRICT option to true to force the compiler to perform the strict mode. In strict mode, the compiler has more stringent checks on your code. For example, it will check whether you have defined a type for a variable. --file-specs is used to define MXML files that need to be compiled.
6. You can double-click the SWF file in Windows Explorer to run it, or you can enter its name on the command line to run it in standalone Adobe Flash Player 9.

Run result diagram:

As the SWF file cannot be embedded in the document, the code runs the results to see the appropriate section in the original.

Tip: You can also use Adobe Flex Builder to create and compile your flex applications. Adobeflex Builder2 is a development flex-integrated development Environment (IDE) that contains a visual design view. To get more information about Flex Builder2, see Using Flex Builder2.

ActionScript
The MXML label corresponds to an attribute in the ActionScript class or class. When you compile your flex application, Flex parses your MXML tag and generates the corresponding ActionScript class. These ActionScript classes are then compiled into a SWF byte code stored in a SWF file.
Hint: You can add the--keep-generated-actionscript option to your MXMLC command line to see the ActionScript intermediate files generated by Flex.
To continue looking at the example above, Flex provides a ActionScript button class that defines the Flex button control.
Note: In the above example, the MX prefix in the label is a namespace. It is through
Declared using a unique URL in the application tag. The MX prefix maps each component in the MX namespace to its fully qualified class name. This is why the Flex compiler can find the ActionScript class that corresponds to the MXML tag in the MX namespace.
The following example shows how to use ActionScript to create a Button control. The final result is the same as the result of the previous MXML version.

<?xml version= "1.0" encoding= "Utf-8"?
<mx:application
xmlns:mx= "Http://www.adobe.com/2006/mxml"
Viewsourceurl= "Src/gettingstartedactionscript/index.html"
Creationcomplete= "Creationcompletehandler ();"
Width= "height=" "80"
<mx:Script>
! [cdata[
Import Mx.controls.Button;
Import mx.events.FlexEvent;
private Var Mybutton:button;
Private Function Creationcompletehandler (): void
{
Create a Button instance and set its label
MyButton = new Button ();
Mybutton.label = "I ' m a button!";
Notifies the application and processes the layout once the button component is created
Mybutton.addeventlistener (Flexevent.creation_complete,
Buttoncreationcompletehandler);
Add a Button instance to the Displaylist
AddChild (MyButton);
}
Private Function Buttoncreationcompletehandler
(evt:flexevent): void
{
Center button Display
mybutton.x = PARENT.WIDTH/2-MYBUTTON.WIDTH/2;
MYBUTTON.Y = PARENT.HEIGHT/2-MYBUTTON.HEIGHT/2;
}
]]>
</mx:Script>
</mx:Application>

When you create a Flex component through ActionScript, you must import the class for that component. You still
You must use the AddChild () method to add components to the displaylist of your program to make them visible. By comparing the lengths and complexities of these two equivalent examples, you can see how this simple, tabbed, and declarative syntax MXML prevents you from writing many lines of ActionScript code to lay out your components.

Run result diagram:

As the SWF file cannot be embedded in the document, the code runs the results to see the appropriate section in the original.

Note: This example shows how to write ActionScript in the Script tag, which is a viable way to include ActionScript code in a Flex program. The other approach is to detach the script block into an external ActionScript file or use an external ActionScript class.

English original Address

Small Editor: This article quotes Dreamer ' s Blog and hereby thank the author for his efforts. If you think this tutorial is just what you need, please don't forget to go to the author's blog to cheer.