Introducing the MXML and ActionScript languages
Created
22 March 2010
Requirements
User level
All
This article is geared towards ColdFusion developers who want a high-level overview of the two programming languages in the Adobe Flex framework. You will also learn how these languages can work together to handle the system and user events that drive Flex interaction.
Understanding ActionScript classes and MXML components
The Flex framework provides two programming languages: ActionScript and MXML. ActionScript 3.0 is an ECMA-compliant scripting language similar in syntax to JavaScript and Java. MXML is an XML-based declarative language similar to CFML.
This is an example of an ActionScript function with variable declarations:
protected function addEmployee_clickHandler(event:MouseEvent):void
{
private var firstName:String;
private var lastName:String;
}
This is an example of a Button UI control declared as an MXML tag:
<s:Button id="addEmployee" label="Add Employee"
click="addEmployee_clickHandler(event)" />
MXML tags are actually created with ActionScript under the hood. When you compile your Flex application, the MXML is converted into ActionScript which is then compiled into a SWF file. This means that your entire application could be written in ActionScript. However, you will primarily use MXML to define your Flex application UI and ActionScript to program your business logic.
Introducing ActionScript classes
ColdFusion developers who are not familiar with object-oriented programming (OOP) will need to establish a foundation in OOP concepts.
Note: The free Adobe Flex in a Week training series covers an introduction to object-oriented programming that is specifically designed for developers to learn OOP in the context of Flex application development.
ActionScript is an OOP language that encapsulates all of its functionality in classes. The Flex framework includes libraries of pre-built classes that provide data retrieval and handling, animation, UI elements and layout, and much more. Figure 1 shows some ActionScript 3.0 classes in a common OOP documentation format.
Introducing Flex UI components
You now know that MXML is ActionScript under the hood. That means that each MXML tag is actually an ActionScript class. Figure 2 shows a list of classes in an ActionScript library called Spark. The third class listed in the library is the Button class, which refers to the same Button MXML code that you saw earlier in this article.
The Flex framework provides two libraries of user interface components known as Spark and MX. The MX components, also known as the Halo components, were originally included in Flex 3 and each had logic in it that tightly integrated its behavior with layout and look-and-feel. The Spark components are new in Flex 4 and have been designed specifically to separate behavior, layout, styles and skins. This separation allows for better control over all aspects of the component and improved reusability.
Note: Eventually, there should be equivalent Spark components for the MX components, but in the meanwhile, you can use them together. When both a Spark and MX component exists, choose the Spark component.
For both the Spark and MX libraries, there are two categories of components: controls and containers. Controls are UI elements like TextInput, Button, DataGrid or DropDownList components. Containers hold and layout content, which could be controls or other containers. Figure 3 shows some available Flex components.
Introducing event-driven development
ColdFusion applications are built procedurally. In other words, the server processes all CFML code from top to bottom, in order. Flex applications follow an event-driven model for code processing which relies on code to run based on system or user events.
A system event is dispatched by the application and could include the application starting up, a component laid out for display or data returned from a service call. A user event is triggered when an end user interacts with the application and could include a mouse click or a keyboard input.
Consider the following code:
<fx:Script>
<![CDATA[
protected function addEmployee_clickHandler(event:MouseEvent):void {
private var firstName:String;
private var lastName:String;
}
]]>
</fx:Script>
<s:Button id="addEmployee"
label="Add Employee"
click="addEmployee_clickHandler (event)" />
I won't go into the details of all the code, but you can see that the ActionScript code is placed inside of an MXML Script block. Although the function in the Script block is place higher in the code than the Button control, it actually does not run until the user clicks on the Button control to trigger the click event and run the associated click handler function, which, in this case, is named addEmployee_clickHandler().
Where to go from here
- This article is a high-level overview of the Flex programming languages and event-driven development. For a more thorough introduction to these topics, explore Days 1 and 2 of the Flex in a Week training series.
- To learn about the Adobe Flash Platform and Adobe Flex and how Flex fits into the world of an Adobe ColdFusion developer, refer to the article Understanding Flex in the client/server model.
- To learn how to create CFCs for use with Flex, refer to the article Understanding the role of CFCs in Flex application development.
- To get started building your first Flex application with Flash Builder and ColdFusion Builder, follow the steps outlined in the 3-part tutorial Set up and build your first Flex and ColdFusion application.
More Like This
- Building a Flex application that connects to a BlazeDS Remoting destination using Flash Builder 4.5
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 2
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 1
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 3
- Understanding Flex in the client/server model
- Set up and build your first Flex and ColdFusion application – Part 3: Use ColdFusion and Flash Builder 4 to create an application
- Building an icon-checkbox component with Flex 3
- Set up and build your first Flex and ColdFusion application – Part 2: Generating ColdFusion components
- Set up and build your first Flex and ColdFusion application – Part 1: Database setup
- Project Hendrix: A call center Customer Experience Management solution