Flex Examples
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.
<?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:
<?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.
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.
Share
Is there any possible way to change the color of status message?
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
Hey Thanks Peter, it was really helpful.
Is there way to make the status messages url links?
JT,
Here is a way you could do it using the
mx_internalnamespace (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
How can we do this in Flex 4?
@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
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