Introduction	Top

The Web Page Designer is a browser-based JSP development tool. The Web Page Designer is currently licensed to provide two levels of functionality:

The Standard edition is a subset of the Professional edition. Accordingly, this document supports the Professional edition and, where applicable, identifies restrictions imposed by the Standard edition.

The following definitions apply to the fundamental building blocks of the Web Page Designer.

Property Tree Concepts	Top

"Property Trees" let you add and modify the properties of each Page Type, Element, and Layout. Each branch of a Property Tree leads to a "node". Each node defines a list of property-value pairs (called a "Property List") for that node.

Consider the example Property Tree below. All Property Trees are identified by the syntax "Property Tree Type: Property Tree Id". LabVantage offers three Property Tree Types, i.e., Page Type, Element, and List. Each defines a set of properties available for use with the respective item. Property Trees look and work alike, regardless of the Property Tree Type. As an example, the Property Tree Type below is "Page Type".

The Property Tree Idis "List Page", designating it as one of the Page Types. In this case, it is the one that defines properties for a List Page such as the SDC to be listed and the columns to be placed on the page.

The <Root>node shows properties available for use by all List Pages. The page developer has created three nodes. The first ("SampleListPage") defines properties for a page that lists Samples for use by everyone. The second ("MySampleListPage") defines properties for a page that lists Samples for his own personal use. The third ("CustomerListPage") defines properties for a that lists Customers.

A Property List inherits from other Property lists, along the same branch, upward toward the <Root> node. As shown above, the "SampleListPage" inherits all property-value pairs from the <Root> (1), while the "MySampleListPage" inherits its property-value pairs from the "SampleListPage" (2). During inheritance, values in a Property List override those of properties inherited from its parent node. For example, if "SampleListPage" has a "color" property with a value of "blue", "MySampleListPage" will also have a "color" value of "blue" through inheritance. You can also override this property at any node. For example, if you set the "color" of "MySampleListPage" to "green", this overrides the "SampleListPage" value of "blue".

You can also add properties to a node's Property List. Any properties you have added are merged with those inherited. For example, if "Sample List Page" contains 3 columns, you could add 2 columns to "MySampleListPage", for a total of 5 columns.

Note that, because the "CustomerListPage" is a sibling of "SampleListPage", it too inherits property-value pairs only from the <Root> (3). You would likely override properties in order to make this page list Samples rather than Customers.

Each Property List at each node is "reconciled", meaning it contains the results of inheritance and merging with its parent.

The example below is a high-level view of how you might apply four Property Trees to build our example "MySampleListPage". "MyStandardLayout" is a second-generation node that defines properties determining the appearance of the page and the framework around it, in this example placing it within the "Standard" Layout. "MySampleListElement" and "MySampleSearchElement" are third-generation nodes that define properties for blocks of functionality that will be palced in the page. In this case, the elements are those required for a "List" Page Type, i.e., a "List" Element (list of SDIs) and a "Search" Element (SDI search utility).

The Page Types, Elements, and Layouts supplied with this tool are "Core" items. Their properties are "Core" properties. You can configure Core items by specifying values for their Core properties to provide required functionality, but you can not alter the property "definitions". For instance, in the previous example, you could configure the properties at any node by specifying property values, adding buttons to the List pages, and adding columns to the List elements. However, you can not delete a property or change its data types (this would be changing the property "definition"). Protecting Core items in this manner guarantees upgradeability.

Advanced users can also create their own "custom" Page Types, Elements, and Layouts, as well as create "custom" properties to drive them. This is covered in the Advanced Operations section of this document (see Creating Page Types, Elements, and Layouts).

When you use the Web Page Designer to create a DDP, the tool automatically creates a JSP to interpret your reconciled Property List for each node and render the HTML. As shown below, this JSP interprets your reconciled Property Lists by retrieving values from instances of JSTL objects. The JSTL objects therefore specify the content of the page, data retrieved by the page, and the overall appearance of the page. You need not know more about JSTL Objects unless you are creating custom JSPs. When you are ready, see Working with JSPs in the Advanced Operations section (Part 3) of this document.

