< Jewel Components list

Jewel Label


Available since version 0.9.4.

Class Extends
org.apache.royale.jewel.Label org.apache.royale.core.supportClasses.StyledImageBase

Note: This component is currently only available for JavaScript.


The Jewel Label implements the Jewel control for single and multi line text labels. It dispatches a click event when the user clicks over it.

Example of use

In MXML declare a Label like this:


In ActionScript we can do the same in the following way:

var label:Label = new Label();

where parent is the container where the control will be added.

Here is an example of the default label:

code here

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.Label for a more detailed list of properties and methods.


PROPERTY Type Description
text String The text inside the label.
html String The html text inside the label.
multiline Boolean false for single line. true for multiline.



Relevant Events

The Label has a click event of type org.apache.royale.events.Event. This event is dispatched when the user clicks the control and triggers some action coded in a callback function. Programmatic changes will not trigger this event.

You can attach callback listeners to the click event in MXML as follows:

<j:Label click="clickHandler(event)"/>

the click event will use the clickHandler callback function you provide in ActionScript:

        private function clickHandler(event:Event):void {
            trace("You clicked the label!");

When the user clicks the label, the message “You clicked the label!” appears in the console log.

In ActionScript we can add an event handler this way:

var label:Label = new Label();
label.addEventListener('click', clickHandler);

Relevant Beads

Unlike other components in Royale, the Jewel Label does not have beads for View pr Controller in the JavaScript platform, but has Model.

Bead Type Implementation Description
IBeadModel org.apache.royale.jewel.beads.models.TextModel The data model for the Label.

Jewel does not have beads specially crafted for this control, but it can use other common Jewel control beads (shared with other controls) to provide more functionality.

Label Beads


Common Beads

Bead Type Implementation Description
Disabled org.apache.royale.core.IBead This bead lets you disable and enable a Jewel control.
SizeControl org.apache.royale.core.IBead Add this bead to give the Jewel control a custom size.
ToolTip org.apache.royale.core.IBead Add this bead to enable floating a text string over the control when the user hovers the mouse cursor over it.

More examples