Tip:
Highlight text to annotate it
X
In this video I am going to describe the nature of the MXML programming language and take
a look at and describe the syntax of the code that was generated during the design process
in the last video. I have opened the file travelrequest.mxml
and I am going to go into Source view. Notice by the way that you can go into Source
view in a number of different ways including the keyboard shortcut,
ctrl plus the tilde key that's the key next to the number 1,
that's a toggle keystroke that takes you back-and-forth between source and Design view.
Then I am going to expand the Source view Editor, so we can see as much code as possible.
Let's start with the Application tag. The MXML Programming Language is up here XML
Based-Language that describes an application through its containership.
The top level or the root element in this file is called .
The application tag set, which has a begin tag and an end tag wrapped around the rest
of the application, always has something called a namespace declaration.
The syntax "xmlns:" in XML is way of declaring a namespace, the nature of a namespace is
that it's an arbitrary string that identifies to the XML processor which XML language is
being used. The namespace http://www.adobe.com/2006/mxml
is the unique identifier for the particular version of the MXML language used in Flex
3. The ":mx" after the XML ns-declaration the
syntax ":mx" after XML ns and before the "=" sign is something called a namespace prefix.
Namespace prefix is our arbitrary that is you can name them anything you want, but the
default namespace prefix MX that's associated with the string ending with 2006/mxml is used
throughout the Flex documentation in example applications and so it's very strongly encouraged
that you always use MX as your namespace prefix as well.
The MX prefix is declared in the root element of the application and then it's applied
to every declaration of an element that's a member of the MXML language.
The application element, the penal element, the label, the text input, and the button
element, these are all commands or tags or elements
of the MXML language. When you see an MXML declaration such as ,
this is a declarative instantiation of an ActionScript class.
The mx:Label element is a reference to and a creation of an instance of that label class
and one of the most important components of the Flex Framework beyond the compiling
tools and debugging tools is the class library, the set of components that you use to plug
in and put together a Flex application. The application container, the panel container,
the label, the text input, and the button controls are all members of this Flex Framework.
The application itself has been set up with a layout, a vertical.
Now, I am going to add some hard returns here so that we can see the code completely on
screen. And it's important to note that MXML as an
XML based language is not sensitive to white space i.e. you can add as many hard returns,
line feeds, extra white space in terms of tabs or spaces
as you like to make the code more readable. I do strongly recommend that you retain the
indentation that you see in generated MXML code as you see here,
because it makes it easier to read the code and understand the parent child relationship
of objects to each other. For instance, the panel is a child of the
application container and the labels, text inputs, and button controls are children of
the panel. This sort of containership is critical to
understanding how Flex applications are laid out.
The application and the panel both support a layout property.
The possible values of the layout property are vertical, horizontal, and absolute.
When you set up a layout property a vertical or horizontal, you are allowing the container
to layout its objects automatically. In this case going back to design mode, I
will show you that the panel is a direct child of the application.
The application's layout property is set to vertical and that causes objects that are
direct children of the application to be stacked in a single column vertically one on top of
another. I will show you in a later video the difference
between these different layout properties. But then I also want to show you that the
panel container also supports the layout property and here we would set its layout property
to a value of absolute. The purpose of absolute layout is to allow
you to place objects in specific positions relative to the top left corners of their
applications. Each of the controls within the panel has
an X and Y property. The X property is the number of pixels from
the panel's left border and the Y property is the number of pixels from the top border
of the panel. So label within X and Y of 10 would be 10
pixels from the left and 10 pixels from the top.
Now, you can change these values manually in the Source view or you can go back to Design
view and move things around. For instance, I will go back to Design view
and click and drag and object and move it around a little bit, go back to Source view
and I will show that that text input controls X property has
now changed to a new value of 78. I will go back to Design view, move it back
in the place using the alignment guides that appear automatically, go back to Code View
and you will see that the X property is once again back to 106, which matches the X property
of the other text input and in fact that's what's determining the
left alignment of the controls with each other. Each of the other XML attributes that you
see listed here is either a property or a style;
I would be talking about styles more extensively in a later video.
But, regardless of whether something is classified as a property
or a style you can typically declare these settings through the use of MXML attributes.
The background gradient alphas and background gradient colors for instance that are applied
to the application are arrays of two values each.
The background gradient colors takes in array of two colors, the first color being the top
color and the second being the bottom and the gradient
is calculated automatically. Within the panel there is a width and a height
property. In my version of the application the width
and the height came out respectively at 306 pixels wide and 164 pixels high.
I didn't have to figure out those numbers, I just used the Design view of Flex Builder
and dragged the container to the size that I wanted.
And all of the other settings such as X and Y for each of the nested controls was again
automatically calculated by Flex Builder's Design view.
Notice, that the panel container has a title property; this is the value that's used as
the title with the top of the panel. Going back to Design view you see the title
listed there. I can change the value either in Design view
or in Source view and either way I will be changing the view of both and when I Save
and Run the application again, you will see the results in the browser.
So that's a look the source code that makes up a Flex application.
Now, in a later video I am going to talk about the relationship between MXML and ActionScript,
the programmatic language that's also used in building your Flex applications.