When the GAS displays an application with the GWC, it detects the type of browser being used to display the application and applies the appropriate theme to render the application correctly for that browser type. This section discusses the use of themes, maps, templates, and snippet sets and the browser types they support.
"Snippet sets are adapted to the different classes of Web browsers."
When the GWC displays an application in a browser, it identifies the browser type or class and, based on that browser type, uses a theme (a specific set of template and snippet files) to render the application. The Genero Web Client installs with five pre-defined snippet sets (described below); you can customize those snippet files or you can create your own theme and snippet set. After determining the browser type, the GWC uses the information provided by the auda.xrd file to select the theme to use.
Within the GAS configuration file, the association is made between the THEME, a MAP, and the TEMPLATE and SNIPPET files.
See also:
The GAS installs with default snippet sets.
The AJAX theme is based on a JavaScript framework. It provides your applications with a Genero experience that closely resembles the Genero Desktop Client experience, but provides it in a Web 2.0 environment. The AJAX theme should work with all desktop browsers. Applications displayed in a FireFox browser should display as expected. Applications displayed in Internet Explorer (IE6 and IE7) are largely functional, however be aware that some layout problems exist. Safari and Opera support is currently at an early stage.
Note: Starting with 2.11, there is a new output map DUA_AJAX_HTML specifically made for IE special features like Canvas. This theme has the same functionality as the DUA_AJAX theme has for the other browsers.
The PDA theme does not require JavaScript. This theme should be used for PDA and SmartPhone browsing. It is tested on a Windows Mobile 5 PDA.
The PDA theme is based on pages exchanged with the Web server. As a result, some Genero features cannot be rendered as they are on a Desktop client (autonext, picture, triggers execution, focus-based actions, and so on). In some cases, your applications might behave differently than it would if delivered by a Desktop client. We have set up a server side algorithm to support legacy applications as close as possible to the Desktop clients and we will continue to improve this support.
The PDA theme also modifies the layout of your application to fit on a PDA screen. For example, tables and HBoxes are "verticalized". A table does not display as a traditional table; the PDA theme displays each column on a separate line. This is a designed behavior, created because most PDA devices do not have screens wide enough to handle a traditional table layout.
The PAGE theme does not require JavaScript and offers a Web 1.0 non-intrusive (no CSS) rendering for your application. This theme is based on pages exchanged with the Web server (like the PDA theme). Examining the PAGE theme and its snippet set is the best way to understand our new rendering engine principles. Feel free to play with it and modify it.
Note: Starting with 2.11, there is a new output map DUA_PAGE_HTML specifically made for IE special features like Canvas. This theme has the same functionality as the DUA_PAGE theme has for the other browsers.
To see an application rendered by each of these themes, launch the Demos application.
Example:
01<?xml version="1.0"?>02<html xmlns:gwc="http://www.4js.com/GWC" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">03<head>04<title gwc:condition="application/ui"05gwc:marks="title [application/CID, (application/ui ? application/ui/text : '')06+ (application/ui/window ? ' - ' + application/ui/window/name : '')]">Genero Web Client</title>07...08</head>0910<body ... >11...12<!-- Application ending -->13<div gwc:condition="application/state/ended" class="gEnding" gwc:content="includeSnippet('EndingPage')" />14...15<!-- first the topmost normal window -->16<div gwc:condition="application/ui/topmostNormalWindow" gwc:content="application/ui/topmostNormalWindow" />17...18</body>19...20</html>
Notes:
<div
... gwc:content="application/ui/topmostNormalWindow" /> section will
add the application
window.