9 Replies Latest reply on Nov 7, 2011 11:03 AM by kevinklin

    apply gradient to flex applicationBar

    jupitern1

      hello guys i 'm trying  to port an application from flex 3.5 sdk to flex 4.5 however im having problems with styles. for example on applicationcontrolbar in my css i used to be able to do this.

       

       

      ApplicationControlBar.appBarDayCell{

      fillAlphas: 1.0, 1.0;

      fillColors: #7FC4FF, #52AACA;

      cornerRadius: 0;

      paddingTop: 2;

      }

       

      now this does not rendered correctly. can i still do this? i also see there is a barcontent spark control but i cant seem to be able to recreated with  actionscript. sorry for the noob question i'm just so frustuated. can anyone point me to a doc that shows differences or how to skin. different components.

      i keep googling but nothing is hitting home for me.

      Thanks guys.

        • 1. Re: apply gradient to flex applicationBar
          kevinklin Adobe Employee

          You'll need to skin Application and change the control bar fill.

          • 2. Re: apply gradient to flex applicationBar
            jupitern1 Level 1

            but if i skin application wouldn't i bee skining the entire application container? i only want to skin the application control bar... Please help me understand.

            • 3. Re: apply gradient to flex applicationBar
              kevinklin Adobe Employee

              the control bar is part of the application container, a skin part. This is why you need to skin the whole application to skin that one part. Of course, you don't have to change anything in the skin except the one piece that you're concerned with.

               

              In your case, I think you just want to simply create a copy of the default ApplicationSkin.mxml and then tweak the control bar fill.

              • 4. Re: apply gradient to flex applicationBar
                jupitern1 Level 1

                ok ill continue to stumble :-) a few lines of code or a simple example would be very helpful. Also how did you know that application control bar is part of application? where in the docs do you see that. I'm really trying to understand the docs a little better.

                Thanks for your help thus far.

                • 5. Re: apply gradient to flex applicationBar
                  kevinklin Adobe Employee

                  here - "The location and appearance of the control bar area of the Spark Application container is determined by the spark.skins.spark.ApplicationSkin class, the skin class for the Spark Application container. By default, the ApplicationSkin class defines the control bar area to appear at the top of the content area of the Application container with a grey background. Create a custom skin to change the default appearance of the control bar."

                   

                  Here's a blog post of someone doing just this: http://devgirl.org/2009/11/09/guide-to-skinning-your-flex-4-application-or-air-application / - She probably does more customization you want. So, after you make your own copy of the ApplicationSkin, look for this part:

                   

                   

                  <!-- layer 1: control bar fill -->
                  <s:Rect left="1" right="1" top="1" bottom="2" >
                      <s:fill>
                          <s:LinearGradient rotation="90">
                              <s:GradientEntry color="0xEDEDED" />
                              <s:GradientEntry color="0xCDCDCD" />
                          </s:LinearGradient>
                  ...
                  

                   

                   

                  This is probably where you want to do your customizations.

                  • 6. Re: apply gradient to flex applicationBar
                    jupitern1 Level 1

                    i dont know if you are still following this thread kevin but here is the outcome. the top bar is the control bar content wich does seem to change when i add the skin however the bottom bar which is the ApplicationControlBar is not getting any styles whatsoever. any other ideas? 

                    image1.png

                     

                    mys simple application to test this.

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <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/mx" minWidth="955" minHeight="600"

                          skinClass="applicationBarSkin">

                    <fx:Declarations>

                      <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                     

                     

                    <fx:Script>

                      <![CDATA[

                      

                       public function createaBar():void{

                       

                       

                       

                       

                       

                       }

                      

                      ]]>

                    </fx:Script>

                     

                    <mx:ApplicationControlBar color="blue" width="100%">

                      <s:Label text="test" backgroundAlpha="1"/>

                    </mx:ApplicationControlBar>

                     

                    <s:controlBarContent>

                      <s:Label text="test" backgroundAlpha="1" />

                    </s:controlBarContent>

                     

                     

                     

                     

                    </s:Application>

                    • 7. Re: apply gradient to flex applicationBar
                      kevinklin Adobe Employee

                      You shouldn't need to use "ApplicationControlBar" or any of your styles. The control bar in the spark application replaces these. You just need to transfer your styles into your applicationBarSkin. For example, just change the control bar fill to use your colors:

                       

                      <!-- layer 1: control bar fill -->
                      <s:Rect left="1" right="1" top="1" bottom="2" >
                          <s:fill>
                              <s:LinearGradient rotation="90">
                                  <s:GradientEntry color="0x
                      7FC4FF" />
                                  <s:GradientEntry color="0x
                      52AACA" />
                              </s:LinearGradient>

                      ...

                       

                      Does that help?

                      • 8. Re: apply gradient to flex applicationBar
                        jupitern1 Level 1

                        kevin thanks thats exaclty what i did width my last post. but i need to use actionscript to create several bar content and it appears im not allow to create that component programatically? Thanks for all the help but feel like such an idiot. width this..

                        • 9. Re: apply gradient to flex applicationBar
                          kevinklin Adobe Employee

                          Ah, I see, then this solution won't work for you. What I would do is create a custom component using SkinnableContainer that will be your "control bar" and skin it. To skin it, create a copy of the SkinnableContainerSkin and modify the background Rect. Make sure to remove the Script block too. You can then use your custom component wherever you need it.

                           

                          Hope this helps.