JDistil

UI Components

The JDistil framework includes a custom tag library that provides UI components supporting the creation of logic-less JSP pages. These UI components are fully integrated with the framework and provide features such as data binding, data iteration, dynamic action data, internationalization (i18n) based on application configuration data, and pre-emptive security based on the framework security model. These UI components are separated into five distinct packages based on functionality and the following table provides a description of the types of components available in each of the packages. Subsequent sections further document each of the UI components available in these packages and the last section provides example JSP pages illustrating the use of some of the UI components.

Package	Description
com.bws.jdistil.core.tag.basic	Higher level foundational and structural UI components.
com.bws.jdistil.core.tag.action	UI components supporting the invocation of application actions.
com.bws.jdistil.core.tag.data	UI components supporting the presentation and entry of application data.
com.bws.jdistil.core.tag.paging	UI components supporting pagination of application data.
com.bws.jdistil.core.tag.table	UI components supporting the display of application data in an HTML table.

Basic

The following table describes the components contained in the "com.bws.jdistil.core.tag.basic" package.

Class	Description
Component	Base component for all other components providing exception handling, support for dynamic attributes, and security manager access.
Body	Produces an HTML body tag using a page ID. Ensures a user is authenticated if the page is defined as secure.
Form	Produces an HTML form tag using an action ID. Configures form to perform a put the framework Controller servlet.
Group	Produces an HTML div tag used to hide and show components nested within the tag body.

Action

The following table describes the components contained in the "com.bws.jdistil.core.tag.action" package.

Class	Description
ActionComponent	Base component for all other action components providing support for dynamic action data, action confirmation, and action authorization.
ActionData	Specifies a field ID and associated value to include in the submitted action data when nested inside an action component.
Button	Produces an HTML button tag supporting submission of a specified action.
Link	Produces an HTML anchor tag supporting submission of a specified action.
MenuBar	Produces an HTML div tag and an unordered list tag containing one or more menu components. HTML tags are aligned with the core framework CSS styles.
Menu	Produces an HTML list item tag, an anchor tag representing the selectable menu and an unordered list tag containing one or more menu item components. HTML tags are aligned with the core framework CSS styles.
MenuItem	Produces an HTML list item tag containing one or more display components representing the selectable menu item. HTML tags are aligned with the core framework CSS styles.
PopupMenu	Produces an HTML list item tag, an anchor tag representing the selectable popup menu and an unordered list tag containing one or more popup menu item components. HTML tags are aligned with the core framework CSS styles.
PopupMenuItem	Produces an HTML list item tag containing one or more display components representing the selectable popup menu item. HTML tags are aligned with the core framework CSS styles.
BreadcrumbTrail	Produces a series of HTML anchor tags representing a breadcrumb trail used to navigate back to previous views.
BreadcrumbAction	Specifies action IDs to be tracked for a breadcrumb link when nested within a breadcrumb trail component.

Data

The following table describes the components contained in the "com.bws.jdistil.core.tag.data" package.

