Flex MXML Module Sizing
Working with Flex MXML files can sometimes be challenging. I was recently asked to take an existing flex component and compile it into an MXML module. Historically, I’ve used static width and height in my MXML module, but this module needed to be dynamically sized by percent. I had often wondered how to size MXML modules dynamically, which can be done with other flex components. My first inclination for a potential solution was to re-size the width and height of the module in the parent containers updateDisplayList. But I found a good post about dynamic sizing on the Adobe Forum that said you could use the percentHeight and percentWidth properties of the Module (e.g. percentWidth=”100″). I also referenced an article at Adobe LiveDocs called Sizing Visual Components.
Code for Dynamic Sizing of a compiled AS3 Module
Module Loader Code:
<mx:ModuleLoader url="ExampleMod.swf" width="100%" height="100%" />
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" percentWidth="100" percentHeight="100" layout="absolute" >
<mx:Panel width="100%" height="100%" title="test panel" />
Remember to also set the ModuleLoader width and height properties to 100%.