# Designing User Interfaces in JSPs

When you create a page flow, WebLogic Workshop provides various tag libraries containing tags you can use to design a JSP. Each JSP file generated by the Page Flow Wizard is defined to include <% taglib...> statements, which reference the tag libraries. For example:

    <!--Generated by WebLogic Workshop-->
    <%@ page language="java" contentType="text/html;charset=UTF-8"%>
    <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
    <%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
    <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
    <netui:html>
        <head>
           <title>
              Web Application Page
           </title>
        </head>
        <body>
           <p>
              New Web Application Page
           </p>
        </body>
    </netui:html>

Note: WebLogic Workshop puts TLD and TLDX library files in your web projects /WEB-INF directory. The TLD files are J2EE-standard tag library descriptor files. The TLDX files are WebLogic Workshop specific files that contain information on how the tags are supposed to behave within the IDE. This includes display, property sheet, and other information.

In the IDE, the tags are available in the Palette window when a JSP file is open in Design View or Source View. For example:

You can drag and drop these tags from the Palette window to the Design View. In some cases, a dialog window will appear that allows you to assign actions to tags that work with form beans. For example:

Note: As you move a tag's icon from the Palette pane to the Design View canvas, you will notice on the Design View canvas that the insertion point is shown by a vertical line. Keep this insertion point in mind because it will determine the initial location of the tag's code in the JSP.

The JSP Designer is intended for developers who need to quickly assemble JSP pages based on the NetUI, NetUI Data Binding, and NetUI Template tags. As a developer, you can can create initial drafts of these pages and determine the form actions and other contexts to display simple or complex data to users. In the JSP Designer, you can take advantage of "drop wizards" and (in Source View) additional code completion tools to assist your development work. The JSP Design View is not intended to serve as a full JSP graphical editor, and you may switch into Source View to enter text, or use your favorite JSP editing product to complete the page, adding more polish to the presentation.

This topic describes the various elements in the NetUI and NetUI Template libraries. These libraries contain typical components used to design a user interface such as labels, radio buttons, and links. Many of the components in these libraries, in particular form components, allow you present data to the user or elicit data from the user.

In addition, the NetUI Data Binding library contains specialized components used to display complex data to users. The NetUI Data Binding tags are discussed separately in Presenting Complex Data Sets in JSPs.

Note: The Palette window also provides a tag library called HTML, which contains several standard HTML tags. These HTML tags do not have any special attributes that interact with the page flow runtime.

## NetUI Tags

The NetUI components in the Palette window are stored in the netui-tag-html.tld library, which is imported into the JSP by default:

<%@ taglib uri="netui-tags-html.tld" prefix="netui"%>

When you add a NetUI component to your JSP, you will notice that the component name is prefixed with "netui", for example:

<netui:button value="Start" action="letsGo" type="submit"/>

The following table summarizes common use of the NetUI tags. For a detailed description of a tag and its attributes, see JSP Tags Reference, or in Source View, place your cursor inside the tag and press F1:

Typical Tag Use | Tag name | Summary
Navigation | anchor | Generates a URL-encoded hyperlink to a specified URI.
| imageAnchor | Generates a URL-encoded hyperlink to a specified URI with an image enclosed as the body.
| button | Generates a button with a read-only name. Typically used to reset or submit a form, or to trigger a specific action (such as "signing out").
| imageButton | Generates an image acting as a button. Includes the URL of the image and (optionally) a rollover image. Typically used to submit a form.
Read / Write Data (uses dataSource, defaultValue attributes) | form | Represents an input form that is associated with a form bean whose properties correspond to the various fields of the form.
| checkBox | Generates a checkbox which binds to a form bean property.
| checkBoxGroup | Groups a collection of CheckBoxOptions, and handles databinding of their values. For an example, see A Detailed Page Flow Example.
| checkBoxOption | A checkbox whose state is determined by its enclosing checkBoxGroup.
| hidden | Generates a hidden form field.
| radioButtonGroup | Groups a collection of RadioButtonOptions, and handles databinding of their values. For an example, see A Detailed Page Flow Example.
| radioButtonOption | A radio button whose state is determined by its enclosing RadioButtonGroup.
| select | Renders a dropdown list. For an example, see A Detailed Page Flow Example.
| selectOption | An option whose state is determined by its enclosing select component.
| textArea | Renders a databound TextArea.
| textBox | Renders a databound TextBox.
Error Reporting | bindingUpdateErrors | A development-time aide that displays messages for data binding update errors that occurred when a form was posted. The messages are displayed on the command window. By default, this tag is disabled when the server is running in Production mode.
| error | Renders a single error message with a given error key value. For more information, see Validating User Input.
| errors | Renders the set of error messages found. For more information, see Validating User Input.
| exceptions | Renders formatted exception messages.
Parameters | parameter | Writes a URL parameter to a URL on its parent tag. For an example, see the url data binding context in Using Data Binding in Page Flows.
| parameterMap | Writes each parameter in a map of URL parameters to a URL on its parent tag.
Other | base | Provides the base for every URL on this page.
| content | Display read-only standard or dynamically-generated text.
| image | Generates an image.
| label | Generates styled read-only text based on an data binding expression or a literal value.
| node | Instantiates a TreeNode object that will get added to the parent tag (either a Tree or another Node).
| tree | Renders a tree control represented by a set of TreeNode objects.

## Netui Template Tags

The NetUI Template components in the Palette window are stored in the netui-tag-template.tld library, which is imported into the JSP by default:

<%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>

When you add a NetUI Template component to your JSP, you will notice that the component name is prefixed with "netui-template", for example:

<netui-template:visible visible="true">Is Visible</netui-template:visible>

The tags in this library are typically used to define site templates. A template page is a JSP page defining the overall look and feel of a set of pages. It does this by providing an overall layout structure, style, and design of the page, and defining placeholders for content. These placeholders are called sections. A content page is a JSP page containing the content. The content page provides the sections of content plugged into the template. Combining the content page and the template page creates the overall look and feel of the content. The big advantage of templates is the ability to change the look and feel of a set of pages without being forced to modify each page.

The NetUI Template library defines two sets of tags. The first set is used in a JSP template page to define placeholders where content pages provide content. The second set of tags is used within a content page to indicate the template to use and to define the content that will be presented within the template.

The following table summarizes common use of the NetUI Template tags. For a detailed description of a tags and its attributes, see JSP Tags Reference, or in Source View, place your cursor inside the tag and press F1:

Tag Set | Tag name | Summary
Template Page | attribute | Defines an attribute in a template file. Used in conjunction with setAttribute in a content JSP.
| includeSection | Defines a section in a template file that can be further filled in by a content JSP, using the section tag.
Content Page | setAttribute | Set the value of an attribute declared in a template file.
| section | References an includeSection and defines the content to be included.
| template | Specifies the template page to use.
Either | visibility | Makes a section visible or invisible.

To see a sample application that uses the template tags, please go to the following page flow and check the JSP files:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\simpleflow

Also see the template.jsp and header.jsp files in:

<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\resources\jsp

Related Topics

Presenting Complex Data Sets in JSPs

A Detailed Page Flow Example

Getting Started with Page Flows

Using Form Beans to Encapsulate Data

JSP Tags Reference