Download
1 / 22
220 likes | 292 Views
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. Web Services.
E N D
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 Web Services
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 Firewall Firewall Application Server Web Server WAP, I-mode, WinCE HTML Browser Windows, X11, ASCII, or Java Firewall 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 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>
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>
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 {}