Class	Description
ValueComponent	Base component for all other value components providing support for obtaining a formatted or unformatted field value, and determining editable, read only, or hidden authorization.
Label	Produces an HTML label tag using an i18n locale specific field description.
Description	Produces an i18n locale specific field description for a given value.
CheckField	Produces an HTML input tag of type checkbox.
DateField	Produces an HTML input tag of type date.
EmailField	Produces an HTML input tag of type email.
HiddenField	Produces an HTML input tag of type hidden.
MemoField	Produces an HTML text area tag.
OptionField	Produces an HTML input tag of type radio.
PasswordField	Produces an HTML input tag of type password.
PhoneNumberField	Produces an HTML input tag of type phone.
TextField	Produces an HTML input tag of type text.
TimeField	Produces an HTML input tag of type time.
DisplayField	Produces an HTML span tag containing the formatted field value.
DisplayListField	Produces an HTML span tag containing a vertical list of formatted field values.
DisplayMultipleListField	Produces an HTML span tag containing a vertical list of reference item descriptions where the reference item values match the field values. The reference list must contain objects of type IListItem and be available by name in the request attributes.
PageDescription	Produces a locale specific i18n page description in plain text.
ProcessMessages	Produces an HTML table containing process messages for each message type available in the process context. This includes messages of type information, confirmation, warning and error. A table is only produce for a given message type if messages exist.
Fields	Produces an HTML input tag of type hidden for each field registered by tags nested within its body. Fields can be registered for inclusion and exclusion.
IncludeField	Registers a field to be included for processing when nested in a Fields tag.
IncludeActionFields	Registers all fields associated with a specified action to be included for processing when nested in a Fields tag.
ExcludeField	Registers a field to be excluded from processing when nested in a Fields tag.
ExcludeActionFields	Registers all fields associated with a specified action to be excluded from processing when nested in a Fields tag.
ListField	Produces an HTML select tag containing a list of reference item values and descriptions. The reference list must contain objects of type IListItem and be available by name in the request attributes.
BooleanListField	Produces an HTML select tag containing a list of boolean values and descriptions.
OperatorListField	Produces an HTML select tag containing a list of text or numeric based operator values and descriptions. Also provides support for displaying operator symbols or text.
MultipleListField	Composite component consisting of HTML table, label, select, and button tags supporting the selection of multiple items using available and selected lists.
MultipleListGroup	Supports the use of multiple selected item lists when nested in a multiple list field. Results in a single available items list and a selected list for each nested multiple list group.
AssociateField	Composite component consisting of HTML input tag of type text and button tag supporting the off page selection of a single data object to be associated with the page specific target data object.
AssociateListField	Composite component consisting of HTML select tag and a button tag supporting the off page selection of multiple data objects to be associated with the page specific target data object.

Table

The following table describes the components contained in the "com.bws.jdistil.core.tag.table" package.

Class	Description
Table	Produces an HTML table tag and handles data iteration and evaluation of other nested table components.
TableHeader	Produces an HTML table row tag in the first row of the table.
TableFooter	Produces an HTML table row tag in the last row of the table.
TableRow	Produces an HTML table row tag for each iteration of table data.
TableData	Produces an HTML table header, table footer, or table data tag depending upon the type of table component it is nested within.
SortableColumnHeader	Produces an HTML anchor tag supporting the ascending and descending sorting of table data.

Paging

The following table describes the components contained in the "com.bws.jdistil.core.tag.paging" package.

Class	Description
PageNavigation	Displays pagination controls including previous, next and a range of select page links.
CurrentPageNumber	Displays the currently selected page number.
TotalPages	Displays the total number of available pages.
TotalItems	Displays the total number of available items.

Examples

The following two example JSP pages illustrate the use of some of the UI components. These examples were generated using the application fragment wizard included with the JDistil plugin.

The following is an example view data objects JSP page that includes a breadcrumb trail, filter fields, pagination, sortable column headers, pop-up menus, and various action components.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<%@ page import="com.bws.jdistil.core.configuration.FieldValues" %>
<%@ page import="com.bws.jdistil.core.datasource.database.Operators" %>
<%@ page import="com.bws.jdistil.core.message.Messages" %>
<%@ page import="com.bws.test.configuration.ActionIds" %>
<%@ page import="com.bws.test.configuration.AttributeNames" %>
<%@ page import="com.bws.test.configuration.CategoryIds" %>
<%@ page import="com.bws.test.configuration.FieldIds" %>
<%@ page import="com.bws.test.configuration.PageIds" %>

<%@ taglib uri="com/bws/jdistil/core" prefix="core" %>
<%@ taglib uri="com/bws/jdistil/codes" prefix="codes" %>

