This is the second session in the flex tutorial series. In “Flex 101: Knowing Flex” we just get to know Flex a bit closely. In this session we will focus on MXML basics, which is the key to any Flex application development.

As you already know, MXML is a kind of XML markup language, which only used in Flex especially for layout user interface components.

MXML vs. HTML

Though for a new bi it may be hard to grasp, but honestly MXML isn’t so different than HTML. Just like HTML, MXML provides tags that define user interfaces. But MXML provides a much richer tag set, such as-data grids, data binding, trees, tab navigators, accordions, menus, animation effects etc. Not only that you will be even able to extend MXML with custom components (MXML + ActionScript) that you reference as MXML tags. The biggest difference between HTML and MXML is the outcome, the MXML defined applications are compiled into SWF (Flash file) files and rendered by Flash Player which you got to admit much more rich and dynamic than HTML.

MXML coding

You are a developer or not, you should know by now, every markup language follow their own coding standard, MXML isn’t different at all. Since it is a variant of XML markup language, you will find a lot of similarities. So let’s start with a simple MXML file and explaining the parts of it.
<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Label text=”Hello World!” fontWeight=”bold” fontSize=”24″ />

</mx:Application>

This is an example of simple MXML file, to display “Hello World”. Note that the first line of the MXML file specifies an optional declaration of the XML version.
<?xml version=”1.0″ encoding=”utf-8″?>