The base functionality of the page is driven by low-level "core" code (below), which is completely independent of your properties made available by the JSTL objects. This is what makes DDPs truly upgradeable. A LabVantage upgrade modifies the "core" code. Your Property Lists, defined in each JSTL object instance, remain unchanged.

In general, load a DDP or a registered custom JSP at http://<hostname>:<port>/<mywebapp>/rc?command=page&page=<PageId>

where <PageId> is the identifier of your page (this is the identifier of the WebPage SDI).

Note that during page development, you may wish to load a non-registered custom JSP. You can do this at http://<hostname>:<port>/<mywebapp>/rc?command=file&file=<path>/<filename>.jsp

where <path> is the path to your JSP from the root of <mywebapp> and <filename> is the name of your JSP file.

This is the syntax of the "Request Controller" servlet. See Request Controller for more information concerning this syntax.

Menus	Top

The Web Page Designer's browser-based interface offers a menu-driven system for creating, registering, configuring, and managing pages. This section describes functionality provided by each menu.

The Pages menu lets you:

Addtionally, both the Pages and New Page menu let you quickly create a standard set of pages using the Quick Page Creation Wizard.

Viewing Pages

Clicking Pages loads the "Page List", which lets you choose how you want the list of pages grouped for viewing. Clicking a selection in the left frame shows relevant pages in the right frame.

Editing Pages

Clicking a page in the right frame loads its Property Manager (see Page Property Manager), which lets you edit properties associated with the page.

Clicking New Page starts the page wizard, which walks you through the process of creating a page, as shown in the diagram below. Descriptions following the diagram refer to each screen displayed by the wizard.

See the Core Properties section (Part 2) of this document for descriptions of the Page Types available to you.

This screen shows the Page Type Property Tree (all existing Page Type nodes). You have two options:

These are the page-level details:

Page Id
Enter the identifier of the page you are creating (this is actually the identifier of the WebPage SDI).

Description
Enter a brief description (optional).

Elements
This shows all elements that will be installed in the page. Since you are creating the page, these will be mandatory Required Elements, i.e., those required for the page to run. Each Page Type Property description in this document specifies Required Elements for the Page Type.

Page Categories
Page Roles
LabVantage Categories to which the page belongs and LabVantage Roles that have access to the page.

Choose the Elements you want on the page. Checkboxes that are grayed-out denote mandatory Required Elements. You can not remove them from the page.

This screen shows Property Trees for all existing Elements that will be installed in the page. The functionality is similar to the "Choose a Page Type Node" screen, again providing two options:

See the Core Properties section (Part 2) of this document for descriptions of all Elements.

Choose how you want your page displayed. All DDPs require one of the Layouts provided with the Web Page Designer.

The style sheet (CSS) you use for the Layout is also used for the page within the Page Area. The default CSS is WEB-CORE/stylesheets/sapphire.css.

This screen shows Property Trees for the Layout (if any) that will be used to display the page. The functionality is similar to the "Choose a Page Type Node" screen, again providing two options:

After you click Finish, the Web Page Designer generates the DDP.

Load the DDP from your Web Application as previously described in DDP Upgradeability.

When you "Choose a Page Type Node", "Choose Element Nodes", or "Choose a Layout Node", you have the option of editing any node in the relevent Property Tree. When you choose to edit nodes as directed by instructions on the screen, the Property Manager for the selected item (Page Type, Element, or Layout) loads, allowing you to edit properties for all nodes in the tree. The section Property Managers (specifically Page Type, Element, and Layout Property Manager) describe these editing capabilities. The example below shows how this editing option can be used to edit a Page Type node while in the wizard for creating a DDP.

