1 Reply Latest reply on Oct 5, 2010 9:19 PM by Anitha Selvaraj

    ApplicationControlBar in Flex 4

    iamcootis Level 1

      I just can't wrap my mind around some of this new Flex 4 stuff. I loved using the MX applicationControlBar, but now it is recommending I do it the Flex 4 way. Can anyone point me to any examples of how to create a normal application control bar in Flex 4? Or could anyone show me an example of how to make one with a couple different objects in it..Like a button, A label and a text input.

        • 1. Re: ApplicationControlBar in Flex 4
          Anitha Selvaraj Level 2

          Hi,

           

          As of Flex 4, ApplicationControlBar component is no longer available as a seperate component. You have to use the controlBarLayout property of the Spark Application class to specify the layout and controlBarContent property to specify the set of components that has to be displayed in the control bar area.

           

          But still you can use mx:ApplicationControlBar inside Flex 4 application.

           

          Check the below code.

           

          <?xml version="1.0"?>
          <!-- containers\layouts\AppCBarSimple.mxml -->
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         width="550">
              <fx:Style>
                  @namespace s "library://ns.adobe.com/flex/spark";
                  @namespace mx "library://ns.adobe.com/flex/mx";
                  mx|ApplicationControlBar {
                      highlightAlphas: 0.41, 0.22;
                      fillAlphas: 1.0, 1.0;
                      fillColors: #F9FAFD, #B8D2F7;
                      color: #797A7A;
                      fontWeight: normal;
                      fontStyle: normal;
                  }
              </fx:Style>
             
              <mx:ApplicationControlBar id="dockedBar"
                                        dock="false">
                  <mx:HBox paddingBottom="5"
                           paddingTop="5">
                      <mx:Label text="Sample Program"/>
                      <mx:Spacer width="100%"/>
                      <mx:TextInput id="myTI" text=""/>
                      <mx:Button id="srch1"
                                 label="Search"/>
                  </mx:HBox>
              </mx:ApplicationControlBar>
          </s:Application>

           

          Regards,

          Anitha