Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

2021-04-10T00:19:44Z

Text replacement - "$" to " {{edutechwiki}}"

← Older revision		Revision as of 02:19, 10 April 2021
Line 152:		Line 152:
	[[Category: Rich internet applications]]		[[Category: Rich internet applications]]
	[[Category:Flex tutorials]]		[[Category:Flex tutorials]]
			{{edutechwiki}}

Daniel K. Schneider: 1 revision imported

2021-04-09T22:48:46Z

1 revision imported

← Older revision	Revision as of 00:48, 10 April 2021
(No difference)

Daniel K. Schneider: Text replacement - "" to ""

2016-08-22T17:07:29Z

Text replacement - "<pageby nominor="false" comments="false"/>" to ""

New page

{{Incomplete}}


This entry is part of the [[Flex tutorials]]

== Introduction ==

MXML is an XML-based user [http://en.wikipedia.org/wiki/User_interface_markup_language interface markup language] that together with ActionScript allows to develop [[Flash]] applications. MXML is considered a proprietary standard due to its tight integration with Adobe technologies, in particular [[Flash]].

One can use the '''free''' [[Adobe Flex]] developer kit to compile MXML + ActionScript code into [[Flash]]. Flex (i.e. the combination of MXML and Actionscript) did become a fairly popular technology for developping [[rich internet application]]s (e.g. educational multimedia). Flex/mxml seems to gain popularity since it's a sort of "semi-thick client" technology and for once Adobe takes a much better political approach. Both the compiler and the documentation is open and free.

MXML allows to define
* layout structure
* some behaviors
* presentation of information

Demos:
* [http://examples.adobe.com/flex3/componentexplorer/explorer.html Adobe Flex 3 Component Explorer]
* [http://www.adobe.com/devnet-archive/flex/tourdeflex/web/ Tour de Flex] (web version)
* [http://www.adobe.com/devnet/flex/tourdeflex.html Tour de Flex] is a desktop (AIR) installation {{quotation|for exploring Flex 4 capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more}}.

See also: the [[Adobe Flex]] article

== Versions ==

There don't seem to be official schemas for MXML, but some people did create schemas. In particular, check out [http://code.google.com/p/xsd4mxml/ Ali Mansuroglu's] [http://xsd4mxml.googlecode.com/files/flex3.xsd flex3.xsd] or [http://www.matthias-georgi.de/2008/9/relax-ng-schema-for-adobe-flex-3.html Matthias Georgi's] Relax/rnc version.

* Flex Version 2: dead
* Flex Version 3: aka MXML 2006, requires Flash 9
* Flex Version 4: aka MXML 2009, requires Flash 10

== An 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.
Here, we just focus on the MXML part.

=== Flex 3 version ===

A basic Flex 3 / mxml 2006 document would look something like this:

Files:
* [http://tecfa.unige.ch/guides/flash/flex4/intro/ myFirstApplicationFlex3.mxml]
* [http://tecfa.unige.ch/guides/flash/flex4/intro/myFirstApplicationFlex3.swf myFirstApplicationFlex3.swf]

<source lang="actionscript">
<?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>
</source>

Below is a screen capture of the "application":
[[image:flex4-intro-1.jpg|frame|none|Flex myFirstApplicationFlex3.mxml]]

=== Flex 4 version ===

Files:
* [http://tecfa.unige.ch/guides/flash/flex4/intro/ myFirstApplicationFlex4.mxml]
* [http://tecfa.unige.ch/guides/flash/flex4/intro/myFirstApplicationFlex4.swf myFirstApplicationFlex3.swf]

A similar program in Flex 4 would uses more namespaces:
* Flex 4: "http://ns.adobe.com/mxml/2009", typically non-visual stuff
* Spark: "library://ns.adobe.com/flex/spark", the new Flex 4 components
* Flex 3: "library://ns.adobe.com/flex/mx", the old Flex 3 components (not really used in the example below)

<source lang="actionscript">
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="200" minHeight="100" width="200" height="100">

<s:Panel x="28" y="26"
width="200" height="100"
title="My First Application">
<s:Label text="Hello World !"
width="150" height="46"
x="21" y="10" verticalAlign="middle"
textAlign="center" fontWeight="bold" fontSize="24"/>
</s:Panel>

</s:Application>

</source>

=== Editing and compiling (both versions) ===

Make sure to respect [[XML]] Syntax (e.g. closing tags).

Put the code above in text files. Save the text file as "myFirstApplication.mxml" or similar. See the "editing software" section in the [[Adobe Flex#Editing_software_.2F_IDEs|Flex]] article if you plan to
use an editor with Flex support. But for starters you can use
any text editor, preferable an editor with XML support.

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 3, require Flash Player 9 or above, files generated by Flex 4 require Flash Player 10.

As of nov 2010, this will not show in my Ubuntu in Firefox 3.6.12 and Shockwave Flash 10.1 r102 ... don't know why.

== Software ==

There exist several solutions for writing mxml code:
* Use the [[Adobe Flash Builder]] (formerly called Flex Builder). This is a commercial tool, but it is [https://freeriatools.adobe.com/ free for education]
* Use a Relax schema, e.g. Gnu [[Emacs]] with [http://www.matthias-georgi.de/2008/9/relax-ng-schema-for-adobe-flex-3 flex3.rnc] and also its ActionScript mode to write classes.
* Use an XSD schema with a XSD-supporting [[XML editor]] plus an ECMA/ActionSript supporting editor.
* Use the specialized free open source [http://www.flashdevelop.org/ Flashdevelop] ActionScript/Flex editor.

== Links ==

See also the [[Adobe Flex]] article

; At Adobe

* [http://www.adobe.com/devnet/flex/ 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 ...):

* [http://flex.org flex.org] An Adobe page that includes [http://flex.org/resources Flex resources] (as of nov 2011 the best bet) and news from other places

* [http://examples.adobe.com/flex3/componentexplorer/explorer.html Component explorer] Displays both a live component a matching MXML code] ('''Very useful''' !)

* [http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-79b5.html Developing applications in MXML] (part of the [http://help.adobe.com/en_US/flex/using/index.html Adobe Flex 4 manual]

; MXML Schemas
Adobe doesn't seem to provide any sort of schema that would allow you to use an XML editor. But there are some initiatives.
* Flex 1.5/2 (old) [http://falkensweb.com/mxml2.xsd mxml2.xsd] from Falkensweb. I made a [http://tecfa.unige.ch/guides/flash/doc/mxml2.xsd local copy]
* [http://code.google.com/p/xsd4mxml/downloads/list flex3.xsd] made by Ali Mansuroglu. I made a [http://tecfa.unige.ch/guides/flash/doc/flex3.xsd local copy]
* Matthias Georgi in order to support [http://www.matthias-georgi.de/2008/9/relax-ng-schema-for-adobe-flex-3.html development on Emacs] created a Relax NG Schema for Adobe Flex 3 ([http://www.matthias-georgi.de/download/flex3.rnc flex3.rnc download]) and that is based on Ali's XSD.

; Others
* [http://en.wikipedia.org/wiki/MXML MXML] (Wikipedia. Still a stub, i.e. not very useful as of Aug. 2008)
* [http://www.xul.fr/comparison-user-interface-markup-languages.html User Interface Markup Languages] at xul.fr shortly compares various XML-based User Interface Language languages like MXML, XAML (Microsoft) or XUL (Mozilla).
* [http://www.scriptol.com/ajax/ajax-xul-xaml.php Which Interface for a Web Application?] is a similar short comparison at scriptol.com.

[[Category: XML]]
[[Category: Multimedia]]

[[Category: Programming]]

[[Category: Flex]]
[[Category: Actionscript 3]]
[[Category: Rich internet applications]]
[[Category:Flex tutorials]]

MXML - Revision history

Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

Daniel K. Schneider: 1 revision imported

Daniel K. Schneider: Text replacement - "" to ""