Flex: MXML Container Code Smells

20 Jun No Comments
MXML offers the RIA developer a simple tag-based means of laying out a user-interface, by nesting containers and controls. Numerous containers exist in the Flex Class Library, each exhibiting different behaviors in the way they layout their children. For example, a VBox container with 2 children will lay out the children vertically, one above the other. VDividedBox will lay the children out like a VBox, but with a draggable bar between the children to adjust the screen real-estate that each occupies, Grid will layout it’s children in a grid (like an HTML table), etc, etc. Containers can contain other containers, so if you think of your UI in terms of “boxes” (many designers I’ve worked with talk about “gridding out their UI” like this), you can place containers within containers to quickly achieve your desired application layout. In our forthcoming book, “Developing Rich Clients with Macromedia Flex”, one of our chapters discusses the development of an RIA mail-client for Hotmail, using Hotmail Web Services. The UI can be seen here: The essence of this UI is described in MXML as follows: <!– ======================================================================== –> <!– View (abbreviated code for purpose of blog entry – won’t compile) –> <!– ======================================================================== –> <mx:Style source=”main.css”/> <mx:MenuBar id=”menuBar” widthFlex=”1″ /> <mx:VDividedBox> <mx:DataGrid id=”inbox” widthFlex=”1″ cellPress=”delegate.fetchMessage( event.itemIndex )”> <mx:dataProvider>{Inbox}</mx:dataProvider> <mx:columns> <mx:Array> <mx:DataGridColumn columnName=”SENDER” headerText=”From:” /> <mx:DataGridColumn columnName=”SUBJECT” headerText=”Subject:”/> <mx:DataGridColumn columnName=”RCVDATE” headerText=”Date:”/> </mx:Array> </mx:columns> </mx:DataGrid> <mx:TextArea styleName=”bodyText” widthFlex=”1″ heightFlex=”1″ text=”{hotmailService.getMail.result}” id=”preview”/> </mx:VDividedBox> Here, our Menu is placed above a VDividedBox container, which will place a draggable divider between 2 vertically stacked children. The children in this case are a DataGrid container to hold the list of Inbox messages and a TextArea to display the body of the current selected message. With this simple MXML, we are able to implement a classic 2-pane mail reader UI, with a menubar for common mail operations. Bad MXML Smell – Deeply Nested Containers In Agile Development, which we are strong advocates of at iteration::two, the practice of Refactoring is one in which we continually improve the design of existing code. When and how to apply refactorings, is a semi-formal process of identifying a common coding idiom that has acknowledged drawbacks, and replacing that idiom with a leaner, fitter alternative. These coding idioms were called “Bad Code Smells” by Martin Fowler (who wrote the flagship book on Refactoring). So why am I telling you all this ? Flex, and more importantly MXML is a fantastic technology, but as we have been advising clients and prospects while consulting, “…Flex isn’t a magic solution, it’s a new technology. And like all technologies, you can write bad code – bad performance, insecure, unscalable and unmaintainable – with Flex just as much as you can with Java, C#, C++, C, Smalltalk, or any other programming language…” A bad code smell we should be aware of when authoring MXML is what I will now call “deep nested containers”. In Flex, it is tempting to arbitrarily nest a handful of containers (the VBox and HBox being the containers that developers seem to “overuse” as Flex newbies) in ingenious fashions, to achieve the desired layout. However, as Scott Barnes has already blogged, what happens under the hood when you place a container tag in MXML, is the creation of a MovieClip in the Flash Player. Overuse of MovieClips can be costly in terms of performance, and when the Flex Layout Manager starts having to resize and accomodate deep nestings of Movie Clips, you’re asking it to do some pretty heavy lifting under the covers. When the performance of your app starts to get sluggish at this stage, before cursing Flex, recognise instead that your MXML smells a little of “deeply nested containers” and it’s an opportunity to do a bit of refactoring. The recommendation with Flex, given current client/player performance, is to try and avoid overly nesting containers – while this perhaps seems like a limitation, the Flex Class Library is in actual fact replete with containers that are more than likely able to offer you a simpler, more intuitive, more maintainable, more flexible and ultimately more performant means of achieving your desired UI layout. We no longer advocate a “magic number” of maximum container depth – rather, we hazard that if performance of an application is sluggish in the rendering of the UI, that container nesting be something that you investigate more closely in the areas of poor performance. And if you can’t ? Well, a container is ultimately an ActionScript 2.0 class, that extends the provided mx.containers.Container class (which itself extends the mx.core.View class, which itself extends the mx.core.UIComponent class, which itself extends the mx.core.UIObject class !). The point? There is an excellent hierarchy of classes that offer you methods to override, by which you can describe programmatically your own custom layout policy for your own custom container, define how your container should behave in the presence of scrollbars, etc, etc. You shouldn’t have to do this often, if ever at all, and if you are writing your own containers, then you’re a Flex demi-god , and please send your resume to demi-god-jobs at iterationtwo dot com (no agencies please). So in summary – the Flex Class Library of containers, which manifest themselves in MXML as simple and intuitive tags, offer a quick and easy way to define rich and complex user-interfaces. Be aware of the “deeply nested containers” MXML code-smell, which should warn you that there be performance problems ahead, and that points more importantly to the fact that you should probably acquaint yourself a little more with the other containers in the Flex library, and see if you can achieve your layout in a simpler fashion.

Latest Comments

Leave a Reply

Your email address will not be published. Required fields are marked *