WebFOCUS Maintain: A Cascade of Style
By Bob Jude Ferrante
Here’s something I’ll bet you didn’t know. Which HTML-generating part of WebFOCUS had Cascading Style Sheet support before any other? If you say, “reporting,” sorry! It’s WebFOCUS Maintain.
Yes, it’s true. WebFOCUS Maintain has used internal CSS style sheets to apply style to form elements in generated forms since release 4.3. So why the hoopla now?
In Release 5.2.3, we’ve given you the ability to use external style sheets – you know, those little styling Swiss Army knife things nearly every modern corporation has peppered all over its Web sites. Yes, that means you can now use an external style sheet to format your WebFOCUS Maintain forms.
But before you start, first, a little orientation for those new to CSS.
Understanding CSS
If you were going to design a way to format an HTML document that would work across multiple pages, you’d probably come up with something a lot like CSS. It’s a truly well-designed approach. And quite easy to understand.
CSS has two parts. There’s a selection dialect, which lets you pick and choose what elements in the HTML document you want to format. Then there’s a formatting dialect, which controls what you do to each thing you select.
The selection dialect follows the basic structure of HTML. For example, if you just want to format everything a particular way, you can select something high up in the document hierarchy. Let’s use BODY. All of a document’s content is contained in BODY. So if you apply a style to BODY, you are formatting the entire
document with a single set of rules.
But what if you just want BODY to be a default rule, and to have exceptions to that rule? Ah, that’s where other selectors come in. For example, if you want to style all level-1 headings a particular way – a different way than you are styling the BODY – you could create a separate selector for H1.
The basic power of CSS is that you can create separate selectors for nearly every type of thing in an HTML file. We call these generic selectors, because they select everything of a particular type. You can create these generic selectors for every type of element in your HTML files.
There is also a second kind of selector – class selectors. Why would you want to use them? If you want to treat different examples of the same type differently, for instance by function, classes are really handy. Let’s look at an example. Say you have a Web form and you want your users to be able to visually
differentiate between read-only and read/write edit boxes. You can just designate two classes – let’s call them ReadOnly and ReadWrite and set each edit box to use one of these. So your read-only edit boxes can look one way, and your read/write ones a different way.
As for the formatting dialect in CSS, it’s quite simple; there is a whole vocabulary of keywords that control literally hundreds of aspects of HTML; you may control font family, size, style, and weight; make things invisible or transparent; change their foreground and background colors; and a host of other things.
Here is some sample CSS formatting vocabulary – see if you can guess what it controls:
body {
background-image: url(dynCalendar.gif);
background-position: center;
background-repeat: no-repeat;
font-family: Arial;
font-size: 12pt;
font-style: normal;
font-weight: normal;
background-color: Aqua;
color: Blue;
}
How WebFOCUS Maintain Supports CSS
What Controls to Style
When WebFOCUS Maintain generates HTML from the forms you create in MDE, it uses the following native HTML controls for each WebFOCUS Maintain control type (Use this list as a rule of thumb when designing your generic CSS Selectors):
 |
