Copy the webMethods look-and-feel in your own package Web pages

By Igor Androsov

Introduction

Every webMethods package can serve Web pages -- just think about the Administrator (WmRoot) or the Database Configuration screens (WmDb). You, too, can build Web pages and launch them directly from the Administrator.

This webMethods Ezine article discusses how a developer can modify webMethods services and Web pages to build a custom menu item in the Administrator and use that menu to launch Web pages that have a webMethods look-and-feel.

The to this article is the User Interface Wizard and it performs all of the work for you through four easy steps:

Pick the package for which to build a webMethods look-and-feel UI
Name the menu items as it will appear in the left-side pane
Name the links in the menus and provide URLs for each
Edit the generated HTML as required

When you are finished, your package will have its own user interface that resembles the webMethods Integration Server's own Web pages.

If you are anxious to get started, go ahead and download the and test it out. Reading the article, though, may help to give a better understanding and stimulate your creativity.

How a webMethods Web page is built

Launch the Administrator from any browser at http://serverhost:serverport. The Administrator will resemble the following:

webMethods Integration Server Administrator

The screen shot above is actually built from Web pages and DSPs in the directory /packages/WmRoot/pub/. The physical URL of the Administrator is http://serverhost:serverport/WmRoot/.

This Web page is a composite of several pages:

Index.dsp -- Main page that uses a <FRAMESET> to build three frames in the browser window.
Menu.dsp -- Left-pane menu for package and configuration navigation
menu.js.txt -- Javascript functions for governing the Menu.dsp code
Top.dsp -- Top-pane menu for configuration management

The mimics the functions of the WmRoot index.dsp Web page. It allows you to build a home page for your package that shares webMethods style and design.

The left-pane menus

One key element of webMethods' style is the use of left-pane menus. The creates the left-pane for you, but it is good discussion to understand what the package is doing. You may want to make your own edits to the code, after all.

The left-pane menu is controlled in "menu.dsp" with the following piece of code:

1 <script src="menu.js.txt"></script>
2 <style>
3 body {     border-top: 1px solid #97A6CB; }
4 </style>
5 </HEAD>
6 %invoke wm.server.ui:mainMenu%
7 <BODY CLASS="menu"
  onload="initMenu('%value buttonUrls/sections[0]/submenu[0]/url%');">

Notice the invocation of wm.server.ui:mainMenu on line 6.

I have done the research so you don't have to -- this service has one output, a Record named buttonURL whose structure is shown below.

The webMethods Record buttonURL
Structure of the Record buttonURL

buttonURL contains the details of the left-pane menu items, including the menu section title and its respective sub-links. It is the output of line 6 and is referenced in line 7, its value passed to the Javascript function initMenu.

Knowing how the buttonURL Record is used , we can build a custom service to generate a Record named buttonURL and then pass that Record into the modified menu.dsp file below. The modified file is what employs.

1 <script src="menu.js.txt"></script>
2 <style>
3 body {     border-top: 1px solid #97A6CB; }
4 </style>
5 </HEAD>
6 %scope param(filename='./packages/packageName/config/ui.cnf')%
7 %invoke packageName.folderName:addMenuItemsToMenu%
8 <BODY CLASS="menu"
  onload="initMenu('%value buttonUrls/sections[0]/submenu[0]/url%');">

In the modified menu.dsp, line 6 is setting an input variable named filename which is used as input to line 7's invocation of packageName.folderName:addMenuItemsToMenu. Line 8 uses line 7's output (buttonURL) as input to the Javascript function initMenu.

Deconstructing the Record buttonURL

To make the best use of the Record buttonURL, let's look more closely at its structure:

The webMethods Record buttonURL
Structure of the Record buttonURL

The root node has one child, a repeating node named "sections". For each menu item to add to the Administrator, there will be a "sections" sub-node.

There are three children of "sections". They are as follows:

name -- The name of the menu item for display in the browser window.
text -- The name of the menu item for display in the browser window. As a sub-node of "sections", "text" should be identical to "name".
submenu -- A repeating sub-node for links in the menu item.

The repeating sub-node "submenu" itself has four children and their content is straight-forward.

name -- Numerical order of the items
text -- Clickable text in the menu item
url -- The URL to which the text points
help -- The URL to which the"Help" link in "topmenu.dsp" points.

[1] 2 Next>>

Go Deeper on the Subject: The wMUsers Discussion Forums

Igor Androsov has over 14 years of experience in the IT Industry. For last 5 years he has been a software mercenary specializing in Integration process and technology using wide array of languages and platforms: C/C++, Java UNIX, LINUX, OS/2 and Windows. Igor started working with webMethods in 1998 as a new Integration tool implementing a B2B Exchange. He has implemented large distributed systems for multiple Fortune 500 enterprises.

Igor can be reached via email at

Advertise at wMUsers