Question

I’m creating a log-in box for my Flex application. However, I’m required to apply a specific design to this box that I have to change the title bar height.

The component I’m using is spark.components.Panel. I just can’t find the property of this ‘Panel’ component to change the feature.

Any suggestions?

Answer 1

You cannot do this through styling; you’ll have to create a custom skin. In order to do this in Flash-Builder: right-click in the project tree on the package where you want to create your skin. Select ‘New’, then select ‘MXML Skin’. Fill out the wizard and choose to make a copy of the spark PanelSkin. This will copy the entire code of the default spark Panel skin into your custom skin class and you can now start adjusting it to your will.

Look for the group called ‘topGroup’: it contains all the elements of the top part of the Panel component. You can play around with this as you wish, but the easiest answer to your question is to locate the Label called ‘titleDisplay’.

<s:Group id="topGroup" mask="{topGroupMask}">

    <!-- some other elements -->

    <s:Label id="titleDisplay" maxDisplayedLines="1"
             left="9" right="3" top="1" bottom="0" minHeight="30"
             verticalAlign="middle" textAlign="start" fontWeight="bold">
    </s:Label>

    ...

Do you see that ‘minHeight’ property? That’s the one that is defining the height of the title bar. Just give it some more and you’re ready to go.

You can apply the custom skin like so:

<s:Panel skinClass="path.to.my.CustomPanelSkin" />