wiki:Tutorial/Cms_from_scratch
Last modified 5 years ago

HowTo: Implementation of the Corinis CMS

  1. HowTo: Implementation of the Corinis CMS
    1. Introduction
    2. Preparation
    3. Preparation of the design
    4. Initialising of Corinis CCM and CMS
    5. Implementation of the CMS
    6. Submenu
    7. Display of the name of the current document
    8. The cutomized files
      1. INSTALLATIONSDIR\webroot\test1\index.jsp
      2. INSTALLATIONSDIR\webroot\test1\screenstyle.css
      3. INSTALLATIONSDIR\xsl\test1\document_name.xsl
      4. INSTALLATIONSDIR\xsl\test1\sidenav.xsl
      5. INSTALLATIONSDIR\xsl\test1\topnav.xsl
      6. INSTALLATIONSDIR\templates\content.xhtml

Introduction

This HowTo implements a new Design for a Corinis CCM implementation. As Design-Template we chose the OpenSource? Web Design (Localize). The result will be a new CMS implementation with the new design.

Preparation

This howto is based on the "war"-installation (or the windows-installer). If you use application based you have to make sure that the core class is correctly initialized (the "appname" added as first parameter)! Also the path's may differ

Preparation of the design

First of all we create a new subdirectory in the directories webroot (for pictures/files) and WEB-INF\xsl (for XSL-Stylesheets). We chose the name "test1".

After that unpack Localize.zip to webroot\test1\:

Then rename index.html to index.jsp

Got to  http://localhost/test1/index.jsp with your webbrowser and watch the design.

Initialising of Corinis CCM and CMS

First index.jsp:

index.jsp line 1: 

<%@ page language="java" import="corinis.*,corinis.modules.*" %>
<%
  Core core = new Core (pageContext);
  Cms cms = (Cms)core.getModule(Cms.class);
  CmsLifeFileManager cf = (CmsLifeFileManager)core.getModule(CmsLifeFileManager.class);
%>
<html>
<head>
<title>Localize</title>
Navigation

Instead of the current menu we want the menu generated out of the CMS. We start with show.xsl (to see what we get):

index.jsp line 15: 

<div class="titleblock"><h1>Localize</h1><p>“Insert some random text here.”</p></div>

<div>
<%=core.parseDom(cf.getFileManagerComplete(), "show.xsl")%>
<ul class="navbar">
     <li><a href="#" class="nav">Home</a></li>

Now we create the XSL for the menu - we choose the name "topnav.xsl":

index.jsp Zeile 18: 

<div>
<%=core.parseDom(cf.getFileManagerComplete(), "test1/topnav.xsl")%>
</div>

<div class="rightcontainer">

In the horizontal menu we only want to see first level menu entries:

test1/topnav.xsl line 1: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <ul class="navbar">
    <xsl:for-each select="CMSFILEMANAGER/ENTRY/ENTRY[./@type=0]">
      <li>
        <a class="nav" href="index.jsp?Document_id={ID}">
          <xsl:value-of select="NAME"/>
        </a>
      </li>
    </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

We get all directories (CMSFILEMANAGER/ENTRY/ENTRY with attribute type=0) and show them. As link we define index.jsp?Document_id= the ID of the directory.

Furthermore we want to mark the current selected menu. Therefore we create a new style:

screenstyle.css line 51: 

