5 Replies Latest reply on Jun 8, 2009 5:10 PM by Peter deHaan

    Spark replacement for mx.controls.ApplicationControlBar?

    Bryan Dresselhaus Level 1

      How do I add an ApplicationControlBar object to a spark application?  I was not able to reference mx:ApplicationControlBar as a child option to s:Application.  Furthermore, I could not find a spark component or an Application property to add a control bar.

       

      Is ApplicationControlBar being depreciated with spark component architecture in lieu of the new layout framework?

       

      Thanks.

        • 1. Re: Spark replacement for mx.controls.ApplicationControlBar?
          Jeremy Savoy Level 1

          I was wondering the same thing ...

          • 2. Re: Spark replacement for mx.controls.ApplicationControlBar?
            rfrishbe Level 3

            There is no more support for the ApplicationControlBar.  Instead, you can achieve the same results through skinning.  Here's a quick example Application skin skin:

             

            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                alpha.disabled="0.5" >

             

                <fx:Metadata>
                <![CDATA

                    [HostComponent("spark.components.Application")]
                ]]>
                </fx:Metadata>
               
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                </s:states>
               
                <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
                    <s:fill>
                        <s:SolidColor color="{hostComponent.backgroundColor as uint}" />
                    </s:fill>
                </s:Rect>
               
                <s:Group id="headerGroup" height="24" top="0" left="0" right="0">
                    <s:layout>
                        <s:HorizontalLayout />
                    </s:layout>
                   
                    <s:Button label="I'm in the control bar" />
                </s:Group>

             

                <s:Group id="contentGroup" left="0" right="0" top="24" bottom="0" minWidth="0" minHeight="0" />

             

            </s:Skin>

             

            Now, you could even go a step further and create a new component that extends Application, which has an extra skin part, headerGroup.  This would be pretty similar to SkinnableContainer.  SkinnableContainer pushes it's content in to the contentGroup part of its skin.  Your new Application class could take any header content it gets and push it in to the headerGroup part of the skin.  This way what you want to put inside of the control bar can be defined in your main application file, but the look and location of that control bar could be defined in the skin (or you could just leave it all in the skin if that's easier).

             

            On the framework, we thought about adding this type of functionality out of the box, but we decided against it because it adds extra weight to the component and should be relatively easy to do through skinning.

             

            Hope that helps,

            Ryan

            1 person found this helpful
            • 3. Re: Spark replacement for mx.controls.ApplicationControlBar?
              Peter deHaan Level 4

              Bryan,

               

              Actually you *can* use the Halo ApplicationControlBar container in your Spark applications (even if the code hints don't show up) -- although there are a few caveats.

               

              The dock property doesn't work in a Spark Application tag. But you can achieve a similar appearance by manually setting the width property to 100% and setting the cornerRadius style to 0.

              If using an absolute/BasicLayout layout, the "docked" ApplicationControlBar doesn't account for itself in the layout, so contents may overlap.

               

              For an example (although sadly no SWF), see http://blog.flexexamples.com/2009/05/30/setting-the-vertical-scroll-position-on-a-spark-li st-control-in-flex-4/.

               

              But yes, the better approach is probably do create a custom Spark skin for the Application container, as Ryan mentions above.

               

              As for the ApplicationControlBar not showing up in code hints, that is related to this http://bugs.adobe.com/jira/browse/FB-19788 and http://bugs.adobe.com/jira/browse/FB-20113. The workaround is to deselect the "Recommended" option in that dialog box (Flash Builder > Editors > MXML Code > Advanced).

               

              HTH,

              Peter deHaan

              Flex SDK Team | Adobe Systems Inc

              • 4. Re: Spark replacement for mx.controls.ApplicationControlBar?
                Bryan Dresselhaus Level 1

                Peter deHaan (Adobe) wrote:


                As for the ApplicationControlBar not showing up in code hints, that is related to this http://bugs.adobe.com/jira/browse/FB-19788 and http://bugs.adobe.com/jira/browse/FB-20113. The workaround is to deselect the "Recommended" option in that dialog box (Flash Builder > Editors > MXML Code > Advanced).

                 

                Thanks Peter,

                 

                I was able to get the ApplicationControlBar control to appear following these steps.

                 

                Essentially, I am able to replicate the same functionality with Flex 3 if I am using a VerticalLayout with some padding:

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo">
                
                          <mx:ApplicationControlBar height="50" width="100%" cornerRadius="5">
                          <mx:Button label="Blah" />
                          <mx:Button label="Blah2" />
                     </mx:ApplicationControlBar>
                
                     <s:layout>
                          <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" gap="8" />
                     </s:layout>
                
                </s:Application>
                

                 

                Nothing against skinning, but sometimes that route seems a little overboard.  As a developer I need to throw things together quickly .

                • 5. Re: Spark replacement for mx.controls.ApplicationControlBar?
                  Peter deHaan Level 4

                  FYI,

                   

                  With a little help with Ryan, I managed to get an example of a custom Spark Application component with an ApplicationControlBar working, see http://blog.flexexamples.com/2009/06/08/adding-a-control-bar-to-a-custom-spark-application -component-in-flex-4/.

                   

                  Hope that helps,

                   

                  Peter