Designer 2.1.2: Web Generate those Titles

By Hervé Deschamps, Oracle Corporation.

When I generated my first few web pages using Oracle Designer 2.1.2. I thought that there was not much flexibility to customize the presentation of the pages. Overtime I found a number of techniques that provided me with the flexibility that I required. In this article I show how to use the PL/SQL Package List preference to give you a free hand to include any HTML and JavaScript in the modules generated by Designer. To help the reader I also backup my words with pictures of the results.

Getting rid of the duplicate titles

This was the first challenge that I met. I needed modules to show 2 titles: the application title and the module title.

Figure A shows an example of the best I could get with the standard preferences values.

Figure A

First try at our web module.

In Designer’s jargon, what you see in figure A is the startup page of the module. It is the first page of the module that the users see when they launch it. The presence of these duplicate titles in the startup page prompted me to learn how to customize the presentation of modules.

First, I needed an application title on all my web pages. I achieved this by setting 2 of the generator preferences for Web generation: standard header and standard header on all pages. I did this using the Design Editor. Figure B illustrates this tool.

Figure B

Setting preferences in the Design Editor.

I will use more preferences in the continuation of this article. As preferences are organized in a 2 level hierarchy, I made up a notation to help you locate the preferences that I am setting. To describe what figure B illustrates I would write: set Header and Footer à Standard Header on all Pages = Yes; set Header and Footer à Standard Header = htf.bold('<H1>Lab Application</H1>').

Removing the duplicate title turned out to be a little bit more tricky. There are 2 module properties that are used by Designer to construct titles: the Startup Page title and the Hyperlink Text. As I had both properties set to "Maintain Employees in Practice" I tried erasing text in the startup page title property. Well, to my astonishment, Designer kept generating duplicate titles for my Web page. So I tried erasing the Hyperlink text too. That worked: the startup title went away, but my cure had unacceptable secondary effects. The Hyperlink text is used by any link to this module, for example: menu items. Because I erased this text, the generated web page displayed the link to the users using the module name! Module names are never particularly user friendly….

So instead of removing useful text from the module properties, you need to set one of the startup page preferences: ‘Startup Page: Title Format’. The Designer online help recommends setting this preference to "." for no title to be generated. Unfortunately, the browser displays a dot that takes up a lot of vertical real estate on the web page.

In order to not display any title at all, you have to use a mechanism that solves a lot of other web problems: the PL/SQL Package List preference. You can get Designer to include any HTML or JavaScript code in the module that it generates by creating a package of functions that return varchar2. All you have to do is put the package name in the PL/SQL Package List preference and include the calls to your functions in the "right places" in the module definition. The "right places" are usually user text areas, titles, headers and footers.

So I set Text Handling à PL/SQL Package List = wfs_weblib, and Startup Pageà Title Format = wfs_weblib.no_title. Wfs_weblib is my package. No_title is a function that returns null. The code can be found in Listing A.

Listing A

create or replace package wfs_weblib as
function no_title return varchar2;
end wfs_weblib;
/
create or replace package body wfs_weblib as
function no_title return varchar2 is
begin
return null;
end;
end wfs_weblib;
/

PL/SQL code for wfs_weblib.no_title.

Figure C illustrates the layout of the module when I generate it again. We now have an application title -- Lab Application – and a module title – Maintain Employees in Practice.

Figure C

Success: The desired layout.

More on Heading Text

Very often the first screen that users see when they logon needs to contain friendly text that highlights some important aspects or limitations of the system. This may require the use of any of the following: colors, larger fonts, bold, underline, etc.

There is a quick and easy way to get the exact presentation that you want without being an HTML expert: put the layout together in an HTML editor like Netscape. An HTML editor is an excellent environment to tune the color, sizing and positioning of the textual and graphical elements of your display.

Once this is done, ask the editor to view the source of your page. To do this using Netscape, select menu option Viewà Page Source. Listing B shows an example of HTML code that I produced using this technique:

Listing B

<B><FONT COLOR="#006600">Welcome the Herve's Lab Application!</FONT></B>
This is prototype application for the purpose of illustrating techniques. <U>
<FONT SIZE=+2>It is not a stable functioning system!</FONT></U>
<P>You can use this page to view or update information about positions within practices.

HTML code for a better page header.

The last trick is to know where to put that HTML in the module definition. He it goes: in the Design Editor, double click on the module. A dialog should appear on the screen. The dialog title is "Edit Module <module name>". If you do not get this dialog but see the property palette instead, select menu option: Optionsà Use Property Dialogs and double-click on the module again. There are five tabs in the module dialog: Name, Titles, Files, User Text, Module Network. Choose the User Text Tab, select text location Default Area and paste the HTML code in the User Text field. Press the Finish button to save your work.

Figure D illustrates the first result I achieved when I generated my module. Not exactly what I expected. But this is very easy to fix.

Figure D

A nearly successful attempt at generating HTML Code.

I set preference Text Handling à Substitute HTML Reserved Characters = No and generated again. Figure E shows the final result.

Figure E

Generating HTML Code in you page headers.

Last Note

There is much more to be achieved if you expand on this technique. You can use tables for advanced layouts and include pictures, sound, even video sequences as long as you take care of the plug-in aspects. You can also include JavaScript code or Java applets (more on that in future articles). You can basically go as far as HTML will let you go and much further with XML in the future . The other limit to bear in mind is to only use code that most significant browsers understand. For example, if you use HTML layers, remember that this is a Netscape construct. Microsoft Internet Explorer will not recognize it.

Hervé Deschamps is a Senior Principal Consultant with Oracle Corporation. He has had over five years of experience with Oracle Development Environments (Designer, Developer 2000 and their previous versions). He specialises in tending towards 100% Generation using Designer for both web and client server applications. You can reach him by e-mail at herve@iherve.com. He also maintains a web page full of articles, scripts, tips, techniques at: http://www.iherve.com.