MXML: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
| Line 6: | Line 6: | ||
This entry is part of the [[ActionScript]] and [[Flash]] series of articles. | This entry is part of the [[ActionScript]] and [[Flash]] series of articles. | ||
== Introductory example == | == Introductory example == | ||
Firstly, install the [[Adobe Flex#Installing_the_free_Flex_SDK|Flex]] SDK. | |||
A [[Adobe Flex|Flex]] program is a text file that contains a combination of xml elements and optionally actionscript instructions. | A [[Adobe Flex|Flex]] program is a text file that contains a combination of xml elements and optionally actionscript instructions. | ||
Here, we just focus on the MXML part. | |||
A basic mxml document would look something like this: | A basic mxml document would look something like this: | ||
| Line 19: | Line 23: | ||
xmlns:mx="http://www.adobe.com/2006/mxml" | xmlns:mx="http://www.adobe.com/2006/mxml" | ||
horizontalAlign="center" verticalAlign="middle" | horizontalAlign="center" verticalAlign="middle" | ||
width="300" height="160" | width="300" height="160" > | ||
<mx:Panel | <mx:Panel | ||
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" | paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" | ||
title="My First Application" | title="My First Application" > | ||
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> | <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> | ||
</mx:Panel> | </mx:Panel> | ||
</mx:Application> | </mx:Application> | ||
Make | Make sure to respect [[XML]] Syntax (e.g. closing tags). | ||
Put the text above in a text file. Save the text file as "myFirstApplication.mxml". See the "editing software section in the [[Adobe FlexEditing_software_.2F_IDEs]].article if you plan to | |||
use an editor with Flex support. But for starters you can use | |||
any text editor. | |||
Assuming the Flex SDK is properly installed, in the terminal, type: | |||
mxmlc myFirstApplication.mxml | mxmlc myFirstApplication.mxml | ||
Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser. | Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser. | ||
Revision as of 15:44, 28 August 2008
Definition
MXML is an XML-based user interface markup language. MXML is considered a proprietary standard due to its tight integration with Adobe technologies, in particular Flash.
The Adobe Flex developer kit can be use to compile MXML + ActionScript code into Flash. It's a fairly popular technology for developping rich internet applications (e.g. educational multimedia).
This entry is part of the ActionScript and Flash series of articles.
Introductory example
Firstly, install the Flex SDK.
A Flex program is a text file that contains a combination of xml elements and optionally actionscript instructions. Here, we just focus on the MXML part.
A basic mxml document would look something like this:
File myFirstApplication.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle"
width="300" height="160" >
<mx:Panel
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
title="My First Application" >
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>
Make sure to respect XML Syntax (e.g. closing tags).
Put the text above in a text file. Save the text file as "myFirstApplication.mxml". See the "editing software section in the Adobe FlexEditing_software_.2F_IDEs.article if you plan to use an editor with Flex support. But for starters you can use any text editor.
Assuming the Flex SDK is properly installed, in the terminal, type:
mxmlc myFirstApplication.mxml
Information appears on the screen and about half a second later, if all is well, you get informed that a file "myFirstApplication.swf" has been produced. Open this file in a flash player or in a web browser.
SWF files generated by Flex require Flash Player 9 or above.
Links
- Flex Developer Center has a lot of information. Not always obvious to find the best entry point for beginners, but have a look at these (if the links didn't move ...):
- Coding with MXML and ActionScript
- Building components in MXML
- Flex Programming Elements (A manual chapter).
- MXML (Not very useful as of Aug. 2008)
- An overview of MXML: The Flex markup language by C. Coenraets, Adobe (2004). Outdated, but still useful !