Setting custom status messages in a Flex Panel container

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.

8 thoughts on “Setting custom status messages in a Flex Panel container

  1. 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

    1. @Rohit Agarwal,

      The Spark Panel does not support status text or icons by default. If you need this functionality, you would probably need to extend the s:Panel class and add some custom skin parts and styles (like MX Panel’s statusStyleName) and then create a custom Spark Panel skin which adds support for the optional title icon and status message skin parts.

      Peter

  2. How to drag a tree item into panel in flex. Here my requirement is to drag the the tree items into panel or some editor, there i need to give links between the items with lines.I tried to drag the tree items into panel but i did not get.Is it correct to drag the tree items into panel?
    Please help me how to do it.

    thanks

Comments are closed.