Toggling the application control bar in a Spark Application container in Flex 4

The following example shows how you can toggle the application control bar in a Spark Application container in Flex 4 by setting the Boolean controlBarVisible property.

The controlBarVisible property was added in Flex 4.0.0.10693 beta SDK.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        controlBarVisible="{chckBx.selected}">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

You can also set the controlBarVisible property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
 
            protected function chckBx_changeHandler(evt:Event):void {
                Application(FlexGlobals.topLevelApplication).controlBarVisible = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            horizontalCenter="0" verticalCenter="0"
            change="chckBx_changeHandler(event);"/>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
 
            import spark.components.CheckBox;
            import spark.components.Label;
 
            private var chckBx:CheckBox;
 
            private function init():void {
                var sdkVer:Label = new Label();
                sdkVer.text = mx_internal::VERSION;
                Application(FlexGlobals.topLevelApplication).controlBarContent = [sdkVer];
 
                chckBx = new CheckBox();
                chckBx.label = "controlBarVisible";
                chckBx.selected = true;
                chckBx.horizontalCenter = 0;
                chckBx.verticalCenter = 0;
                chckBx.addEventListener(Event.CHANGE, chckBx_changeHandler);
                addElement(chckBx);
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                Application(FlexGlobals.topLevelApplication).controlBarVisible = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

10 thoughts on “Toggling the application control bar in a Spark Application container in Flex 4

  1. bring back the compiled examples! I don’t have the nightly SDK, just the beta 2…I’d like to see what it looks like without having to install a new SDK

    keep up the good work!

    1. @david r,

      Yeah, I’ve been thinking now that the Flex 4 SDK is a lot less stable w/ fewer renames, I should start trying to post SWF examples again, but unfortunately they take at least 4x longer to do since I need to create a new project and disable RSLs/history management, create readme files, export release builds, upload via FTP, etc.

      Peter

  2. Why they have changed alsmot everything ? ;-( ;-(

    How is it possible to set the Application Control Bar width, height and fill colors now ?

    cheers

    1. @Tom,

      The Spark Application control bar is slightly different now in Flex 4. Instead of using a docked/undocked ApplicationControlBar container, you set the controlBarContent property to the contents you want to appear in the docked control bar. If you want to explicitly set the height of the control bar, you can check out “Setting the height of the control bar in a Spark Application container in Flex 4 “. The control bar is always 100% wide and docked at the top of the Application, although you can probably change this using a custom Spark Application skin. I may have a blog post somewhere in here about creating a Spark Application control bar which is docked to the left edge of the application instead of the top.

      As for modifying fill colors, that probably requires a custom Spark Application skin also, I don’t think I’ve tried that yet — but I may turn it into an upcoming example if I haven’t covered it already.

      Peter

      1. Actually, it looks like I may have covered creating a custom Spark Application container skin with a gradient fill at least once or twice; “Adding a gradient background to a Spark Application container control bar in Flex 4” and “Setting the background color on a Spark Application control bar in Flex 4”. Both examples are probably kind of old so you may want to create a new Spark Application skin and override the gradient fill instead of copying the blog post skin.

        Peter

  3. Great Blog Peter

    But what are Adobe thinking ????

    In flex 3 I could code an effective application control bar in a couple of lines.

    In flex 4 I seem to be looking at a hundred or more lines of code to accomplish the same thing? And this is an improvement ?

    This is crazy !

    1. To set the application control bar, set the controlBarContent property. To toggle the control bar’s visibility, set the Boolean controlBarVisible property. Neither of those require hundreds of lines of code.

      Peter

  4. why in the world would this use FLEXGlobals to achieve this?
    why in the world would this not even explain FLEXGlobals? I mean, afterall, the example uses it. This could confuse beginners.

Comments are closed.