Flex: how to remove code from MXML

Question

Can you recommend articles, books, and recommendations for developing Flex applications? (both AIR and web).

I read Creating Components and Forcing Separation of Problems with Flex and Building Components using the behind code .

Is it always necessary to run an application on Main MXML? Can't create an instance of the first view from the ActionScript class?

How would you add a handler to the first MXML and give it flow control?

I am trying to write null code in my MXML files in order to keep the untied view from the code. Is this possible in Flex?

Answer 1

I worked on several projects that used a code template that fits many of your requirements. In a nutshell, you extract the code from MXML by creating an ActionScript base class (MyClassCode.as) and then creating an MXML file that inherits from your class code (MyClass.mxml). One of the drawbacks is that any user interface elements in the MXML file must be declared a second time in your code class, otherwise I found it to be a very efficient method of separating code from the user interface. Here is an example and some links for more information:

MyClassCode.as:

package mypackage { import flash.events.MouseEvent; import mx.events.FlexEvent; import spark.components.Button; import spark.components.Group; public class MyClassCode extends Group { public var myButton:Button; public function MyClassCode() { super(); this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete); } private function onCreationComplete(e:FlexEvent):void { this.removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete); myButton.addEventListener(MouseEvent.CLICK, onClick); } private function onClick(e:MouseEvent):void { // Do something } } } 

MyClass.mxml:

 <?xml version="1.0" encoding="utf-8"?> <mypackage:MyClassCode xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:mypackage="mypackage.*"> <s:Button id="myButton"/> </mypackage:MyClassCode> 

Some links:

http://learn.adobe.com/wiki/display/Flex/Code+Behind

http://ted.onflash.org/2007/02/code-behind-in-flex-2.php

http://blog.vivisectingmedia.com/2008/04/the-flex-code-behind-pattern/

Answer 2

Best practices are very subjective in software development. If you find one person who says “X,” I can find another who says “Y,” and most likely they will both be right in the circumstances.

Most books that I know focus on getting beginners up to speed, as opposed to best practices.

To answer your specific questions:

Should the app always start with Main MXML? Can't I create the first view from the ActionScript class?

In theory, it seems like it should be possible for the main application file to be an ActionSCript; because the Flex compiler simply turns MXM into an ActionSCript. In practice, I have never seen anyone do this. I have seen applications that are ACtionSCript, with the exception of the application tag in the main application file.

How would you add an MXML handler first and give flow control to it?

What do you mean by handler and thread control? I am not sure if I have a specific answer. Many people use frameworks. Cairngorm is the most widely used, but some find it overly complex. For a while, Mat was a favorite of the community. RobotLegs is the current favorite.

I am trying to write null code on my MXML files to preserve decoupling from the code. Is this possible in Flex?

It depends. Isn't that also a code? If you want to use the "Model View Controller" Style, there are many ways. A framework can help, and I mentioned a bit above. But, you could also do it yourself. If you are new to Flex, I would recommend that you start developing “No Frame” and bring the framework into the equation to find out if they help solve the problems you are facing.

Answer 3

Paul Williams has great articles and examples for various presentation templates for Flex. He even created a sample application using each of the different templates, and showed how to unit test some of the templates. http://blogs.adobe.com/paulw/

Take a look at the passive viewer model, perhaps this is what you are looking for in terms of writing AS code in your MXML.