Flex record (2) About MXML

Flex record (2) About MXML

Reference document "developing flex Applications"

Previous record describes some Flex's background content, today you want to record MXML.

Flex uses two languages ​​to write applications: MXML and ActionScript (About ActionScript will be recorded in the next record), flex is inseparable from MXML, just like we are inseparable from air. MXML is such an XML tag language, flex uses it to arrange the UI component, and can also declare some non-visual things, such as database connections between the UI component and the server and data.

Like HTML, MXML provides a set of labels to define UIs. If you are very familiar with HTML, then MXML will easily get your hand. MXML has stronger structural compared to HTML, and it provides more tag libraries, such as: MXML provides visual components such as Data Grids, Trees, Navigators, Accordings, Menus, etc. HTML, and connecting Web Service, data binding, and Animation Effects, etc., non-visual components, and you can extend MXML from defining the MXML tag.

Of course, HTML and MXML is different from MXML-based applications that can compile files in SWF format and run in Flash Player, providing a richer and dynamic UI.

1. 1. Enter "Hello, World!"

Because MXML is a normal XML file, you can develop, or better XML editor development, of course, is the first choice or integrates the IDE of the development environment, such as: just announced Flex Builder (only 60 days of trial version, huh, you can find the corresponding registration code).

I have chosen to develop with Flex Builder, of course, for beginners, or choose some simple editor, which can be contacted by MXML in a more natural way.

Here is a simple example:

When the examples of the upper side can see the following screen when running in IE:

Description: In Flex, the root label is , which is a container, which is a label: in it, any component other than . The records regarding the container will be given later.

2. 2. Arranging UIMXML provides a wide range of visual components to make UI, these components have two categories from big categories.

L L Containers: such as Panel / Box (VBOX / HBOX) / Canvas / Grid / Form, etc.

llic: such as: Button / Checkbox / Datefield / Textarea, etc.

All components on the upper side will be recorded in future records.

The following also gives a simple example.

MarginLeft = "10" marginright = "10" fontsize = "12">

Operating menu 1

Operating menu 2

Operation menu 3

When the examples of the upper side can see the following screen when running in IE:

Description: The above examples are used in the components: panel / hbox / list / tabnavigator, etc.

3. 3. Trigger event with MXML

The Flex application is based on event-driven, and each component has many events and corresponding, such as with Click events. Give an example:

MarginLeft = "10" marginright = "10" fontsize = "12">

s

When the examples of the upper side can see the following screen when running in IE:

Description: The left picture is the initial picture, the right picture is the result of the submission letter.

In the following, an example of the upper side increases a little complexity, add an ActionScript method in MXML:

Function Hello () {

Textarea1.text = "Cheers for the Olympic athletes!"

}

]]]]

MarginLeft = "10" marginright = "10" fontsize = "12">

The result of the run is the same.

4. 4. Bind data between different components

Flex provides a simple syntax to bind attributes between different components, such as "{}" applications in the example below:

When the examples of the upper side can see the following screen when running in IE:

Click to submit it before running

"{}" Has an alternative, which is to use the tag, which is recorded later.

5. 5. Use data service

MXML provides the following data service components:

l L Webservice Provides Access To Soap-Based Web Services

L L httpservice provides access to http urls That Return Datal L RemoteObject Provides Access To Java Objects

6. 6. Storage and verify data

7. 7. Formatted data

8. 8. Use CSS

9. 9. Effect

10. 10. Use XML namespaces (Using XML Namespaces)

Specify the namespace of XML in the MXML tag properties "XMLns". XML namespace allows you to use a different set of XML tags in the same XML document. Tags and namespaces in XML are closely related.

The XML namespace gives you the ability to use the custom label, in the following example contains a custom label: "Custombox".

Marginleft = "10" marginright = "10">

JPLATEAU Saturday, September 11, 2004, written in Guangzhou Tongde.