In the above example, only the <Root> node is available when the "Choose a Page Type Node" screen loads. Editing the Property Tree loads the relevant Property Manager (in this case, for Page Types) in a new browser instance. When the Property Manager opens, it shows properties for the node you selected in the previous screen (in this case, <Root>). However, you are now in a Property Manager. This means you can edit the entire Property Tree from here... you can change property values for any node, create new nodes, delete nodes, and perform all other operations possible in the Property Manager.

In our example, we enter the "Choose a Page Type Node" screen with only the <Root> node. We click as directed by the screen to exercise the Property Tree editing option, which opens the "Page Type Property Manager" in a new window. We can now change the <Root> node properties, or add a child to the <Root>. In this case, we have chosen to add a page to list Sample SDIs ("SampleListPage"). We then specify property values for the new child node, then click Save. The new window closes, and a "Reload Page" button appears on the "Choose a Page Type Node" screen. Clicking this button refreshes the page to show the new child node, which we have selected for use as the Page Type upon which the page will be based. We can then continue through the wizard.

The Property Tree Editing Option works in the same manner for Elements and Layouts.

As with DDPs, clicking Add Page starts the page wizard as shown in the diagram below. Descriptions following the diagram refer to wizard screens involved with registering a custom JSP.

Choose Register a Custom JSP.

These are the page-level details:

Page Id
Enter the identifier of the page you are creating (this is actually the WebPage SDI Id).

Description
Enter a brief description (optional).

Filename
This must point to your custom JSP. You can browse to the JSP or enter it. If you enter it, you must enter the full path from the root of your own Web Application. For example, if your JSP is in mywebapp/customJSP, enter customJSP/filename.jsp.

Properties
These properties are available to the page through the pagedata JSTL object that provides a reconciled Property List for the entire page. You can access these property-value pairs using JSTL tags (the preferred technique), or methods called on the pageinfo instance of the PageTagInfo class. See Working with JSPs in the Advanced Operations section (Part 3) of this document.

The Add Properties button lets you define page-level properties. When you are ready to do this, see Adding Custom Properties in the Advanced Operations section (Part 3) of this document, but don't attempt it until you have read everything between here and there.

Elements
These Elements are available to the page through JSTL objects that provide a reconciled Property List for each Element. You can access these property-value pairs using JSTL calls to the object, or point to the object using an Element defined by a LabVantage Custom Tag (sdilist, sdimaint, etc.). See Working with JSPs and Creating Page Types, Elements, and Layouts in the Advanced Operations section (Part 3) of this document.

The Add Elements button lets you add your own custom Element or one of the Elements supplied with this tool. When you are ready to do this, see Creating Elements in the Advanced Operations section (Part 3) of this document, but the advice previous given about properties also applies to Elements - don't attempt this until you have read everything between here and there.

Page Categories
Page Roles
LabVantage Categories to which the page belongs and LabVantage Roles that have access to the page.

These screens work in the same manner as those described in Creating a DDP.

After you click Finish, the Web Page Designer registers the JSP with any properties you have added to the page.

Load the registered JSP from our Web Application as previously described in DDP Upgradeability.

You can make a copy of any selected page in the Page List. Simply select the page and click Copy Page. When prompted, enter a unique identifier for the page. After exiting the prompt dialog, the Page Property Manager for the new page will load.

This feature allows rapid creation of a standard set of pages based on an SDC.

This feature allows creation of a page that is a modified version of an existing page. For example, you may want to create a simplified version of the SampleList page that shows fewer buttons and columns. The is achieved by creating a new page that inherits from an existing page. For the purpose of this example, we refer to the original page as the "parent page" and the newly created page as the "child page".

Note that the new child page inherits properties from the parent page (below left). When editing the parent page, the child pages are shown (below center). In the Property Tree, the child page is grouped and indented under the parent page (below right). The child page can be modified without affecting the parent page.Changes to the parent page are reflected in the child page.

Viewing Items

To view a list of Layouts, Page Types, or Elements, click the relevant menu item. This loads the Layout List, Page Type List, or Element List. Each of these shows a list of the respective items.

