Image Url

	imageUrl is used to add images to widgets and TabPage.

in Lycia Form Designer

in Lycia Theme Designer

Form XML code:

<element_name.image>

</element_name.image>

By default, widgets have no images and, thus, this property is absent from the form XML code. The property value will appear in the form XML code only once any image is added to the form.

Theme property filter XML code:

<PropertyName>Image</PropertyName>

<PropertyName>ImageUrl</PropertyName>

</PropertyPath>

</SetProperty>

</DoStyleAction>

Default value: not specified

Associated containers, widgets and theme elements:

Associated ui methods:

setImageUrl ↓

getImageUrl

Influence and behavior:

In Lycia Theme Designer, images are added by specifying the path to the file (image location):

In Lycia Theme Designer, images are not added directly to the Image Url property but to the placeholder called New Resource ID which is an optional ui element (ui.ResorceID) created to hold media resources to be applied to other ui elements..

Where are three ways to specify the image location:

→ qx://application/<image_name>.<image_extention> - specifies the path relative to the application on the application server:

→ qx://embedded/<image_name>.<image_extention> - specifies that the image is an embedded one, i.e. is installed together with the GUI client and is located in the following folders (by default):

C:\ProgramData\Querix\Lycia 7\jetty\temp

C:\Program Files\Querix\Lycia 3 Development Suite 7.1\Lycia\client\www\pack

/opt/Querix/tmp/jetty

→ qx://clienttemp/<image_name>.<image_extention> - specifies that the image is located in the temporary directory generated on the client side:

In Lycia Form Designer, you employ two ways of adding and changing images:

→ to choose an image among application dependencies or files located in the folder specified by FGLIMAGEPATH:

Step 1

Left-click the empty space of the property value or the Add icon:

Step 2

Choose the file and click OK:

Step 3

The image is added:

→ to specify the path to the file (image location):

Step 1

Left-click the Enter path icon:

Step 2

Type in the file name and extension:

Step 3

The image is added:

At runtime, images can be added, changed, and removed by ui methods. In the example below, we use the setImageUrl method to add an image to a button:

DEFINE bt_ui ui.Button,

image_ui ui.Image

...

LET bt_ui = ui.Button.forName("bt1")

CALL image_ui.setImageUrl("qx://application/lycia.png")

CALL bt_ui.SetImage(image_ui)

Regardless of whether you used Lycia Form Designer, Lycia Theme Designer, or ui methods, you get this at runtime:

When added to a button, canvas, label, or radio button list item, images retain their original size and are not resized to fit the widget. If an image is larger that a widget it is added to, the image will be cropped:

When added to a toolbar button, images retain their original size and resize the toolbar button to the size of the image:

Here the image is small enough to fill into the toolbar button.

Here the image is too large to fit into the toolbar button, so the toolbar button becomes larger, and toolbar buttons become partly hidden by the form at runtime (the red rectangle shows the actual size of the button).

Related articles:

Size