Defining the user interface in MXML

Your application can consist of one or more MXML files. Using multiple MXML files promotes code reuse, simplifies the process of building a complex application, and makes it easier for more than one developer to contribute to a project.

The following example is an MXML application that uses a Button control to trigger a copy of the text from a TextInput control to a TextArea control:

<?xml version="1.0"?> 
<!-- ?xml tag must start in line 1 column 1 -->

<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

   <!-- Flex controls exist in a container. Define a Panel container. -->
   <mx:Panel title="My Application">

      <!-- TextInput control for user input. -->
      <mx:TextInput id="myInput" width="150" text=""  />

      <!-- Button control that triggers the copy. -->
      <mx:Button id="myButton" label="Copy Text" />

      <!-- Output TextArea control. -->
      <mx:TextArea id="myText" text="" width="150" />
         
   </mx:Panel>   
</mx:Application>

The first line of this application specifies the XML declaration and must start in line 1, column 1 of the MXML file.

The second line begins with the <mx:Application> tag, the root element of a Flex application. This tag includes the Flex namespace declaration. The content between the beginning and end <mx:Application> tags defines the Flex application.

As it is written, this example lays out the user interface, but does not yet contain the application logic to copy the input text from the TextInput control to the TextArea control. The next section adds that logic.


Version 1.5

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00002142.htm