Flex 4 spark Panel has an ugly gray top part

Question

I have a Flex 4 spark Panel I'm popping up through the PopUpManager, but it has a gray portion at the top I can't get rid of. What is that and how can I remove it?

UPDATE: An example Panel is below. I simply call PopUpManager.addPopUp(new TestPanel(), background, true); on it and receive that solid gray bar above the button.

<s:Panel xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         dropShadowVisible="false"
         backgroundAlpha="0"
         controlBarVisible="false"
         borderVisible="false">
    <s:VGroup>
        <s:Button label="A button" width="150" height="55"/>
    </s:VGroup>
</s:Panel>

Can you give us a code example or a screenshot of what you are seeing? — Brian Genisio, Dec 16 '10 at 01:35

Brian Genisio · Accepted Answer · 2010-12-16T11:02:36.927

12

So, this is how I did it. I made a custom skin: HeaderlessPanelSkin.as

public class HeaderlessPanelSkin extends PanelSkin {
   public function HeaderlessPanelSkin() {
        super();

        topGroup.includeInLayout = false;
    }
}

Then, in the panel, I just reference the new skin: skinClass="HeaderlessPanelSkin"

That should do it :)

edited Dec 16 '10 at 11:02

answered Dec 16 '10 at 02:41

Brian Genisio

47,787
16
124
167

Perfect! Why wouldn't adobe make this very easy? Seems like a common enough need... – at. Dec 16 '10 at 03:01
1

In the old Panel (`mx:Panel`), it WAS easy... `headerHeight`. Apparently, in the Spark implementation, they decided that you have a ton of control in skinning, and that keeping headerHeight would seem arbitrary... skinning is the way to go. That being said, I hate writing an entirely new skin just to change a single property, which is why I like this subclassing approach. Glad you like it :) – Brian Genisio Dec 16 '10 at 03:16
Why is the constructor of HeadlerlessPanelSkin() being overridden? – Drenai Dec 16 '10 at 09:44
@Brian Bishop: Honestly, I don't know. I am surprised it even compiles, actually. Non-constructor functions can't do that... I wonder if it means anything...? I grabbed the code from a different skin I had, which had that in it... I hand't noticed it. *fixed* – Brian Genisio Dec 16 '10 at 11:02

score 3 · Answer 2 · answered Dec 16 '10 at 02:30

3

Create new skin, and in the panel declaration use it... like so

File->New MXML Skin, Host Component is panel.

Edit the Skin properties to change it how you like, in this case the gradient colors on the header.

answered Dec 16 '10 at 02:30

JTtheGeek

1,707
14
17

2

Here's a good tutorial on this:http://www.popamihai.com/2010/11/flex/skinning-flex-4-components-skinning-the-spark-panel-component/ – JTtheGeek Dec 16 '10 at 02:31

score 1 · Answer 3 · answered Dec 16 '10 at 02:30

1

Sounds like the Panel TitleBar

Create a custom skin and style the title bar how you want it to appear.

answered Dec 16 '10 at 02:30

ocodo

29,401
18
105
117

Flex 4 spark Panel has an ugly gray top part

3 Answers3

Linked