Usare i moduli in Flex: width e percentWidth (Augitaly blog: il sito per i fan di Adobe)

Usare i moduli in Flex: width e percentWidth

Scrivere applicazioni modulari in Flex che permettano di utilizzare un layout liquido (che si adatta alla finestra del browser) presenta una particolarità che è necessario conoscere. In questo articolo la esaminiamo con un esempio pratico.

Consideriamo la seguente applicazione Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
            xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute">
	<mx:Panel
		width="100%" height="100%"
		title="Test panel"
	/>
</mx:Application>

Non fa altro che visualizzare un Panel che occupa le dimensioni della finestra del browser. Ridimensionando la finestra, il Panel si adatta di conseguenza. Il risultato è mostrato nella figura sottostante.

Flex Application

Ipotizziamo adesso di voler mettere il Panel in un modulo; creiamo un Module di nome ml_module in questo modo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module 
	    xmlns:mx="http://www.adobe.com/2006/mxml" 
	    layout="absolute"
	    width="100%" height="100%">
	<mx:Panel
		width="100%" height="100%"
		title="Test panel"
	/>
</mx:Module>

e modifichiamo l'Application come segue:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
            xmlns:mx="http://www.adobe.com/2006/mxml" 
	    layout="absolute">
	<mx:ModuleLoader
		width="100%" height="100%"
		url="ml_module.swf"
	/>
</mx:Application>

A questo punto ci si aspetterebbe lo stesso risultato mostrato nella figura precedente, invece l'effetto è il seguente:

Flex Application

Per ovviare a questo effetto occorre specificare le dimensioni del modulo utilizzando gli attributi percentWidth e percentHeight al posto dei tradizionali width e height, come mostrato in seguito:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module 
	    xmlns:mx="http://www.adobe.com/2006/mxml" 
	    layout="absolute"
	    percentWidth="100" percentHeight="100">
	<mx:Panel
		width="100%" height="100%"
		title="Test panel"
	/>
</mx:Module>

Attenzione, ricordate di eliminare il simbolo % quando utilizzate gli attributi percentWidth e percentHeight altrimenti avrete un errore di compilazione.

Il motivo di questo comportamento non è chiaro, quel che è sicuro è che utilizzando questo rimedio si evita di perdere molto tempo e di rinunciare all'utilizzo di un layout liquido in un'applicazione modulare in Flex.