4 Replies Latest reply on Sep 6, 2011 7:57 AM by Pablo Souza

    flex best practices


      Im new to Flex but I have plenty of experience using traditional webdev technologies (HTML, CSS, JS/AJAX, PHP).  I know that when you build a web app using these technologies, it's considered best practice to use event listeners rather than event handlers in JS, and to place all your JS in an external file and reference it in your HTML page. I've been watching several videos on Lynda.com on Flash Builder 4 and Flex, and in all the videos, the author places most of the Actionscript in the MXML file while referencing a few custom Actionscript classes. With that said, what do Flex developers typically do?

        • 1. Re: flex best practices
          drkstr_1 Level 4

          I think it really just depends on personal preference.


          It is possible to include external actionscript into an MXML file, but I'm personally not a big fan of the practice (even though I support it in html/js). It's better to think of MXML as a class, rather than an html page, because that's what it becomes in the end. Having code in your source path that only works when imported into another class is not my idea of a "best practice", although there are some exceptions to this (very few IMHO), and there are people that would disagree. I think mostly it becomes a pain when running asdoc against library code, or creating a library project that complains about the "dead code".


          Anyeays, that's just one mans opinion.

          • 2. Re: flex best practices
            kokorito Level 4

            yes, the seperation of visual elements from script is used in Flex as well. It depends on the size and complexity of the app but you would ultimately be working towards an MVC, Model View Controller, pattern.

            Model being the data Model, where the data is stored

            View is the representation of the data in the Model

            commands from the View are delegated to the Controller

            • 3. Re: flex best practices
              Karl_Sigiscar_1971 Level 3

              In Flex 3, it is considered best practice to use the Presentation Model pattern (as advocated by Martin Fowler), where you extract the view states and view logic.


              A PM is a simple ActionScript class that extends EventDispatcher (for Data Binding purposes).



              public class SalesProjectionPM extends EventDispatcher {


                   // Collection of QuarterlySales objects

                   public class quarterlySales:ArrayCollection;


                   // Event handler

                   public function viewSwitchHandler(event:MouseEvent):void {}



              You can then inject this PM into an MXML view using an IoC container framework and bind your view to the corresponding PM for both your components dataProviders and events. If you have a central data model, you can inject it into your PM and bind to it.


              In Flex 4, you already have the separation of view and logic that comes with the new Spark Architecture. You have an ActionScript component that contains the view states and view logic (including event handlers) on the one side. And you have a MXML skin that materializes the UI on the other.


              You add/remove event handlers in the partAdded(), partRemoved() overriden methods. If you have a central data model, you can inject it into your ActionScript components.

              • 4. Re: flex best practices
                Pablo Souza Level 3

                In addition to the previous messages, you can consider the usage of a flex framework like swiz, mate, robotlegs ...

                Most of them helps the programmer to take the right way in terms of architecture and separation of concerns.

                If you take a look at the swiz web site (http://swizframework.org/), you can have access to several tutorials at this direction.


                Good lucky!


                Pablo Souza