Example template with tree menu

(Difference between revisions)
Jump to: navigation, search
(→Template structure)
(→Template structure)
Line 65: Line 65:
 
This page has no menu, but it does have a header, a footer, a body with a h1 heading matching the page title, and an area for body content.
 
This page has no menu, but it does have a header, a footer, a body with a h1 heading matching the page title, and an area for body content.
 
The cms:editable tag allows the ''Direct edit'' button to appear on the page.
 
The cms:editable tag allows the ''Direct edit'' button to appear on the page.
 +
 +
== Tree menu ==
 +
 +
Add the line
 +
<source lang="html4strict">
 +
<cms:include file="treemenu.jsp" />
 +
</source>
 +
to the place where you want your menu.
 +
 +
Then create the file '''treemenu.jsp''' in the same directory as the page template. Its content should be:
 +
<source lang="java5">
 +
<%@ page import="org.opencms.jsp.*" %>
 +
<%@ page import="org.opencms.file.*" %>
 +
<%@ page import="java.util.*" %>
 +
<%!
 +
//recursive function
 +
    @SuppressWarnings({"unchecked"})
 +
    static void showFolder(CmsJspActionElement cms, JspWriter out, CmsJspNavBuilder nav,
 +
                          List<CmsJspNavElement> filesInFolder, String indent)
 +
            throws java.io.IOException {
 +
 +
        for (CmsJspNavElement sub : filesInFolder) {
 +
            String name = sub.getResourceName();
 +
            if (name.endsWith("index.html") || name.endsWith("index.jsp")) continue;
 +
            String navText = sub.getProperty(CmsPropertyDefinition.PROPERTY_NAVTEXT);
 +
            if (navText == null) navText = sub.getTitle();
 +
            out.print(indent + "<li><a href=\"" + cms.link(name) + "\">" + navText + "</a>");
 +
            if (sub.isFolderLink()) {
 +
                List<CmsJspNavElement> filesInSub = nav.getNavigationForFolder(sub.getResourceName());
 +
                if (filesInSub.size() > 1) {
 +
                    out.println("\n"+indent + " <ul>");
 +
                    showFolder(cms, out, nav, filesInSub, indent + "  ");
 +
                    out.print(indent + " </ul>\n"+indent);
 +
                }
 +
            }
 +
            out.println("</li>");
 +
        }
 +
    }
 +
%><%
 +
    CmsJspActionElement cms = new CmsJspActionElement(pageContext, request, response);
 +
    CmsJspNavBuilder nav = cms.getNavigation();
 +
   
 +
%>
 +
<ul id="cssmenu1">
 +
<% showFolder(cms,out,nav,nav.getNavigationForFolder("/"),"  "); %>
 +
</ul>
 +
</source>
 +
 +
The code will generate nested lists like:
 +
<source lang="html4strict">
 +
<ul id="cssmenu1">
 +
  <li><a href="/cms/about/">About us</a>
 +
  <ul>
 +
    <li><a href="/cms/about/mission.html">Mission</a></li>
 +
    <li><a href="/cms/about/news/">News</a></li>
 +
    <li><a href="/cms/about/events/">Events</a></li>
 +
    <ul>
 +
      <li><a href="/cms/about/events/other/">Other</a></li>
 +
      <li><a href="/cms/about/events/community/">Community</a></li>
 +
    </ul>
 +
    </li>
 +
  </ul>
 +
  </li>
 +
  <li><a href="/cms/projects/">Projects</a></li>
 +
  <li><a href="/cms/intranet/">Intranet</a></li>
 +
</ul>
 +
</source>
 +
 +
The code gets the NavText property, if is is empty, it uses Title.

Revision as of 14:03, 22 January 2010

Here is an example of a page template, which has a navigational menu generated as a tree from folder structure.

Contents

Location of template

A new module for a site

I create a new module for every web site. For example, let's say I am creating a site www.example.com.

First I create a new folder /sites/example, set its "Title" (it is displayed then in workplace as the name of the site), edit opencms-system.xml to addd mapping for it, restart tomcat.

Then I create the module. I go to Administration - Module management, click New module, fill Package name as com.example.site, check all checkboxes for creating folders.

Then I go to Module Resources and I add a new resource /sites/example so that the site pages are part of the module.

