Skip to main content
Kinetic Community

Exercise Five - refactor for style

Overview

In this exercise we are going to add style to the categories.jsp file and the subCategory.jsp file.  We will be using Twitter Bootstrap UX/UI library to display the categories and subcategories as panels.  For categories and subcategories that have forms associated to them the forms will be added to an accordion style dropdown menu for display.  

Activity

Part 1 add style to the categories.jsp file

  1. In the categories.jsp file remove all unordered list tags and list item tags.  Below is an example of the code with the <ul> and <li> tags removed.  This Activity references the line numbers in the code snippet below.  Comments have been added to assist in the completion of this activity.
<%@page pageEncoding="UTF-8" contentType="text/html" trimDirectiveWhitespaces="true"%>
<%@include file="../bundle/initialization.jspf" %>

<c:set var="categories" value="${CategoryHelper.getCategories(kapp)}" scope="request"/>

<bundle:layout page="../layouts/layout.jsp">
  
  <%-- Add div with container class (step 2)--%>
    
    <c:forEach var="category" items="${categories}">
      <c:if test="${category.hasForms() || category.hasNonEmptySubcategories()}">
      
        <%-- Add elements styled with Bootstrap classes (step 4)--%>
      
      
        <%-- (step 9) --%>${text.escape(category.name)}<%-- (step 10) --%>

        <%-- Close the Bootstrap elements tags h4 and div (step 5)--%>
        
        <%-- Warp the forms loop with the dropdown controls (step 11)--%>
        
            <c:forEach var="form" items="${category.forms}">
              ${text.escape(form.name)}
            </c:forEach>
        
        <%-- Close the div for the forms loop controls (step 12) --%>
        
        <%-- Close the Bootstrap element tag with the class panel-default here (step 6)--%>
        
        <c:if test="${category.hasNonEmptySubcategories()}">
          <%-- Recursive Subcatgegories --%>
          <c:set scope="request" var="currentCat" value="${category}"/>
          <c:import url="${bundle.path}/partials/subCategory.jsp" charEncoding="UTF-8" />
        </c:if>
        
        <%-- Close the Bootstrap element tag with the class panel-group here (step 7)--%>
      
      </c:if>
    </c:forEach>
    
  <%-- Close div tag with the contianer class (step 3)--%>

</bundle:layout>
  1. First we will place the contents of the categories.jsp file inside of a div with the class container. Replace the (step 2) comment with the code below.
<div class="container">

The Bootstraps Grid system utilizes the container class to set some page alignment.  The container class has a fixed-width and aligns the content inside of it to the center of the screen.  Do a web search on Bootstrap Grid system to learn more about the container class. 

  1. Close the div with the class container on it by replacing the (step 3) comment with a div closing tag.
  2. Add the Bootstrap styling code by replacing the (step 4) comment.
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
  1. Close the Bootstrap elements tags for the classes panel-title and panel-heading by replacing the (step 5) comment with two closing div tags. 
    • It is good practice to the closing div tags on two lines
  2. Close the Bootstrap element tag with the class panel-default by replacing the (step 6) comment with a div closing tag.
  3. Close the Bootstrap element tag with the class panel-group by replacing the (step 7) comment with a div closing tag.
  4. Refresh the page and see the changes.  At this point we have not added the code required to build the accordion dropdown menu so the forms should all be displayed under the categories they belong in. Subcategories should look broken.
  5. Wrap the category name with the required anchor tag; the category name is inside of an expression. Replace (step 9) with the below code.
 <a data-toggle="collapse" href="#${category.slug}">

The code below has a click event tied to it.  The Bootstrap js code look for an element with the id that matches the value in the anchor tags href property.  The # sign is commonly used to signify an element id attribute. Notice that we are using a variable for the value of the href attribute.  We are using the category.slug which we know will be unique each time through the loop.

  1. Close the anchor tag by adding a anchor closing tag after the category name expression. Replace (step 10) with a closing anchor tag.
  2. Wrap the for each loop that is use to display the forms.  Replace (step 11)  with code below
<div id="${category.slug}${catLoop.index}" class="panel-collapse collapse">

The id tag has been added to the div to correspond to the a tag set above.  Notice that there is no # in the value of the id, also notice we are using variables for the value of the id and it matches the value of the href attribute in the a tag.  If we used a static value instead if any of the anchor tags was clicked it would open all of the panels with the same id (which would be all of them. 

  1. Close the for each loop by adding a closing div tag to line 19.

Part 2 add style to the subCategory.jsp file

  1. In the subCategory.jsp file remove all unordered list tags and list item tags.  Below is an example of the code with the <ul> and <li> tags removed.  This Activity references the line numbers in the code snippet below.  Comments have been added to assist in the completion of this activity.
​​​​<%@include file="../bundle/initialization.jspf" %>

<c:forEach var="subcategory" items="${currentCat.getSubcategories()}">
  <c:if test="${subcategory.hasForms() || subcategory.hasNonEmptySubcategories()}">
  
  <%-- Add elements styled with Bootstrap classes (step 2)--%>
  
  
    <%-- (step 7) --%>${text.escape(subcategory.getName())}<%-- (step 8) --%>
    
    <%-- Close the Bootstrap elements tags h4 and div (step 3)--%>
    
    <%-- Warp the forms loop with the dropdown controls (step 9)--%>
    
        <c:forEach var="form" items="${subcategory.forms}">
          ${text.escape(form.getName())}
        </c:forEach>
        
    <%-- Close the div for the forms loop controls (step 10) --%>
    
    <%-- Close the Bootstrap element tag with the class panel-default here (step 4)--%>
    
    <c:if test="${subcategory.hasNonEmptySubcategories()}">
       <c:set var="currentCat" value="${subcategory}" scope="request"/>
       <jsp:include page="subCategory.jsp"/>
    </c:if>
    
    <%-- Close the Bootstrap element tag with the class panel-group here (step 5)--%>
    
  </c:if>
</c:forEach>
  1. Add the Bootstrap styling code by replacing the comment starting from line 4 and ending on line 7.
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
  1. Close the Bootstrap elements tags with the classes panel-title and panel-heading by replacing the commented line. (first close the h4 tag on line 9 then the div tag on line 10)
  2. Close the Bootstrap element tag with the class panel-default by replacing the commented code on line 16 with a div closing tag.
  3. Close the Bootstrap element tag with the class panel-group by replacing the commented code on line 21 with a div closing tag.
  4. Refresh the page and see the changes.  At this point we have not added the code required to build the accordion dropdown menu so the forms should all be displayed under the subcategories they belong in.
  5. Wrap the subcategory name with the required anchor tag below. The category name is inside of an expression on line 8.
 <a data-toggle="collapse" href="#${subcategory.slug}">
  1. Close the anchor tag by adding a anchor closing tag after the subcategory name expression on line 8.
  2. Wrap the for each loop that is use to display the forms with the code below on line 11.
<div id="${subcategory.slug}" class="panel-collapse collapse">
  1. Close the for each loop by adding a closing div tag to line 15.