a.nav:hover, a.navActive {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;

and add it to the corresponding xsl:

test1/topnav.xsl Zeile 6: 

      <li>
        <a>
          <xsl:choose>
            <xsl:when test="(@activedoc='true') or (@activedocpath='true')">
              <xsl:attribute name="class"><xsl:text>navActive</xsl:text></xsl:attribute>
            </xsl:when>
            <xsl:otherwise>
              <xsl:attribute name="class"><xsl:text>nav</xsl:text></xsl:attribute>
            </xsl:otherwise>
          </xsl:choose>
          <xsl:attribute name="href">

Implementation of the CMS

Now we implement the CMS (the document to be shown is handled via the Document_id parameter)

index.jsp line 35: 

<div class="content">
<%=cms.getDocument(null)%>    
</div>

The next step is to implement the vertical submenu in a breadcrum-version. The function-call is the same as with the horizontal menu, but the xsl will show other data.

index.jsp line 21: <div class="rightcontainer"> 

  <div class="rightbox">
    <h2>Menü</h2>
    <%=core.parseDom(cf.getFileManagerComplete(), "test1/sidenav.xsl")%>
  </div>

<div class="rightbox linkbox"><h2>Links</h2>

screenstyle.css line 21: 

a:hover {
color:#3B4471; text-decoration:none;}
a.activePath {
color:#3B4471; text-decoration:underline;}
a:active {

The Navigation in the breatcrum-version will show:

  • directories in italic
  • the current path in blue
  • the current document bold
  • and all combinations of the above.

test1/sidenav.xsl line 1: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <xsl:apply-templates select="CMSFILEMANAGER/ENTRY/ENTRY" />
  </xsl:template>
  
  <xsl:template match="ENTRY">
    <a href="index.jsp?Document_id={ID}">
      <xsl:if test="(@activedoc='true') or (@activedocpath='true')">
        <xsl:attribute name="class"><xsl:text>activePath</xsl:text></xsl:attribute>
      </xsl:if>
      <xsl:choose>
        <xsl:when test="(@type=0) and (@activedoc='true')">
          <xsl:attribute name="style">
            <xsl:text>font-style: italic;font-weight: bold;</xsl:text>
          </xsl:attribute>
        </xsl:when>
        <xsl:when test="@type=0">
          <xsl:attribute name="style">
            <xsl:text>font-style: italic</xsl:text>
          </xsl:attribute>
        </xsl:when>
        <xsl:when test="@activedoc='true'">
          <xsl:attribute name="style">
            <xsl:text>font-weight: bold;</xsl:text>
          </xsl:attribute>
        </xsl:when>
      </xsl:choose>
      <xsl:value-of select="NAME"/>
    </a><br/>
    <!-- only display further path if the entry is active -->
    <xsl:if test=" @activedocpath='true'">
      <xsl:apply-templates select="ENTRY[(@activedoc='true') or (@activedocpath='true')]"/>
    </xsl:if>
    <xsl:if test="(@activedoc='true')">
      <xsl:apply-templates select="ENTRY"/>
      <br/>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

Display of the name of the current document

index.jsp line 13: 

<div class="container">

<div class="titleblock">
  <h1><%=core.parseDom(cms.getEntry(),"test1/document_name.xsl")%></h1>
  <p>“Insert some random text here.”</p>
</div>

<div>

test1/document_name.xsl line 1: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <xsl:choose>
      <xsl:when test="/CMSFILEMANAGER/ENTRY/NAME='/'">
        <xsl:text>Corinis CCM Test1</xsl:text>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="/CMSFILEMANAGER/ENTRY/NAME"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>      
</xsl:stylesheet>

Now the current filename will be displayed. The XSL checks if the document is the root document (filename = '/') - and if so, a special text will be shown.

If we wanna show the teaser of a document instead of "Insert some random text here", only a little change is necessary:

index.jsp line 13: 

<div class="titleblock">
  <%
    cms.cmsfile.dataFields = new String[]{"teaser"};
    out.print(core.parseDomHtml(cms.getEntry(),"test1/document_name.xsl"));
  %>
</div>

In String[] cms.cmsfile.dataFields we define the fields we wanna back from the method getEntry. The fieldnames are defined in the template.

Because the teaserfield is a richedit-field, the display is rendered with parseDomHTML. This makes sure that the entities and HTML-Tags are displayed correctly.

test1/document_name.xsl line 1: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <h1>
      <xsl:choose>
        <xsl:when test="/CMSFILEMANAGER/ENTRY/NAME='/'">
          <xsl:text>Corinis CCM Test1</xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="/CMSFILEMANAGER/ENTRY/NAME"/>
        </xsl:otherwise>
      </xsl:choose>
    </h1>
    <p>
      <xsl:value-of select="substring-before(CMSFILEMANAGER/ENTRY/CONTENT/teaser, '.')"/>.
    </p>
  </xsl:template>      
</xsl:stylesheet>

Because a teaser can be larger, we will show only the first part - until the first full stop. We will implement this via XPath.:

templates/content.xhtml line 1: 

<corinis>
  <corinis-comment>
  <div class="whiteBox">
    <div class="whiteBoxContent">
      <corinis-field name="teaser" type="richedit" />
    </div>
  </div>
  <br />
  </corinis-comment>
  <corinis-repeatable name="content">

Because the teaser is shown already, we put it under comment - in the CMS template (with the tag corinis-comment the things within this tag will be shown in edit-mode, but not in life-mode).

The cutomized files

INSTALLATIONSDIR\webroot\test1\index.jsp

<%@ page language="java" import="corinis.*,corinis.modules.*" %>
<%
  Core core = new Core (pageContext);
  Cms cms = (Cms)core.getModule(Cms.class);
  CmsLifeFileManager cf = (CmsLifeFileManager)core.getModule(CmsLifeFileManager.class);
%>
<html>
<head>
<title>Localize</title>
<link rel="stylesheet" type="text/css" href="screenstyle.css" />
</head>
<body>
<div class="container">

<div class="titleblock">
  <%
    cms.cmsfile.dataFields = new String[]{"teaser"};
    out.print(core.parseDomHtml(cms.getEntry(),"test1/document_name.xsl"));
  %>
</div>

<div>
<%=core.parseDom(cf.getFileManagerComplete(), "test1/topnav.xsl")%>
</div>

<div class="rightcontainer">

  <div class="rightbox">
    <h2>Menü</h2>
    <%=core.parseDom(cf.getFileManagerComplete(), "test1/sidenav.xsl")%>
  </div>

<div class="rightbox linkbox"><h2>Links</h2>
     <a href="http://www.google.com/" title="Google">Google</a>
     <a href="http://www.oswd.org/" title="Open Source Web Design">OSWD</a>
     <a href="http://www.wpdfd.com/" title="Web Page Design for Designers">WPDFD</a>
     <a href="http://www.sxc.hu/" title="stock.xchng">stock.xchng</a>
     <a href="http://www.tomshardware.com/index.html" title="Tom's Hardware Guide">THG</a>
     <a href="http://www.howstuffworks.com/" title="How Stuff Works">How Stuff Works</a>
</div>
</div>

<div class="content">
<%=cms.getDocument(null)%>    
</div>

<div class="footer">
<div class="right">
<p>© 2005 Whatsisname Thingymajig</p>
<p><a href="http://validator.w3.org/check/referer">Validate XHTML 1.0 Strict</a></p>
</div>
<p>Email <a href="mailto:webmaster@yoursite.com">Webmaster</a></p>
<p>Photo Credit: Dimiter Tzankov, <a href="http://www.sxc.hu/">stock.xchng</a></p>
</div>

</div>
</body>
</html>

INSTALLATIONSDIR\webroot\test1\screenstyle.css

body {
margin:0; padding:0; font-family:verdana, arial, sans-serif; font-size:80%; color:#666666; text-align:center;
background-color:#DDDDDD;}

p {
margin:0.2em 0 1.2em 0; padding:0.3em;}

h1 {
padding:0; margin:0;font-size:250%; font-weight:normal; font-style:italic;
color:#8CD749; font-family:"Trebuchet MS", verdana, arial, sans-serif;}

h2 {
background-color:#DDDDDD; color:#3B4471; font-size:100%; font-weight:normal; margin:0.2em; padding:0;
font-style:italic; font-family:"Trebuchet MS", verdana, arial, sans-serif;}

div {
margin:0; padding:0; display:block;}

a:link, a:visited {
color:#8CD749; text-decoration:underline;}
a:hover {
color:#3B4471; text-decoration:none;}
a.activePath {
color:#3B4471; text-decoration:underline;}
a:active {
color:#8CD749; text-decoration:underline;}



.container {
background-color:#FFFFFF; margin:0 auto 0 auto; padding:0; width:65%;}

.titleblock {
padding:2em; margin:0; text-align:left;
background-image:url(leaf.jpg); background-repeat:no-repeat; background-position:right center;}

.titleblock p {
text-indent:4em; color:#3B4471;}



ul.navbar {
list-style-type:none; float:left; display:block; width:100%; line-height:1.5em;
clear:both; margin:0; padding:0; background-color:#999999;}

ul.navbar li {
display:inline;}

a.nav:link, a.nav:visited {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#999999; color:#FFFFFF;}

a.nav:hover, a.navActive {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#8CD749; color:#FFFFFF;}

a.nav:active {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#999999; color:#FFFFFF;}



.rightcontainer {
float:right; clear:both; width:13em; margin:1em 0 0 0; padding:0;}

.rightbox {
margin:0.5em; padding:0.3em; border:1px solid #999999; text-align:center;}

.rightcontainer h2 {
text-align:left; padding:0 0 0 1.5em;}

.linkbox a {display:block;}



.content {
clear:left; text-align:left; margin:1.2em 13.5em 0 0; padding:1em 1ex 1em 1.5ex;}

.content h2 {text-indent:3em;}



.footer {
color:#999999; font-size:75%; margin:2.5em 0.2em 0.5em 0.5em; padding:0.8em;
border-top:1px solid #999999; text-align:left; clear:both;}

.footer .right {
float:right; clear:right; text-align:right;}

.footer p {margin:0;}

INSTALLATIONSDIR\xsl\test1\document_name.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <h1>
      <xsl:choose>
        <xsl:when test="/CMSFILEMANAGER/ENTRY/NAME='/'">
          <xsl:text>Corinis CCM Test1</xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="/CMSFILEMANAGER/ENTRY/NAME"/>
        </xsl:otherwise>
      </xsl:choose>
    </h1>
    <p>
      <xsl:value-of select="substring-before(CMSFILEMANAGER/ENTRY/CONTENT/teaser, '.')"/>.
    </p>
  </xsl:template>      
</xsl:stylesheet>

INSTALLATIONSDIR\xsl\test1\sidenav.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <xsl:apply-templates select="CMSFILEMANAGER/ENTRY/ENTRY" />
  </xsl:template>
  
  <xsl:template match="ENTRY">
    <a href="index.jsp?Document_id={ID}">
      <xsl:if test="(@activedoc='true') or (@activedocpath='true')">
        <xsl:attribute name="class"><xsl:text>activePath</xsl:text></xsl:attribute>
      </xsl:if>
      <xsl:choose>
        <xsl:when test="(@type=0) and (@activedoc='true')">
          <xsl:attribute name="style">
            <xsl:text>font-style: italic;font-weight: bold;</xsl:text>
          </xsl:attribute>
        </xsl:when>
        <xsl:when test="@type=0">
          <xsl:attribute name="style">
            <xsl:text>font-style: italic</xsl:text>
          </xsl:attribute>
        </xsl:when>
        <xsl:when test="@activedoc='true'">
          <xsl:attribute name="style">
            <xsl:text>font-weight: bold;</xsl:text>
          </xsl:attribute>
        </xsl:when>
      </xsl:choose>
      <xsl:value-of select="NAME"/>
    </a><br/>
    <!-- only display further path if the entry is active -->
    <xsl:if test=" @activedocpath='true'">
      <xsl:apply-templates select="ENTRY[(@activedoc='true') or (@activedocpath='true')]"/>
    </xsl:if>
    <xsl:if test="(@activedoc='true')">
      <xsl:apply-templates select="ENTRY"/>
      <br/>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

INSTALLATIONSDIR\xsl\test1\topnav.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <ul class="navbar">
    <xsl:for-each select="CMSFILEMANAGER/ENTRY/ENTRY[./@type=0]">
      <li>
        <a href="index.jsp?Document_id={ID}">
          <xsl:choose>
            <xsl:when test="(@activedoc='true') or (@activedocpath='true')">
              <xsl:attribute name="class"><xsl:text>navActive</xsl:text></xsl:attribute>
            </xsl:when>
            <xsl:otherwise>
              <xsl:attribute name="class"><xsl:text>nav</xsl:text></xsl:attribute>
            </xsl:otherwise>
          </xsl:choose>
          <xsl:value-of select="NAME"/>
        </a>
      </li>
    </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

INSTALLATIONSDIR\templates\content.xhtml

<corinis>
  <corinis-comment>
  <div class="whiteBox">
    <div class="whiteBoxContent">
      <corinis-field name="teaser" type="richedit" />
    </div>
  </div>
  <br />
  </corinis-comment>
  <corinis-repeatable name="content">
    <corinis-exist name="header">
      <h2>
        <corinis-field name="header" type="text" />
      </h2>
    </corinis-exist>
    <div class="whiteBox">
      <div class="whiteBoxContent">
        <corinis-repeatable name="text">
          <corinis-field name="image" style="float:left;margin-right:15px" type="image" />
          <corinis-field name="content" type="richedit" />
          <corinis-comment>
            <br />Source Code: (optional in box)
            <br />
          </corinis-comment>
          <corinis-exist name="code">
            <div class="code">
              <corinis-field name="code" type="richedit" />
            </div>
          </corinis-exist>
          <br clear="all"/>
        </corinis-repeatable>
      </div>
    </div>
    <br/>
  </corinis-repeatable>
</corinis>

Attachments