Agenda

Agenda

• Architecture Overview

• Web Security

• Templates

• Templates and Style Sheets Details

• Configuring an Application Demo

• Summary

Insulating Business Logic from Technology Infrastructure

ASCII Windows X11 Java HTML HTML WML

WebServices

Application Server Displays 4gl 1 of 2 Ways:

• No Change to .per Files Uses Templates, Style Sheets and makes “BEST Guess” at the

i4gl output grid. Most applications will run with no changes.

• Custom HTML added to .per Files Still uses Templates, and Style Sheets, but will “pass through”

any HTML that is put in .per files, or embedded in a label field

Web Deployment Architecture

Web Java Client

Web ServerApplication Server

WAP, I-mode, WinCE

HTML Browser

Windows, X11, ASCII, or Java

Database Servers

Fire

wa

llFire

wall

Fire

wall

Intrinsic Security (1/2)

• No database network access needed (SQL-Net / ODBC).

• No direct Internet connection needed for the application / database server.

• On the web server there is only a tiny program installed in the CGI binaries directory of the web server.

Intrinsic Security (2/2)

• Only one trustable channel trough the firewall from web server to the web daemon.

• Logging of the Cli HTML's interactions is possible.

• Applications can run in an special definable environment with special and limited rights.

User Interface Elements

Tool bar

Menu bar & Key bar

Workspace frame

Message bar

A Template

<html>

<head>

$(constant.meta-tags)

<title>$(application.name) - $(server.version)</title>

</head>

<body>

<form $(form.parameters)>$(gui.menubar.title)<br>$(gui.menubar.object)$(gui.keybar.object)<br>

$(gui.errorbar.object) $(gui.messagebar.object)</font><br>

$(gui.workspaceframe.object)</form>

</body>

</html>

Elements of the Template (1/4)

• $(server.version)Four J's HTML Front End's server version.Example : 2.14.1a.

• $(application.name)Application's nameExample : widgetz.


• $(form.parameters)This is the internal information to be added to a form. This information permits proper processing of the result of a page. It must be included in a <FORM> tag (in HTML).


• $(gui.workspaceframe.object)The workspace frame is the heart of the application, containing all information that comes from the Dynamic Virtual Machine. Rendering methods apply directly on this area.

• $(gui.menubar.object)The standard BDL menus. It corresponds to the MENU … END MENU command.

• $(gui.menubar.title)The standard BDL menu title. It corresponds to the MENU "{title}" … END MENU command.


• $(gui.keybar.object)The keys.

• $(gui.messagebar.object)The result of the BDL command MESSAGE.

• $(gui.errorbar.object)The result of the BDL command ERROR.

Using Browsers’ Capabilities

Use what the browser knows to enhance your application, like JavaScript, CSS…

CSS

• Cascading Style Sheet• Allows you to define basic look & feel for a HTML page• Minor incompatibilities between Internet Explorer &

Netscape

An Example

<html> <head><title>CSS Example</title></head> <body> <form action="fglcl.exe?libebizdemo" method="post"> <input type="hidden" name="taskId" value="libebizdemo.73078023.1"><br> <input name="m1" tabindex=1 title="Change the infofield's class to fjs-none" type=submit value="None"> <input name="m2" tabindex=2 title="Change the infofield's class to fjs-red" type=submit value="Red"> <input name="m3" tabindex=3 title="Change the infofield's class to fjs-blue" type=submit value="Blue"> <input name="m4" tabindex=4 title="Remove the infofield's class attribute" type=submit value="Remove"> <input name="m5" tabindex=5 type=submit value="Exit"><br> <font color="#FF0000"></font><font color="#00FF00"></font><br> <table width='100%'> <tr><td><center><span class="fjs-none">Hello, world !</span></center></td></tr> </table> </form> </body></html>

HTML Preview

Adding a CSS

<html> <link rel="stylesheet" type="text/css" href="css-clihtml.css"> <head><title>CSS Example</title></head> <body> <form action="fglcl.exe?libebizdemo" method="post"> <input type="hidden" name="taskId" value="libebizdemo.73078023.1"><br> <input name="m1" tabindex=1 title="Change the infofield's class to fjs-none" type=submit value="None"> <input name="m2" tabindex=2 title="Change the infofield's class to fjs-red" type=submit value="Red"> <input name="m3" tabindex=3 title="Change the infofield's class to fjs-blue" type=submit value="Blue"> <input name="m4" tabindex=4 title="Remove the infofield's class attribute" type=submit value="Remove"> <input name="m5" tabindex=5 type=submit value="Exit"><br> <font color="#FF0000"></font><font color="#00FF00"></font><br> <table width='100%'> <tr><td><center><span class="fjs-none">Hello, world !</span></center></td></tr> </table> </form> </body></html>

And the Result is…

The CSS File

BODY {

font-family : Verdana, Arial, sans-serif;

background-color : #CCCC33;}

INPUT {

background-color : #FF6600;

font-family : Tahoma;

margin-right : 5px;

border : none;}

TABLE, TD, TR {

background: #CC6600;}

.fjs-red {

color : Red;}

.fjs-blue {

color : Blue;}

.fjs-none {}

A few Modifications…

BODY {

font-family : Verdana, Arial, sans-serif;

background-color : #C0C0C0;}

INPUT {

background-color : #0000FF;

color : #FFFFFF;

font-family : Tahoma;

margin-right : 5px;}

TABLE, TD, TR {

background: #CCCCFF;}

.fjs-red {

color : Red;}

.fjs-blue {

color : Blue;}

.fjs-none {}

And the Result is…

Agenda

Documents

Transcript of Agenda