7 Replies Latest reply on Feb 8, 2011 2:14 PM by sdsdfsdwefdcgdgcvedb

    mx:LinkButton equivalent in spark?

    samslo Level 1

      Do spark components have something similar to mx:LinkButton.

       

      I'm looking at spark components because I read it has better skinning abilities, so I could more easily change things like the background color in normal and hovered state, etc.

       

      Thanks

        • 1. Re: mx:LinkButton equivalent in spark?
          TeotiGraphix Level 3

          Hi,

           

          The only thing a LinkButton does in the halo framework is set buttonMode to true which creates the handcursor and adds text styles.

           

          All you would need to do is set that property or create a reusable class;

           

          /components/LinkButton.as

           

          package components
          {

           

          import spark.components.Button;

           

          public class LinkButton extends Button
          {
              override public function set enabled(value:Boolean):void
              {
                  super.enabled = value;
                  buttonMode = value;
              }
             
              public function LinkButton()
              {
                  super();
                 
                  buttonMode = true;
              }
          }
          }

           

          /skins/LinkButtonSkin.mxml

           

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

           

          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

           

                       xmlns:s="library://ns.adobe.com/flex/spark"

           

                       minWidth="21" minHeight="21" alpha.disabled="0.5">

           

           

           

              <fx:Metadata>

           

                  [HostComponent("components.LinkButton")]

           

              </fx:Metadata>

           

             

           

              <!-- states -->

           

              <s:states>

           

                  <s:State name="up" />

           

                  <s:State name="over" />

           

                  <s:State name="down" />

           

                  <s:State name="disabled" />

           

              </s:states>

           

             

           

              <s:Rect id="fill" left="1" right="1" top="1" bottom="1"


                      radiusX="2" includeIn="over,down">
                  <s:fill>
                      <s:SolidColor color="{getStyle('themeColor')}"
                                    alpha="0.5"
                                    alpha.down="0.85"/>
                  </s:fill>
              </s:Rect>
             
              <s:Label id="labelDisplay"
                       textAlign="center"
                       verticalAlign="middle"
                       maxDisplayedLines="1"
                       horizontalCenter="0" verticalCenter="1"
                       left="10" right="10" top="2" bottom="2">
              </s:Label>
             
          </s:SparkSkin>

           

           

          Application.mxml

           

          <?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"
                         xmlns:components="components.*">

           

              <s:layout>
                  <s:VerticalLayout/>
              </s:layout>
             
              <components:LinkButton label="A Link" skinClass="skins.LinkButtonSkin"/>
             
              <mx:LinkButton label="A link"/>
             
          </s:Application>

           

           

          That pretty much mimics the link button. You would need to apply rollover text styles and such in the skin uysing the states.

           

          Mike

          • 2. Re: mx:LinkButton equivalent in spark?
            samslo Level 1

            Thanks Teoti, I will go with that.

            • 3. Re: mx:LinkButton equivalent in spark?
              JabbyPandaUA Level 3

                 What will be your solution for drawing focus ring when our custom LinkButton will be tabbed with a keyboard to gain a system focus?

               

                 Currently, if our custom LinkButton has gained system focus, "labelDisplay"'s text receives an ugly highlight by applying glowFilter effect via default spark.skins.spark.FocusSkin

               

                 We can add

               

              override public function get focusSkinExclusions():Array 
              {
                  return ['labelDisplay'];
              }
              

               

                 to LinkButtonSkin.mxml which improves the situation with ugly highlight, but because LinkButton does not have a constantly visible background shape, when it is focused, then there is nothing to be focused.

               

                 Thus, I came up with decisiton that custom FocusSkin is also needed for LinkButton, something like SimpleStrokeFocusSkin class from sample http://flexponential.com/2010/01/24/custom-focusskin-for-spark-components-in-flex-4/ courtesy of Steven Shongrunden


              • 4. Re: mx:LinkButton equivalent in spark?
                TeotiGraphix Level 3

                Hi,

                 

                Sorry about that, this wasn't meant as a "complete" implementation of a LinkButton just to show where to get started.

                 

                Mike

                • 5. Re: mx:LinkButton equivalent in spark?
                  JabbyPandaUA Level 3

                  Here is listing of custom focusSkin that I'll be using for a while with Spark ListButton:

                   

                  http://gist.github.com/401226

                  • 6. Re: mx:LinkButton equivalent in spark?
                    ChivertonT Level 2

                    I've used this code to implement Flex 4 native versions of LinkButton and LinkBar : http://www.rachaelandtom.info/content/recreating-flex-3-linkbar-and-linkbutton-flex-4

                    • 7. Re: mx:LinkButton equivalent in spark?
                      sdsdfsdwefdcgdgcvedb Level 1

                      <linkBar:LinkButton label="Hello Link Button" skinClass="com.falkensweb.components.linkBar.ButtonBarLinkButtonButtonSkin" />

                       

                      Shows no text at all.