Label

Form and theme XML code and CSS element selector

Inheritance diagram

Most commonly used form and theme properties

Associated 4gl syntax and ui methods

Influence and behavior

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

Label inserted in a GridPanel as seen in Lycia Form Designer (with a qxtheme applied for better representation):

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

Inheritance diagram:

Most commonly used form properties:

allowNewLines

classnames

image

horizontalAlignment

verticalAlignment

preferredSize

textAlignment

text

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

Associated 4gl syntax:

DISPLAY TO

Associated ui methods:

SetImage

GetImage

SetText  

GetText 

SetIsDynamic 

GetIsDynamic 

SetAllowNewlines 

GetAllowNewlines

Create

ForName

Influence and behavior:

In 4gl, there are two types of labels - static and dynamic.

Static labels cannot be modified at runtime. These labels are created by the DISPLAY...AT statement.

Dynamic labels can be modified at runtime. These labels can be made dynamic - by setting the isDynamic property to true in LFD, LTD, or via setIsDynamic().

 

To add a Label to your form, you must follow these steps.

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 Label.

Step 3. Left-click the selected spot (cell or sector) to place the Label there.

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

 

Lycia is going to move to Material Design.

It will not have an extra effect on the runtime look and feel of labels:

The most important difference is that with material design, the label text is aligned to center, center.

 

Main properties for labels are text and image.

You can change the text of a label in the .fm2 form, master or user theme, via ui methods, or by the DISPLAY...TO statement:

Here you can find out how to change the image of the label both when designing the form or at runtime.

 

At runtime, labels can be manipulated with ui methods:

create()

creates an object of the ui.Label class:

LET lb= ui.Label.Create("lb1")

forName()

initializes the object of the ui.Label class:

LET lb= ui.Label.ForName("lb1")

setAllowNewLines()

enables multiple-line display to the label:

CALL lb.SetAllowNewLines(TRUE)

getAllowNewLines()

returns whether multiple-line display is allowed for the label

setImage()

sets the image for the label (requires setImageURL()):

CALL lb.SetImage(img_var)

getImage()

returns the image set for the label

setIsDynamic()

makes the dynamic label static:

CALL lb.SetIsDynamic(FALSE)

getIsDynamic()

returns whether the label is static or dynamic

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

 

You can change appearance properties of a label via .qxtheme themes and css styles.

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

runtime appearance:

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

.qx-aum-label .qx-text {

    padding: 2px;

    padding: 5px 10px;

    color: white !important;

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

}

 

 

Contact Us

Privacy Policy

Copyright © 2024 Querix, (UK) Ltd.