Strike Through text component

Posted on May 10, 2007 by doug

Recently it was asked on the HOF Flex list how to display text with a strike through. I suggested extending label and using the graphics API, though I had no time at that time to produce the example. While another (Daniel Grace) has provided a mxml based example, here I provide a AS based one that allows for turning the strikethrough on/off at runtime, great for bound data. I’ve attached the component file as well as a simple application example.

StrikeThroughFlexComponent
DK

This entry was posted in ColdFusion, Flex, Techy. Bookmark the permalink.

8 Responses to Strike Through text component

  1. JabbyPanda says:
    May 11, 2007 at 5:57 am

    Looks like the link to ZIP file is broken.

  2. doug says:
    May 11, 2007 at 6:59 am

    Jabby, thanks and sorry about that. Seems I found a wordpress bug.

    DK

  3. JabbyPanda says:
    May 11, 2007 at 8:07 am

    Good approach with extending Label component with text “strike-through” functionality, I was thinking of similar approach to use Flash Drawing API to actually draw a line.

    Thumb up!

  4. Lakester says:
    September 5, 2007 at 4:46 am

    This component is useful when you need a label with all its text strikethrough.
    But how can I specify only a portion of the text to be strikethrough?

    It would be great if the htmltext methods will support the html tag :(

  5. Sergey says:
    March 21, 2008 at 7:25 am

    Great job. I extended your method. I use it for button.
    import mx.controls.Button;
    import mx.events.StyleEvent;

    [Style(name="textDecoration", type="String", enumeration="none,underline,strike", inherit="no")]
    public class ExtendedButton extends Button
    {
    public function ExtendedButton()
    {
    super();
    }

    override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number): void
    {
    super.updateDisplayList (unscaledWidth, unscaledHeight);
    this.graphics.clear();
    drawStrike();
    }

    override public function styleChanged(styleProp:String):void
    {
    super.styleChanged(styleProp);
    if (styleProp == “textDecoration”)
    {
    this.invalidateDisplayList();
    }
    }

    private function drawStrike():void
    {
    if (getStyle(“textDecoration”) == “strike”)
    {

    this.graphics.lineStyle(1, this.getStyle(“color”));
    this.graphics.moveTo((width – textField.textWidth) / 2, height/2);
    this.graphics.lineTo((width + textField.textWidth) / 2, height/2);
    }
    else
    {
    this.graphics.clear();
    }
    }
    }

  6. mt says:
    March 30, 2008 at 10:18 pm

    How can I create a strikeout itemRenderer component. I want to be able to select a checkbox and thereby applying a strikeout to the entire row.

  7. Antonio says:
    March 27, 2009 at 10:51 am

    Great post!!
    Thank you very much. This is just what I was looking for :D .

  8. Alex says:
    November 22, 2009 at 4:32 pm

    I modified this a bit and used it for a CheckBox component:

    package components
    {
    import flash.events.MouseEvent;
    import flash.events.Event;
    import mx.controls.CheckBox;

    public class CheckBoxStrikeable extends CheckBox
    {
    public function CheckBoxStrikeable()
    {
    super();
    this.addEventListener ( MouseEvent.CLICK, onClicked );
    this.addEventListener( Event.ADDED_TO_STAGE, onInit);
    }

    private function onInit (EV:Event) : void
    {
    updateStyle();
    }

    private function onClicked (ME:MouseEvent) : void
    {
    updateStyle();
    }

    private function updateStyle () : void
    {
    if (this.selected)
    {
    this.graphics.lineStyle(1.5, this.getStyle(“color”), 1);
    this.graphics.moveTo((width – textField.textWidth) / 2 + 10, height/2);
    this.graphics.lineTo((width + textField.textWidth) / 2 + 10, height/2);
    }
    else
    this.graphics.clear();
    }
    }
    }