Combo and list boxes: SELECT element list with contained OPTION elements |
|
Radio buttons: INPUT element of type RADIO |
|
Text/Edit box: INPUT element of type EDIT
|
|
Buttons: INPUT element of type BUTTON
|
|
HTML Table: TABLE with contained TR and TD elements
|
|
Text/Labels: DIV with a contained P element
|
Formatting with CSS in WebFOCUS Maintain involves two new commands. The first binds your form to a CSS file, using this syntax:
WINFORM SET MyForm.CSSName to ‘cssname’.
Yes, the keyword is CSSName, which is literal. CSSName can be:
|
A simple file name (if you use this, the file must be on the Web server in the application that launches the page) |
|
A relative addressed file name (\path\path\file) (if you use this, the file must be located on the same Web server as the application that launches the page.) |
|
A fully qualified HTTP or HTTPS server and URL (with this, you’re being really specific about where the file is, but you’ll never have problems unless the listed Web server is down)
|
|
And note, yes, you can use a scalar variable to contain any of these paths |
Setting the Class
You have a lot of control over what class is assigned to every single control on your WebFOCUS Maintain forms. You can specify a class, or force the object to use a default selector. If you do not explicitly do something to the class for any control on your form, that control will be formatted with
the same factory default class names as were used in Release 4.3.
To set class for any control or form, use the following syntax:
WINFORM SET Form1.[control.]CSSClass to ‘classname’.
Note that the “control” keyword above is inside square brackets. That’s because it’s optional. You’d leave it off if you were assigning a class to the form itself — which actually lets you assign a class to the HTML BODY.
Here are the guidelines the server uses when it generates class information:
|
If you do not set a class at all; the WebFOCUS Maintain server uses default class name for control (i.e., IWCStaticText for text labels)
|
|
If you set the class specifically, the server writes a CLASS=yourclassname tag to the HTML control |
|
If class is set to blank " ", the server does not set the class, and instead uses the default selector
|
A Demo Application
You can download sample application files for this simple demo. The demo shows how you can switch CSS files dynamically at runtime and watch as the browser reformats your WebFOCUS Maintain forms.
Examples are shown in Screens 1 and 2.
Screen 1
Screen 2
Let’s See the Code
The sample includes two forms – a launch form called frmMenu, with which you can pick the style sheet, and a sample data entry form called frmCSSDemo, which displays the effects of the styling.
FrmMenu has a case dispCSSDemoForm, which sets all the classes for the form:
case dispCSSDemoForm
Winform Show_inactive frmCSSDemo;
winform set frmCSSDemo.CSSName to sheetname;
winform set frmCSSDemo.CSSClass to ' ';
winform set frmCSSDemo.Heading_Text.CSSClass to
'heading';
winform set frmCSSDemo.Moviecode_Text.CSSClass to 'label';
winform set frmCSSDemo.Title_Text.CSSClass to 'label';
winform set frmCSSDemo.Category_Text.CSSClass to 'label';
winform set frmCSSDemo.Director_Text.CSSClass to 'label';
winform set frmCSSDemo.Rating_Text.CSSClass to 'label';
winform set frmCSSDemo.Reldate_Text.CSSClass to 'label';
winform set frmCSSDemo.Wholesalepr_Text.CSSClass to 'label';
winform set frmCSSDemo.Listpr_Text.CSSClass to 'label';
winform set frmCSSDemo.Copies_Text.CSSClass to 'label';
winform set frmCSSDemo.Moviecode_Edit.CSSClass to
winform set frmCSSDemo.Title_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Category_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Director_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Rating_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Reldate_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Wholesalepr_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Listpr_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.Copies_Edit.CSSClass to 'Edit';
winform set frmCSSDemo.btnSave.CSSClass to 'button';
winform set frmCSSDemo.btnDelete.CSSClass to 'button';
winform set frmCSSDemo.btnClose.CSSClass to 'button';
Winform Show frmCSSDemo;
endcase
Note that sheetname is a scalar variable defined by a user’s selection from a drop-down list displayed on frmMenu. If the user changes the value in a drop-down list of CSS files, sheetname is reset:
Case OncmbStyleSelector_Change
sheetname = 'http://ferrante/approot/cssdemo/' | sheet;
EndCase
And of course there’s a button to show the styled form once the user has selected the sheet:
Case OnbtnShowCSSDemoForm_Click
dispCSSDemoForm( );
EndCase
Wrapping Up…With Style
With CSS support, the possibilities for formatting entire applications or suites of applications easily are now open to the world of WebFOCUS Maintain applications. In addition, it’s easier than ever to make your WebFOCUS Maintain applications fit into the look and feel of your standard enterprise
Web sites.
Try the CSS capabilities for yourself; once you get started using this powerful tool, you will wonder why you ever formatted HTML any other way. And naturally, you’ll be showing off your newfound Web design skills to others in no time!
 
|
