Skip to main content
J
joshuajnoble
Participating Frequently
October 17, 2009
Question

changing the style of a linkElement dynamically

  • October 17, 2009
  • 2 replies
  • 1604 views

Hi, simple question that I can't find in the docs. How do I set the style of a link element in an event handler?

<fx:Script>
        <![CDATA[
            import flashx.textLayout.events.FlowElementMouseEvent;
           
            private function showRollOver(event:FlowElementMouseEvent):void {

                event.flowElement.setStyle("color", 0xff0000); // doesn't do anything

            }

        ]]>
    </fx:Script>
    <s:TextArea id="textArea" editable="false">
        <s:textFlow>
            <s:TextFlow>
                    <s:p>Here is a link to <s:a href="http://www.adobe.com rollOver="showRollOver(event);">Adobe </s:a>and here is a link to Adobe.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>

Thanks for any help!

In an unrelated suggestion, getting a better text entry form on this site might make it less infuriating to use.

This topic has been closed for replies.

2 replies

A
Anonymous
October 17, 2009

I'm not sure about what exactly you're trying to achieve here, but when you do this:

event.flowElement.setStyle("color", 0xFF0000);

That would actually be setting a user style named 'color' instead of changing the 'color' attribute of the text layout format for the link element.  That would not result in any visual change to the link element.

If your intention is to just have a different color shown temporarily when the user rolls over the link, you should be able to achieve that by changing the link hover format for the link (or text flow).

If you want to permanently change the color of the link when they roll over it, you should be able to do something like this:

event.flowElement.color = 0xFF0000;

event.flowElement.getTextFlow().flowComposer.updateAllControllers();

-or- assuming that you have an edit manager for the TextFlow, which should be the case if you're using the Flex TextArea component, you could do the same thing via the EditManager, which would probably be a 'more proper' way to do it:

var elem:FlowElement = event.flowElement;

var elemFormat:TextLayoutFormat = new TextLayoutFormat();

elemFormat.color = 0xFF0000;

var editMgr:IEditManager = elem.getTextFlow().interactionManager as IEditManager;

editMgr.applyFormatToElement(elem, elemFormat);

Hope this helps,

Brent

J
joshuajnobleAuthor
Participating Frequently
October 17, 2009

That does help, yes. I am trying to set the color of the text to 0xFF0000 permanently, just to figure out how the TLF works better. I still have a few things that aren't quite working right, that maybe you could help a little with. As you suggested, I would expect the following code snippet to set the link color on hover:

    <s:TextArea id="textAreaTwo" editable="false">
        <s:textFlow>
            <s:TextFlow>
                <s:linkNormalFormat textDecoration="{TextDecoration.NONE}" color="#FF0000"/>
                <s:linkHoverFormat textDecoration="{TextDecoration.UNDERLINE}" color="#ffff00"/>
                <s:p>Here is a link to <s:a target="_blank" href="http://www.oreilly.com">
                                          O'Reilly </s:a>.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>

but it doesn't seem to. Also, maybe you could help me understand the following:

    <s:TextArea id="textArea" editable="false">
        <s:textFlow>
            <s:TextFlow>
               
                <!-- if I uncomment these, it works fine with or with the call to flowComposer.updateAllControllers() ? -->
<!--                <s:linkNormalFormat/>
                <s:linkHoverFormat />
                <s:linkActiveFormat />-->
                    <s:p>Here is a link to <s:a href="http://www.oreilly.com" rollOver="showRollOver(event);">
                                             O'Reilly </s:a></s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>

Without the 3 link formats defined, the roll over events don't seem to be dispatched. I'm just curious if this is intentional and permanent. Thanks!

josh

A
Anonymous
October 17, 2009

On the first part, I'm also not positive why that doesn't work.  I had tried to do something similar a while back for something I was working on.  I couldn't get it to do anything either.  I started digging into it, and if I remember right it had something to do with the fact that the interaction manager on our text flow was an 'EditManager' interaction manager, as opposed to a 'SelectionManager'.  If textFlow.interactionManager is set to an instance of a SelectionManager, the text flow is basically selectable, but not editable.  (similar to how a web page would be in the browser)  You can scroll, select, copy, etc., but the interaction handling and text flow editing mechanisms for editing the text  are not attached.

I think I remember running across something that indicated to me that the different link formats are never shown when in 'edit' mode, and are only available in 'select only' mode.  TLF Team:  It would be nice to be able to optionally enable that behavior when using an EditManager, assuming that what I'm describing is correct -- I'm not really sure.

One the second part, again, I'm not really sure.  It's interesting to me because I had tried adding the event listeners to link elements in the past and they were never called for me.  Our use case didn't require hover detection; we basically just wanted to know when the selection was in or included a link element.  Also, we wanted to force any selection ranges to automatically expand to never include only a portion of a link's text.

We had already extended EditManager, so we ended up overriding the selection change handling in the EditManager and injected logic to find links in selection and/or expand selection to include whole links.  It would be helpful to get a little more information about how some of the different link behavior is intended to be used.

Please give us an update on anything helpful that you find.

Thanks,

Brent

J
joshuajnobleAuthor
Participating Frequently
October 17, 2009

Ok, so, change of question. When I change the TextFlow to:

    <s:TextArea id="textArea" editable="false">
        <s:textFlow>
            <s:TextFlow>

                <s:linkNormalFormat/>
                <s:linkHoverFormat />
                <s:linkActiveFormat />
                    <s:p>Here is a link to <s:a rollOver="showRollOver(event);" href="http://www.adobe.com">
                                             Adobe </s:a></s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>

it works. Is this intended and will it stay the same? Thanks!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices