TheDutch
%Europe/Berlin %926 %2007, 22:13
Het valt me de laatste tijd op dat mensen die beginnen met Flex 2 niet echt weten hoe het in elkaar zit. Wat is MXML? Hoe werkt het? Hoe staat het in verhouding tot ActionScript 3?
Met dit onderwerp probeer ik op een hele simpele manier daar wat duidelijkheid over te creëren :).
MXML is werkelijk niets anders dan XML, zoals je XML kent voor het inladen van gegevens.
Dit stukje MXML:
<mx:Application>
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Zou net zo goed dit kunnen zijn:
<content>
<page>
<source>
<header />
</source>
</page>
</content>
XML - en dus ook MXML - doet zelf namelijk helemaal niets. Het is puur tekst en niets meer.
Adobe heeft echter een parser (http://en.wikipedia.org/wiki/Parsing) geschreven die MXML tags omzet naar ActionScript 3 code en dat vervolgens compiled (http://en.wikipedia.org/wiki/Compiler) naar een SWF bestand.
Dit stukje MXML:
<mx:DataGrid id="mijnDataGrid" width="200" height="300">
<mx:columns>
<mx:DataGridColumn headerText="Voornaam" dataField="voornaam" />
<mx:DataGridColumn headerText="Achternaam" dataField="achternaam" />
<mx:DataGridColumn headerText="Adres" dataField="adres" />
<mx:DataGridColumn headerText="Postcode" dataField="postcode" />
<mx:DataGridColumn headerText="Woonplaats" dataField="woonplaats" />
</mx:columns>
</mx:DataGrid>
Zou je zo in ActionScript 3 kunnen schrijven:
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
private function addDataGrid():void
{
var mijnDataGrid:DataGrid;
var mijnDataGridColumns:Array;
var mijnDataGridColumn1:DataGridColumn;
var mijnDataGridColumn2:DataGridColumn;
var mijnDataGridColumn3:DataGridColumn;
var mijnDataGridColumn4:DataGridColumn;
var mijnDataGridColumn5:DataGridColumn;
mijnDataGrid = new DataGrid();
mijnDataGrid.width = 200;
mijnDataGrid.height = 300;
mijnDataGridColumns = new Array();
mijnDataGridColumn1 = new DataGridColumn();
mijnDataGridColumn1.headerText = "Voornaam";
mijnDataGridColumn1.dataField = "voornaam";
mijnDataGridColumns.push(mijnDataGridColumn1);
mijnDataGridColumn2 = new DataGridColumn();
mijnDataGridColumn2.headerText = "Achternaam";
mijnDataGridColumn2.dataField = "achternaam";
mijnDataGridColumns.push(mijnDataGridColumn2);
mijnDataGridColumn3 = new DataGridColumn();
mijnDataGridColumn3.headerText = "Adres";
mijnDataGridColumn3.dataField = "adres";
mijnDataGridColumns.push(mijnDataGridColumn3);
mijnDataGridColumn4 = new DataGridColumn();
mijnDataGridColumn4.headerText = "Postcode";
mijnDataGridColumn4.dataField = "postcode";
mijnDataGridColumns.push(mijnDataGridColumn4);
mijnDataGridColumn5 = new DataGridColumn();
mijnDataGridColumn5.headerText = "Woonplaats";
mijnDataGridColumn5.dataField = "woonplaats";
mijnDataGridColumns.push(mijnDataGridColumn5);
mijnDataGrid.columns = mijnDataGridColumns;
this.addChild(mijnDataGrid);
}
Dit stukje MXML:
<mx:Button label="Klik mij!" click="this.clickHandler(event)" />
Zou je zo in ActionScript 3 kunnen schrijven:
import mx.controls.Button;
import flash.events.MouseEvent;
private function addButton():void
{
var mijnButton:Button;
mijnButton = new Button();
mijnButton.label = "Klik mij!";
mijnButton.addEventListener(MouseEvent.CLICK,this. clickHandler);
this.addChild(mijnButton);
}
Zoals je ziet is elk MXML component ook als ActionScript 3 neer te zetten omdat alle MXML code naar ActionScript 3 wordt omgezet wanneer je jouw project built.
Belangrijk om te weten!:
Wanneer een MXML tag begint met een hoofdletter betekent dit dat het een class is. Wanneer een MXML tag met een kleine letter begint betekent dit dat het een property is van de parent MXML tag.
Behandel MXML zoals je XML zou behandelen. Als iets in XML niet kan, dan kan dat ook niet in MXML. Houdt hier rekening mee wanneer je bijvoorbeeld line breaks in een TextArea wilt gebruiken.
Dit werkt bijvoorbeeld niet omdat line breaks standaard door XML geparsed worden:
<mx:TextArea>
<mx:text>
lijn 1
lijn 2
lijn 3
</mx:text>
</mx:TextArea>
Daarom moet je er <![CDATA[]]> omheen zetten zodat jij aangeeft dat alles wat daar tussenstaat niet geparsed mag worden:
<mx:TextArea>
<mx:text>
<![CDATA[
lijn 1
lijn 2
lijn 3
]]>
</mx:text>
</mx:TextArea>
Ik hoop dat deze korte uitleg meer duidelijkheid heeft gegeven over wat MXML is en hoe je het moet lezen om te begrijpen hoe het in verband staat met ActionScript 3 :).
Met dit onderwerp probeer ik op een hele simpele manier daar wat duidelijkheid over te creëren :).
MXML is werkelijk niets anders dan XML, zoals je XML kent voor het inladen van gegevens.
Dit stukje MXML:
<mx:Application>
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Zou net zo goed dit kunnen zijn:
<content>
<page>
<source>
<header />
</source>
</page>
</content>
XML - en dus ook MXML - doet zelf namelijk helemaal niets. Het is puur tekst en niets meer.
Adobe heeft echter een parser (http://en.wikipedia.org/wiki/Parsing) geschreven die MXML tags omzet naar ActionScript 3 code en dat vervolgens compiled (http://en.wikipedia.org/wiki/Compiler) naar een SWF bestand.
Dit stukje MXML:
<mx:DataGrid id="mijnDataGrid" width="200" height="300">
<mx:columns>
<mx:DataGridColumn headerText="Voornaam" dataField="voornaam" />
<mx:DataGridColumn headerText="Achternaam" dataField="achternaam" />
<mx:DataGridColumn headerText="Adres" dataField="adres" />
<mx:DataGridColumn headerText="Postcode" dataField="postcode" />
<mx:DataGridColumn headerText="Woonplaats" dataField="woonplaats" />
</mx:columns>
</mx:DataGrid>
Zou je zo in ActionScript 3 kunnen schrijven:
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
private function addDataGrid():void
{
var mijnDataGrid:DataGrid;
var mijnDataGridColumns:Array;
var mijnDataGridColumn1:DataGridColumn;
var mijnDataGridColumn2:DataGridColumn;
var mijnDataGridColumn3:DataGridColumn;
var mijnDataGridColumn4:DataGridColumn;
var mijnDataGridColumn5:DataGridColumn;
mijnDataGrid = new DataGrid();
mijnDataGrid.width = 200;
mijnDataGrid.height = 300;
mijnDataGridColumns = new Array();
mijnDataGridColumn1 = new DataGridColumn();
mijnDataGridColumn1.headerText = "Voornaam";
mijnDataGridColumn1.dataField = "voornaam";
mijnDataGridColumns.push(mijnDataGridColumn1);
mijnDataGridColumn2 = new DataGridColumn();
mijnDataGridColumn2.headerText = "Achternaam";
mijnDataGridColumn2.dataField = "achternaam";
mijnDataGridColumns.push(mijnDataGridColumn2);
mijnDataGridColumn3 = new DataGridColumn();
mijnDataGridColumn3.headerText = "Adres";
mijnDataGridColumn3.dataField = "adres";
mijnDataGridColumns.push(mijnDataGridColumn3);
mijnDataGridColumn4 = new DataGridColumn();
mijnDataGridColumn4.headerText = "Postcode";
mijnDataGridColumn4.dataField = "postcode";
mijnDataGridColumns.push(mijnDataGridColumn4);
mijnDataGridColumn5 = new DataGridColumn();
mijnDataGridColumn5.headerText = "Woonplaats";
mijnDataGridColumn5.dataField = "woonplaats";
mijnDataGridColumns.push(mijnDataGridColumn5);
mijnDataGrid.columns = mijnDataGridColumns;
this.addChild(mijnDataGrid);
}
Dit stukje MXML:
<mx:Button label="Klik mij!" click="this.clickHandler(event)" />
Zou je zo in ActionScript 3 kunnen schrijven:
import mx.controls.Button;
import flash.events.MouseEvent;
private function addButton():void
{
var mijnButton:Button;
mijnButton = new Button();
mijnButton.label = "Klik mij!";
mijnButton.addEventListener(MouseEvent.CLICK,this. clickHandler);
this.addChild(mijnButton);
}
Zoals je ziet is elk MXML component ook als ActionScript 3 neer te zetten omdat alle MXML code naar ActionScript 3 wordt omgezet wanneer je jouw project built.
Belangrijk om te weten!:
Wanneer een MXML tag begint met een hoofdletter betekent dit dat het een class is. Wanneer een MXML tag met een kleine letter begint betekent dit dat het een property is van de parent MXML tag.
Behandel MXML zoals je XML zou behandelen. Als iets in XML niet kan, dan kan dat ook niet in MXML. Houdt hier rekening mee wanneer je bijvoorbeeld line breaks in een TextArea wilt gebruiken.
Dit werkt bijvoorbeeld niet omdat line breaks standaard door XML geparsed worden:
<mx:TextArea>
<mx:text>
lijn 1
lijn 2
lijn 3
</mx:text>
</mx:TextArea>
Daarom moet je er <![CDATA[]]> omheen zetten zodat jij aangeeft dat alles wat daar tussenstaat niet geparsed mag worden:
<mx:TextArea>
<mx:text>
<![CDATA[
lijn 1
lijn 2
lijn 3
]]>
</mx:text>
</mx:TextArea>
Ik hoop dat deze korte uitleg meer duidelijkheid heeft gegeven over wat MXML is en hoe je het moet lezen om te begrijpen hoe het in verband staat met ActionScript 3 :).