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

By Peter deHaan On October 3, 2009 · 10 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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>

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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

david r says:

October 9, 2009 at 4:11 pm

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!

Reply
- Peter deHaan says:
  
  October 9, 2009 at 4:50 pm
  
  @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
  
  Reply
Tom says:

April 21, 2010 at 7:32 am

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

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

cheers

Reply
- Tom says:
  
  April 21, 2010 at 7:33 am
  
  Oups ;-( Didnt see your post above ! Thanks to explain Flex 4 !
  
  Reply
- Peter deHaan says:
  
  April 21, 2010 at 1:31 pm
  
  @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
  
  Reply
  - Peter deHaan says:
    
    April 21, 2010 at 1:52 pm
    
    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
  - Peter deHaan says:
    
    April 21, 2010 at 2:41 pm
    
    Or for an example of an image fill on the Spark Application control bar, see “Creating a bitmap fill on a Spark Application container control bar in Flex 4″.
    
    Peter
joe says:

May 1, 2010 at 7:16 am

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 !

Reply
- Peter deHaan says:
  
  May 1, 2010 at 5:02 pm
  
  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
  
  Reply
Devtron says:

November 11, 2010 at 10:22 am

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.

Reply