FLEX{er}

How To Modify TitleWindow’s Close Button Position

Andrei Ionescu | 10.04.09 | 7 Comments

Last week we received an email from someone having problems changing the position of the close button of a TitleWindow or Panel component. After a short brainstorming we found a solution and created a new component.

If you wonder how we did it the answer is simple: we extended the TitleWindow component and got into the mx_internal namespace of it.

Here is the code of the component with some comments:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
 
            // flag to see if the component is visually created
            private var _isCreated:Boolean = false;
 
            // initialization
            private function init():void
            {
                _isCreated = true;
            }
 
            // setter for setting the x position of close button
            public function set closeButtonX(pos:int):void
            {
                // checking if the component is visually created
                // setting the mx_internal close button x position
                if(_isCreated)
                    this.mx_internal::closeButton.x = pos;
            }
 
            public function set closeButtonY(pos:int):void
            {
                // checking if the component is visually created
                // setting the mx_internal close button y position
                if(_isCreated)
                    this.mx_internal::closeButton.y = pos;
            } 
 
        ]]>
    </mx:Script>
</mx:TitleWindow>

The main application that makes use of the new component is also simple:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.*">
    <mx:Script>
        <![CDATA[
            // setting the x and y position of close button
            private function moveButton():void
            {
                if ( xPos.text != "" )
                    myWin.closeButtonX = int(xPos.text);
                if ( yPos.text != "" )
                    myWin.closeButtonY = int(yPos.text);	
            }
        ]]>
    </mx:Script>
 
    <flexer:TitleWindowCloseButton id="myWin" 
        title="Move the close button"
        width="400" height="300" 
        showCloseButton="true" 
        verticalCenter="0" horizontalCenter="0">
 
        <mx:VBox width="160" verticalCenter="0" horizontalCenter="0">
            <mx:HBox>
                <mx:Label text="button X pos:" width="100%" />
                <mx:TextInput id="xPos" width="50" /> 
            </mx:HBox>
            <mx:HBox>
                <mx:Label text="button Y pos:" width="100%" />
                <mx:TextInput id="yPos" width="50" /> 
            </mx:HBox>
            <mx:Button label="move it!" width="100%" click="moveButton()" /> 
        </mx:VBox>
 
    </flexer:TitleWindowCloseButton>
</mx:Application>

To see it in action play a bit with the coords in the following application.

This is the whole thing. The component can be improved to be able to set not only the coordinates of the close button but to set a padding and aligning it by using “top“, “bottom“, “left“, “right” or any combination of them. The mx_internal namespace lets us modify parts of components but is not advised to get too deep into it and modifying inside mx_internal without knowing what you’re doing. As the name of the namespace says, what is inside it is intenal! So… take care.

Share and Enjoy:

TitleWindowCloseButton_sources

TitleWindowApp

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: ActionScript, Components, panel, titlewindow

This post was written by Andrei Ionescu

Views: 16593

7 Comments

On 04.10.09 Mike wrote these pithy words:

Thanks guys. One last question, I’m trying to position the button automatically on creationComplete, but it doesn’t work. It is no problem to reposition it via button click, but not automatically on creation. Is there another event or method I can override to do this?

Ex:

package packs.components {
 
    import mx.containers.TitleWindow;
    import mx.core.mx_internal;
    import mx.events.FlexEvent;
 
    public class BSTitleWindow extends TitleWindow {
 
        public function BSTitleWindow() {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE, moveCloseButton);
        }
 
        // Move Close Button to Upper Right Corner
        public function moveCloseButton(e:FlexEvent=null):void {
            if(this.showCloseButton){
                mx_internal::closeButton.x = 
                    this.width-mx_internal::closeButton.width-1;
                mx_internal::closeButton.y = 1;
            }
        }
    }
}

On 04.10.09 Mike wrote these pithy words:

Found it! I added the listener to UPDATE_COMPLETE instead of CREATION_COMPLETE and now everything works great! Thanks again for your help.

Final Code looks like this:

package packs.components {
 
    import mx.containers.TitleWindow;
    import mx.core.mx_internal;
    import mx.events.FlexEvent;
 
    public class BSTitleWindow extends TitleWindow {
 
        public function BSTitleWindow() {
            super();
            addEventListener(FlexEvent.UPDATE_COMPLETE, moveCloseButton);
        }
 
        // Move Close Button to Upper Right Corner
        private function moveCloseButton(e:FlexEvent):void {
            if(this.showCloseButton){
                this.mx_internal::closeButton.x = 
                    this.width-this.mx_internal::closeButton.width-1;
                this.mx_internal::closeButton.y = 1;
            }
        }
    }
}

On 04.10.09 Andrei Ionescu wrote these pithy words:

Great job Mike! Anyway in order to be able to access the closeButton object it needs to be visually created. In your case it is not. MXML components work a bit different that actionscript components. MXML components are created visually earlier than AS components. Anyway UPDATE_COMPLETE event is better than CREATION_COMPLETE. It is triggered when the component is updated visually. One drawback of using CREATION_COMPLETE is that this event is triggered more than once, is triggered whenever something visually changes or whenever the framework thinks that he must refresh the application. In your case is no problem but in other circumstances problems do appear.

On 04.11.09 mrm wrote these pithy words:

Just use this: http://9mmedia.com/blog/?p=269

On 04.13.09 David Marques wrote these pithy words:

CloseButton Size… Solution http://davidmarques.net/?p=1

On 03.21.11 casper wrote these pithy words:

one question:it works all well in my program to set the close button’s position,on the condition that only one popup window were created

suppose that i have created window A and positioned its close button,then i created a window B,you will find that,window A’s close button was not where what it’s supposed to be~~

what’s the problem?~~need your help

On 01.10.12 uday wrote these pithy words:

Hi,

Thanks for writing up something which i exactly needed.

I am trying this out, but not able to get this to work with flex4 SDK.
Looks like something changed with the behavior of mx_internals ?

Any inputs would be great. Thanks

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Flex SDK 3.3 is out

New Flex Event

April 2009
M	T	W	T	F	S	S
« Mar		May »
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

April 2009

« Mar

May »

ActionScript, Components, How to, MXML

How To Modify TitleWindow’s Close Button Position

related

7 Comments

have your say

about

Twitter

tags

search

partners

recent

comments

inside

authors

clickage

Links

Meta

feed

Stats

Calendar

Archives

Categories

Quick

Copyright