Flex - LinkButton Control

Advertisements


Introduction

The LinkButton control is a borderless Button control whose contents are highlighted when a user hover over it. You must specify a click event handler for the LinkButton control to perform some action similar to a button.

Class declaration

Following is the declaration for mx.controls.LinkButton class:

public class LinkButton 
   extends Button

Public methods

S.N.Method & Description
1LinkButton()
Constructor.

Methods inherited

This class inherits methods from the following classes:

  • mx.controls.Button

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex LinkButton Control Example

Let us follow the following steps to check usage of LinkButton control in a Flex application by creating a test application:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.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"
   width="100%" height="100%" minWidth="500" minHeight="500">	
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <fx:Script>
   <![CDATA[
      import mx.controls.Alert;

      protected function clickMe_clickHandler(event:MouseEvent):void
      {
         var linkButton:LinkButton =  event.target as LinkButton;
         Alert.show("LinkButton "+linkButton.id+" Clicked");
      }
      ]]>
   </fx:Script>
   <s:BorderContainer width="550" height="500" id="mainContainer" 
   styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"
      verticalAlign="middle">
         <s:Label id="lblHeader" text="Basic Controls Demonstration" 
         fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel title="Using LinkButton" width="420" height="100" >
            <s:layout>
               <s:HorizontalLayout paddingTop="10" paddingLeft="10"/>
            </s:layout>					
            <mx:LinkButton label="Link 1" id="clickMe"
            click="clickMe_clickHandler(event)"/>
            <mx:LinkButton label="Link 2" id="clickMe1" 
            click="clickMe_clickHandler(event)"/>
            <mx:LinkButton label="Link 3" id="clickMe2" 
            click="clickMe_clickHandler(event)"/>
         </s:Panel>			      
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex LinkButton Control

Advertisements
Advertisements