Working with Java Server Pages

Documentation home

Specifying Java Server Pages 1

Customizing JSP appearance. 2

Extracting form variables 3

Building navigation panels 3

Supplied progress tracker JSP. 3

 

See also:       Customizing Presentation

                   Standards for Naming Web Resources

FPL Script Command Syntax

Interacting with the Ebase Form from a Panel

 

Specifying Java Server Pages

 

The names of the four Java Server Pages (JSPs) corresponding to the top, left, right and bottom of the screen can be specified either in the JSPs tab of the Form Properties or in the JSPs tab of the form’s presentation template.

 

Please note that the term JSP in this document refers to any type of included content. Typically, these will be HTML or JSP files.

 

 

The locations specified are all relative to the Ebase document root. We recommend a naming convention where a directory with the project name is set up under the document route and then JSPs are placed within the pages subdirectory of this directory, as shown above. If this naming convention is followed, the JSP file locations should be specified without a leading forwardslash (/).  (See Standards for Naming Web Resources for more information)

 

Each JSP can be changed at any time during form execution using the set JSP FPL script command. This can also be used to disable a JSP. This can be useful when creating special print pages which should not include the additional visual branding supplied by the JSPs.  (See FPL Script Command Syntax for more information)

 

The height of the top and bottom JSPs is controlled by the HTML tags within the JSP i.e. the height will expand so that all information is displayed. The width of the left and right JSPs is specified under the Panel widths % of the presentation template associated with the form, as shown below.

 

 

 

 

Customizing JSP appearance

 

Style sheet definitions should be included in the Html++ tab of form properties HTML and then associated with tags in the JSP or HTML pages. In addition, each JSP is assigned a unique id and this can be associated with individual stylesheets. See Customizing Presentation for more details.

 

Extracting form variables

 

A number of form variables are made available to the JSP via the Ebase external interface. These include the form name, the current page name, the value of each field, the value of each text. (See Ebase External Interface for more information)

 

Building navigation panels

 

End-user selections from an included JSP or HTML panel can be passed into the form and then processed. This technique can be used to build a navigation panel where the end-user clicks on buttons or links to control execution of the form. (See Interacting with the Ebase Form from a Panel for more information)

 

Supplied progress tracker JSP

 

A standard progress tracker JSP is supplied and can be used by setting the left JSP to shared/jsps/standard_progress_tracker.jsp. This JSP simply displays a list of all form pages, highlighting the current page. It can be modified to suit your requirements or used as an example. The constants at the top of the JSP can be modified to change display attributes such as colours, fonts, sizes etc.

 

<% /* EBASE SAMPLE PROGRESS TRACKER JSP */ %>

<% /* Following 2 lines are required to address the Ebase form interface object */ %>

<%@ page language="java" import="com.ebasetech.ufs.kernel.*" %>

<% UFSFormInterface form = UFSFormInterface.getFormInterface(); %>

<% /* Constants for presentation of the progress tracker go here */ %>

<% String selectedBgColour = "#CC0000"; %>

<% String selectedColour= "#FFFFFF"; %>

<% String normalBgColour = "#DDDDDD"; %>

<% String normalColour= "#999999"; %>

<% String headerBgColour = "#FFFFFF"; %>

<% String headerColour= "#000000"; %>

<% String tableBgColour= "#FFFFFF"; %>

<% String fontFace= "Verdana, Arial"; %>

<% String fontSize= "12px"; %>

<% String headerText = "Progress Tracker"; %>

<% String cellPadding= "4"; %>

<% String cellSpacing= "2"; %>

 

<% if ( !form.isDisplayInColour() ) {

selectedBgColour = "#000000";

} %>

<% /* Adjust the font size - user may have clicked the 'larger text' button */ %>

<% fontSize = form.calculateFontSize(fontSize, form.getZoomAmount()); %>

<% /* Build style sheets */ %>

<% String styleSheetNotCurrentPage = "text-align:center; font-family:"

                  + fontFace

                  + "; font-size:"

                  + fontSize + "; color:"

                  + normalColour

                  + "; background-color:"

                  + normalBgColour; %>

<% String styleSheetCurrentPage = "text-align:center; font-family:"

                  + fontFace

                  + "; font-size:"

                  + fontSize + "; color:"

                  + selectedColour

                  + "; background-color:"

                  + selectedBgColour; %>

<% String styleSheetHeading = "text-align:center; font-family:"

                  + fontFace

                  + "; font-size:"

                  + fontSize + "; color:"

                  + headerColour

                  + "; background-color:"

                  + headerBgColour

                  + "; font-weight:bold"; %>

<% /* Get the form's pages and the current page */ %>

<% boolean showUnchainedPages = false; %>

<% Object[] pages= form.getPages(showUnchainedPages); %>

<% String currentPage = form.getCurrentPage(); %>

<% /* Format the progress tracker */ %>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="5%">&nbsp;</td>

<td width="100%">

<table width="100%" border="0" cellspacing='<%=cellSpacing%>' cellpadding='<%=cellPadding%>' bgcolor='<%=tableBgColour%>'>

<tr>

<td style='<%= styleSheetHeading %>'>

<%=headerText%>

</td>

</tr>

<% for ( int i = 0; i < pages.length; i++ ) { %>

<% String pageName = (String) pages[i]; %>

<% String displayName = pageName; %>

<% if (displayName.length() > 1 ) { %>

<% displayName = pageName.toLowerCase(); %>

<% displayName = displayName.replace('_', ' '); %>

<% displayName = displayName.substring(0,1).toUpperCase() + displayName .substring(1); %>   

<% } %>

<tr>

<% if ( currentPage != null && currentPage.equals(pageName) ) { %>

<td style='<%= styleSheetCurrentPage %>'>

<b><%= displayName %></b>

<% } else { %>

<td style='<%= styleSheetNotCurrentPage %>'>

<%= displayName %>

<% } %>

</td>

</tr>

<% } %>

</table>

</td>

<td width="5%">&nbsp;</td>

</tr>

</table>

<BR>