Getting started mxml
MXML is an XML markup language that you use to lay out user interface components.
You also use MXML to declaratively define nonvisual aspects of an application. Like HTML, MXML provides tags that define user interfaces.
...
However, some code is more than thousands of words. To understand the beauty of FlexJS and MXML let's take a look at the MDL table component and let's compare how it could be build by using HTML and MXML.
This is what we'd like to create
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</body>
</html>
Notice that we have to declare each cell manually.
<?xml version="1.0" encoding="utf-8"?>
<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:mdl="library://ns.apache.org/flexjs/mdl"
initComplete="onInitComplete()">
<fx:Script>
<![CDATA[
[Bindable] public var data:Array;
private function onInitComplete():void {
data = new Array();
}
]]>
</fx:Script>
<mdl:Table shadow="2" selectable="true">
<mdl:columns>
<mdl:TableColumn headerText="Username" />
<mdl:TableColumn headerText="First Name"/>
<mdl:TableColumn headerText="Last Name"/>
<mdl:TableColumn headerText="Email"/>
</mdl:columns>
</mdl:Table>
</js:Group>