<html>
	
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="core.css" />
        <script type="text/javascript" src="core.js"></script>
        <title><core:pageDescription pageId="<%= PageIds.COMPANIES %>" /></title>
    </head>
	
    <core:body pageId="<%= PageIds.COMPANIES %>">

        <jsp:include page="../Header.jsp" />

        <div class="page">			
    
            <core:breadcrumbTrail isStartOfTrail="<%= true %>" >
                <core:pageDescription pageId="<%= PageIds.COMPANIES %>" />
                <core:breadcrumbAction actionId="<%= ActionIds.VIEW_COMPANIES %>"/>
                <core:breadcrumbAction actionId="<%= ActionIds.VIEW_COMPANY_PREVIOUS_PAGE %>"/>
                <core:breadcrumbAction actionId="<%= ActionIds.VIEW_COMPANY_SELECT_PAGE %>"/>
                <core:breadcrumbAction actionId="<%= ActionIds.VIEW_COMPANY_NEXT_PAGE %>"/>
            </core:breadcrumbTrail>

            <core:form id="Companies" actionId="<%= ActionIds.VIEW_COMPANIES %>" >
        
                <core:processMessages />

                <core:hidden fieldId="<%= FieldIds.COMPANY_ID %>" fieldValue="<%= null %>" />
                <core:hidden fieldId="<%= FieldIds.SORT_FIELD %>" defaultValue="<%= FieldIds.COMPANY_NAME %>" />
                <core:hidden fieldId="<%= FieldIds.SORT_DIRECTION %>" defaultValue="<%= FieldValues.SORT_ASCENDING %>" />

                <core:group id="<%= "filterGroup" %>>" fieldId="<%= FieldIds.COMPANY_GROUP_STATE %>" hideLabel="<%= "Hide Filter" %>" 
                        showLabel="<%= "Show Filter" %>" isHiddenByDefault="<%= Boolean.TRUE %>" >
                    <table>
                        <tr>
                            <td><core:label fieldId="<%= FieldIds.COMPANY_NAME_FILTER %>" /></td>
                            <td>
                                <core:operatorList fieldId="<%= FieldIds.COMPANY_NAME_FILTER_OPERATOR %>" isTextMode="<%= true %>" 
                                    defaultValue="<%= Operators.CONTAINS %>" />
                                <core:text fieldId="<%= FieldIds.COMPANY_NAME_FILTER %>" maxlength="20" />
                            </td>
                        </tr>
                        <tr>
                            <td><core:label fieldId="<%= FieldIds.COMPANY_TYPE_FILTER %>" /></td>
                            <td><codes:list fieldId="<%= FieldIds.COMPANY_TYPE_FILTER %>" categoryId="<%= CategoryIds.COMPANY_TYPE %>"/></td>
                        </tr>
                        <tr>
                            <td><core:label fieldId="<%= FieldIds.COMPANY_ACTIVE_FILTER %>" /></td>
                            <td><core:booleanList fieldId="<%= FieldIds.COMPANY_ACTIVE_FILTER %>" /></td>
                        </tr>
                        <tr>
                            <td><core:label fieldId="<%= FieldIds.COMPANY_CREATED_FILTER %>" /></td>
                            <td>
                                <core:operatorList fieldId="<%= FieldIds.COMPANY_CREATED_FILTER_OPERATOR %>" isTextMode="<%= false %>" 
                                    defaultValue="<%= Operators.EQUALS %>" />
                                <core:text fieldId="<%= FieldIds.COMPANY_CREATED_FILTER %>" maxlength="10" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" />
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                                <core:button actionId="<%= ActionIds.VIEW_COMPANIES %>" />
                                <input type="button" value="<core:description value="Clear" />" 
                                        onClick="clearFilter('Companies', 'filterGroup');return false;" />
                            </td>
                        </tr>
                    </table>
                </core:toggle>
                
                <p>
                    <label><core:description value="Page" /> <core:currentPageNumber/> <core:description value="of" /> <core:totalPages/></label>
                    <core:pageNavigation currentPageNumberFieldId="<%= FieldIds.COMPANY_CURRENT_PAGE_NUMBER %>" 
                        selectedPageNumberFieldId="<%= FieldIds.COMPANY_SELECTED_PAGE_NUMBER %>"
                        previousPageActionId="<%= ActionIds.VIEW_COMPANY_PREVIOUS_PAGE %>" selectPageActionId="<%= ActionIds.VIEW_COMPANY_SELECT_PAGE %>" 
                        nextPageActionId="<%= ActionIds.VIEW_COMPANY_NEXT_PAGE %>" />
                    <label><core:totalItems/> <core:description value="Items" /></label>
                </p>
                
                <core:table attributeName="<%= AttributeNames.COMPANIES %>" border="1" cellspacing="1" cellpadding="3" >
                    <core:th>
                        <core:td width="100">
                            <core:sortableColumnHeader actionId="<%= ActionIds.VIEW_COMPANIES %>" displayFieldId="<%= FieldIds.COMPANY_NAME %>" 
                                sortFieldId="<%= FieldIds.SORT_FIELD %>" sortDirectionId="<%= FieldIds.SORT_DIRECTION %>" />
                        </core:td>
                        <core:td width="100">
                            <core:sortableColumnHeader actionId="<%= ActionIds.VIEW_COMPANIES %>" displayFieldId="<%= FieldIds.COMPANY_ACTIVE %>" 
                                sortFieldId="<%= FieldIds.SORT_FIELD %>" sortDirectionId="<%= FieldIds.SORT_DIRECTION %>" />
                        </core:td>
                        <core:td width="100">
                            <core:sortableColumnHeader actionId="<%= ActionIds.VIEW_COMPANIES %>" displayFieldId="<%= FieldIds.COMPANY_TYPE %>" 
                                sortFieldId="<%= FieldIds.SORT_FIELD %>" sortDirectionId="<%= FieldIds.SORT_DIRECTION %>" />
                        </core:td>
                        <core:td width="100">
                            <core:sortableColumnHeader actionId="<%= ActionIds.VIEW_COMPANIES %>" displayFieldId="<%= FieldIds.COMPANY_CREATED %>" 
                                sortFieldId="<%= FieldIds.SORT_FIELD %>" sortDirectionId="<%= FieldIds.SORT_DIRECTION %>" />
                        </core:td>
                        <core:td> </core:td>
                        <core:td align="center">
                            <core:link actionId="<%= ActionIds.ADD_COMPANY %>" >
                                <core:actionData fieldId="<%= FieldIds.COMPANY_ID %>" fieldValue="<%= null %>" />
                            </core:link>
                        </core:td>
                    </core:th>
                    <core:tr>
                        <core:td align="center">
                            <core:link actionId="<%= ActionIds.EDIT_COMPANY %>" >
                                <core:display fieldId="<%= FieldIds.COMPANY_NAME %>" />
                                <core:actionData fieldId="<%= FieldIds.COMPANY_ID %>" />
                            </core:link>
                        </core:td>
                        <core:td>
                            <core:display fieldId="<%= FieldIds.COMPANY_ACTIVE %>" />
                        </core:td>
                        <core:td>
                            <codes:displayList fieldId="<%= FieldIds.COMPANY_TYPE %>" categoryId="<%= CategoryIds.COMPANY_TYPE %>"/>
                        </core:td>
                        <core:td>
                            <core:display fieldId="<%= FieldIds.COMPANY_CREATED %>" />
                        </core:td>
                        <core:td>
                            <core:popupMenu>
                                <core:popupMenuItem>
                                    <core:link actionId="<%= ActionIds.VIEW_PRODUCTS %>" >
                                        <core:pageDescription pageId="<%= PageIds.PRODUCTS %>" />
                                        <core:actionData fieldId="<%= FieldIds.COMPANY_ID %>" />
                                    </core:link>
                                </core:popupMenuItem>
                            </core:popupMenu>
                        </core:td>
                        <core:td align="center">
                            <core:link actionId="<%= ActionIds.DELETE_COMPANY %>" confirmationMessageKey="<%= Messages.DELETE_CONFIRMATION %>" >
                                <core:actionData fieldId="<%= FieldIds.COMPANY_ID %>" />
                            </core:link>
                        </core:td>
                    </core:tr>
                </core:table>

            </core:form>
        </div>
    </core:body>
