Adding A JSP Template for the Grid

Finally, you need to add a JSP template to the /template/framework/group folder in order to make the new grid work. The name of the template must match the name of the grid (in this case,x140x300x300x140-config.jsp). Here is an example JSP template:

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.escenic.com/widget-framework/core" prefix="wf-core" %>

<div id="page" class="x140x300x300x140-config">
  <div id="header">
    <c:set var="area" value="header"/>
    <c:set var="items"
           value="${requestScope.configSectionPool.rootElement.areas[area].items}"
           scope="request"/>
    <c:set var="elementwidth" value="940" scope="request"/>
    <wf-core:showItems level="0"/>
    <c:remove var="elementwidth" scope="request"/>
    <c:remove var="items" scope="request"/>
  </div>

  <div id="content">
    <div id="areas">
      <div id="left">
        <c:set var="area" value="left"/>
        <c:set var="items"
               value="${requestScope.configSectionPool.rootElement.areas[area].items}"
               scope="request"/>
        <c:set var="elementwidth" value="140" scope="request"/>
        <wf-core:showItems level="0"/>
        <c:remove var="elementwidth" scope="request"/>
        <c:remove var="items" scope="request"/>
      </div>
      <div id="main1">
        <c:set var="area" value="main1"/>
        <c:set var="items"
               value="${requestScope.configSectionPool.rootElement.areas[area].items}"
               scope="request"/>
        <c:set var="elementwidth" value="300" scope="request"/>
        <wf-core:showItems level="0"/>
        <c:remove var="elementwidth" scope="request"/>
        <c:remove var="items" scope="request"/>
      </div>
      <div id="main2">
        <c:set var="area" value="main2"/>
        <c:set var="items"
               value="${requestScope.configSectionPool.rootElement.areas[area].items}"
               scope="request"/>
        <c:set var="elementwidth" value="300" scope="request"/>
        <wf-core:showItems level="0"/>
        <c:remove var="elementwidth" scope="request"/>
        <c:remove var="items" scope="request"/>
      </div>

      <div id="right">
        <c:set var="area" value="right"/>
        <c:set var="items"
               value="${requestScope.configSectionPool.rootElement.areas[area].items}"
               scope="request"/>
        <c:set var="elementwidth" value="140" scope="request"/>
        <wf-core:showItems level="0"/>
        <c:remove var="elementwidth" scope="request"/>
        <c:remove var="items" scope="request"/>
      </div>
    </div>
  </div>

  <div id="footer">
    <c:set var="area" value="footer"/>
    <c:set var="items"
           value="${requestScope.configSectionPool.rootElement.areas[area].items}"
           scope="request"/>
    <c:set var="elementwidth" value="940" scope="request"/>
    <wf-core:showItems level="0"/>
    <c:remove var="elementwidth" scope="request"/>
    <c:remove var="items" scope="request"/>
  </div>
</div>