Transcript Four J`s
Agenda
• Architecture Overview
• Web Security
• Templates
• Templates and Style Sheets Details
• Configuring an Application Demo
• Summary
Insulating Business Logic from Technology
Infrastructure
ASCII
Web
Services
Windows
X11
Java
HTML
HTML
WML
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 Server
Firewall
Firewall
Firewall
Application Server
Web Java Client
WAP, I-mode, WinCE
HTML Browser
Windows, X11, ASCII, or Java
Database Servers
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 name
Example : widgetz.
Elements of the Template (2/4)
• $(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).
Elements of the Template (3/4)
• $(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.
Elements of the Template (4/4)
• $(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…
Demo