Designing Your Own Update Assist "Skin"

By Bob Jude Ferrante

Hopefully you’ve seen my previous two WebFOCUS Newsletter articles about the Update Assist capability in Developer Studio. Update Assist implements a framework for nonpersistent update applications using WebFOCUS Reporting and WebFOCUS Maintain.

You’ve seen Update Assist’s capabilities: In less than five minutes, you can design a complete and richly functional update application that lets your users navigate through tens or even hundreds of thousands of records, with customizable search to find what they’re looking for fast, and with browser-based tree navigation, as well as user input support that includes dynamic (database populated) lists, data-type validation, and pop-up calendars for dates.

You’ve also met the “skins,” the selectable look and feel for your update applications. WebFOCUS 5.2.1 shipped with a set of four skins, and 5.2.5 will have a total of 19. We were able to get the set bumped up so quickly as a result of an interesting new capability in the latest versions of Update Assist – the ability for developers to create their own skins. That capability is what we will discuss today.

The Components of an Update Assist Skin

Before we try to create our own, let’s have a look at an existing skin and view its components. To start, please have a look at the folder \ibi\DevStudio52\Templates\Skins\ and see what’s underneath (Screen 1). You’ll see a group of directories. Let’s look inside one, the mnt_blue skin folder (Figure 1).

File	What It Does
mnt_blue.skn	An XML file that defines the components used in the skin, sets the skin's metrics (placement of objects on the forms and their layout), sets positioning for the navigation views (three views – Tree, Combo Box, and Edit Box – are controlled here), and does other nice things.
mnt_blue.css	The skin's Cascading Style Sheet file. This controls coloration, fonts and font sizing for displayable items in an application's forms, form prompts, and navigation elements. (For more about how these interoperate with WebFOCUS Maintain, please see my article in the December 2003 issue of the WebFOCUS Newsletter, "WebFOCUS Maintain: A Cascade of Style.")
mnt_blue.gif mnt_blue_new.gif mnt_blue_save.gif etc.	GIF and JPG files. If you view them in Thumbnails view in Windows Explorer, you'll see that these constitute the button, heading, and background images consumed by applications that use this skin.

Before You Start

To create a skin, it’s strongly recommended you have two tools available. Unfortunately, all these tools cost money, but if you’re going to be working with XML and CSS, they are well worth the money. After all, you’re now a Web application designer, so you’ll need Web tools.

	An XML editor (such as XMLSpy or ArborText)
	A CSS editor (such as the one in Dreamweaver or a standalone editor like TopStyle)

If you can’t spring for tools, both these file types can be edited in a plain text editor.

Getting Started

It’s possible to create a new skin from scratch, but far easier to create one by copying an existing skin. Let’s start by copying the mnt_blue skin to a new skin folder, and take it from there.

1.	In Windows Explorer, right-click the mnt_blue folder, select Copy, then click the main Skins folder, right-click it, and select Paste. You’ll now have a folder called Copy of mnt_blue. Right-click this folder, select Rename, name it mnt_my_skin.
2.	Rename the mnt_blue.css file to mnt_ my_skin.css (Screen 2) and mnt_blue.skn file to mnt_my_skin.skn. You can leave the additional GIF files in place or delete them.

Building the XML (SKN File)

Open the mnt_my_skin.skn file in your XML editor. The skn file is an XML format that determines the components used in the skin and various metrics about their placement. There are a lot of properties in there, but the ones that will jump out right away are the ones that affect the components used in the skin.

Setting Up the Skin’s Metadata

Find the properties in the file listed in Figure 2 and make the indicated changes.

Property	Change To:
skin > name	mnt_my_skin
skin > title	My own customized Update Assist skin
skin > stylesheet	mnt_my_skin.css
skin > preview	mnt_my_skin.jpg
skin > author	Your name (or "your name" if you wish!)
skin > company	Your company
skin > revisiondate	The date you want to log for this skin

Changing the Graphics Referenced

There is a set of graphical buttons referenced in the skn file for the New, Edit, Delete, Save, and Search buttons in any applications that will use this skin. You can specify new graphics by modifying the pic properties for these buttons. For clarity, we strongly recommend you name your graphic files after the skin and append the button’s function, so the active Edit button for mnt_my_skin would be named mnt_my_skin_edit.gif, and the grayed-out New button would be named something like mnt_my_skin_newoff.gif. Go through the skin file and change the references to the graphics.

One more word about button graphics. You have the option of not using graphical buttons and, instead, simply use standard browser push buttons. To specify these, leave the pic and grey_pic properties completely empty and specify the text properties for these buttons instead. Have a look at the mnt_none skin, which uses this technique.

Blocks are the areas on the WebFOCUS Maintain forms in which controls appear. For example, the large area that contains text entries and drop-down lists for data entry is called the “data block.” The other blocks are the search block, search results block, and the action heading block. You have the ability to specify a separate heading for each type of block via its headpic property. In a generated application, the headpic is automatically stretched to the full width of the block. You can also specify background pictures for each block via its backpic property. Putting a value here ensures that the background picture is used for the block, but doesn’t make it appear in the finished application. To do that you’ll need to also modify the CSS for the block style; the CSS also lets you have more sophisticated control over the block’s look and feel.

For XML Experts

Also note there is a single file in the root Skins folder, SkinML.xsd. If you’re creating a new skn file from scratch, you’ll want to bind your skn file to this schema. This is the XML Schema that determines the valid structure of a skin file. If you use an XML editor to modify an existing skn file, the schema helps you edit the entries (it contains prompts that tell you what each property does) and keeps your entries valid for the XML parser.

Modifying the Cascading Style Sheet

The Cascading Style Sheet (CSS) file controls the fonts and font sizes used for the various elements in the WebFOCUS Maintain forms and the navbar files. The style classes to modify are shown in Figure 3 below.

Class or Selector	Controls
Body	The Maintain form overall properties (including general fonts and colors), as well as the background graphics used.
Body.navbar	Control's the navbar's overall properties (fonts and colors).
A	The look of hyperlinks. The subclasses hover, focus, and visited control the look of hyperlinks when the mouse hovers over them, when they take the focus, and after they've been visited.
div.Block	The general look of the blocks. You can get pretty fancy here! For example, if you look at the new skins that are included in the 5.2.5 service pack, you'll notice the Fountain style, which uses semitransparent blocks over a picture background – very pretty.

Drawing the Graphics

To draw the graphics used for your new skin, you can use any standard drawing package such as the Paint program that comes with Windows, which does a fine job. Remember to use a Web-standard graphics format, such as GIF or JPG, and to name the graphic the exact same way it was referenced in the skn file. Otherwise you will get errors when trying to generate an app from the skin.

Finally, you’ll need to create a preview graphic for your skin. This way, anyone browsing the skin selector in Update Assist will be able to have an idea of what a finished application that uses the skin you created will look like.

Putting It All Together: Using the New Skin You Made

To finish up, make sure all files have been placed in the mnt_my_skin directory. Now we’ll test the new skin.

Select a Master File description (I typically use movies.mas). Right-click the master file and select Update Assist. The wizard should appear momentarily. Use the same procedure steps as found in my first Update Assist article in the WebFOCUS newsletter, except when you get to the step where you select the skin, stop.

About the Sample Files for This Article

By the way, there’s a separate ZIP file you can download here, which contains the sample new skin as used in the pictures. Have a look at it, and also go exploring in the existing skins to learn more.