Comments on: Changing the close button skin on a Flex TitleWindow container

By: Fletch

Fletch — Fri, 28 Jan 2011 11:48:37 +0000

I find the cross is just a little small – don’t you? I went to enlarge it but unfortunately it’s been exported by a drawing tool. If someone can give me the codes that I need to stick in to replace the three lines that look like: data=”M 3 5 L 4 5 L 4 6 L 5 6 L 5 7 L 4 7 L 4 8 L 3 8 L 3 9 L 4 9 L 4 10 L 5 10 L 5 9 L 6 9 L 6 8 L 7 8 L 7 9 L 8 9 L 8 10 L 9 10 L 9 9 L 10 9 L 10 8 L 9 8 L 9 7 L 8 7 L 8 6 L 9 6 L 9 5 L 10 5 L 10 4 L 9 4 L 9 3 L 8 3 L 8 4 L 7 4 L 7 5 L 6 5 L 6 4 L 5 4 L 5 3 L 4 3 L 4 4 L 3 4 L 3 5 Z” in order to make it larger then I would be extremely grateful. I know how to do the rest (reposition it and enlarge the box).

By: Anonymous

Anonymous — Tue, 23 Feb 2010 06:17:42 +0000

Hi, my close button is having size 10*10 and it becomes stretchy. What I do is to resize the image to 16*16 and the problem solved.

By: Peter deHaan

Peter deHaan — Fri, 30 Oct 2009 15:32:21 +0000

@guy,

I don’t know. If it isn’t in the documentation (http://livedocs.adobe.com/flex/3/langref/), it may be documented in some code somewhere. You could file a bug at http://bugs.adobe.com/flex/ and somebody could take a look. You may be able to work around it by using a scale-grid or something (or just resizing your icon to 16×16).

Peter

By: guy

guy — Fri, 30 Oct 2009 15:03:37 +0000

Ok, I see now that the image should be 16*16 mine was 11*11.

Is this stuff documented anywhere?

By: guy

guy — Fri, 30 Oct 2009 14:08:21 +0000

Hi Peter,

This solution works but it stretches my close button, do you have any idea?

Thanks
Guy

By: Greg

Greg — Mon, 29 Sep 2008 20:44:12 +0000

Hi Peter,

Great stuff as usual.

Im curious if you might consider doing a blog entry on how to add additional ‘buttons’ to the titlewindow header. Is this possible?

By: MArcio

MArcio — Thu, 31 Jul 2008 23:26:24 +0000

Because in Module not appear a image in CLose Button ?

By: peterd

peterd — Tue, 03 Jun 2008 15:32:03 +0000

Melvin, Does the following work in your app.css?

/* CSS file */
TitleWindow {
    closeButtonSkin: Embed("../images/cancel.png");
    /* Set values from defaults.css to null. */
    closeButtonDisabledSkin: ClassReference(null);
    closeButtonDownSkin: ClassReference(null);
    closeButtonOverSkin: ClassReference(null);
    closeButtonUpSkin: ClassReference(null);
}

Peter

By: Melvin

Melvin — Tue, 03 Jun 2008 05:26:38 +0000

Interesting .. but need further help.

This is a very helpful blog. Thank you very much for sharing it.
This is the first time that I have to deal with skin class and I do not completely following your example. So here is what I am doing.

I am using flex 2. My file structure is

src
   app.mxml
   com
     myapp
         components
           myPopup.mxml
  css
     app.css
   images
     cancel.png

The cancel.png is exactly following your example

So here is the issue, when I added the styles into my css, whatever I did, the new cancel button did not show up.

I actually copied cancel.png to all the possible locations and it still would not work. I am using Flex Builder 2 right now. Could you please let me know what I did wrong? Thank you again