Background Image

 

Background Image is used to add images to elements' backgrounds.

 

Background image can be added and changed both in Lycia Form Designer and in Lycia Theme Designer. However, we recommend applying background properties via user themes created in Lycia Theme Designer.

 

in Lycia Form Designer

 

in Lycia Theme Designer

 

Form XML code:

 

<element_name.background>

   <Background backgroundImage="qx://application/lycia"/>

</element_name.background>

 

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

 

 

Theme property filter XML code:

 

<DoStyleAction>

  <SetProperty>

    <PropertyPath>

      <PropertyName>Background</PropertyName>

      <PropertyName>BackgroundImage</PropertyName>

    </PropertyPath>

    <PropertyValue type="ResourceId" />

  </SetProperty>

</DoStyleAction>

 

Default value: not specified

 

Associated containers, widgets and theme elements:

BorderPanel

CoordPanel

GridPanel

GroupBox

StackPanel

Tab

TabPage

ScrollViewer

Table

TreeTable

BlobViewer

Browser

Button

Calendar

Canvas

CheckBox

ComboBox

FunctionField

Label

MenuGroup

MenuCommand

MenuSeparator

ProgressBar

RadioButton

RadioButtonList

ScrollBar

Separator

Slider

Spinner

TextArea

TextField

Toolbar

ToolbarButton

TimeEditField

WebComponent

 

Associated ui methods:

SetBackgroundImage

GetBackgroundImage

 

Influence and behavior:

 

 

 

 

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

 

 

 

In Lycia Theme Designer, images are not added directly to the Background Image 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 background 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:

 

 

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

 

 

 

Related articles:

Background

New Background

Background Style

Size

Location