Solved

Icon in Panel Title Bar

Posted on 2008-10-21
7
3,923 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
  • 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

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…
A Short Story about the Best File Recovery Software – Acronis True Image 2017
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now