Using Cascading Style Sheets (CSS) in Gen Web View after moving from Web Generation

Products

• Gen - Workstation Toolset
• Gen
• Gen - Run Time Distributed
• Gen - Host Encyclopedia

Issue/Introduction

Have successfully used CA Gen Web Generation applications with Cascading Style Sheets (CSS) at window and field/object level.
Now moving to CA Gen Web View (Gen Studio generation) and the existing CSS definitions are not working even after using the Web View skinloader.js.
How can CA Gen Web View applications use CSS?

Environment

Release : 8.6
Component : ECLIPSE WEB VIEW

Resolution

Web View is skin-based and does not use the model-based CSS Video Properties settings previously configured for Java Web Generation.
Customization of the skin can be done with CSS files which are then loaded with the skinloader.js.
This is a more flexible approach because any changes to the UI look and feel can be done outside of the model without having to change the model itself.
To create custom CSS files the file WINDOW_NAME.style.css generated by Gen Studio in the model.ief\WebViewUI directory can be used to get the object names etc.

Attached is a zip file containing an example model htclient.ief which covers the required customization for Web View.
It contains a Cooperative Window Manager CLNT and the execution URL is: http://hostname:port/htclient/COOP.CLNT.TC.html
In directory \htclient.ief\skin_files there are 2 files customize.css and skinloader.js which have been added to the Assemble Additional files to enable the customization to be found.
This is per the Gen 8.6 "Application Skins" documentation page: CA Gen 8.6 > Developing > Designing > Use Gen Studio > Work with Web View Application Skins
In the zip file, there are also 2 screenshots to show the original and customized look and feel i.e. original.png and customize.png