Post on 31-Dec-2015
description
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.
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