The Genero Web Client allows developers to create applications using the Genero Business Development Language (Genero BDL) and deliver the applications as web applications. To deliver a Genero application as a web application, the Genero Web Client must render the application as an xHTML-based application.
This section presents the main concepts that drive a Genero Web Client project. Genero Web Client uses a template for rendering. There are four main parts to Genero Web Client rendering: generated HTML (core), CSS (look), JavaScript (widgets shaping and behavior), and template language.
The following provides a general explanation of the steps taken when the Genero Web Client delivers an application, starting with the user entering in the URL and ending with the application displayed in the user agent (browser).
The end user requests the application by entering the appropriate URI in the user agent (1).
The request for the application is routed to a Genero Application Server. If a Web server is involved, the Connector configuration file routes the application to the correct application server. The Genero Application Server's configuration files contain the information about which themes are to be used for the requested application. (2)
Unless explicitly specified by the URI or the application configuration, the appropriate theme is selected based on the type of user agent (desktop browser, PDA, and so on). The auda.xrd file is responsible for selecting the appropriate theme for a specific type of user agent. (3)
In the GAS configuration file, a theme is defined by a TEMPLATE and a series of SNIPPETS. The template file in turn provides the references for any JavaScript and CSS files. (4)
The GAS, meanwhile, has started a DVM to serve the application. The DVM creates the AUI tree (Abstract User Interface describing components and behaviours), which is sent to the Genero Application Server. (5)
The Genero Web Client's snippet-based rendering engine uses the AUI tree (provided by the DVM) and the template and snippet files (specified by the application's configuration in the GAS configuraiton files) to create an XML / xHTML document that is passed to the user agent. (6, 7)
Any JavaScript and CSS is applied to the xHMTL file by the user agent before displaying the application to the user. (8)
A template is an xHTML file that displays your application through a browser, using a Genero front end. A template defines how and where your application is displayed inside a HTML page. Genero Web Client has a default template showing the current application window.
With the old rendering engine, we focused on layout change based on container selections. We need to ensure to change that to concentrate on speaking of snippets based rendering offering complete flexibility around HTML generation.
The following template example is an excerpt of the default template file provided at installation for the DUA_AJAX output map, $FGLASDIR/tpl/set1/main.xhtml.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright 2006-2008 Four J's Development Tools. All Rights Reserved. -->
<html xmlns:gwc="http://www.4js.com/GWC" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<gwc:dummy
gwc:omit-tag="true"
gwc:define="
tplImages application/connectorURI+'/fjs/set1/img/';
...
"
>
<head>
<title gwc:condition="application/ui" gwc:marks="title [application/CID, (application/ui ? application/ui/text : '')
+ (application/ui/window ? ' - '
+ application/ui/window/name : '')]">Genero Web Client</title>
<meta http-equiv="Content-Type" gwc:attributes="content XPathConfig('/APPLICATION/OUTPUT/RENDERING/MIME_TYPE/text()')+'; charset='+document/encoding" />
<script type="text/javascript"> var gwc = { initTime:new Date().getTime(), cfg:{} } </script>
<script type="text/javascript">
gwc.cfg.development = <span gwc:replace="server/development"/>;
...
</script>
<script type="text/javascript" gwc:attributes="src application/connectorURI+'/fjs/gwccomponents.js'" defer="defer"> </script>
<script type="text/javascript" gwc:attributes="src application/connectorURI+'/fjs/gwccore.js'" defer="defer"> </script>
<link rel="stylesheet" gwc:attributes="href application/connectorURI+'/fjs/gwccomponents.css'" type="text/css" title="Default Theme"/>
<link rel="shortcut icon" gwc:attributes="href application/connectorURI+'/favicon.ico'" type="image/x-icon" />
...
<style type="text/css" id="gStyleList"/>
</head>
<body
gwc:marks="
_href document/URL;
launch application/meta/launch?[application/CID,application/meta/launch/url+'?t=']:null;
processing application/state/processing && noop(document/URL)?[application/CID]:null;
interactive application/state/interactive && noop(document/URL)?[application/CID]:null;
end application/state/ended/normal?[application/CID]:null;
style application/ui ? [application/CID, application/ui/StyleList] : null;
"
gwc:attributes="
class (!isIe6 ? 'gHasContentBoxModel' : '') + (isIe6 ? 'gHasBorderBoxModel' : '');
"
>
<!--noscript><br/><br/> Your browser must support javascript.</noscript-->
<input type="hidden" id="gSuaURL" gwc:attributes="value document/URL"/>
...
<!-- Application ending -->
<div gwc:condition="application/state/ended" class="gEnding" gwc:content="includeSnippet('EndingPage')" />
<gwc:dummy gwc:omit-tag="true" gwc:condition="application/ui">
<!-- Application user interface -->
<!-- first the topmost normal window -->
<div gwc:condition="application/ui/topmostNormalWindow" gwc:content="application/ui/topmostNormalWindow" />
<!-- second, each modal window -->
<div
gwc:condition="application/ui/window && ( !application/ui/topmostNormalWindow || application/ui/topmostNormalWindow && application/ui/window && application/ui/topmostNormalWindow/name != application/ui/window/name )"
gwc:content="application/ui/window"
/>
<div gwc:condition="application/ui/StartMenu" gwc:replace="application/ui/StartMenu" />
</gwc:dummy>
<!-- File Transfer -->
<div class="gFiles" gwc:condition="application/meta/fileTransfer/currentFiles/length" gwc:content="includeSnippet('FileTransfer')"/>
<!-- Errors -->
<fieldset style="float:left; clear:both" gwc:condition="document/errors">
<legend>Errors</legend>
<pre gwc:content="document/errors" />
</fieldset>
</body>
</gwc:dummy>
</html>
Cascading style sheets (CSS) are used to format xHTML pages. If you are not familiar with this technology, please refer to the W3C web site at www.w3.org.
Genero Web Client uses CSS to place and shape widgets. The menu buttons are displayed flat, thanks to a CSS style:
Excerpt from gwccomponents.css:
01.gDialog,02.gMenu {03float: left;04clear: both;05width: 95%;06padding: 0px 16px 2px 0px;07margin: 0px 2px 10px 2px;08-moz-border-radius-bottomright: 16px;09-moz-border-radius-topright: 16px;10background-color: #F4F4F4;11}
Any INPUT inside an element of the class menu has no border.
The widget shaping includes widget states. The following screenshot illustrates noEntry and other states for input fields:
Thanks to the snippet concept, developers can add any kind of CSS class to their generated HTML code - you are not limited to the CSS provided by default.
GWC is able to interact with the browser using the browser framework (HTTP, HTML Forms, and so on) named Page Mode. GWC will provide the browser a complete xHTML page describing the current 4GL application state. JavaScript could be used, in this case, on the browser side for any purpose such as a calendar pop-up or input control as picture, format, and so on.
GWC is also able to interact with the browser using a JavaScript framework. In this case, the GWC provides to this JavaScript framework incremental HTML modifications (according to the template and template snippets) and some dialog structures directly issued from the DVM. The JavaScript framework can then have a more 4GL-like behavior.
We provide a template/snippets customization set with a complete JavaScript FrameWork. You will be able to customize widgets dynamic behaviour by modifying JavaScript hooks, but in reality main modifications can (and should) be done mostly on snippets and thru CSS.
The template language has been introduced to integrate web-designed pages and extend generated HTML capabilities. The selection criteria are:
This language is used in templates and snippets. It is interpreted by the Genero Web Client engine which generates new HTML code. You can perform instructions ranging from simple condition tests to loop on table lines.
There are three types of items: template instructions, template expressions, and template paths.
A template instruction is a predefined attribute added to a HTML tag. It defines how the HTML tag is interpreted.
Syntax
<tag gwc:instruction="expression" ... > ... </tag>
Example
01 <div gwc:replace="window"></div>The template instruction is gwc:replace. This is an instruction to replace the <div> tag with the HTML code for the current window.
A template expression is the template instruction value. It can be a string, an operation, or a conversion function.
Example
01 orientation=='horizontal'?'':' gRadioGroupVertical'This conditional expression returns an empty string if the value of orientation path is horizontal otherwise it returns gRadioGroupVertical.
The template path is used to access an element of the current application. The element can range from the entire application window to a field value in a table.
Example
01 <title gwc:content="application/ui/window/text">Title of the page</title>The template path is application/ui/window/text, returning the title of the window.