JSPTabControl

User guide

This section is made up :

structure of tab control. See section Therminology for more information.
How insert your tab control in your JSP?
How customize your renderer tab control with CSS in your JSP?
How manage localization of tab control (title of each tab page)?
How select a tab page into Action Struts (or JSP) at server side?
How manage state (READ-ONLY, FORBIDDEN, VISIBLE,...) of tab page at server side?
How select a tab page into with Javascript at client side?
How manage state (READ-ONLY, FORBIDDEN, VISIBLE,...) of tab page at client Side?
How manage tab page with runat server?

Therminology

JSPTabControl use following therminology :

Tab control for identify a set of tabs. A tab control is made up :
- Tab control header which is the header of tab control. Tab control header contains all tabs page header. It is generated with ul HTML element.
- tab control body which is the body of tab control. This body contains all tabs page body. It is generated with div HTML element.
tab control header and tab control body are included into a global div HTML element.
tab page for identify a tab. A tab page is made up :
- tab page header which is the header of tab page. It is generated with li HTML element. This contains a HTLML element with attribute href or onclick and title of your tab.
- tab page body which is the body of tab page. This body contains your tab content. This content is included into div HTML element. When tab page is not selected, this div has attribute style="display:none;".

Go to section HTML generated, for more information.

With JSPTabControl, you can assign a state (READ-ONLY, FORBIDDEN, ...) for each tabPage. In this top example Tab page 3 is assigned with FORBIDDEN state. A state define :

a rendered which is configurated with style class CSS. (eg : Tab page 3 header is red).
a behaviour, which is configurated by adding javscript for particulary event. When user select Tab page 3 event onclick), a javascript alert appears whith message You are not authorized to select this tab page!.

JSPTabControl using

To use JSPTabControl, you must :

insert jsptabcontrol.js javascript which manage selection of tab :

  <script type="text/javascript" src="js/jsptabcontrol.js" ></script>

after configurate your CSS, insert your own CSS my-jsptabcontrol.css which manage your rendered tab control.
```
  <link href="/css/my-jsptabcontrol.css" rel="stylesheet" type="text/css"/>
  
```

use JSPTabControl taglib in your JSP.

  <jsptabcontrol:tabControl name="MY_TABCONTROL" 
                            width="500px"
                            height="50px"
                            tabHeaderClass="tabHeader2"
                            tabBodyClass="tabBody2"  >
                            
    <jsptabcontrol:tabPage name="MY_TABPAGE1" title="Tab page 1" width="150px" >
      Tab Page 1 content
    </jsptabcontrol:tabPage>
    ....

  </jsptabcontrol:tabControl>

See section JSPTabControl Taglib for more information.

JSPTabControl Taglib

You can use JSPTabControl with :

jsptabcontrol.tld taglib. It is a standard taglib (version 1.0).
jsptabcontrol-el.tld taglib. This taglib add EL capacity for tab control.

TabControl Taglib

Attributs

Attribute Name	Description	Required ?	EL ?
name	Name of Tab control. This Name for tab control must be unique in your JSP. It is used to identify tab control (used for example to select a tab page with Action Struts).	True	True
width	Width of Tab control.	False	True
height	Height of Tab control.	False	True
tabControlHeaderClass	Style Class of tab control header.	False	True
tabControlBodyClass	Style Class of tab control body.	False	True
bundleKey	Resource bundle key (eg : net.sourceforge.jsptabcontrol.usecase.MyResourceBundle).	False	True
localeKey	Locale key ("fr","en", ...) or key of Locale object, stored into request.	False	True

TabPage Taglib

Attributs

Attribute Name	Description	Required ?	EL ?
name	Name of Tab page. This Name for tab page must be unique for tab control. It is used to identify tab page (used for example to select a tab page with Action Struts).	True	True
width	Width of Tab page.	False	True
title	Title of Tab page.	False	True
titlekey	Key of title which is used to get label of title into Resources file (ApplicationResources or Resource Bundle).	False	True
href	You can use href, to manage tab page with runat server.	False	True
tabPageHeaderClass	Style Class of tab page header.	False	True
tabPageBodyClass	Style Class of tab page body.	False	True

