OpenSubsystems :: Open Core :: Web User Interface

Open Core is an infrastructure component and therefore it doesn't really have a user interface on it's own. What it provides instead are facilities to easily build maintainable and modular web user interface. Even though developers are free to use any technology or template engine available, the benefit of using the integrated Tiles template engine together with the available layout is the speed of development and tight integration with the rest of OpenSubsystems.

Template engine

Open Core is using Tiles template engine. As all template engines, Tiles allows to define web page template and then reuse them to easily create new web pages. The advantages of Tiles are:

The easy of use, when one needs to learn only few tags to be able to create templates.
No need to create and maintain separate configuration file. The definition and reuse of template is all done in the pages itself.
Uses JSP technology and therefore it is a natural with for OpenSubsystems.

Creating template

Defining template using Tiles is simple. First create a JSP page and at the top of the page paste the following line

   <%@ taglib uri="/tiles" prefix="tiles" %>

This will tell JSP engine that the page is going to use Tiles template engine. Then code the rest of the JSP page as you would do normally, just at the places where you want to insert parametrized content use one of the following two tags

   <tiles:getAsString name="token1" ignore="boolean"/%>

   <tiles:insert attribute="token2" ignore="boolean"/%>

The token1 and token2 in the above tags are placeholders that can be later replaced with a content defined in a page based on this template. For example the real JSP page can contain the following snippet

   <title><tiles:getAsString name="pagetitle" ignore="true"/%></title>

By defining value "My test page" for token pagetitle the snippet above would result in the following HTML code to appear in the generated page

   <title>My test page</title>

Using template

Once the template is defined, it is easy to create new page using this template. Create a new JSP page and at the top of the page again paste the following line

   <%@ taglib uri="/tiles" prefix="tiles" %>

This will tell JSP engine that the page is going to use Tiles tempate engine. Then instead of coding the rest of the page from scratch, use the following tags to reuse the already defined template

   <tiles:insert page="path_to_template" flush="boolean">

   <tiles:put name="token1" value="some_content"/>

   <tiles:put name="token2" direct="boolean">

The insert tag is used to tell the Tiles template engine what template to use. The two forms of the put tag are used to define the content, which will replace the placeholders defined in the template as described previously. For example the following snippet

   <tiles:insert page="/core/jsp/layout/emptypage.jsp" flush="true">
   
      <tiles:put name="pagetitle" value="My test page"/>
   
      <tiles:put name="content" direct="true">
         The content of the page
      </tiles:put>
   
   </tiles:insert>

defines a new page, which is using the template defined in file /core/jsp/layout/emptypage.jsp and for token pagetitle defined in this template substitutes value My test page and for token content substitutes value The content of the page.

Open Core templates

Empty page

Path to layout: /core/jsp/layout/emptypage.jsp | Demo

Empty page is the easiest way how to create HTML pages. You do not need to even know, how is HTML page supposed to look like. Just create a new JSP page, specify to use empty page layout and decide what values to use for the following tokens

Token	Purpose
pagetitle	title of the page displayed in window title bar
head	additional content of the <head> tag (JS scripts, CSS, etc.)
bodyattribs	attributes of the <body> tag
content	content of the <body> tag (the web page)

Loading page

Path to layout: /core/jsp/layout/loadingpage.jsp | Demo

Loading page improves the empty page layout with an ability to display animation and custom message to user while the page is loading. The content of your page doesn't display until the entire page including all related scripts, images and style sheets is loaded. This can be useful for pages that load slowly either due to slow server or because the operation to generate page takes a long time. To use it just create a new JSP page, specify to use loading page layout and decide what values to use for the following tokens

Token	Purpose
loadingpagetitle	title of the page displayed in window title bar
loadingmessage	text to display when the page is loading
loadingcontentid	ID of the element (usually <div> tag) containing the content, which is loading and which should be displayed to user once the entire page is loaded. If it is called "none" then there is no content and all the user will is is the loading message and animation.
loadinghead	additional content of the <head> tag (JS scripts, CSS, etc.)
loadingonload	JavaScript to be executed on load
loadingonkeyup	JavaScript to be executed when on key up event occurs on the page
loadingbodyattribs	attributes of the <body> tag
loadingcontent	content to display to user once the page is loaded. This content should be usualy enclosed in tag (usually <div> tag) whose ID was specified using loadingcontentid token.

