Resources

Lite Client

The Lite Client uses resources for two different areas. There are the application resources that are used in the same way as the Open Client to provide application images, plugin objects and text and there are the layout resources that are used to to define the shape and style of the screen components.

Loading Lite Client Application Resources

The application resource are put in the ../ClientServices/wars/resources/APP_FOLDER folder where APP_FOLDER is the name of the application defined in the Resource Paths property in the definitaion of the service in the PROIV dashboard. In the APP_FOLDER you have appImages, appObjects and appStrings folders that hold the resource for the application.

See Open Client Customisation and Deployment for more details on defining your own application resources.

Loading Lite Client Application Layout Resources

The Lite Client defines the components of a PROIV connection in a different way to that of the Open Client. In the Open Client the DOM nodes are fixed and the only thing that can be changed is the CSS (by adding your own CSS files in the appThemes folder). In the Lite Client The DOM nodes for components are built from a template file and these templates can be replaced by an application.

The layout resources at present must be in the Client Connector war file (although this will change in the future to be in the ../ClientServices/wars/resources/APP_FOLDER) so the installed file ../_jetty/templates/ClientConnector.war will need to unzipped, the application layout resources folder added and zipped up again. The application layout resources folder is put in the /lite-client/resources folder in the war file.

The Lite Client loads the layout resources by loading all JavaScript and CSS files in the application layout resources folder and all sub folders at the start of each PROIV session.

See Lite Client Component Templates for see more information on how the layout resources work.

Using Font Icons

Wherever an image is used in a PROIV component a font icon can be used instead of the image. This has two advantages: First it does not need to be a separate resource as all font icons can be loaded in a single file. Second the icons can easily be used elsewhere on a page.

The Lite Client identifies icons by the name and the known names must be defined in the layout resources mapping file. The default file being the PROIVDefault-mapping.js file.

The icon name used as the component image name must be in the layout resources mapping and its value should be the font icon name. The default icons defined are show below:

/***************************************************************************
* Icon Class Mapping
* These fields map a fixed name to a font icon name.
*/
"icon-up":"fa-chevron-up",
"icon-down":"fa-chevron-down",
"icon-left":"fa-chevron-left",
"icon-right":"fa-chevron-right",
"icon-backward":"fa-step-backward",
"icon-forward":"fa-step-forward",
 
"icon-calendar":"fa-calendar",
"icon-ok":"fa-check",
"icon-info":"fa-info-circle",
"icon-question":"fa-question-circle",
"icon-update":"fa-check",
"icon-cancel":"fa-times",
"icon-trash":"fa-trash",
"icon-expander":"fa-align-justify",
 
"icon-cut":"fa-cut",
"icon-copy":"fa-copy",
"icon-paste":"fa-paste",
"icon-remove":"fa-times",
 
"icon-add":"fa-plus-square",
"icon-change":"fa-edit",
"icon-delete":"fa-trash",
"icon-lookup":"fa-check-square",
"icon-insert":"fa-square",
 
"icon-folder":"fa-folder-open",
"icon-file":"fa-file",
"icon-download":"fa-download",
"icon-upload":"fa-upload",
"icon-expand":"fa-chevron-right",
"icon-collapse":"fa-chevron-down",
"icon-elipses":"fa-ellipsis-h",
 
"icon-off":"fa-power-off",
"icon-save":"fa-save",
"icon-minus":"fa-minus",
"icon-plus":"fa-plus",
"icon-wrench":"fa-wrench",
"icon-abort":"fa-ban",
"icon-delete-all":"fa-fire",
"icon-pen":"fa-pen",
"icon-trash-alt":"fa-trash-alt",
"icon-mouse-pointer""fa-mouse-pointer",
"icon-cogs":"fa-cogs",
"icon-print":"fa-print",
"icon-search":"fa-search",
"icon-circle":"fa-circle",
"icon-combobox":"fa-chevron-down",
"icon-sort-up":"fa-caret-up",
"icon-sort-down":"fa-caret-down",
 
"icon-reg-circle":"far fa-circle",
"icon-reg-file":"far fa-file",
"icon-reg-file-alt":"far fa-file-alt",
 
"action-update":"icon-update",
"action-cancel":"icon-cancel",
"action-delete":"icon-trash",

Comment on this topic

Topic ID: 870028