</html>

The following is an example edit data object JSP page that includes various data components and button action components.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<%@ page import="com.bws.test.configuration.ActionIds" %>
<%@ page import="com.bws.test.configuration.AttributeNames" %>
<%@ page import="com.bws.test.configuration.CategoryIds" %>
<%@ page import="com.bws.test.configuration.PageIds" %>
<%@ page import="com.bws.test.configuration.FieldIds" %>
<%@ page import="com.bws.test.company.Company" %>

<%@ taglib uri="com/bws/jdistil/core" prefix="core" %>
<%@ taglib uri="com/bws/jdistil/codes" prefix="codes" %>

<html>
	
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="core.css" />
        <script type="text/javascript" src="core.js"></script>
        <title><core:pageDescription pageId="<%= PageIds.COMPANY %>" /></title>
    </head>

    <core:body pageId="<%= PageIds.COMPANY %>">
    
        <jsp:include page="../Header.jsp" />
        
        <div class="page">
            
            <div class="breadcrumbTrail">
                <span class="breadcrumbSelected"><core:pageDescription pageId="<%= PageIds.COMPANY %>" /></span>
            </div>
            
            <core:form id="Company" actionId="<%= ActionIds.SAVE_COMPANY %>" >

                <core:processMessages />

                <core:hidden fieldId="<%= FieldIds.PARENT_FIELD_ID %>" fieldValue="<%= null %>" />
                <core:hidden fieldId="<%= FieldIds.PARENT_ACTION_ID %>" fieldValue="<%= ActionIds.VIEW_COMPANIES %>" />
                <core:hidden fieldId="<%= FieldIds.PARENT_ACTION_ID %>" fieldValue="<%= ActionIds.SAVE_COMPANY %>" />
                <core:hidden fieldId="<%= FieldIds.PARENT_PAGE_ID %>" fieldValue="<%= PageIds.COMPANY %>" />

                <core:hidden fieldId="<%= FieldIds.COMPANY_ID %>" attributeName="<%= AttributeNames.COMPANY %>" />
                <core:hidden fieldId="<%= FieldIds.COMPANY_VERSION %>" attributeName="<%= AttributeNames.COMPANY %>" />

                <core:fields>
                    <core:includeActionFields actionId="<%= ActionIds.VIEW_COMPANIES %>" />
                </core:fields>
                
                <table>
                    <tr>
                        <td><core:label fieldId="<%= FieldIds.COMPANY_NAME %>" /></td>
                        <td><core:text fieldId="<%= FieldIds.COMPANY_NAME %>" attributeName="<%= AttributeNames.COMPANY %>" maxlength="20" /></td>
                    </tr>
                    <tr>
                        <td><core:label fieldId="<%= FieldIds.COMPANY_ACTIVE %>" /></td>
                        <td><core:check fieldId="<%= FieldIds.COMPANY_ACTIVE %>" attributeName="<%= AttributeNames.COMPANY %>" /></td>
                    </tr>
                    <tr>
                        <td><core:label fieldId="<%= FieldIds.COMPANY_CREATED %>" /></td>
                        <td><core:text fieldId="<%= FieldIds.COMPANY_CREATED %>" attributeName="<%= AttributeNames.COMPANY %>" maxlength="10" /></td>
                    </tr>
                    <tr>
                        <td><core:label fieldId="<%= FieldIds.COMPANY_TYPE %>" /></td>
                        <td>
                            <codes:list fieldId="<%= FieldIds.COMPANY_TYPE %>" attributeName="<%= AttributeNames.COMPANY %>" 
                                categoryId="<%= CategoryIds.COMPANY_TYPE %>" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"> </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <core:button actionId="<%= ActionIds.SAVE_COMPANY %>" />
                            <core:button actionId="<%= ActionIds.CANCEL_COMPANY %>" />
                        </td>
                    </tr>
                </table>
            
            </core:form>
        </div>
    </core:body>
</html>

General

Modules

Framework