Master and Application style sheets (.css)
Master style sheet is a .css file that has the name of the program and is stored together with it. Master style sheets are loaded automatically when the application (= built program) is run.
Application style sheet is an extra user-defined .css file that is loaded from the 4gl code and is used to set up the runtime look and feel of the application depending on the current tasks and purposes.
Differences between master and application style sheets are summed up in the table below.
|
|
Master style sheet |
Application style sheet |
|
has the same name as the 4gl program |
|
|
|
must be stored in the same folder as the program executable file |
|
|
|
is loaded automatically when the application is run |
|
|
|
can be created as a part of the Create new 4gl program wizard |
|
|
|
is applied at design time |
|
|
|
is applied at runtime |
|
|
In their essence, master and application style sheets are the same .css files and have the same syntax and structure.
What differs is their purpose, location, and loading time.
Below you can see an example of a .css file that can serve both a master style sheet and as a application style sheet:
.qx-aum-button .qx-text {
padding: 2px;
padding: 5px 10px;
color: white !important;
font: bold 14px "Calibri","Helvetica Neue", Sans-Serif;
}
Master style sheets
Usually, master style sheets are created together with 4gl programs.
To create a master style sheet, you have to check the create .css checkbox after you enter the program name:
If you have missed this step, you can create your master style sheet at any other point of the program design.
You can also create master style sheets in your favorite text editor - as any other .css file.
However, it will take you more time because you will have to 1) import this .css to your project; 2) add it as a requirement to your program, and 3) locate it in the same folder as the program executable file.
After you have created your master style sheet, it is added to your 4gl program and you can open and edit it in the text editor (built-in, system, or in-place one):
By default, your master style sheet is empty:
Master style sheets are edited in the same way as any other .css files:
Master style sheets must be deployed to the same folder as the program executable file (this folder is specified in listener.xml):
Properties set in the master style sheet for forms and form elements are applied both at design and at runtime:
In the MDI mode, master style sheets of child applications are not loaded at all.
This restriction is introduced to Lycia because of the nature of CSS. Css styles are applied to all the applications running on the web page. This means that if all the style sheets (parent's and child's ones) are loaded, they will merge and have an unpredictable effect on the appearance of all the applications.
Click here to compare.
The application when only the css style sheet of the parent application is loaded:
The application when two css style sheets – of the parent application and of the child one – are loaded:
Application style sheets
Application style sheets are more flexible than style sheets in terms of their creation, storage, and usage.
You can create user style sheets:
- in LyciaStudio - refer here to learn how files are created;
- in your favorite text editor - as any .css file not intended to be used with Lycia projects.
Application style sheets are edited in the same way as any other .css files:
All the file names you use in your 4gl development must be platform-independent.
If you use platform-dependent names (e.g., combine upper and lower case, use colons, finish names with a full stop, etc.), please remember that they might cause different problems when you move your project to another platform.
Application style sheets can be stored in any necessary location:
- on the server side - in any folder including the folder with the program executable file,
- at any external location specified as the direct URL or the location of public resources when configuring web server.
Contrary to master style sheets, application style sheets must be loaded from your 4gl code - by ui.interface.frontcall():
ui.Interface.frontCall("html5","styleImport", ["url","copy", id], [])
Properties set in the application style sheet for forms and form elements are applied only at runtime:
