Setting custom status messages in a Flex Panel container

by Peter deHaan on August 31, 2007

in Embed, Panel

The following example shows how you can set custom status messages in a Flex Panel container by setting the aptly named status property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/delete.png")]
            public var DeleteIcon:Class;
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Panel id="panel"
            titleIcon="{DeleteIcon}"
            title="WARNING"
            status="I'm a custom status message!"
            width="80%">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

If you want to customize the appearance of the status message in the Panel, you can set the statusStyleName style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myStatusStyle {
            fontWeight: bold;
            color: red;
        }
    </mx:Style>

    <mx:String id="lorem">
        <![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In malesuada sapien eu ipsum. Integer id diam in sapien lobortis pulvinar. Donec mauris augue, sodales vel, luctus elementum, convallis eget, sapien. Suspendisse pretium elementum erat. Ut posuere ornare sem. Nam vestibulum luctus mi. Praesent feugiat blandit ante. Fusce vel massa. Praesent diam. Maecenas risus. Aliquam erat volutpat. Vivamus eget velit vel turpis venenatis dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mattis nibh. Quisque nec odio.]]>
    </mx:String>

    <mx:Panel id="panel"
            title="WARNING"
            status="I'm a custom status message!"
            statusStyleName="myStatusStyle"
            width="320">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

{ 5 comments… read them below or add one }

1 Satish November 6, 2007 at 2:26 am

Is there any possible way to change the color of status message?

Reply

2 peterd November 6, 2007 at 7:05 pm

Satish,

Yeah, try setting the “statusStyleName” style on the Panel, similar to the following:

<mx:Style>
    .myStatusStyle {
        fontWeight: bold;
        color: red;
    }
</mx:Style>

<mx:Panel id="panel"
        title="WARNING"
        status="I'm a custom status message!"
        statusStyleName="myStatusStyle"
        width="320">
    <mx:Label text="Hello world" />
</mx:Panel>

Peter

Reply

3 Satish November 7, 2007 at 12:24 pm

Hey Thanks Peter, it was really helpful.

Reply

4 JT April 17, 2008 at 3:38 pm

Is there way to make the status messages url links?

Reply

5 peterd April 17, 2008 at 7:16 pm

JT,

Here is a way you could do it using the mx_internal namespace (which means it is not guaranteed to work in future versions of Flex):
http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/

Peter

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: