Skip to main content
Kinetic Community

Exercise Two - create new JSP pages

Overview

In this exercise we will create a new JSP file called categories in the pages directory and a new JSP file called subCategories in the partials directory.  We will import the subCategories file into the categories file.  Then we will display the categories in an unordered list and subcategories will show in an unordered list under their category.

Activity

Part 1 create the categories page.

  1. Add a file named categories.jsp to the pages directory.
  2. Add the standard page header.

<%@page pageEncoding="UTF-8" contentType="text/html" trimDirectiveWhitespaces="true"%>
<%@include file="../bundle/initialization.jspf" %>
  1. Set the categories variable to an array of categories using the Category Helper.
<c:set var="categories" value="${CategoryHelper.getCategories(kapp)}" scope="request"/>
  1. Define which layout this file should get injected into by adding the bundle layout tag. 
<bundle:layout page="../layouts/layout.jsp">
    
    <%-- Replace this with step 5 of exercise 2. Add the Unordered List and forEach loop to display the category's subcategories. --%>
    
</bundle:layout>

5. Add an unordered list to display the categories on the webpage and a for each loop that will loop over each element in the categories array that was set above.  We are assigning each object to a variable called category

<ul>
  <c:forEach var="category" items="${categories}">
    
    <!-- Replace this with step 1 of Part 1 of exercise 4.  Wrap conditional logic to only display the category, 
    it's forms and subcategories if the category has active forms and/or it has a subcategory that has an active form. -->
    
    <li>${text.escape(category.name)}</li>

    <%-- Replace this with step 1 of exercise 3. Add an Unordered List and forEach loop to display the category's forms. --%>
      
    <%-- Replace this with steps 6 - 8 of exercise 2. Add the Unordered List and the import of subCategories.jsp file. --%>
      
  </c:forEach>
</ul>

In the above code the category variable will be assigned to an object.  Objects many have properties on them and one technique for accessing these properties is called dot notation.  On line 7 we are accessing the name of the category by using dot notation.  The name property is short had for the .getName() method (replacing name with .getName() will have the same result).

  1. Inside the for loop add a list item and an unordered list to display the subcategories.
  2. Set a variable named currentCat to a value of the category using expression language.
  3. Import the subCategory.jsp file into the categories.jsp file.
<%-- Replace this with step 3 of Part 1 of exercise 4.  Wrap conditional logic to only display subcategories that have active forms.  --%>

<li>
  <ul>
    <%-- Recursive Subcatgegories --%>
    <c:set scope="request" var="currentCat" value="${category}"/>
    <c:import url="${bundle.path}/partials/subCategory.jsp" charEncoding="UTF-8" />
  </ul>
</li>

Notice that we are going to run a recursive loop.  If we use this technique it doesn't matter how many subcategories exist we will display them all.  We are assigning the category object to a variable called currentCat.  The subcategory file will make use of the currentCat variable.

Part 2 create the subcategory Page.

  1. Add a file named subCategory.jsp to the partials directory.
  2. Include the initialization.jspf file.
<%@include file="../bundle/initialization.jspf" %>
  1. Add the following code below the initialization include tag.  Retrieve an array of bundleCagtegory objects using the .getSubcategories method.  As we loop over the elements of the array we assign the object to the variable subcategory.
<c:forEach var="subcategory" items="${currentCat.getSubcategories()}">

  <!-- Replace this with step 1 of Part 2 of exercise 4.  Wrap conditional logic to only display the category,
  it's forms and subcategories if the category has active forms and/or it has a subcategory that has an active form. -->

  <li>${text.escape(subcategory.name)}</li>
    
  <%-- Replace this with step 3 of exercise 3.  Unordered List and forEach loop to add a subcategory's forms goes here. --%>

  <%-- Replace this with steps 4 - 5 of exercise 2.  Unordered List and the import of the subCategories.jsp file goes here. --%> 

</c:forEach>

The forEach loop is making use of the currentCat variable that we set in the categories.jsp file.  The currentCat variable is an object type of bundleCategory.  The bundleCategory object has a property on it called .getSubcategories() which returns an arrays of objects that also are of type bundleCategory.  We then loop over each object in the array and assign the object to a variable called subcategory.  Each time through the loop the subcategory variable is assign to a bundleCategory object.  We are then using dot notation to access the name property of the bundleCategory object which will return the defined name of the object.  The name will then be displayed on the web page.

  1. In an unordered list reassign the currentCat variable to the subcategory variable using the set tag.  
  2. Import the subCategory.jsp file into the subCategory.jsp file (this technique is called recursion). 
<%-- Replace this with step 3 of Part 2 of exercise 4.  Wrap conditional logic to only display subcategories that have active forms.  --%>

<li>
  <ul>
    <c:set var="currentCat" value="${subcategory}" scope="request"/>
    <jsp:include page="subCategory.jsp"/>
  </ul>
</li>

We are reassigning the currentCat variable to the subcategory variable.  Remember that the subcategory variable is currently assigned to a bundleCategory object.  A bundleCategory object is just a super set of a normal category object (super set means it has all of the properties of the category object with extend properties).  The ability to have subcategories is one of the extended properties of a bundleCategory object has.

After the <c:set> we are including the subCategory.jsp file which will inject the current file into it's self.  This is a popular programing technique call recursion (to learn more about recursion do a websearch for the term.)  Recursion basically is a method calling itself and can be used to navigate down a data structure that is of unknown depth.  We don't know how many levels of subcategories a kapp can have so we use recursion to find all top level categories and their subcategories. By reassigning the subcategory variable to the currentCat variable we are able to pass the current bundleCategory object into the new loop.  Then we can see if the current category has any subcategories.