A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

Dynamic Sizing of Flex MXML Modules

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%" />

Module Code:

<mx:Module xmlns:mx="" 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%.