This is a presentation on Adobe Flex MXML programming

1. Flex MXML
PROGRAMMING
Presented By
Angelin
ANGELIN

2.  MXML (Macromedia XML)
◦ a declarative XML-based mark-up language
◦ used to
• declaratively lay out the user interface components of a Flex application
• define their appearance and behaviors
• define other non-visual aspects of an application, such as access to data
sources on the server and data bindings between user-interface
components and data sources on the server etc
ANGELIN

3.  All MXML tags correspond to ActionScript classes.
 MXML tags are interpreted into AS classes before the application is compiled into
a SWF, so anything that can be done in a tag, can also done with pure AS.
Creating a button with both ActionScript and MXML in Flex:
The ActionScript Way
import mx.controls.button;
private var asButton:Button = new Button();
asButton.x = 100;
asButton.y = 100;
asButton.id="actionscriptButton";
asButton.label = "ActionScript 3 Button";
addChild(asButton);
The MXML Way
<mx:Button id=“flexButton" x="100" y="100“ label="MXML Button“/>
ANGELIN

4. Creating a label with both ActionScript and MXML in Flex:
The ActionScript Way
import mx.controls.Label;
private var asLabel:Label = new Label();
asLabel.text = "This is built with ActionScript";
asLabel.setStyle("fontSize", 24);
addChild(asLabel);
The MXML Way
<mx:Label text="This is built with MXML“ fontSize="24"/>
 With MXML, everything has been condensed into one tag.
 It is not required to import control packages, declare a variable for each tag
or add the button to the stage. All of those actions are automatically handled
within the tag.
ANGELIN

5.  Flex applications are built using MXML and ActionScript
 ActionScript is an ECMA compliant & procedural language, used to write
programmatic logic for responding to both user-initiated and system-initiated
events at runtime
 Whether written in MXML or ActionScript, all Flex components are compiled into
ActionScript classes.
 At compile time, MXML is precompiled to ActionScript classes, which along with
other ActionScript classes and other components used by the Flex application(SWC,
CSS, images etc) are then compiled into the SWF (Shock Wave Flash) file.
ANGELIN

6.  MXML Tag Syntax has the following elements:
◦ namespace that tells Flex where to find a particular component.
◦ declare the component class to be used (e.g. Button) from that namespace.
◦ set the available properties and methods using tag attributes, as illustrated
below.
<namespace:component_classname [properties methods] />
 Example:
<mx:Button label = “Submit” click=“Alert.show(‘Hello!’)” />
ANGELIN

7.  Avoid XML tag name conflicts using a prefix to the tag name
 The prefix should be declared using a namespace definition which is defined by the
xmlns attribute in the start tag of an element.
 Namespace declaration syntax: xmlns:prefix="URI".
 The namespace URI is not used by the parser to look up information. it is simply
treated by an XML parser as a string. For example,
xmlns:xhtml=“http://www.w3.org/1999/xhtml” does not take to any page.
 Using a URI (such as "http://www.w3.org/1999/xhtml") to identify a namespace,
rather than a simple string (such as "xhtml"), reduces the possibility of different
namespaces using duplicate identifiers.
 According to W3C standards the namespace URI should be some valid URL that can
point to manifest XML file which maps component to their respective classes.
ANGELIN

8.  The Default Namespace URI in MXML file is http://www.adobe.com/2006/mxml and
the namespace accessor is “mx”.
 An MXML file created by Flex Builder will automatically bind the mx namespace to
the Flex Core Library.
 The namespace definition in MXML files is added to the opening tag of its top level
container.
 Example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
</mx:Application>
ANGELIN

9.  The flex-config.xml in the Flex SDK’s frameworks folder provides all information
that is needed by the compiler to create SWF file.
 The Flex compiler refers <namespaces></namespaces> tag in the flex-config.xml
to find the information about the manifest file that maps to the mx namespace
URL.
 flex-config.xml
ANGELIN

10.  The mx namespace URL is redirected by compiler to the manifest file – mxml-
manifest.xml in the Flex SDK’s frameworks folder
 The <componentPackage></componentPackage> tag in mxml-manifest.mxml
encloses all of the class descriptors for the mx namespace.
 For example, in an application that uses a DataGrid in a MXML file, the compiler
looks at this file to resolve what class actually relates to it and imports it.
ANGELIN

