Microsoft languages typically implement a Code-Behind development model. Code-Behind allows you to separate user interface and application logic into classes that inherit from one another. This is a useful model and is easy to implement within Flex 2. So for anyone dreaming of Code-Behind in Flex 2, today is your lucky day. ;)

Code-Behind is just inheritance where the UI extends the application logic class, the Code-Behind. In Flex, since MXML generates an ActionScript Class, this provides the key to implementing Code-Behind. Onward!

Here is a simple example:

FlexCodeBehind Example

FlexCodeBehind Download

Step 1: Make a new Flex Project named "FlexCodeBehind".

Step 2: Make a new ActionScript Class like so:

package: app
class name: MyClass
extends: mx.core.Application

code:



Step 3: Modify "FlexCodeBehind.mxml" to inherit from app.MyClass like so:



In MXML, the root tag extends the listed class, this is how you denote inheritance in MXML. In this case, we use the app.MyClass as the root tag which inherits from mx.core.Application. This makes the application an instance of FlexCodeBehind.mxml so all methods, properties, and events within FlexCodeBehind.mxml, app.MyClass, and mx.core.Application are there.

Also note how the new 'app' namespace is used in the MXML document. The xmlns:app denotes the path to MyClass or "app.*" just like an import statement. This is handy if you want to add in custom components within other packages and it is a key element of understanding MXML as a language.

Advantages:
1. Code in classes and UI in MXML.
2. Easy to understand.
3. Reusable.

MXML is very deep as a language. It provides a high level declarative tag based language atop ActionScript 3 (ECMA Standard) and allows for components and classes to work hand in hand via composition. Over time I have come to appreciate the subtleties in MXML and ActionScript as they work perfectly together. The twist comes when you realize that there is no different between MXML and ActionScript 3 classes, they are just classes and are 100% interchangeable. I will post some examples of this in follow-up posts.

ASP.NET Code-Behind Information - Note the similarities...

So there you are, Code-Behind in Flex.

Cheers,

Ted :)