CSS configuration

Before configurate JSPTabControl with CSS, you must know HTML generated by taglib. see section HTML generated.

Localization

AplicationResources Struts

By default, JSPTabControl use ApplicationResources of Struts like messages resources. If you use JSPTabControl with Struts, there is nothing to do.

Resource Bundle

If you want use your own file, it's possible to parameter the resource bundle to use like this :

  <jsptabcontrol:tabControl name="PERSONNE_TABCONTROL"  
                            bundleKey="net.sourceforge.jsptabcontrol.usecase.MyResourceBundle"
                            localeKey="en"  > 
  ....        
  </jsptabcontrol:tabControl>

In this case, file MyResourceBundle_en.properties, stored into package net.sourceforge.jsptabcontrol.usecase will be use like messages resources.

JSPTabControlUtil

JSPTabControlUtil is util class for manage tab pages of tab control.

Select a tab page

To select tab page MY_TABPAGE2 of tab control MY_TABCONTROL, you can call method setSelectedTabPageName in your Action Struts (or in your JSP) :

JSPTabControlUtil.setSelectedTabPageName(request, "MY_TABCONTROL", "MY_TABPAGE2");

How manage tab page state?

States defintion

States definition are configurated into configuration XML jstabcontrol-config.xml file which must check the jsptabcontrol-config-1.0.dtd DTD.

Each state define :

rendererd tab page by adding style class. You can :

insert style class for tab page header :

<insert-styleclass where="tabPageHeader" >
  <![CDATA[tabPageHeaderReadOnly]]>
</insert-styleclass>

insert style class for tab page body :

<insert-styleclass where="tabPageBody" >
        <![CDATA[tabPageBodyReadOnly]]>
</insert-styleclass>

behaviour tab page swith events. So you can insert javascript for each event of a HTML element (tab page header) :
- insert javascript to execute for particulary event :
```
<insert-javascript event="onclick" where="before" >
        <![CDATA[alert('You are not authorized to select this tab page!');return false;]]>
</insert-javascript>
```

Onclick event is particulary, because by default javascript (TabToggle function) is generated to select tab page selected. If you want insert javascript before javascript TabToggle function, set where="before" into insert-javascript element.

Here an example of jstabcontrol-config :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE jsptabcontrol-config PUBLIC 
    "-//JSPTabControl/JSPTabControl JSPTabControlConfig DTD 1.0//EN"
    "http://jsptabcontrol.sourceforge.net/dtd/jsptabcontrol-config-1.0.dtd">
<jsptabcontrol-config>
        <tabpage-states>                
                
                <!-- Render of Tab page with DISABLE state -->
                <tabpage-state name="READ-ONLY">        
                        <insert-styleclass where="tabPageHeader" >
                                <![CDATA[tabPageHeaderReadOnly]]>
                        </insert-styleclass>    
                        <insert-styleclass where="tabPageBody" >
                                <![CDATA[tabPageBodyReadOnly]]>
                        </insert-styleclass>    
                </tabpage-state>

                <!-- Render of Tab page with FORBIDDEN state -->
                <tabpage-state name="FORBIDDEN">        
                        <insert-styleclass where="tabPageHeader" >
                                <![CDATA[tabPageHeaderForbidden]]>
                        </insert-styleclass>            
                        <insert-javascript event="onclick" where="before" >
                                <![CDATA[alert('You are not authorized to select this tab page!');return false;]]>
                        </insert-javascript>
                </tabpage-state>

                <!-- Render of Tab page with INVISIBLE state -->
                <tabpage-state name="INVISIBLE" visible="false" >       
                        
                </tabpage-state>
                                
        </tabpage-states>
        
