Skip to main content.

JSP Controls Tag Library

Navigation: JSP Controls | About

Example 2: Notebook With Command Link (all in one)

This example shows how to create a notebook with a command link on a notebook page, and to handle the event directly in the notebook component.

Tab1 Tab2

Tab1 content goes here.

Clicks:
Add Click

Notebook Component

Create a separate JSP file, for example, notebook2.jsp. Define a notebook using notebook tags. The component name specified in <jc:component> tag must be unique within an application. Create a command link that sends an event, for example clickEvent. Make sure that you defined event handler before <jc:tabcontrol> tag. Reload and Prerender tags are not needed, these functions are built into <jc:tabcontrol tag:

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://jspcontrols.net/tags/core" prefix="jc" %>
<jc:component id="Notebook2">

  <jc:handler event="clickEvent">
    <%
      Integer clicks = session.getAttribute("CLICKS");
      if (clicks == null) clicks = new Integer(1);
      else clicks = new Integer(clicks.intvalue() + 1);
      session.setAttribute("CLICKS", clicks);
    %>
  </jc:handler>

  <jc:tabcontrol>
    <jc:tabpage label="Tab1">
      <p>
        Tab1 content goes here.<br/>
        Clicks: ${CLICKS}
        <jc:link styleClass="jspcCommand" event="clickEvent">Add click</jc:link>
      </p>
    </jc:tabpage>
    <jc:tabpage label="Tab2">
      <p>Tab2 content goes here.</p>
    </jc:tabpage>
  </jc:tabcontrol>
</jc:component>

Composite Page

Include the notebook into composite page using <jsp:include> action. Do not forget DIV element that wraps <jsp:include> action element and has the same ID as notebook component:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <body>
    ...
    <div id="Notebook2">
      <jsp:include page="notebook2.jsp"/>
    </div>
    ...
  </body>
</html>

Run The Example

Navigate to composite page and check that notebook works with Javascript turned on and off.