Starting with GWC 2.10, the Genero Application Server generates a CSS for those applications that currently use Genero Presentation Styles (defined in a .4st file).
Genero presentation styles use a .4st file to provide centralized styles for use across the various Genero application front-ends. It is assumed that you have created your .4st file that defines the styles you want to apply to the application. This file defines the set of attributes related to the decoration of user interface elements.
In addition to having a presentation style file created, your application must also call the appropriate .4st file using the ui.lnterface.loadStyles() method.
The DVM creates the AUI Tree. This AUI tree includes the StyleList node, which contains child Style nodes. These child Style nodes contain StyleAttribute nodes, where each StyleAttribute node contains a name (attribute name) and value.
The GWC rendering engine converts these StyleAttributes into CSS based upon the XSLT document defined for the selected theme. For example, the default "cpn.theme.ajax.gwc" theme has the following SNIPPET element defined:
<SNIPPET Id="StyleList">$(res.path.tpl.common)/StyleList.xsl</SNIPPET>
This file, the StyleList.xsl file, is an XSLT file that defines how the .4st file is translated into the appropriate CSS entry.
While the GWC can process the entries in the .4st file, not all .4st entries are translated into valid CSS entries by default.
In this example, the .4st file used a color "lightMagenta". For example, to define a background color for the Edit field, we created a .4st file as follows:
<StyleList>
<Style name="Edit">
<StyleAttribute name="backgroundColor" value="lightMagenta"/>
</Style>
</StyleList>
If the GWC generated a CSS entry for the application as follows:
.gEdit {
background-color: lightMagenta;
}
When the application surfaces in the browser, the background color for the fields would not be light magenta. The reason behind this is that "lightMagenta" is not a valid color for CSS.
To map your own RGB value to the 'lightMagenta' color, modify the StyleList.xsl file to change the value "lightMagenta" to the appropriate RGB color value before displaying the application in a browser. Modifying this file consists of three steps:
Step 1: Create a copy of the default StyleList.xsl file. By creating a copy of the file, you avoid having the file overwritten when you upgrade the GWC. For this example, let's name this file StyleListCustom.xsl.
Step 2: Within the WEB_APPLICATION_THEME_COMPONENT in the GAS configuration file, modify the SNIPPET element for the StyleList to reference your copy of the file.
<SNIPPET Id="StyleList">$(res.path.tpl.common)/StyleListCustom.xsl</SNIPPET>
Step 3: Open the StyleListCustom.xsl file and create a new entry that sets the "lightMagenta" color to the desired RGB value.
<xsl:template name="translateColor">
<xsl:choose>
<xsl:when test="@value='green'">#00ff00</xsl:when>
<xsl:when test="@value='lightMagenta'">#ffc0ff</xsl:when>
[...]
<xsl:otherwise><xsl:value-of select="@value"/></xsl:otherwise>
</xsl:template>
After this entry has been made to the style list file and the changes saved, the appropriate CSS is generated when the application is run. You can view the source created and see that the CSS entry has changed to the following:
.gEdit {
background-color: #ffc0ff;
}
This is valid CSS and is able to be interpreted by the browser.
If you have the same attribute defined both in the CSS stylesheets (such as the gwccomponents.css) and in the .4st file, the .4st file will take priority.
For example, if we add a background color to the gwccomponents.css file:
.gEdit {
border-width: 1px;
background-color: aqua;
}
We then also have the background color for the Edit field defined in our .4st file:
<StyleList> <Style name="Edit"> <StyleAttribute name="backgroundColor" value="#7FFF00"/> </Style> </StyleList>
The rendering engine will translate the .4st into a CSS entry, and this entry will take precedence over the value defined in the CSS stylesheet.
Limitations exist regarding:
Only the common attributes provided by the Genero Presentation Styles are translated into CSS. For other presentation styles (such as positioning), customization must be done within the snippet files. For more information on the Genero Presentation Styles, refer to the Presentation Styles topic in the Genero Business Development Language Manual. .
Genero presentation styles include pseudo selectors, where a style is applied only when some conditions are fulfilled.
<Style name="Edit:focus" >
Pseudo selectors, however, are NOT translated into CSS by the Genero Web Client. In order to handle pseudo selectors, you must include style paths within the snippet file itself.
For more information on pseudo selectors defined in the presentation styles, refer to the Pseudo Selectors paragraph within the Presentation Styles topic in the Genero Business Development Language Manual.
The GWC does not handle the entries for (TTY-based) display attributes defined in either the .4GL or the form specification file, such as FONTPITCH, BOLD, REVERSE, BLINK, UNDERLINE, INVISIBLE, BLACK, and so on.
There are some difference between browsers on what the browser supports in terms of CSS. For example, Internet Explorer does not support background color on Edit fields.
syle['allInlines4ST'] is equivalent to:
(style['textColor']?' color:'+colorToRGB(style['textColor'])+';':'')+ (style['backgroundColor']?' background-color:'+colorToRGB(style['backgroundColor'])+';':'')+ (style['fontSize']?' font-size:'+style['fontSize']+';':'')
syle['allClasses4ST'] is equivalent to:
(style['border']?' gBorder_'+style['border']:'') + (style['fontFamily']?' gFontFamily_'+style['fontFamily']:'') + (style['fontWeight']?' gFontWeight_'+style['fontWeight']:'') + (style['textDecoration']?' gTextDecoration_'+style['textDecoration']:'') + (style['fontStyle'] ?' gFontStyle_'+style['fontStyle'] :'')