Flex Tips – Ne donnez jamais "controlBar" comme id de composant
Un petit "bug" assez original que j'ai trouvé avec un collègue sur une application Flex toute simple.Voici en simplifié, le code que l'on avait pour notre application Flex 3:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingLeft="0"
paddingRight="0" paddingTop="0">
<mx:Canvas width="100%" height="100%" backgroundColor="white">
<mx:HBox id="controlBar" backgroundColor="0xBBBBBB" width="100%">
<mx:Button label="button 1" />
<mx:Button label="button 2" />
<mx:Button label="button 3" />
<mx:Button label="button 4" />
</mx:HBox>
</mx:Canvas>
</mx:Application>
Plutôt simple, non? Il y avait bien sûr d'autres composants mais voilà le point principal qui nous intéresse. En théorie, on devrait avoir un Canvas blanc qui prend tout l'écran avec dedans, une barre de menu horizontale contenant quelques boutons. Voici pourtant le résultat:
Bon, si vous avez lu le titre de ce billet (vous l'avez lu, non ?), vous avez sûrement compris ce qui cloche: l'identifiant donné à notre HBox: "controlBar". Alors pourquoi cela représente-t-il un problème?
Et bien il existe déjà une déclaration de variable dans le composant Application qui est "controlBar":
/**
* The ApplicationControlBar for this Application.
*
* @see mx.containers.ApplicationControlBar
* @default null
*/
public var controlBar:IUIComponent;
Votre composant vient donc en quelque sorte "surcharger" cette variable réservée pour une éventuelle ApplicationControlBar. Celle-ci vient se docker en haut de l'application, l'espace lui sera alors réservé même si votre composant est ailleurs dans la display list.
Voilà, pour corriger ce "bug", donnez simplement un autre identifiant à votre composant
Composant Flex – Afficher/masquer les barres d'outils d'un RichTextEditor avec RichTextEditorRemoveSubcontrols
Le framework Flex contient un composant appelé RichTextEditor (RTE) permettant d'entrer du texte et de le formatter en HTML. Par exemple, l'utilisateur peut sélectionner une partie de son texte et le mettre en gras ou modifier sa taille facilement. Voici à quoi ce composant ressemble:
Vous le voyez, tout est là pour formatter du texte, le passage en gras/italique/souligné, la police, la taille, la couleur du texte ... Mais admettons que vous ne vouliez qu'une partie de ces options, par exemple, seulement la taille et la couleur mais pas les autres. Le composant RichTextEditor a une propriété showControlBar permettant d'afficher ou non l'ensemble de ces ControlBar, mais pas individuellement.
Dans le même temps, le composant mx:RichTextEditor permet aussi d'accéder aux composants qui font partie des ces barres d'outils de manière individuelle. Par exemple, pour cacher le bouton Bold (Gras) peut être rendu invisible en faisant:
myRTE.boldButton.visible = false;
Pas très pratique, surtout si vous voulez utiliser ce composant à plusieurs endroits. Heureusement, bridel.org a crée un petit composant baptisé RichTextEditorRemoveSubcontrols (un peu long je trouve mais vous pouvez toujours le renommer 
) permettant de fixer ces propriétés directement avec des propriétés. Ces propriétés peuvent bien sûr être fixées en MXML comme ceci:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"> <local:RichTextEditorRemoveSubcontrols id="myRTE" showColorPicker="false" showFont="true" showFontSize="true" showAlignButtons="false" showLinkTextInput="false" showBoldItalicUnderline="true" showBulletButton="false" /> </mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Mes projets (Open Source)
Autres
