2 Replies Latest reply on Nov 13, 2009 8:24 AM by Steve_Porter

    Is there a way to apply a cornerRadius to a LinkButton background (opaqueBackground)?

    Steve_Porter Level 1

      Is there a way to have the static background mimic the cornerRadius that may get applied to the rollover state?

      See the attached pictures to see the disconnect - or run this example code and rollover the LinkButton (I'd like the background to be rounded and match the rollover state).

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control- in-flex/ -->
      <mx:Application name="LinkButton_cornerRadius_test"
              xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white">

       

          <mx:LinkButton id="linkButton"
                  label="LinkButton"
                  cornerRadius="10"
                  opaqueBackground="0xAAAAAA" />

       

          <mx:Label text="Roll over the link button to see corner radius - but notice the background still has hard edges" />
          <mx:Label text="I would like to have the opaqueBackground to be rounded as well." />

       

      </mx:Application>

      Rollover.jpg

        • 1. Re: Is there a way to apply a cornerRadius to a LinkButton background (opaqueBackground)?
          Ramakrishnan SRK

          Why don't you apply skin on LinkButton? Here is the sample

           

          LinkButton {
          upSkin:Embed("assets/images/linkbutton-up.png");
          overSkin:Embed("assets/images/linkbutton-over.png");
          downSkin:Embed("assets/images/linkbutton-down.png");
          }

           

          <mx:LinkButton id="linkButton" label="LinkButton" />

           

          The images are attached.

          • 2. Re: Is there a way to apply a cornerRadius to a LinkButton background (opaqueBackground)?
            Steve_Porter Level 1

            This doesn't quite answer the problem.

             

            I may have not been clear about what I was trying to achieve - I'm changing the background color (opaqueBackground) to show current selection of the selected mode in the LinkButton.  ...but I would like this "selection/background" to be rounded to be consistent with the look and feel (all other elements are rounded).

             

             

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

            <!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control- in-flex/ -->

            <mx:Application

             

             

             

            name="LinkButton_cornerRadius_test"

                     xmlns:mx="

            http://www.adobe.com/2006/mxml"

                      layout="

             

            vertical"

                      verticalAlign="

             

            middle"

                      backgroundColor="

             

            white">

             

             

             

             

             

             

             

                <mx:Style source="assets/styles/styles.css">

             

             

             

             

                </mx:Style>

             

             

             

             

             

             

             

                <mx:Script>

             

             

                <![CDATA[

             

             

                      import mx.controls.Alert;

             

                      private function selectionClick(event:Event):void

                       {

             

             

             

             

             

             

             

             

             

             

             

             

                          if(event.target.id == "selectionA")

                          {

                                selectionA.selected =

            true;

                                selectionB.selected =

             

            false;

                                selectionC.selected =

             

            false;

                                selectionA.opaqueBackground = 0xDAD9AD;

                                selectionB.opaqueBackground = 0xFFFFFF;

                                selectionC.opaqueBackground = 0xFFFFFF;

                           }

             

             

                           else if(event.target.id == "selectionB")

                           {

                                selectionA.selected =

             

            false;

                                selectionB.selected =

             

            true;

                                selectionC.selected =

             

            false;

                                selectionA.opaqueBackground = 0xFFFFFF;

                                selectionB.opaqueBackground = 0xDAD9AD;

                                selectionC.opaqueBackground = 0xFFFFFF;

                           }

             

             

                           else if(event.target.id == "selectionC")

                           {

                                selectionA.selected =

             

            false;

                                selectionB.selected =

             

            false;

                                selectionC.selected =

             

            true;

                                selectionA.opaqueBackground = 0xFFFFFF;

                                selectionB.opaqueBackground = 0xFFFFFF;

                                selectionC.opaqueBackground = 0xDAD9AD;

                           }

             

             

                           else

                           {              

                                

             

             

             

            Got an event from an invalid source: " + event.target.id, "Error");

                           }

                        }

                    ]]>

             

             

                 </mx:Script>

                               

             

                 <mx:LinkButton label="Selection A"

                      id="

             

            selectionA"

                      click="selectionClick(event)"

                      selected="t

             

            rue"

                      opaqueBackground="0x

             

            DAD9AD" />

             

             

             

             

             

                 <mx:LinkButton label="Selection B"

                      id="

             

            selectionB"

                      click="selectionClick(event)"

             

            />

             

             

             

             

             

                 <mx:LinkButton label="Selection C"

                      id="

             

            selectionC"

                      click="selectionClick(event)"

             

            />

             

             

             

             

             

             

             

             

             

             

                 <mx:Label text="Roll over the link button to see corner radius - but notice the background still has hard edges" />

             

             

             

             

                 <mx:Label text="I would like to have the opaqueBackground to be rounded as well." />

             

            </mx:Application>

             

             

             

             

             

             

             

             

             

            </mx:Application>

             

             

             

             

             

             

             

             

            </mx:Application>

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

            Selection.jpg

            MouseOverNonSelection.jpg