MXML is basically a quick way to describe the View component to Flex. It can define pages, components, containers etc. So it mixes in quite a bit in the same haphazard way the JSP, PHP, ASPs, Visual Studio components etc allow. It looks like it can get messy quickly Additionally ActionScript can be embedded in MXML documents under CDATA which is a recipe for spaghetti code and difficult to debug behavior. MXML can define visual components such as containers (mx:VBox and mx:HBox) as well as UI interface controls (mx:Button and mx:ComboBox). There are also non-visual components such as Data binding and Utils code. They are probably best not done in MXML (see spaghetti code pattern). The model/controller patterns should use ActionScript even though MXML is compiled down to ActionScript and is an XML representation of ActionScript classes and packages. Flex provides a client/desktop paradigm in a web environment. So it is bad to think of Flex/Flash in web page terms. It is a client-based application. As a result the interactions between components, state and data is done through events rather than http requests and tacked on publish/subscribe mechanisms.

There are two types of events, User Events and System Events. The user events are in response to a user performing an action with a component, such as clicking a button. The user events can be attached to a MXML declaration directly and inlines (same as javascript), or a handler can be registered in the MXML declaration and the event handling code be done in ActionScript either in an mx:Script tag and under a CDATA or through ActionScript in an included file mx:Script and source="name_of_actionscript_file.as"

Flex includes the ability to manage State directly to over-ride views. The state functionality is defined in the UIComponent object. States can be defined in MXML or ActionScript but since it is a view technology, it is best performed and defined in MXML. States are defined with mx:States and the children mx:State where the State tag can add/remove components, set properties of components/objects, set styles of components, set event handlers and perform custom overrides where new events can be defined. Adding and removing components with state changes is like doing a display:none on a div in html. The component remains in memory but is not visible.The properties of component can be modified when state is changed via the mx:SetProperty tag. Style is modified with mx:SetStyle, and handlers added with mx:SetEventHandler.

This is a vbox component with a canvas and label inside it. Setting the component's properties is similar to VB or other Visual Studio happy languages. There is none of the mess that CSS and HTML would require to achieve this same effect.

This is the code that creates the screenshot above.

Quite simple. Flex becomes more difficult once MXML and Actionscript are mixed which simple examples such as this don't require.