Client-side resources

Client-side resources are resources processed by the client (opposite to server-side resources, processed by the server).

With Lycia, there are three groups of client-side resources that are widely used in 4gl applications:

• public client-side resources are resources stored in the folder specified in the web-server configurations. These files can be used by many applications of the same webserver and can be viewed by anyone with the link;
• built-in client-side resources are resources provided with Lycia; and
• private client-side resources are resources included in the 4gl project and written to the .tr2 file. These resources are not available outside the application and are at runtime processed by a special handler on the web-server.

Besides these groups of resources located on Lycia webserver, you can also use external resources - resources located on any other webservers and accessed via their direct URL.

Private and built-in client-side resources are considered more secure because of the fact that they cannot be accessed from outside the application. On the contrary, public client-side resources are considered less secure because of the fact that they can be accessed from outside the application.

However, private and built-in client-side resources have their drawbacks, e.g.:

• Built-in client-side resources are few in number and not universal - this means that in some cases you will find a file that suits your development needs and in mane more cases you won't find such a file among the built-in ones.
• Private client-side resources need more physical storage space as they are stored in the project - if you have several projects using the same .css style sheet or image (e.g., your company logo), you have to store an individual copy of this file in every project (i.e. 10 projects = 10 copies of the file).
• Private client-side resources need more human forces for maintenance and update - once you have changed the resource (e.g., your company logo), you have to change it in every project it is used in (i.e. 10 projects = 10 times the file must be replaced).
• Using built-in and (especially) private client-side resources might decrease the performance of your applications. Actual performance loss will depend on the resources you use (and their number), your development and production system as well as other factors.

Using public resources is the solution to overcome these drawbacks:

• Public client-side resources need less physical storage space as all the resources used in all your projects can be stored in one place and not spread up between the projects - if you have several projects using the same .css style sheet or image (e.g., your company logo), you can refer to this very file from all the projects (i.e. 10 projects = 1 copy of the file).
• Public client-side resources need less human forces for maintenance and update - once you have changed the resource (e.g., your company logo), you have to change it only once (i.e. 10 projects = 1 time the file must be replaced). For Jetty, you will not even need to stop the webserver.
• It take less time to specify public client-side resources - instead of specifying the full path to the file, you can simply write its context-path alias (here is the example).
• Using public client-side resources usually increases the application performance as compared to using built-in and private ones.

Private client-side resources

There are two types of private client-side resources - from the 4gl program, they are referred to by prefixes qx://application and qx://clienttemp.

qx://application

qx://application resources are the resources added to a 4gl program as a client requirement:

These files are a part of the program (and the project) and are written to the the .tr2 file.

At runtime, they are processed by the special handler on the webserver - /res.

In your 4gl program, you refer to these resources by the URI:

qx://application/<file_name>.<file_extention>

or

qx://application/<path>/<file_name>.<file_extention>

For example,

• adding the image by imageUrl in LFD or LTD:

  

  

• adding the image by the setImageUrl() method:

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

• importing a .css style by ui.Interface.frontcall():

  CALL ui.Interface.frontcall("html5", "styleImport", ["qx://application/extensions/messages.css", "copy"], [])

qx://clienttemp

qx://clienttemp resources are the resources located in the temporary directory generated on the client side.

qx://clienttemp resources are the only resources located on the client - the other types of resources are located on the server.

At runtime, they are processed by the special handler on the webserver - /tmp.

In your 4gl program, you refer to these resources by the URI:

qx://clienttemp/<file_name>.<file_extention>

or

qx://clienttemp/<path>/<file_name>.<file_extention>

For example,

qx://clienttemp/client_logo.png

or

CALL ui.Interface.frontcall("html5", "styleImport", ["qx://clienttemp/skins/latin_america.css", "copy"], [])

Built-in client-side resources

There are two types of private client-side resources - from the 4gl program, they are referred to by prefixes qx://embedded and qx://icon.

qx://embedded

qx://embedded resources are the resources embedded in Lycia and installed together with its LyciaWeb client.

By default, qx://embedded resources are located in these folders:

In your 4gl program, you usually refer to these resources by the URI:

qx://embedded/<file_name>.<file_extention>

or

qx://embedded/<path>/<file_name>.<file_extention>

For example,

qx://embedded/ok.png

qx://icon

qx://icon prefix was intentionally implemented to allow Lycia users works with iconic fonts (e.g., Font Awesome).

qx://icon prefix tells the client that there will be no image that could be set as the HTML image source.

In your 4gl program, you usually refer to a font icon by the URI - qx://icon/<class> <icon name>.

For example,

qx://icon/fa fa-thumbs-up

Public client-side resources

So, public client-side resources are resources stored in the folder specified in the web-server configurations. These files can be used by many applications of the same webserver and can be viewed by anyone with the link.

Default webserver configurations for using public client-side resources

Default location for the public client-side resources is this

With Jetty, default location for the public client-side resources and default context-path alias = public are specified in the file public.xml located at

With public.xml, you can use these references to a resource file:

{CONTEXT}/public/logo.png

/public/logo.png

instead of this

C:\ProgramData\Querix\Lycia\progs\public\logo.png

Both variants – /public/logo.png and {CONTEXT}/public/logo.png - are synonyms and point to the same file. The difference is when you use each variant.

{CONTEXT} was implemented to support context paths with Lycia source files (.4gl and .fm2 sources, .qxtheme theme files).

So, when you refer to a public client-side resource from your 4gl code, .fm2 source, or .qxtheme theme file, you must use {CONTEXT}/public/logo.png.

When you refer to a public client-side resource from your .js scripts or .css styles, you can use /public/logo.png.

At runtime, {CONTEXT} is replaced with the address of the webserver from which the application was loaded.

For example,

the application URL is

http://localhost:9090/LyciaWeb/run/default/label_03_image.exe

and the application has an .fm2 form with an image specified as

<Image imageUrl="{CONTEXT}/public/myok.png"/>

For the webserver, resulting links to the image is

http://localhost:9090/public/myok.png.

Custom webserver configurations for using public client-side resources

You specify the location of the public client-side resources when you configure your webserver.

If we assume that you have installed Lycia with its default parameters and configurations and thus work with the Jetty web server, then you must do this to configure it for using public client-side resources:

Step 7. Save public2.xml.

 

After these configurations, you will be able to use this reference to a resource file:

{CONTEXT}/images/logo.png

instead of this

http://company_site.com/products/books/downloads/logo.png