Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Controls > LinkButton control

LinkButton control

The LinkButton control creates a single-line hypertext link that supports an optional icon. You can use a LinkButton control to open a URL in a web browser.

The following example shows three LinkButton controls:

The LinkButton control has the following default properties:

Subtopics

Creating a LinkButton control

You define a LinkButton control in MXML using the <mx:LinkButton> tag, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

<?xml version="1.0"?>
<!-- controls\button\LBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:HBox>
        <mx:LinkButton label="link1"/>
        <mx:LinkButton label="link2"/>
        <mx:LinkButton label="link3"/>
    </mx:HBox>
</mx:Application>

The following code contains a single LinkButton control that opens a URL in a web browser window:

<?xml version="1.0"?>
<!-- controls\button\LBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:LinkButton label="ADBE" 
        width="100"
        click="navigateToURL(new URLRequest('http://quote.yahoo.com/q?s=ADBE'), 'quote')"/>
</mx:Application>

This example uses the navigateToURL() method to open the URL.

The LinkButton control automatically provides visual cues when you move your mouse pointer over or click the control. The previous code example contains no link handling logic but does change color when you move your mouse pointer over or click a link:

The following code example contains LinkButton controls for navigating in a ViewStack navigator container:

<?xml version="1.0"?>
<!-- controls\button\LBViewStack.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:VBox>

        <!-- Put the links in an HBox container across the top. -->
        <mx:HBox>
            <mx:LinkButton label="Link1" 
                click="viewStack.selectedIndex=0;"/>
            <mx:LinkButton label="Link2" 
                click="viewStack.selectedIndex=1;"/>
            <mx:LinkButton label="Link3" 
                click="viewStack.selectedIndex=2;"/>
        </mx:HBox>

        <!-- This ViewStack container has three children. -->
        <mx:ViewStack id="viewStack">
            <mx:VBox width="150">
                <mx:Label text="One"/>
            </mx:VBox>
            <mx:VBox width="150">
                <mx:Label text="Two"/>
            </mx:VBox>          
            <mx:VBox width="150">
                <mx:Label text="Three"/>
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>

A LinkButton control's label is centered within the bounds of the LinkButton control. You can position the text label in relation to the icon using the labelPlacement property, which accepts the values right, left, bottom, and top.

LinkButton control user interaction

When a user clicks a LinkButton control, the LinkButton control dispatches a click event. If a LinkButton control is enabled, the following happens:

• When the user moves the mouse pointer over the LinkButton control, the LinkButton control changes its rollover appearance.
• When the user clicks the LinkButton control, the input focus moves to the control and the LinkButton control displays its pressed appearance. When the user releases the mouse button, the LinkButton control returns to its rollover appearance.
• If the user moves the mouse pointer off the LinkButton control while pressing the mouse button, the control's appearance returns to its original state and the control retains input focus.
• If the toggle property is set to true, the state of the LinkButton control does not change until the mouse button is released over the control.

If a LinkButton control is disabled, it appears as disabled, regardless of user interaction. In the disabled state, the control ignores all mouse or keyboard interaction.

Flex 2.01