CSS is one of the fastest and the simplest way to change your application's look. Most generated HTML elements have classes and containers (<DIV>) so you can change the widget's look and place the elements where you want. This section describes how you can modify existing or add new CSS. Understanding this chapter requires knowledge of CSS. We use CSS 2 standards described on the W3C site. For more information on CSS, refer to the tutorials at http://www.w3schools.com.
For information about using existing .4st presentation style files, click here.
We assume that you have read the section How the GWC Uses Web Technologies and understand the principles.
The Genero Web Client provides default CSS files. Each set of snippets have their own CSS. Which CSS file is used is based on the Style Sheet link provided by the theme's template file. For example, if the application is using the AJAX theme (the DUA_AJAX Output Map), then the template being used is the main.xhtml template located in the directory $FGLASDIR/tpl/set1.
Within this template file:
01<head>02<title gwc:condition="application/ui" gwc:marks="title [application/ui/CID,window/name + ' - ' + application/ui/text + ' - ' + document/URL]">Title</title>03<meta http-equiv="Content-Type" gwc:attributes="content XPathConfig('/APPLICATION/OUTPUT/MAP[@Id=../@DUA]/RENDERING/MIME_TYPE/text()')+'; charset='+document/encoding" />04<script type="text/javascript" gwc:attributes="src application/connectorURI+'/fjs/gwccomponents.js'" defer="defer"> </script>05<script type="text/javascript" gwc:attributes="src application/connectorURI+'/fjs/gwccore.js'" defer="defer"> </script>06<link rel="stylesheet" gwc:attributes="href application/connectorURI+'/fjs/gwccomponents.css'" type="text/css" title="Default Theme"/>07<link rel="shortcut icon" gwc:attributes="href application/connectorURI+'/favicon.ico'" type="image/x-icon" />08<script type="text/javascript" gwc:content="'var gDialog=' + document/dialog" />09<script type="text/javascript" gwc:content="'var gElementMarkTree=' + document/marks" />10<script type="text/javascript" gwc:content="'var gComponentList=' + document/components" />11<script type="text/javascript" gwc:condition="application/ui" gwc:content="'var gDbdate=\'' + application/ui/dbdate + '\''" />12<!--script gwc:content="'alert(\''+application/state+'\');'"/-->13<!-- the next element will be replaced by the current 4GL window based on the associated window snippet -->14<!-- if the 4GL window has a specific style, a snippet configured with that style will be used -->15<style type="text/css" gwc:condition="application/ui/StyleList" gwc:content="application/ui/StyleList"/>16</head>
The CSS used for applications being rendered using the AJAX theme is defined by the <LINK> element defined by line 07 in the example above. When you resolve the references, this link maps to the file $FGLASDIR/web/fjs/gwccomponents.css.
In the CSS reference section, you have the available styles for each widget. GWC styles are prefixed by the letter "g". Note that not all styles listed in the CSS Reference section have a default defined in the default genero.css file.
The following screenshot is the Edit demonstration program using the default template main.xhtml, which specifies the gwccomponents.css style sheet.
The following screenshot is the same program (the Edit demonstration program) without a CSS applied. Although the application is fully functional, the appearance is not as nice as the program displayed using the default CSS.
When you define a new style or redefine an existing style, you can either use LINK tags to include styles declarations defined in an external file (an external CSS) or you can declare the style directly in your HTML template using STYLE tags. When style information is read by the browser, if a style is defined multiple times and/or in multiple locations, the one with the highest weight is used. For information regarding the weight between various styles, refer to the documentation provided on the W3C site.
After creating a new style sheet in an external file, use LINK tags to include the style declarations defined in the external file. The LINK tag is added to the template. In the code snippet below, styles defined in mystyles.css override styles defined in genero.css in accordance with the priorities described in CSS standards.
...When the second link is added for the additional stylesheet, notice that we do not provide a second title attribute. Browsers such as FireFox use these titles to allow the user to select between the two defined stylesheets by the title rather than combining the two stylesheets. By eliminating the title attribute for the link, the resulting CSS is the combination of the two stylesheets. For selectors defined in both stylesheets, those selector attributes defined in the second stylesheet (line 12 above) take precedence over those selector attributes defined in the first stylesheet (line 11 above).11<link rel="stylesheet" gwc:attributes="href application/connectorURI+'/fjs/gwccomponents.css'" type="text/css" title="Default Theme"/>12<link rel="stylesheet" gwc:attributes="href application/connectorURI+'/fjs/mystyles.css'" type="text/css"/> ...
Use STYLE tags to declare a new style directly in the template file. This style will only be available to applications that use this template file.
...04<link rel="stylesheet" gwc:attributes="href application/connectorURI+'/fjs/gwccomponents.css'" type="text/css" title="Default Theme"/>...05<style type="text/css" gwc:condition="application/ui/StyleList" gwc:content="application/ui/StyleList"/>05<style type="text/css">06.mystyle {07width: 100%;08background-color: beige;09}10</style>
you can override defined styles. To override defined styles, you have to give the same selector and add new styles or redefine existing styles.
For example, here is the style declaration from the default Genero CSS for the AJAX theme (gwccomponents.css) for the selector .gDialog. This selector is for a dialog object.
.gDialog,
.gMenu {
float: left;
clear: both;
width: 95%;
padding: 0px 16px 2px 0px;
margin: 0px 2px 10px 2px;
-moz-border-radius-bottomright: 16px;
background-color: #F4F4F4;
}
To add a new style for this selector -- for example, a background color -- simply add the CSS style background-color for this selector in either a custom CSS file or in a STYLE tag in your template file:
.gDialog{ background-color: #FF0000;}
As this is a new style, it will be added to the style information read from the gwccomponents.css file for this selector. And as the selector attribute backgroud-color is defined twice (initially in the gwccomponents.css file and again in your style declaration), the one with the higher weight will be used.
You can add your own styles for any widget (form object) by adding the STYLE attribute to the widget in the form definition file. (.per file or .4fd file). The STYLE attribute value is transmitted to the HTML class attribute.
01 EDIT f001=FORMONLY.field1, STYLE="style1 style2";<input type="text" id="ge29" title="" size="17" value="" style="" class="gField gInherit gDisabled gEdit gcstyle1 gcstyle2 gEdit_gcstyle1 gEdit_gcstyle2" readonly="readonly"/>
.gcstyle1 {
border: 1px solid #00FF00;
background-color: #FF0000;
}
.gcstyle2 {
width: 100%;
}Important! While the STYLE was defined as
"style1" and "style2" for the widget (form object), the CSS must preface these
style names with "gc" (for .name) and "g" (for name, like Edit)For more information on the technical detail behind this specific topic, see Relating Styles, Classes, and Selectors.