11. Control Most used Properties Most used Events Example
Button label:String - the string label click - dispatched when the <mx:Button
for the button button is clicked label=“Click Me"
click="Alert.show('But
icon:Class - an image or icon ton Clicked');" />
CheckBox label:String - the text of the change - dispatched when <mx:CheckBox
associated label the selected property label="CheckBox"
changes click="Alert.show('Che
selected:Boolean - whether or ckBox Checked');" />
not the box is checked click - dispatched when the
check box is clicked
(checked or unchecked)
RadioButton groupName:String - the name change - dispatched when <mx:RadioButton
of the group, the radio button the selected property label="RadioButton 1"
belongs to. changes click="Alert.show('Rad
[NOTE: RadioButtons do not ioButton 1 Clicked');"
necessarily need an explicit click - dispatched when the />
group declared if they are in check box is clicked
the same container] (checked or unchecked) <mx:RadioButton
label="RadioButton 2"
selected:Boolean - whether or click="Alert.show('Rad
not the box is checked ioButton 2 Clicked');"
/>
ANGELIN
label:String - the text of the
associated label

12. Control Most used Properties Most used Events Example
ComboBox dataProvider:Object - the data change - event fired <mx:ComboBox
provider used to populate the when a selection is prompt="Is this a
drop-down list made from the drop- ComboBox?"
down list selectedIndex="-1”
selectedItem:Object - the item change="Alert.show('Y
selected in the data provider from enter - dispatched ou made a
the drop-down list when the user presses selection.');">
the Enter key while
selectedIndex:Number - the index typing in the editable <mx:dataProvider>
of the selectedItem text field (if the editable <mx:Array>
property is set to true) <mx:String>Yes</mx:S
prompt:String - a string to use to tring>
prompt the user to make a <mx:String>No</mx:St
selection (when selectedIndex = - ring>
1) <mx:String>Maybe</m
x:String>
editable:Boolean - whether or not </mx:Array>
the user may input a value </mx:dataProvider>
</mx:ComboBox>
ANGELIN

13. Control Most used Properties Most used Events Example
Image source:Object - the URL, click - dispatched <mx:Image
object, class or string when the button is source="http://www.adobe
name of a class to load clicked .com/ubi/globalnav/include
/adobe-lq.png" />
useHandCursor:Boolean
- makes the cursor
appear as a hand rather
than the standard arrow
Standard Text text - the text the control change - event fired <mx:Label text="Label
controls: displays when the text Control" />
Label - displays changes <mx:Text text="Text
single line, non- htmlText - the HTML text Control" />
editable text the control displays textInput - event <mx:TextInput
Text - displays fired when text is text="TextInput Control" />
multi-line, non- input or pasted <mx:TextArea
editable text text="TextArea Control" />
TextInput - allows
single-line, editable
text input
TextArea - allows
multi-line, editable
text input
ANGELIN

14. Control Most used Properties Most used Events Example
DataGrid dataProvider:Object - the data provider itemClick - event <mx:DataGrid>
used to populate the grid fired when an item <mx:columns>
columns:Array - the columns used to (row) is clicked <mx:DataGridColumn
display the data itemDoubleClick - headerText="First
selectedItem:Object - the item selected event fired when an Name" />
in the data provider from the drop- item (row) is <mx:DataGridColumn
down list double-clicked headerText="Last
selectedIndex:Number - the index of Name" />
the selectedItem <mx:DataGridColumn
draggableColumns:Boolean - whether headerText="Email
or not users can drag and reorder Address" />
columns </mx:columns>
</mx:DataGrid>
Numeric value:Number - the numeric value change - event fired <mx:NumericStepper
Stepper selected/input when the value value="0"
maximum:Number - the maximum changes minimum="0"
allowed value maximum="10"
minimum:Number - the minimum stepSize="1" />
allowed value
stepSize:Number - the unit of change
between values (non-zero) when the
up/down controls are used
ANGELIN

15. Control Most used Properties Most used Events Example
Date Controls selectedDate:Date - date change - dispatched <mx:DateField />
(DateField selected by the control when a date is <mx:DateChooser />
and selected or changed
DateChooser)
List Controls dataProvider:Object - itemClick - event <mx:List>
(List, TileList) the data provider used fired when an item <mx:dataProvider>
to populate the grid (row) is clicked <mx:Array>
selectedItem:Object - itemDoubleClick - <mx:String>Yes</mx:String>
the item selected in the event fired when an <mx:String>No</mx:String>
data provider from the item (row) is double- <mx:String>Maybe</mx:String>
drop-down list clicked </mx:Array>
selectedIndex:Number - </mx:dataProvider>
the index of the </mx:List>
ANGELIN
selectedItem

