Réaliser un text barré avec Flex

Vous l’avez certainement remarqué Flex ne propose aucun élément de style permettant de réaliser l’équivalent du strike en html balise <s>.

Si comme moi vous avez besoin de barré des composants Text de flex voici la méthode à suivre pour étendre les fonctionnalités de Flex dans ce domaine.

1°) Vous devrez réalisé une classe dérivé de l’objet Flex sur lequel vous souhaitez obtenir la possibilité de barré le texte, ici ce sera le composant « mx:Text »

package components {
import mx.controls.Text;
public class StrikeThroughText extends Text {
public function StrikeThroughText() {
super();
}
private var _strikethrough: Boolean = false;
public function set strikethrough(bool: Boolean): void {
this._strikethrough = bool;
this.invalidateDisplayList();
}
public function get strikethrough(): Boolean {
return this._strikethrough;
}
override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number): void {
super.updateDisplayList (unscaledWidth, unscaledHeight);
this.graphics.clear();
if (this._strikethrough) {
this.graphics.lineStyle(1, this.getStyle("color"));
this.graphics.moveTo(0, unscaledHeight);
this.graphics.lineTo(unscaledWidth, 0);
}
}
}
}

Ce fichier doit être placé dans le dossier components de votre application Flex.

2°) Il faut ensuite ajouter la déclaration du domaine de nom à l’application principale devant utiliser ce composent xmlns:components="components.*"

3°) Voila vous pouvez désormais insérer un composent du type défini à l’étape 1 comme ceci
<components:StrikeThroughText textAlign="center" htmlText="Voici du texte barré" strikethrough="true" />

Remarque : vous pouvez « dé-barré » le texte via action script ou un bouton en passant l’attribut strikethrought à false.