Solved

Icon in Panel Title Bar

Posted on 2008-10-21
7
3,933 Views
Last Modified: 2010-04-21
Hi Guys,

 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>

Open in new window

0
Comment
Question by:jdunneuk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 4

Accepted Solution

by:
ngiamouris earned 500 total points
ID: 22769015
Hi John

First of all, it is a mistake to implement property commitment logic in the createChildren() method. The createChidren() method is meant to initialize your component's subcomponents and add them to the display list but nothing more. Property commitment should be implemented in the protected commitProperties() function. Hence, code such as:
myText.text = this.linkName ;
returnedArray = linkUrlFunction.returnLink(identify,screenID);
myImage.source = String(returnedArray.getItemAt(1));

should reside in commitProperties().

After having that sorted, you need a way to know when your component's properties change so that you can commit those changes. For that reason, you need get/set functions for your properties. In your code, all bindable variables should be rewritten as properties. An added improvement would be to add explicit events to your bindable properties. That way, you are making binding much more explicit, efficient and solid. Here is an example for the first one:

private var _linkName:String = new String();

[Bindable(event="linkNameChanged")]
public function get linkName():String {
  return _linkName;
}

public function set linkName(value:String):void {
  _linkName = value;

  // calling this method will cause commitProperties() to be called in the next update
  invalidateProperties();

  // note that the event you dispatch has the same name as the one given in the Bindable metatag
  dispatch(new Event("linkNameChanged"));

}

Ok so now you know that when someone sets the linkName property, your component's properties will be invalidated, bindings on linkName will execute and eventually commitProperties() will be called. But when it comes down to writing your commitProperties() function, how do you know which property changed? Do you just update all of them? Sometimes when the performance hit is trivial, you simply update all of them for the sake of simplicity. But in some cases where updating the whole lot is expensive performance-wise, you need to implement additional "dirty checking" logic. In that slightly more complex scenario, the example above would become:

private var _linkName:String = new String();
private var _linkNameDirty:Boolean = true;

[Bindable(event="linkNameChanged")]
public function get linkName():String {
  return _linkName;
}

public function set linkName(value:String):void {
  if (_linkName != value) {
    _linkName = value;
    _linkNameDirty = true;
    // calling this method will cause commitProperties() to be called in the next update
    invalidateProperties();
    // note that the event you dispatch has the same name as the one given in the Bindable metatag
    dispatch(new Event("linkNameChanged"));
  }
}

override protected function commitProperties():void {
  ...
  if (_linkNameDirty) {
    // property updating code goes here
    _linkNameDirty = false; // reset the flag
  }
}

Please note that just like you can invalidate properties, you can invalidate the component's size (invalidateSize() which will end up calling measure()) or the display list (invalidateDisplayList() which will end up calling updateDisplayList()). However, for this specific component of yours, the given approach is the most appropriate, since you are more or less updating subcomponent's properties.

I know this may look a tad confusing at first but if you get used to the above routine, you will end up creating rock solid components with minimal effort.
0
 
LVL 3

Author Closing Comment

by:jdunneuk
ID: 31508193
Hi ngiamouris,

I think that is exactly what I am looking for I will try it in the morning, Thank you so much for your help no doubt I will need you again at some stage :-)

all the best John
0
 
LVL 4

Expert Comment

by:ngiamouris
ID: 22769595
Glad to be of assistance :)
0
Has Powershell sent you back into the Stone Age?

If managing Active Directory using Windows Powershell® is making you feel like you stepped back in time, you are not alone.  For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why.

 
LVL 3

Author Comment

by:jdunneuk
ID: 22774026
Hi ngiamouris,

I now have the following code and get an error about duplicate function names :(


can you help :) please :)
<?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 = new HBox();
			private var myText:Text = new Text();
			private var myImage:Image= new Image();
			
			private var _linkName:String = new String();
 
			
			
			override protected function createChildren() : void
			{
				super.createChildren();
				
 
			}
			
			
			override protected function commitProperties():void
			{
				
				
				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 );
			
				
			}
			
 
			[Bindable(event="linkNameChanged")]
			public function get linkName():String {
			  return _linkName;
			}
			
			public function set linkName(value:String):void {
			  _linkName = value;
			
			  // calling this method will cause commitProperties() to be called in the next update
			  invalidateProperties();
			
			  // note that the event you dispatch has the same name as the one given in the Bindable metatag
			  dispatch(new Event("linkNameChanged"));
 
}
 
			
 
			 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>

Open in new window

0
 
LVL 4

Expert Comment

by:ngiamouris
ID: 22775642
That's because you haven't erased the following lines.

[Bindable]
public var linkName:String = new String();

In AS3 you cannot have a function and a variable with the same name.
0
 
LVL 3

Author Comment

by:jdunneuk
ID: 22775659
alll working now thanks for the help A++++
0
 
LVL 3

Author Comment

by:jdunneuk
ID: 22840005
0

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
regular expression:- validate string of numbers 1 427
Dashboard Examples 1 593
Image distorted when using rotate 4 445
Flex mobile local storage. 2 669
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
In Part II of this series, I will discuss how to identify all open instances of Excel and enumerate the workbooks, spreadsheets, and named ranges within each of those instances.
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question