Flex Builder è un software di progettazione e sviluppo di siti Web. Dà agli utenti la possibilità di disporre i componenti basati su dati in un ambiente di design grafico. Flex realizza questo con contenitori e layout. Uno sviluppatore può definire come il contenitore verrà visualizzato ai visitatori del sito Web modificando le impostazioni di proprietà, che possono essere applicate a solo determinati elementi o l'intero contenitore. Con poche righe di codice, un designer può modificare la larghezza, l'altezza e la spaziatura interna di un layout del gruppo e dei suoi vari componenti.

Istruzioni

Aggiungere il contenitore del gruppo

1

Avviare Flex 4.5 e aprire "Visualizza codice" sull'applicazione principale di Flex. Aggiungere il contenitore del gruppo inserendo la corretta apertura e chiusura tag.

< s:Group >< / s:Group >

2

Aggiungere gli elementi che si desidera includere nel layout del gruppo. Posizionare questi elementi tra i tag di apertura e di chiusura gruppo.

< s:Group >
< s:Button etichetta = "Casa" / >
< s:Button etichetta = "About Us" / >
< / s:Group >

Il codice sopra riportato fornisce un layout di gruppo con due pulsanti, uno con etichetta "Home" e l'altro "chi"siamo.

3

Impostare la proprietà di layout del gruppo. Aggiungere la proprietà layout dopo il gruppo di tag di apertura e prima gli elementi del gruppo. Flex utilizza quattro strutture di layout di base: "BasicLayout" consente di posizionare gli elementi in qualsiasi modo si desidera; "HorizontalLayout" posiziona gli elementi in una riga orizzontale; "TileLayout" inserisce gli elementi in colonne o righe; e "VerticalLayout" inserisce gli elementi in una singola colonna.

< s:Group >
< s: layout >
< s:HorizontalLayout / >
< / s:layout >
< s:Button etichetta = "Casa" / >
< s:Button etichetta = "About Us" / >
< / s:Group >

Il codice sopra riportato aggiunge la proprietà "HorizontalLayout" per il gruppo di pulsanti.

Regolare la spaziatura interna e dimensione

4

Modificare la larghezza e l'altezza del layout del gruppo. Aggiungere le proprietà width e height nell'apertura tag di gruppo. I valori per larghezza e altezza sono immessi come pixel o percentuale. Se si esclude il segno di percentuale, Flex imposterà un valore in pixel.

< s:Group width = "100%" height = "25" >
< s: layout >
< s:HorizontalLayout / >
< / s:layout >
< s:Button etichetta = "Casa" / >
< s:Button etichetta = "About Us" / >
< / s:Group >

Il codice sopra imposta la larghezza del layout del gruppo al 100 per cento del browser dell'utente. Indica anche un'altezza di 25 pixel.

5

Aggiungere spaziatura interna per gli elementi all'interno del gruppo. Inserire il codice di imbottitura all'interno del blocco "HorizontalLayout".

< s:Group width = "100%" height = "25" >
< s: layout >
< s:HorizontalLayout
paddingLeft = "5" paddingRight = "5"
paddingTop = "5" paddingBottom = "5" / >
< / s:layout >
< s:Button etichetta = "Casa" / >
< s:Button etichetta = "About Us" / >
< / s:Group >

Il codice sopra riportato fornisce imbottitura di cinque pixel per i pulsanti.

6

Regolare le dimensioni degli elementi all'interno del layout. Proprio come si definirebbe altezza e la larghezza del gruppo, è possibile fornire la stessa larghezza e altezza parametri agli elementi all'interno del gruppo.

< s:Group width = "100%" height = "25" >
< s: layout >
< s:HorizontalLayout
paddingLeft = "5" paddingRight = "5"
paddingTop = "5" paddingBottom = "5" / >
< / s:layout >
< s:Button etichetta = "Home" height = "15" / >
< s:Button etichetta = "Chi siamo" height = "15" / >
< / s:Group >

Il codice sopra imposta l'altezza del pulsante alle 15 pixel.

Consigli & Avvertenze

• Codice di Flex è case sensitive. Se hai problemi di impostazione della dimensione del layout del gruppo, assicurarsi che il codice sia privo di errori di battitura e capitalizzazione casuale.