MXML, XML, ActionScript

Principles of MXML
MXML and ActionScript are used hand-in-hand to create Rich Internet Applications.

MXML is used with Flex Server and is dynamically compiled into standard binary
SWF files. However, Adobe’s Flex Builder IDE and Flex SDK can also generate SWF
files from MXML for you to use without having the Flex Server.
If you know HTML, then MXML should be fairly easy to understand, since they’re
so similar. MXML is an XML-based markup language; it has a more structured and less
ambiguous syntax than HTML and includes more tags than HTML. For example,
DataGrid, Tree, TabNavigator, Accordion, and Menu are all some of the standard sets
of tags. You can also extend MXML tags and create your own components. But the
most significant difference is that the Flash Player, which enables your users to have
an interactive experience with your web site as opposed to a static HTML-based page,
renders MXML-defined user interfaces. You can also hand-code MXML using an IDE,
such as Eclipse or Intellij.

XML
XML stands for Extensible Markup Language: a general-purpose markup language, just like
HTML, but more restrictive. Standard Generalized Markup Language, or SGML, was the
precursor to XML; hence, XML is a simpler way to code but is a subset of SGML. There
are two levels of correctness for an XML document:
●Well-formed If your document is formed correctly, it conforms to XML’s syntax
rules. For example, if an element has an opening tag with no closing tag and isn’t
self-closing, it’s not well-formed. This then means that a conforming parser isn’t
allowed to process the document.
●Valid A valid document also conforms to some semantic rules. These are either
user-defined or included as an XML schema or DTD. As in the well-formed definition,
if a document contains an undefined tag, then it’s not valid and a validating parser
can’t process it.
Since HTML and XML have proved that they are easy to use and can create user
applications, MXML piggybacked on this success and is really just a derivation of XML.
Principles of ActionScript
Just as MXML is derived from XML, ActionScript is a scripting language based on a
derivation of JavaScript. So, if you already know XML and some JavaScript, half the
battle is already won; you’ll ramp up fast with Flex’s languages. ActionScript was initially
designed for controlling simple 2-D vector animations created in Flash. But ActionScript
was given more functionality as Flash grew, and more current versions allow for the
creation of web-based games and Internet applications with the accompaniment of audio
and video. As you’ll see in the ActionScript timeline, it’s gone through some serious
re-working to make it a robust language.
There were limited interactivity features in the first three versions of Flash, which
meant that ActionScript was limited to attaching a single command to a frame or button.
Then there were also constraints on basic navigation, which only allowed for simplistic
controls, for example:
●Play
●Stop
●Get URL
●Goto

Flex Limitations

As you know, Flex applications are really Flash applications, which means they’re limited
by the constraints of the Flash Player. In particular, the Flash Player is not suited to producing
vanilla documentation as HTML is. It’s also not supported as HTML on portable devices,
although support is improving.
The Flash Player cannot display anything outside the boundaries of the player’s space
embedded in a web page. The size of the player window is determined by the HTML code
that integrates the Flash file with the rest of the page. This can be a real pain, since it
means your Flex application cannot make the screen bigger or smaller to suit the current
interaction. It is possible to open a new Flash/Flex window using ActionScript to call
JavaScript, but it’s rarely worth the complexity and hassle.
It’s not currently possible to drag and drop files from the desktop to the Flash Player.
Because the Flash Player is designed to work across a wide range of operating systems, it
would be very difficult to support this functionality. Every OS has a different mechanism
for how dragging and dropping works. This makes conveniences like displaying an image
that’s been dropped onto the player impossible.
Although Adobe publishes the format of SWF files, it still is the only entity that can
make changes to the format. Any enhancements to the file format can be made only if
Adobe decides to make them. Open-source formats such as Ajax do not have this limitation.
In Adobe’s defense, the company has been making great efforts to distribute Flex as
open-source to encourage community feedback and development.
Because Flex applications are published as SWF files, there is a delay when loading
them that isn’t an issue for regular HTML files. Depending on the client’s computer
speed, the network connection, and the amount of data in the SWF file, the initial load
delay can be several seconds. This is no different from any other thin client type of
application such as a Java applet or even a regular desktop application, for that matter.
The upside is that once the application loads, the user experience is very fast and smooth,
without HTML’s frequent page reloads.
The Apollo project removes many of Flex’s limitations but comes at the price of no longer
being an Internet application. Apollo executes Flex applications within the context of a
full-blown desktop application. Apollo consists of a set of runtimes that enable you to create
stand-alone applications that run on Windows, Mac, and Linux. It allows you to have total
control over the look of your applications and can use funky things such as transparency and
non-rectangular windows. Essentially it’s taking Flex and creating a stand-alone application.
Apollo has been renamed Adobe AIR, which integrates HTML, Ajax, Flash, and Flex all
together into one desktop application. You’ll be an interactive guru if you learn Flash, Flex,
AIR, and ActionScript, which all enable you to build cooler applications. You can get more
information about AIR here: http://labs.adobe.com/technologies/air.

Flex vs. HTML/Ajax
In the beginning there was HTML, and it was good, but it’s made to generate static
content. There’s no support for user interaction on a page. Animation is limited to
animated GIF images. As with practically any other technology on the web there is
constant pressure on developers to improve and add functionality to their web sites.

Dynamic HTML
Dynamic HTML is the combination of HTML, style sheets, and a scripting language
to animate or modify the appearance of a web page according to user actions. The first
scripting language was JavaScript, introduced by Netscape. Unfortunately, the scripting
language landscape resembles a war-torn battlefield. Microsoft responded to Netscape’s
JavaScript by developing its scripting language, JScript. While similar to JavaScript, it’s
not identical. This is the first landmine that anyone scripting a page to make it interactive
must navigate.

