Skip to main content.

JSP Controls Tag Library

Navigation: JSP Controls | About

Example: Notebook With Read-Only Data

This example shows how to create a simple notebook with read-only content.

Tab1 Tab2

Sample tabbed notebook, first page.

Notebook Component

Create a separate JSP file, for example, notebook1.jsp. Define a notebook using notebook tags. The component name specified in <jc:component> tag must be unique within the application. Two-panel notebook is shown below:

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://jspcontrols.net/tags/core" prefix="jc" %>
<jc:component id="Notebook1">
  <jc:tabcontrol>
    <jc:tabpage label="Tab1">
      <p>Sample tabbed notebook, first page.</p>
    </jc:tabpage>
    <jc:tabpage label="Tab2">
      <p>Sample tabbed notebook, second page.</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="Notebook1">
      <jsp:include page="notebook1.jsp"/>
    </div>
    ...
  </body>
</html>

Run The Example

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