Agenda
Download
1 / 22

Agenda - PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Agenda' - eaton-benton


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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

Web

Services


Application server displays 4gl 1 of 2 ways
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 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
    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
    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
    User Interface Elements

    Tool bar

    Menu bar & Key bar

    Workspace frame

    Message bar


    A template
    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
    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
    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
    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
    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

    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
    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
    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
    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
    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 {}




    ad