Home Page

14 Maggio 2007

Usare i moduli in Flex: width e percentWidth

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.

Pubblicato in Flex

Leave a Reply

TROVA:

Informazioni su questo blog Informazioni su questo blog Abbonati ai Feed RSS di questo Blog Abbonati ai Feed RSS di questo Blog Scarica il nostro software Scarica il nostro software
Story of Stuff