The HTML Layout Painter

By Brian Carter

As you may know, Information Builders has now released WebFOCUS 7. One of the most feature-rich and powerful upgrades released to date, this new version of WebFOCUS offers you more than your fair share of pleasant surprises. In this article I will go over one of those surprises in the area of Developer Studio.

In prior releases of Developer Studio we had a facility that allowed you to combine reports, graphs and other elements together in a single HTML document or layout. In addition, this facility handled all of the complex development required to create a launch form for reports and graphs that contained parameters. When you wanted to create an "ad hoc" or "parameterized" report, you came to the Resource Layout Painter.

Well, all of that has changed now. But I should clarify that statement before anyone panics: What I mean is that everything about the Resource Layout Painter has changed, including the name.

Let me introduce the new and greatly improved HTML Layout Painter. This facility still contains all of the powerful and flexible features that it always had, but now there's much more. I couldn't possibly cover every new feature in this article, so I will instead concentrate on how you can "add value" to your layouts.

Before we begin, let me quickly explain the name change. One of the greatest enhancements was the fact that the tool now generates only HTML. The days of dealing with two files for every layout are over. The tool is now more of a professional HTML editor, custom-made specifically for designing a presentation layer for reports, graphs and all other WebFOCUS-generated output.

With the HTML Layout Painter, you can easily add your own custom HTML, Cascading Style Sheets, JavaScript, ActiveX and more. In addition, when any of these technologies are added, you will actually see the results right in design view. Think about how easy it will now be to add styling, validation, predefined HTML templates and then customize them as needed.

For example, most organizations maintain a set of CSS files that contain the standard styling definitions for the entire organization, division or department. You can easily add a reference to individual CSS and JavaScript files right in the tool by using the new "CSS/Script files…" option on the Insert menu. You can add these file references and quickly check and customize the results right in the design view. The tool also maintains these files in a handy dialogue, allowing you to change the cascading order or remove any of the files at any time during development.

When creating more sophisticated layouts, more than likely you'll also have the need to add your own custom HTML. Suppose you need to add a TABLE to assist with the design of your layout or would like to use an existing template that contains your company logo, support and contact information?

You can add HTML content to your layout through two basic ways. The first would be to simply start typing. The new HTML view allows you direct access to all of the HTML code generated by the tool and, even better, allows you to manually add your own custom HTML. By clicking the HTML tab, you have access to all of the HTML code, as well as a "FOCUS-only" view that allows you to see only the embedded report or graph procedures. Yes, you can even edit the FOCUS code if you'd like!

The other way to add content is to simply point and click to the desired HTML template file you would like to add. Unlike the process for adding and removing CSS and script files, adding the contents of an HTML template can only be done once and at the very beginning of the development process. This basically allows you start the layout development process with an existing template, similarly to other popular HTML editors.

There's one important thing to keep in mind when adding HTML content to your layout. Make sure that elements such as TABLE, DIV, etc., are clearly defined. This means that the object should at minimum have an id attribute and ideally have its size and position declared.

For example, to add a DIV that you can see and manipulate in the tool, the HTML code would look something like this:

<DIV id="menuBackground" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 30px; background-color: silver;"></DIV>

This would add a silver block element to the layout in the upper left-hand corner that resembles a menu or tool bar. Since the element was properly defined, you can now select it in the tool and reposition, resize, change its style, etc. Don't forget to make sure that all elements in your templates are defined appropriately so they can be manipulated in the tool after they are added.

Another important concept to remember when creating more advanced layouts is that currently the tool will not automatically "nest" elements. Nesting refers to the hierarchical structure of an HTML document where elements are nested or contained within other elements. For example, if you have added a DIV element as discussed above, you may want use that DIV as a container for other elements, such as form controls, images, etc. The benefit of nesting elements is that the parent or container element can be repositioned and all of the child or nested elements would reposition with the parent. In addition, nested elements also inherit styling from their parents, hence the reason changing the font for the top level BODY element will cause all text elements in the document to display that font as well. Using the inheritance concept will save you a lot of time when applying or changing the style of the entire document. If you want to nest elements in your layout, you have to manually arrange the elements in the HTML code. In the example below a text box has been placed within or between the opening and closing DIV tags.

<DIV id="menuBackground" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px; background-color: silver;"> <INPUT type="text" value="Hello"> </DIV>

The easiest way is to do this is to switch to HTML view and simply cut and paste the text element within the DIV tags. Of course, this type of editing is mostly recommended for people that have experience writing HTML code. In the future we plan to allow drag-and-drop nesting and allow you to add common HTML elements such as DIV and TABLE right from within the tool.

As you can see, there are many ways you can add significant value to your layouts by using the built-in features of this powerful tool. By combining your own creative design skills with the new and improved HTML Layout Painter, it's now easier than ever to create professional and eyecatching presentation pages for your application.