Skip to main content.

JSP Controls Tag Library

Navigation: JSP Controls | About

Example 3: Notebook With Command Link (separate)

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

First Second Third

Content of the first tab panel goes here.

Clicks:
Add Click

Click Counter Component

Create a separate JSP file, for example, clickcomponent.jsp. Define the view and appropriate event handlers:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/lib/c.tld" prefix="c" %>
<%@ taglib uri="http://jspcontrols.net/tags/core" prefix="jc" %>

<jc:component id="ClickComponent">

  <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:reload/>
  <jc:prerender/>

  Clicks: ${CLICKS}
  <jc:link styleClass="jspcCommand" event="clickEvent">Add click</jc:link>

</jc:component>

Notebook Component

Create a separate JSP file, for example, notebook3.jsp. Define a notebook using notebook tags. Include the Click Component 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"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="http://jspcontrols.net/tags/core" prefix="jc" %>
<jc:component id="Notebook3">

  <jc:tabcontrol>
    <jc:tabpage label="Tab1">
      <p>
        Content of the first tab panel goes here.<br/>
        <div id="ClickComponent">
          <jsp:include page="clickcomponent.jsp"/>
        </div>
      </p>
    </jc:tabpage>
    <jc:tabpage label="Tab2">
      <p>Content of the second tab panel goes here.</p>
    </jc:tabpage>
    <jc:tabpage label="Tab3">
      <p>Content of the third tab panel 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="Notebook3">
      <jsp:include page="notebook3.jsp"/>
    </div>
    ...
  </body>
</html>

Run The Example

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