16. Control Purpose Example
Application Holds components that provide
ControlBar global navigation and
application commands.
Can be docked at the top of an
Application container.
Box (HBox and Displays content in a uniformly HBox
VBox) spaced row or column. An HBox
container horizontally aligns its VBox
children; a VBox container
vertically aligns its children.
Canvas Defines a container in which its
children must be explicitly
positioned.
ANGELIN

17. Control Purpose Example
ControlBar Places controls at the lower
edge of a Panel or TitleWindow
container.
DividedBox Lays out its children horizontally
(HDividedBox and or vertically, much like a Box
VDividedBox) container, except that it inserts
an adjustable divider between
the children.
Form Arranges its children in a
standard form format.
ANGELIN

18. Control Purpose Example
Grid Arranges children as rows and
columns of cells, much like an
HTML table.
Panel Displays a title bar, a caption, a
border, and its children.
Tile Defines a layout that arranges its
children in multiple rows or
columns. Tile containers are
similar to a Grid, except there’s
no row or column spanning
allowed.
TitleWindow Displays a popup window that
contains a title bar, a caption,
border, a close button, and its
children. The user can move and
resize the container.
ANGELIN

19. Control Purpose Example
Accordion Organizes information in a series of
child panels, where one panel is active
at any time.
MenuBar Displays the top level of a menu as a
horizontal bar of menu items, where
each item can pop up a submenu
TabNavigator Displays a container with tabs to let
users switch between different content
areas.
ViewStack Defines a stack of containers that
displays a single container at a time.
ANGELIN

20.  Flex applications are largely composed of components or modular elements.
 A component is an ActionScript class or an MXML component document.
 Each MXML component extends an existing Flex component or another custom
built MXML component.
 Each MXML component can be used within other MXML components. That is
MXML components can have child elements (just like XML). For instance, a
container element such as Canvas can have child elements like a Button or a Label.
 Component properties can be set using tag attributes or ActionScript.
ANGELIN

21. ANGELIN

22.  Why use namespace?
◦ To use custom components (outside of the mx or flash packages), a
namespace has to be defined that would tell Flex where to find those
custom controls.
◦ Since, MXML component’s file name = MXML tag name,
Namespace prevents tag name conflict if custom MXML component
name = mx component name
ANGELIN

23.  Example:
◦ Create a custom MXML component (Button.mxml) inside the package
structure com.view
◦ In the MXML file where the custom MXML component is to be used, set up a
namespace referencing the package com.view
◦ For example: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:views=“com.view.*">
◦ The custom MXML component (Button.mxml) can now be referred in the
containing MXML using the namespace <views:Button label=“My Button”/>
 views - The namespace that tells Flex the package where the components are
in
 Button - The name of the class/component in the package
ANGELIN

24. ANGELIN

25. Elements Purpose Example
XML declaration XML header <?xml version="1.0“
encoding="UTF8"?>
Root component XML root element <mx:Application
(with namespaces xmlns:mx="http://www
of its .adobe.com/2006/mxml
components) ” layout="absolute“>
Metadata (Event, Metadata tags provide information to the Flex <mx:Metadata>
Style, Effect etc) compiler that describes how the MXML [Event("change")]
components are used in a Flex application. [Event("anotherEvent")
Metadata tags do not get compiled into ] </mx:Metadata>
executable code, but provide information to
control how portions of the code get compiled.
[Style(name="style_name"[,property="value",…)]
[Event(name="enableChange",
type="myEvents.EnableChangeEvent")]
In MXML metadata tags are declared within a
<mx:Metadata> element or within <mx:Script>
(e.g. for Bindable properties).
In ActionScript metadata tags are declared before
ANGELIN
the class declaration.

26. Elements Purpose Example
Data Bindings To tie the data in one object to another <mx:Binding
object source="billForm.name.text”
destination="shipform.name.text”/>
Style To set style to components. Internal Style definition
definitions Syntax: <mx:Style> Button {
(internal & <mx:Style [source="style_sheet"]> Color: #FFFFFF;
external CSS [selector_name { }
file) style_property: value; </mx:Style>
[...] Reference to External Style
}] definition
</mx:Style> <mx:Style source="styles.css">
</mx:Style>
Scripts To include ActionScript code <mx:Script>
<![CDATA[
//ActionScript statements
]]>
</mx:Script>
Other Non visual components & <mx:Button x="10" y="10"
components Visual components id="newButton" label="This is a
button"/>
ANGELIN

27. ANGELIN

28. ANGELIN

29. ANGELIN

30. ANGELIN

31. ANGELIN