</jsptabcontrol-config>

Save states defintion

You can save /WEB-INF/jstabcontrol-config.xml configuration with Plugin Struts, like this :

  <!-- JSPTabControl Plugin -->
  <plug-in className="net.sourceforge.jsptabcontrol.struts.plugin.JSPTabControlPlugin">
    <set-property property="jspTabControlConfig" value="/WEB-INF/jstabcontrol-config.xml"/>
  </plug-in>

If you don't want use Struts, you can use JSPTabControlServlet, like this :

  <!-- Servlet JSPTabControlServlet which load config of JSPTabControl -->
  <servlet>
          <servlet-name>jspTabControl</servlet-name>
            <servlet-class>net.sourceforge.jsptabcontrol.servlet.JSPTabControlServlet</servlet-class>
            <!-- JSPTabControl Config files (Required) -->
            <init-param>
                <param-name>jspTabControlConfig</param-name>
                <param-value>/WEB-INF/jsptabcontrol-config.xml</param-value>
        </init-param>                   
  </servlet>

Set state for a tab page.

To set READ-ONLY state for tab page MY_TABPAGE2 of tab control MY_TABCONTROL, you can call method setTabPageState in your Action Struts (or in your JSP) :

JSPTabControlUtil.setTabPageState(servletContext, request, "MY_TABCONTROL", "MY_TABPAGE2", "READ-ONLY");

Select a tab page at client Side

If you want manage selection of tab page with Javascript, you can call javascript function setSelectedTabPageName of javascript file jsptabcontrol.js. You could use this function to display a next tab button to select the next tab selected.

For instance to select tab page MY_TABPAGE2 of tab control MY_TABCONTROL, you use this function like this :

  setSelectedTabPageName("MY_TABCONTROL", "MY_TABPAGE2");
  ...

If force is true, the tab is selected, otherwise this function call onclick event of tab. For instance if your tab is FORBIDDEN, you can manage if you execute your permission (display an alert) or not.

How manage tab page state at client Side?

Once you have configure states (see section How manage tab page state?), you can set a state for a tab page, whith client side. For this, you must include javascript file jsptabcontrol-states.js

  <script type="text/javascript" src="js/jsptabcontrol-states.js" ></script>

and call taglib jsptabcontrol:javascriptStateConfig, which get your config, and generate list of state into object javascript.

  <jsptabcontrol:javascriptStateConfig />

To set a state por a particulary tab, you can use setTabPageState function. For instance to set state FORBIDDEN to tab page MY_TABPAGE2 of tab control MY_TABCONTROL, you use this function like this :

  setTabPageState("MY_TABCONTROL", "MY_TABPAGE2", "FORBIDDEN");

How manage tab page with runat server?

By default tab page selection is client side, managed by javascript function (TabToggle function). But you can manage your tab page with runat server, by using href attribute of taglib tabPage. To select the tab page after calling url of href, you must understand, how JSPTabControl manage the last tab page selected.

For keep tab page selected after posting form, JSPTabControl generate an input hidden by using name of tabControl. For tabControl with name MY_CONTROL, input hidden generated is like this :

<input type="hidden" 
       id="tabPageInputHiddenName_MY_TABCONTROL"         
       name="tabPageInputHiddenName_MY_TABCONTROL" 
       value="" />

Value of this input hidden element contains the last name of tab page selected. So your url into your href must be like this :

      <jsptabcontrol:tabPage name="ADRESS_TABPAGE" 
                             title="Adress Tab"
                             href="/myAction.do?tabPageInputHiddenName_MY_TABCONTROL=ADRESS_TABPAGE">
      ....
      </jsptabcontrol:tabPage>

JSPTabControl

Project Documentation

User guide

TabControl Taglib

Attributs

TabPage Taglib

Attributs

AplicationResources Struts

Resource Bundle

States defintion

Save states defintion

Set state for a tab page.