DOMs
To make matters worse, no one could agree on how to describe the elements of a web
page, called the Document Object Model (DOM). Again, Netscape and Microsoft
developed similar but not entirely compatible DOMs. The result is that the JavaScript
written to modify objects on a page often needs to check which type of browser is in
use and behave differently. This creates endless headaches for anyone writing code.
The W3C, which develops web standards, stepped in and began defining standards
for how a DOM should be defined and manipulated. This has helped make working with
multiple browsers easier, as most modern browsers support at least one revision of the
W3C DOM standard.

Ajax
The combination of JavaScript and the DOM allows web developers to script out interactions
on web pages. Ajax takes that one step further by allowing JavaScript to request additional
information from a web server without a page request (and subsequent screen refresh).
Figure 1-3 shows the distinction between the JavaScript engine and server-side scripting.
Additionally, it displays the interaction of the Filesystem or Database and Apache or IIS,
which both reside on the web server and the web browser.

Flex Fundamentals

The Origins of Flex
Originally Flash content was created with the Flash multimedia-authoring program. Flash
supports various capabilities for both vector and raster graphics, the scripting language
ActionScript, and also bidirectional audio and video streaming. Additionally, there are
versions of the Flash Player for mobile phones and other non-PC devices. Strictly speaking,
however, Adobe Flash Professional is an integrated development environment (IDE) and
the Flash Player itself is a virtual machine that an end user exploits to run Flash files. You
can also speak of “running” Flash files as “parsing” them, and we’ll get into that later in
this book. In our technology-driven environment Flash really can refer to the authoring
environment, the player, or the application files.
Unfortunately, Flash was designed with graphic artists in mind and uses a timeline
concept that is foreign to most developers. Flex grew out of the need for a toolkit to create
Flash content that developers understand. Flex provides this by using a workflow and
programming model instead of the timeline.
Flex was initially released as a J2EE application or JSP tag library that compiles a
tagged-based language called MXML and an object-oriented language called ActionScript
directly into Flash applications, which in turn create binary SWF applications. SWF is an
abbreviation for Small Web Format or Shockwave Flash. Each letter is usually pronounced
individually, but most people that work with Flash or Adobe Captivate call it SWF, in
common nomenclature a swiff file. The Flex compiler is still a J2EE application. The
current Flex releases support the creation of static files that are compiled at authoring time
and can be published online, forgoing the need for a server license. There are alternatives
to Flex, such as Ajax, JavaFX, OpenLaszlo, Silverlight, XUL, and the ZK Framework.
For ColdFusion and JSP developers, to use MXML makes sense. On the other hand,
ActionScript should be familiar to Java and other OO developers. But don’t worry if you
are just starting out—that’s what this book is for, to help beginners to Flex get up to speed
as quickly as possible.
Flash and Flex are both applications that give the user live data. This means that web
users don’t have to call your web server again when they decide to change the way the
page loads. If you were using JSP, ASP, or PHP to code your site, the web server would
be consistently queried from the user, whereas if you design your web site in Flash or
Flex, there is no need to ping the web server—anything your web user wants to do is live.

ActionScript
ActionScript is the object-oriented programming (OOP) language that you use in your
Flash files to add interactivity to your applications. But ActionScript is also used by Flex.
ActionScript, like most programming languages, has its own grammar and punctuation
rules, which determine the characters and words used to create meaning and the order in
which they can be written. Take XML as an example: when you’re creating simple tags
such as for bold and for italic, you need to close your bold tag first, then your
italic tag. HTML doesn’t demand this kind of closing tag structure. In PHP, a semicolon
(;) ends your code, and that’s exactly how you end a statement in ActionScript.
ActionScript 1.0 was introduced in its current syntax when Flash 5 was released.
This was the first thoroughly programmable version of Flash. When Flash 6 (MX)
entered the scene, this broadened the programming environment by adding numerous
built-in functions and allowing better programmatic control of movie elements. Flash 7
(MX 2004) introduced ActionScript 2.0, which added strong typing and class-based
programming features. These features included explicit class declarations, inheritance,
interfaces, and Strict Data Typing. Every release of ActionScript shares the same compiled
form within the Flash output as an .swf.
One difference between versions 1.0 and 2.0 of ActionScript is that version 2.0 is
case sensitive. If you first capitalize a variable called Name in your code but later use a
lowercase form for name, the different forms won’t match. ActionScript 3.2 has numerous
changes from ActionScript 2.0. For example, some global functions such as call()
and chr() have been removed in ActionScript 3.2 but were available in 2.0.

MXML
MXML is an XML-based user interface markup language first introduced by Macromedia
in March 2004. Adobe, which acquired Macromedia in December 2005, kept the name,
which some developers believe stands for “Multimedia eXtensible Markup Language.”
Application developers use MXML in combination with ActionScript to develop rich
Internet applications.

Understanding Flex
The biggest reason to use Flex is that it allows web application developers to rapidly and
easily build RIAs. Think of Flex this way: in a multitiered model, Flex applications serve
as the presentation tier. Some examples of a multitiered model are a backend information
source such as a Java process or a database, the application server (web server plus optional
LiveCycle Data Services to talk to the info source tier), and the client (web browser/Flash
plug-in). The client is also called the presentation layer. The application server is sometimes
called the business logic layer.