12
Jan
08

Setting the header height on a Flex Panel container

The following example shows you how you can change the header height on a Panel container in Flex by setting the headerHeight style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/12/setting-the-header-height-on-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="headerHeight:">
                <mx:HSlider id="slider"
                        minimum="24"
                        maximum="64"
                        value="32"
                        snapInterval="2"
                        tickInterval="4"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="The quick brown fox jumped"
            status="{panel.width}x{panel.height}"
            titleIcon="@Embed('assets/Panel.png')"
            headerHeight="{slider.value}"
            borderColor="haloBlue"
            borderAlpha="1.0"
            width="400"
            height="150">
        <mx:VBox id="vBox" width="100%" height="100%">
            <mx:Label text="{vBox.width}x{vBox.height}" />
        </mx:VBox>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.


4 Responses to “Setting the header height on a Flex Panel container”


  1. 1 Alex Grande Jan 23rd, 2008 at 6:46 pm

    Nice site. I’m happy to find it and am finding it useful.

    The change in background color on this reply is nice too.

    One thing I noticed is you are not separating your code. If you are going to teach people flex please teach them to use separate style sheets and follow best practices.

    Thanks again! keep it up!

    Alex

  2. 2 peterd Jan 23rd, 2008 at 7:42 pm

    Alex,

    No, I typically haven’t been separating code. I have on a few examples if I have a big data set (I may externalize the XML, for example).
    Typically I leave it all in one code block so it is [hopefully] easier for people to copy/paste. Otherwise, they’ll have to right-click on the SWFs, select “View Source” and try and recreate the project piece by piece.

    Peter

  3. 3 Antonio Oct 3rd, 2008 at 9:28 am

    Hi, I’ve been working with flex for a couple of weeks now and i was looking for some way to put an image in the panel’s header just as you have on your example, i tried the same code

    titleIcon=”@Embed(’assets/Panel.png’)”

    with of course the name of my file and the folder where it’s contained (this folder is contained in the main project folder). But it still doesn’t work, is there a specific location where the file must be or am I missing something??

  4. 4 peterd Oct 3rd, 2008 at 10:47 am

    Antonio,

    That code should work. If you are using Flex Builder 3, you should have the have the PNG file in the /src/assets/ folder, and your MXML file should be in the /src/ file.

    You can download the project source code above and view the directory structure and probably try importing the project into Flex Builder.

    Peter

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".