Flex: Adding Icons to the Panel
I run into this question every so often, so I thought I'd share the solution here. The Panel container looks very much like a window that you'd be able to manipulate, perhaps maximizing or minimizing. This simple example gets you as far as adding a couple of icons and listening for click events. You could do the same thing with a TitleWindow (popup) in order to institute a drag and drop interface.
The code, with comments, follows (or download the zip file below).
The extended Panel container, MyClass.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.controls.Image;
import mx.containers.HBox;
import flash.events.MouseEvent;
import mx.controls.Alert;
// Embed the icon graphics and their rollover states
[Embed("square_blue.png")]
private var blueSquare:Class;
[Embed("square_blue_hi.png")]
private var blueSquareHi:Class;
[Embed("square_green.png")]
private var greenSquare:Class;
[Embed("square_green_hi.png")]
private var greenSquareHi:Class;
// Declare the UI elements which will go into the titleBar
private var myHbox:HBox;
private var blue:Image;
private var blueHi:Image;
private var green:Image;
private var greenHi:Image;
override protected function createChildren() : void
{
super.createChildren();
// Init blue image, its event handlers and its rollover state
blue = new Image();
blue.source = blueSquare;
blue.width = 18;
blue.height = 18;
blue.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OVER, onBlueOver );
blueHi = new Image();
blueHi.source = blueSquareHi;
blueHi.width = 18;
blueHi.height = 18;
blueHi.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OUT, onBlueOut );
// Init green image, its event handlers and its rollover state
green = new Image();
green.source = greenSquare;
green.width = 18;
green.height = 18;
green.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OVER, onGreenOver );
greenHi = new Image();
greenHi.source = greenSquareHi;
greenHi.width = 18;
greenHi.height = 18;
greenHi.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OUT, onGreenOut );
// Create an HBox in which to layout the icons
myHbox = new HBox( );
myHbox.addChild( blue );
myHbox.addChild( green );
// Add the HBox and the icons to the titleBar display
titleBar.addChild( myHbox );
}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Do this or the HBox won't appear!
myHbox.setActualSize( myHbox.getExplicitOrMeasuredWidth(),
myHbox.getExplicitOrMeasuredHeight() );
// Position the HBox
var y:int = 4;
var x:int = this.width - myHbox.width - 12;
myHbox.move(x, y);
}
// Handlers for click and mouseovers
private function onBlueClick ( event:MouseEvent ):void {
Alert.show('Blue!', 'You clicked...');
}
private function onBlueOver ( event:MouseEvent ):void {
blue.source = blueSquareHi;
}
private function onBlueOut ( event:MouseEvent ):void {
blue.source = blueSquare;
}
private function onGreenClick ( event:MouseEvent ):void {
Alert.show('Green!', 'You clicked...');
}
private function onGreenOver ( event:MouseEvent ):void {
green.source = greenSquareHi;
}
private function onGreenOut ( event:MouseEvent ):void {
green.source = greenSquare;
}
]]>
</mx:Script>
</mx:Panel>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.controls.Image;
import mx.containers.HBox;
import flash.events.MouseEvent;
import mx.controls.Alert;
// Embed the icon graphics and their rollover states
[Embed("square_blue.png")]
private var blueSquare:Class;
[Embed("square_blue_hi.png")]
private var blueSquareHi:Class;
[Embed("square_green.png")]
private var greenSquare:Class;
[Embed("square_green_hi.png")]
private var greenSquareHi:Class;
// Declare the UI elements which will go into the titleBar
private var myHbox:HBox;
private var blue:Image;
private var blueHi:Image;
private var green:Image;
private var greenHi:Image;
override protected function createChildren() : void
{
super.createChildren();
// Init blue image, its event handlers and its rollover state
blue = new Image();
blue.source = blueSquare;
blue.width = 18;
blue.height = 18;
blue.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OVER, onBlueOver );
blueHi = new Image();
blueHi.source = blueSquareHi;
blueHi.width = 18;
blueHi.height = 18;
blueHi.addEventListener( MouseEvent.CLICK, onBlueClick );
blue.addEventListener( MouseEvent.MOUSE_OUT, onBlueOut );
// Init green image, its event handlers and its rollover state
green = new Image();
green.source = greenSquare;
green.width = 18;
green.height = 18;
green.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OVER, onGreenOver );
greenHi = new Image();
greenHi.source = greenSquareHi;
greenHi.width = 18;
greenHi.height = 18;
greenHi.addEventListener( MouseEvent.CLICK, onGreenClick );
green.addEventListener( MouseEvent.MOUSE_OUT, onGreenOut );
// Create an HBox in which to layout the icons
myHbox = new HBox( );
myHbox.addChild( blue );
myHbox.addChild( green );
// Add the HBox and the icons to the titleBar display
titleBar.addChild( myHbox );
}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Do this or the HBox won't appear!
myHbox.setActualSize( myHbox.getExplicitOrMeasuredWidth(),
myHbox.getExplicitOrMeasuredHeight() );
// Position the HBox
var y:int = 4;
var x:int = this.width - myHbox.width - 12;
myHbox.move(x, y);
}
// Handlers for click and mouseovers
private function onBlueClick ( event:MouseEvent ):void {
Alert.show('Blue!', 'You clicked...');
}
private function onBlueOver ( event:MouseEvent ):void {
blue.source = blueSquareHi;
}
private function onBlueOut ( event:MouseEvent ):void {
blue.source = blueSquare;
}
private function onGreenClick ( event:MouseEvent ):void {
Alert.show('Green!', 'You clicked...');
}
private function onGreenOver ( event:MouseEvent ):void {
green.source = greenSquareHi;
}
private function onGreenOut ( event:MouseEvent ):void {
green.source = greenSquare;
}
]]>
</mx:Script>
</mx:Panel>
Instantiating the new Panel:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="ca.olivermerk.panelicons.view.components.*" >
<comp:MyPanel id="myPanel" title="No Design Skills, Inc." width="80%">
<mx:Text width="80%" >
<mx:htmlText>
<![CDATA[Here's a simple example of adding icons to the panel title. There's also a click handler on each one, as well as a rollover (to keep it sexy;)<br><br>Pretty cool!
]]>
</mx:htmlText>
</mx:Text>
</comp:MyPanel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="ca.olivermerk.panelicons.view.components.*" >
<comp:MyPanel id="myPanel" title="No Design Skills, Inc." width="80%">
<mx:Text width="80%" >
<mx:htmlText>
<![CDATA[Here's a simple example of adding icons to the panel title. There's also a click handler on each one, as well as a rollover (to keep it sexy;)<br><br>Pretty cool!
]]>
</mx:htmlText>
</mx:Text>
</comp:MyPanel>
</mx:Application>
A zip file is attached at the very bottom ("Download") with all the code.
Cheers,
Oliver
I've found one similar, but his code was very complex.
Thanks a lot.!
Thanks A Lot
that can be used
can u help me to solve my problem plz..
AM using u r component in my APP.
In main application i imported u r panel and inserted a LIST BOX into it. I need a requirement like.. if i select an item in list box and if click on panel icon(blue), i want that selected item to be removed from the list. I know how to delete item from list box.
Problem is how to access the ICON click event from main applcation at runtime.
Can u give me some idea how to do this??
I think u understand the problem..
plz help me.. thankx in advance..
......Pratap
So instead of saying Alert("Blue was clicked") how could I change the currentState of the parent application that is using <comp:MyPanel> control?
I have made a custom mxml component and its called my panel. The panel is held in a view, however my problem is the first call to the view works fine all the links and everything are correct, however when I do a second call to the same view the old data is in the links, I know i need to invalidate the display some how but I am totally stumpted.
Any suggestions / soultions would be great
thanks in advance
John
This is a typical call to it
<common:customPanel screenID="overviewLinks" linkName="{modelAnnuity.annuityOverviewVO.annuityOwnerAnnuitantPnlTitle}" titleStyleName="txtPanelHead" styleName="pnlContent" verticalGap="0" horizontalAlign="right" width="100%" height="100%" id="owners_Title">
My panel code is this
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"; creationComplete="updateText()" styleName="pnlContent" titleStyleName="txtPanelHead">
<mx:Script>
<![CDATA[
import mx.controls.Text;
import mx.containers.Panel;
import mx.controls.Image;
import mx.containers.HBox;
import flash.events.MouseEvent;
import mx.controls.Alert;
import com.sunlife.us.workbench.util.common.linkUrlFunction;
import mx.collections.ArrayCollection;
[Bindable]
public var linkName:String = new String();
[Bindable]
public var returnedArray : ArrayCollection = new ArrayCollection();
[Bindable]
public var linkURL:String = new String();
[Bindable]
public var linkImage:String = new String();
[Bindable]
public var visibleImage:Boolean = false;
[Bindable]
public var identify : String = new String();
[Bindable]
public var screenID : String = new String();
private var myHbox:HBox;
private var myText:Text;
private var myImage:Image;
override protected function createChildren() : void
{
super.createChildren();
linkName = this.linkName;
returnedArray = linkUrlFunction.returnLink(identify,screenID);
linkURL = String(returnedArray.getItemAt(0));
visibleImage = returnedArray.getItemAt(2);
linkImage = this.linkImage;
//create the text object
myText = new Text;
myText.text = this.linkName ;
// Create an HBox in which to layout the icon
myHbox = new HBox( );
myHbox.addChild( myText );
myHbox.styleName="txtPanelHead";
if(visibleImage){
// Init image, its event handlers
myImage = new Image( );
myImage.source = String(returnedArray.getItemAt(1));
myImage.width = 18;
myImage.height = 18;
myImage.buttonMode=true;
myImage.addEventListener(MouseEvent.CLICK, linkHandler);
myHbox.addChild( myImage );
}
// Add the HBox and the icons to the titleBar display
titleBar.addChild( myHbox );
}
override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Do this or the HBox won't appear!
myHbox.setActualSize( myHbox.getExplicitOrMeasuredWidth(),
myHbox.getExplicitOrMeasuredHeight() );
}
private function linkHandler(event:MouseEvent):void
{
// Open the link in a new window,
navigateToURL(new URLRequest(this.linkURL), '_link')
trace(this.linkURL);
}
private function updateText():void{
//used for delayed rendering
if(linkURL != ""){
this.visibleImage = true;
}
myText.text =this.linkName;
}
]]>
</mx:Script>
</mx:Panel>
Is there a way to make the image thats been added to the panel TitleBar visible and invisible on a button click ?
Thank you in advance
-Oliver
http://forums.3ivx.com/index.php?showuser=14216
http://www.prolinkuptraining.com/user/view.php?id=...
http://forums.3ivx.com/index.php?showuser=14221
http://www.rapidprototyping.net/showthread.php?p=5...
http://www.rapidprototyping.net/showthread.php?p=5...
http://www.rapidprototyping.net/showthread.php?p=5...
http://www.rapidprototyping.net/showthread.php?p=5...
Iam trying to add an bacward image to Windowshade (like an image in the tool bar of Panel ) for panel we say like panel.addChild() so that we can add the image to the tool bar of panel .In the case of WindowShade(FlexLib) can somebody tell me what is it called as .Iam not able to add an image to the WindowShade on the extreme right side like max and min button in Window .there is no proper documentation for it .