1. Agenda Architecture Overview Web Security Templates Templates and Style Sheets Details Configuring an Application Demo Summary

2. Insulating Business Logic from Technology Infrastructure ASCIIWindowsX11JavaHTML WML Web Services

3. 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

4. Web Deployment Architecture Web Java Client Web ServerApplication Server WAP, I-mode, WinCE HTML BrowserWindows, X11, ASCII, or Java Database Servers Firewall

5. 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.

6. 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.

7. User Interface Elements Tool bar Menu bar & Key bar Workspace frame Message bar

8. A Template $(constant.meta-tags) $(application.name) - $(server.version) $(gui.menubar.title) $(gui.menubar.object)$(gui.keybar.object) $(gui.errorbar.object) $(gui.messagebar.object) $(gui.workspaceframe.object)

9. 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.

10. 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 tag (in HTML).

11. 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.

12. 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.

13. Using Browsers’ Capabilities Use what the browser knows to enhance your application, like JavaScript, CSS…

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

15. An Example CSS Example Hello, world !

16. HTML Preview

17. Adding a CSS CSS Example Hello, world !

18. And the Result is…

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

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

21. And the Result is…

22. Demo