Editing Items

Clicking an item loads its Property Manager (see Page Type, Element, and Layout Property Managers below), which lets you edit the item.

See Creating Page Types, Elements, and Layouts in the Advanced Operations section of this document.

Property Managers	Top

There are two kinds of Property Managers:

Page Property Manager

This lets you:

Page Type, Element, and Layout Property Manager

The Property Manager for each of these items works in the same manner. These let you work with Property Trees to:

This lets you:

Just as PageType, Elements, and Layouts have Property Trees that define their functionality, pages also have a set of "Page Properties" that define their attributes and behavior. The Property Manager for Pages offers the following structure to let you add and edit these Page Properties.

Below the "Page Definition" are links to the Property Lists for each Element and Layout associated with the page. If the page is a DDP, a link to the "Page Type" Property List is also shown. Since these Property Lists are associated with the page, they correspond to a node in the relevant Property Tree. For example, using the Property Trees in our Example Application above, the Property Manager for "MySampleListPage" page would contain a link to "MySampleSearchElement". Note that "MySampleSearchElement" is a node of the "SearchElement" Property Tree. What you can do with these Property Trees depends on whether you are using the Professional or Standard version of Web Page Designer.

You can view and edit one of these Property Trees using the "Edit" button below the Property Trees.

For example, if you are in the Page Property Manager and looking at a Property List for an Element:

1. Click the Element you want to edit.
2. Click the "Edit Element" button. This loads the Property Manager for the Element (see Page Type, Element, and Layout Property Managers). You can then modify properties for the Element.
3. The Property Manager for the Element contains an "Edit Page" button. After saving your changes to the Element, click Edit Page. You are returned to the Page Property Manager and the Property Lists associated with the Page.

The "Edit" buttons thereby facilitate rapid switching between the Page Property Manager and the Element Property Manager for Elements associated with the page. This functionality is the same if you are looking at a Property List for Page Types (displays a "Switch to Page Type" button that loads the Page Type Property Manager), or a Property List for Layouts (displays a "Switch to Layout" button that loads the Layout Property Manager).

Other buttons are displayed in the Page Property Manager, depending on the content of your page. For example, if your page has Elements, "Add Element" loads a page that lets you add an Element to the page, and offers to add the same Element to other Pages of the same Page Type and Edition (below):

You can also collapse all Property Lists associated with a page into a single Property List for that page. The "Collapse Properties" button rolls-up all properties inherited by the page into a single, fixed Property List for the page, which is moved to the <Root> node (below). This is useful if Core Properties change during an upgrade, i.e., the collapsed Property List is associated with the page, and is thereby not affected.

You cannot edit Page Types, Elements, or Layouts with the Standard version. When you select one of these, you will not see a button that lets you edit it. However, you can add Elements to a page. Accordingly, an "Add Element" button may be displayed. Clicking this takes you through the "Choose Elements" and "Choose Element Nodes" branches of the wizard used to add Elements in the Professional edition. For a full description of this wizard, see the diagram "Creating a Data-Driven Page" and its accompanying explanation in the section Creating a DDP.

Regardless of whether you are using the Professional or Standard Edition, you will be editing the same Core properties.

The Property Manager for each of these items works in the same manner. These let you work with Property Trees to:

These are attributes that identify the Property Tree and determine its overall behavior.

The Property Tree shows the Property List's associated with a Page Type, Element, or Layout. Clicking a node loads the Property List for that node. Here, you specify values for each property.

Pages associated with Page Types, Elements, and Layouts are displayed as "page nodes" (identified by a "page" icon, as approximated below in an example using a List Element). Items having page nodes are shown with the "plus" symbol and the number of associated nodes in parentheses. Clicking this symbol shows the page nodes, i.e., pages associated with the item. Page nodes refer to page properties - clicking a page node loads the Page Property Manager for that page.

You can modify nodes in the Property Tree using the following buttons: