Label

 

Label defines a text area to display a read-only text, image, or both.

 

In 4gl, there are two types of labels - static and dynamic. Dynamic labels can be modified at runtime and static ones cannot.

All labels created via Lycia Form Designer are dynamic.
Static labels are created by the DISPLAY ... AT statement. You can also make a label static by setting isDynamic to false.

 

Label inserted in a GridPanel as seen in Lycia Form Designer (for better visibility, the label is painted blue by setting the fillColor property)

 

Form XML code:

 

<Label text="Label" identifier="lb1">

   <Label.onInvoke>

      <ActionEventHandler type="actioneventhandler" actionName="actDisplay"/>

   </Label.onInvoke>

</Label>

 

Theme element filter XML code:

 

<ElementFilter ElementName="Label">

   ...

</ElementFilter>

 

CSS element selector code:

 

qx-aum-label

.qx-aum-label .qx-text ↓

.qx-aum-label .qx-image

 

Associated 4gl syntax:

DISPLAY ... TO 

 

Most commonly used form properties:

text

margin

padding

textAlignment

onInvoke

isDynamic

allowNewLines

 

Most commonly used theme properties:

Image:

New Image

Image Url

Image Scaling

Image Position

Size

Background:

New Background

Fill Color

Background Image

Background Style

Size

Location

 

Inheritance diagram:

 

 

Associated ui methods:

SetImage 

GetImage

SetText  →

GetText 

SetEnable →

GetEnable

SetIsDynamic →

GetIsDynamic →

SetOnInvoke

GetOnInvoke

SetAllowNewlines →

GetAllowNewlines →

Create

ForName

 

Influence and behavior:

 

 

 

 

 

To add a label to your form,

 

Step 1

Choose a label from the widgets palette by left-clicking its icon:

 

 

Step 2

Select the place in the form where you want to put the button (in the screenshot below, we choose a cell in a Grid panel):

 

 

Step 3

Left-click the selected spot (cell or sector) to place the label there:

 

 

 

The label is now added to your form, and you can see it in the Structure view.

 

 

 

 

 

 

 

Here you can find out how to change the text of the label in the form:

 

 

Here you can find out how to change the text of the label at runtime using ui methods or DISPLAY ... TO statement.

 

 

 

 

 

You can change appearance properties of a label in Lycia Form Designer. However, we recommend applying appearance properties via user themes and css.

 

Properties set for labels via Lycia Theme Designer are applied both to dynamic and static labels.

If you want to apply certain properties to dynamic or static labels only, you must use the Pseudo-Class filter - DynamicLabel or StaticLabel.

 

 

To apply a property to a label, set its value in the user theme, directly or using filters.

In the example below, we make a label look different by applying Background and Element Border properties with a With ID filter (the label has no text).

 

property applied

in the user theme

 

theme XML code

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

<StyleSheet xmlns="http://querix.com">

  <ElementFilter ElementName="Label">

    <StyleSheet>

      <ElementIdFilter Identifier="lb1">

        <StyleSheet>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>Background</PropertyName>

                <PropertyName>BackgroundImage</PropertyName>

              </PropertyPath>

              <PropertyValue type="ResourceId" Uri="qx://application/lycia" />

            </SetProperty>

          </DoStyleAction>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>Background</PropertyName>

                <PropertyName>BackgroundStyle</PropertyName>

              </PropertyPath>

              <PropertyValue>Centered</PropertyValue>

            </SetProperty>

          </DoStyleAction>

          <DoStyleAction>

            <SetProperty>

              <PropertyPath>

                <PropertyName>ElementBorder</PropertyName>

              </PropertyPath>

              <PropertyValue type="BevelBorder" IsRaised="yes" />

            </SetProperty>

          </DoStyleAction>

        </StyleSheet>

      </ElementIdFilter>

    </StyleSheet>

  </ElementFilter>

</StyleSheet>

 

runtime appearance

 

In the example below, we use css to change the text style of the button:

 

.qx-aum-label .qx-text {

    padding: 2px;

    padding: 5px 10px;

    color: white !important;

    font: bold 14px "Calibri","Helvetica Neue", Sans-Serif;

}

 

 

 

 

 

At runtime, labels can be manipulated with ui methods.

Here you can read how to make a label static or dynamic using the setIsDynamic method: