Adobe^® Flex^™ Tutorial

Le composant RadioButton de base du framework Flex ne permet pas d'afficher un texte sur plusieurs lignes. Si vous donnez un texte long avec une largeur de composant donnée, votre texte sera tronqué (truncateToFit) et vous pourrez simplement voir la suite du texte en toolTip.

Alex Harui de la Flex Team, sur son blog explique que la mise en page de texte en Flex est lente et n'est pas toujours adaptée au système global de mise en page. Le fait est qu'il n'y a pas vraiment de moyen de déterminer la taille d'un bloc de texte, à moins qu'il n'y ait qu'une seule ligne ou bien de retour à la ligne avec un composant de largeur fixe. Le composant suivant doit d'ailleurs avoir une largeur fixe.

Mais grâce au mécanisme d'héritage de Flex (enfin de la POO en général), on peut arriver à créer ce composant RadioButton MultiLine. Voici donc le composant qu'Alex Harui a crée, nommé MultilineRadioButton.

Exemple en ligne

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:comp="*" >
	<mx:Panel title="MultilineRadioButton et RadioButton"
		paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15">

		<mx:Label text="MultilineRadioButton" fontSize="15"/>
		<comp:MultilineRadioButton
			width="150"
			id="rb1"
			label="This is a multiline radio button whose label should wrap" />
		<comp:MultilineRadioButton
			width="150"
			id="rb2"
			label="This is a multiline radio button whose label should wrap with even more text" />
		<comp:MultilineRadioButton
			width="150"
			id="rb3"
			label="This is a multiline radio button whose label should wrap with even more text and more text beyond that" />
		<mx:Label text="RadioButton Classique" fontSize="15"/>
		<mx:RadioButton
			width="150"
			id="rbNormal"
			label="This is a multiline radio button whose label should wrap" />
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Voir l'article original de l'auteur

Télécharger les sources sur le blog de l'auteur

• Flex UIComponent – Les Composants de type Boutons (Button, LinkButton, RadioButton, CheckBox)
• Flex ToolTip – Gérer la largeur des ToolTip et les retours à la ligne
• Flex Tips – Embed Font sur un TextField qui n'apparait pas
• Flex Layout – Le composant Spacer (mx:Spacer)
• Flex Layout – Positionnement dans un Container Tile (mx:Tile)