Adding links to a Panel container’s status text in Flex

By Peter deHaan On April 17, 2008 · 5 Comments

The following example shows how you can assign an HTML formatted string to a Panel container’s status text field using the getStatusTextField() method in the mx_internal namespace.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/ -->
<mx:Application name="Panel_getStatusTextField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.controls.Alert;
 
            private function init():void {
                var tf:IUITextField = panel.mx_internal::getStatusTextField();
                tf.selectable = true;
                tf.addEventListener(TextEvent.LINK, textField_link);
                tf.htmlText = "status with <a href='event:showAlert'><u>link</u></a>";
 
            }
 
            private function textField_link(evt:TextEvent):void {
                Alert.show("Success! A Panel container with a link in the status text.", evt.text);
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="panel"
            title="Title"
            status="status with link"
            width="320"
            height="240">
        <mx:Text text="Click the link in the Panel container's status bar to launch an Alert control."
                width="100%" selectable="false" />
        <mx:ControlBar>
            <mx:Text htmlText="&lt;b&gt;Note:&lt;/b&gt; The status text field must have it's selectable property set to true in order to dispatch the link event."
                    width="100%" selectable="false" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

The status text field must have it’s selectable property set to true in order to dispatch the link event.

Note that the Panel container’s status message was initially set to the desired final string, minus any HTML formatting. This ensures that when the status text is created and measured, the HTML formatted text should fit correctly when it is substituted. This may not work if the width of your text changes due to bold fonts or other changes.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

5 Responses to Adding links to a Panel container’s status text in Flex

PSingh says:

July 31, 2009 at 3:23 pm

Hi Peter, Is it possible to put an image in the status of panel? Thanks!

Reply
jason says:

June 18, 2010 at 1:29 pm

How can you change the color of the link? I have a dark background and need the link white?

Reply
- Peter deHaan says:
  
  June 18, 2010 at 1:51 pm
  
  @jason,
  
  Great question. I don’t think I have any specific examples for that, but this may help get you started: “Applying a cascading style sheet to a TextArea control in Flex”.
  
  Basically just create a StyleSheet object then create a selector for the a tag and set the color to to #FFFFFF/white.
  
  Peter
  
  Reply
- Peter deHaan says:
  
  June 18, 2010 at 1:56 pm
  
  Or you may be able to call the setColor() method on the IUITextField instance, as seen in the following snippet:
  private function init():void { var tf:IUITextField = panel.mx_internal::getStatusTextField(); tf.setColor(0xFF0000); tf.selectable = true; tf.addEventListener(TextEvent.LINK, textField_link); tf.htmlText = "status with <a href='event:showAlert' rel="nofollow"><u>link</u></a>"; }
  Reply
Santhosh says:

June 17, 2011 at 3:40 am

You can use statusStyleName and set the color to any color we want

Reply