Basic website

Path to layout: /core/jsp/layout/basicwebsite.jsp | Demo 1 | Demo 2

Basic website template provides an easy way how to create a standard website with header, footer and content areas. The header and footer are always visible even if the page is resized and only a portion of the content, which can fit into area in between them is displayed. The content can either have its own scrollbar or no scrollbars can be visible at all as the two Demo pages demonstrate. To use it just create a new JSP page, specify to use basic website layout and decide what values to use for the following tokens

Token	Purpose
basicscrollbars	boolean flag specifying if the whole page can scroll (if true) or some special scrolling will be performed (if false) and there should not be scrollbar on the entire page. Set this to false if you want only the content to scroll.
basictoppage	boolean flag specifying if the whole page has to be a top level page or if it can be embedded in the frame. If true then this page cannot be embedded in the frame and has to be a top level page.
basicpagetitle	title of the page displayed in window title bar
basicloadingmessage	text to display when the page is loading
basichead	additional content of the <head> tag (JS scripts, CSS, etc.)
basiconload	JavaScript to be executed on load. This JavaScript can use variables iContentAreaHeigh, which contains height of the content area and iBodyContentHeight, which contains the height of the body content.
basiconresize	JavaScript to be executed when the page is resized. This JavaScript can use variables iContentAreaHeigh, which contains height of the content area and iBodyContentHeight, which contains the height of the body content.
basiconunload	JavaScript to be executed when the page is unloaded
basicbodyattribs	attributes of the <body> tag
basicheader	content of the header area on the web page
basiccontent	content of the main content area on the web page
basicfooter	content of the footer area of the web page

In addition, the following attributes in HTTP request can alter the behavior of the template

Attribute	Purpose
basiclayoutcss	full url of a css file which should be used to specify layout of the whole page. If none is specified a default one will be used.

Application

Path to layout: /core/jsp/layout/application.jsp | Demo 1 | Demo 2 | Demo 3

Application layout provides an easy way how to create pages for webapplications. The page is divided into two areas each of which can be toggled visible or hidden. One can be for example display list of items and the other one a detail for a selected item. This layout also provides a way how to display list of tabs allowing user to switch between various modules of the web application.

Token	Purpose
apptitle	title of the page displayed in window title bar
apploadingmessage	text to display when the page is loading
apppadding	padding in pixels between the upper and lower areas
apphead	additional content of the <head> tag (JS scripts, CSS, etc.)
apponload	JavaScript to be executed on load. This JavaScript can use variables iContentAreaHeigh, which contains height of the content area and iBodyContentHeight, which contains the height of the body content.
apponresize	JavaScript to be executed when the page is resized. This JavaScript can use variables iContentAreaHeigh, which contains height of the content area and iBodyContentHeight, which contains the height of the body content.
apponlistresize	JavaScript to be executed when the upper screen area is resized
apponshowpreview	JavaScript to be executed when the preview is displayed.
apprightsideheader	content to display on the right side of the header. The left size will automatically display name of your application configured during build.
appitemlist	content of the top area on the web page for example with list of items
appitempreview	content of the bottom area on the web page for example with preview of an item
appcanmaximizelist	Flag specifying if the top area can be maximized (if true) or if it will always keep its default height (if false).
appmaximizelistonload	Flag specifying if the top area should be maximized when the page is loaded (if true) or if the top area will keep its defaul height (if false).
appdisplaypreviewonload	Flag specifying if the preview area should be visible when the page is loaded or if if it should be initially hidden (if false).

In addition, the following attributes in HTTP request can alter the behavior of the template

Attribute	Purpose
activepage	token representing id of valid module on the toolbar if the application was configured to display tabs for available modules.

OpenSubsystems

Business Components for Java Applications

Open Core

Web User Interface