Template and resources location

The template then should be located in the /system/modules/com.example.site/templates/ folder.

The images, CSS and JavaScript files it uses shoudl be located in the /system/modules/com.example.site/resources/ folder. It is good to set the export property on that folder to true, so they are exported from database to a static file to improve speed.

Page title and index.html files

I was solving the problem of index.html and navigation in OpenCMS for years and here is my solution.

The problem is, that when you nave a folder with set navigation, it can have a Title and a NavText properties. But it should also contain a file index.html which can also have a Title and a NavText. These can be inconsistent with the setting of the folder.

My solution is , that I set Title and NavText on the folder, but I do not set Title and NavText on the index.html.

In the page template, I use 

<title> <cms:property name="Title" file="search" escapeHtml="true" /></title>

The file="search" causes that the title of the index.html file be inherited from the parent folder, so it cannot be incosistent.

Template structure

A basic page template then may look like this: 

<%@page buffer="none" session="false"  %>
<%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms" %>
<cms:template element="head">
<html>
<head> 
    <title><cms:property name="Title" file="search" escapeHtml="true"/></title>
    <cms:editable/>
</head>
<body>    
 <h1><cms:property name="Title" file="search" escapeHtml="true"/></h1>
</cms:template>
<cms:template element="body">
        <cms:include element="body" editable="true"/>
</cms:template>
<cms:template element="foot">
</body>
</html>
</cms:template>

This page has no menu, but it does have a header, a footer, a body with a h1 heading matching the page title, and an area for body content. The cms:editable tag allows the Direct edit button to appear on the page.

Tree menu

Add the line 

 <cms:include file="treemenu.jsp" />

to the place where you want your menu.

Then create the file treemenu.jsp in the same directory as the page template. Its content should be: 

<%@ page import="org.opencms.jsp.*" %>
<%@ page import="org.opencms.file.*" %>
<%@ page import="java.util.*" %>
<%!
//recursive function
    @SuppressWarnings({"unchecked"})
    static void showFolder(CmsJspActionElement cms, JspWriter out, CmsJspNavBuilder nav,
                           List<CmsJspNavElement> filesInFolder, String indent)
            throws java.io.IOException {
 
        for (CmsJspNavElement sub : filesInFolder) {
            String name = sub.getResourceName();
            if (name.endsWith("index.html") || name.endsWith("index.jsp")) continue;
            String navText = sub.getProperty(CmsPropertyDefinition.PROPERTY_NAVTEXT);
            if (navText == null) navText = sub.getTitle();
            out.print(indent + "<li><a href=\"" + cms.link(name) + "\">" + navText + "</a>");
            if (sub.isFolderLink()) {
                List<CmsJspNavElement> filesInSub = nav.getNavigationForFolder(sub.getResourceName());
                if (filesInSub.size() > 1) {
                    out.println("\n"+indent + " <ul>");
                    showFolder(cms, out, nav, filesInSub, indent + "  ");
                    out.print(indent + " </ul>\n"+indent);
                }
            }
            out.println("</li>");
        }
    }
%><%
    CmsJspActionElement cms = new CmsJspActionElement(pageContext, request, response);
    CmsJspNavBuilder nav = cms.getNavigation();
 
%>
<ul id="cssmenu1">
<% showFolder(cms,out,nav,nav.getNavigationForFolder("/"),"  "); %>
</ul>

The code will generate nested lists like: 

<ul id="cssmenu1">
  <li><a href="/cms/about/">About us</a>
   <ul>
    <li><a href="/cms/about/mission.html">Mission</a></li>
    <li><a href="/cms/about/news/">News</a></li>
    <li><a href="/cms/about/events/">Events</a></li>
     <ul>
      <li><a href="/cms/about/events/other/">Other</a></li>
      <li><a href="/cms/about/events/community/">Community</a></li>
     </ul>
    </li>
   </ul> 
  </li>
  <li><a href="/cms/projects/">Projects</a></li>
  <li><a href="/cms/intranet/">Intranet</a></li> 
</ul>

The code gets the NavText property, if is is empty, it uses Title.

Retrieved from "http://www.opencms-wiki.org/index.php?title=Example_template_with_tree_menu&oldid=4161"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox