HowTo: Implementierung des Corinis CMS

  1. HowTo: Implementierung des Corinis CMS
    1. Einleitung
    2. Vorbereitung
    3. Vorbereitung des Designs
    4. Initialisierung des Corinis CCM und der CMS Module
    5. Einbindung des CMS
    6. Das Untermenü
    7. Anzeige des aktuellen Dokumentenamens im Kopf
    8. Die angepassten Dateien
      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

Einleitung

In diesem HowTo wird ein neues Design für das Corinis CCM vorbereitet und implementiert. Dazu wird ein OpenSource? Web Design (Localize) als Vorlage verwendet. Das Endergebnis ist das Design mit dem aktuellen Inhalt der Demoversion, mit Breadcrumnavigation (siehe hier)

Vorbereitung

Vorbereitung des Designs

Als erstes wird im Verzeichnis INSTALLATIONSDIR\webroot (für Bilder/jsp Dateien) sowie unter INSTALLATIONSDIR\xsl (für die XSL Stylesheets) je ein neues Verzeichnis mit dem Namen test1 erstellt.

Nach INSTALLATIONSDIR\webroot\test1\ wird der Inhalt des Localize.zip entpackt:

Die Datei index.html wird in index.jsp umbenannt, sodass sie vom Apache Tomcat korrekt erkannt wird.

Wenn mann nun auf http://localhost/test1/index.jsp mit einem Webbrowser geht sieht man das Design.

Initialisierung des Corinis CCM und der CMS Module

Zuerst wird in der Datei index.jsp Corinis Core initialisiert:

index.jsp Zeile 1: 

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

Anstelle des vorhandenen Menüs wollen wir nun das Menü aus dem CMS anzeigen. Wir beginnen mit show.xsl:

index.jsp Zeile 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>

Nun legen wir das XSL für das Menü an. Wir nennen es topnav.xsl:

index.jsp Zeile 18: 

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

<div class="rightcontainer">

Im oberen Menü soll nur die erste Menüebene angezeigt werden:

test1/topnav.xsl Zeile 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">
          <xsl:attribute name="href">
            <xsl:text>index.jsp?Document_id=</xsl:text>
            <xsl:value-of select="ID"/>
          </xsl:attribute>
          <xsl:value-of select="NAME"/>
        </a>
      </li>
    </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>

Wir holen uns alle Verzeichnisse (CMSFILEMANAGER/ENTRY/ENTRY mit dem Attribut type=0) und zeigen diese an. Als Verlinkung wählen wir index.jsp?Document_id= die ID des Verzeichnisses.

Zusätzlich soll der aktuelle Bereich gekennzeichnet werden. Dazu erstellen wir einen neuen Style:

screenstyle.css Zeile 51: 

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

Und fügen das entsprechende in das xsl ein:

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">

Einbindung des CMS

Als nächstes binden wir das eigentlich CMS ein (das jeweilig anzuzeigende Dokument wird über den Parameter Document_id gesteuert)

index.jsp Zeile 35: 

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

Das Untermenü

Die Hauptbereiche funktionieren nun. Als nächster Schritt wird das Untermenü als Breadcrum-Variante eingebaut. Der Funktionsaufruf ist der Gleiche wie beim oberen Menü auch, aber über das XSL zeigen wir andere Daten an:

index.jsp Zeile 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 Zeile 21: 

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

Die Seitennavigation zeigt in der Breadcrumvariante folgendes an:

  • Verzeichnisse Kursiv
  • Den aktuellen Pfad Blau
  • Die aktuelle Datei fett
  • und natürlich alle Kombinationen.

test1/sidenav.xsl Zeile 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>
      <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:attribute name="href">
        <xsl:text>index.jsp?Document_id=</xsl:text>
        <xsl:value-of select="ID"/>
      </xsl:attribute>
      <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>

Anzeige des aktuellen Dokumentenamens im Kopf

index.jsp Zeile 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 Zeile 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>

Damit wird der aktuelle Dateiname angzeigt. Im XSL befindet sich noch die Abfrage ob das Dokument das Root Dokument ist (Dateiname '/') - wenn ja, wird ein Text angezeigt.

Will man Statt des "Insert some random text here", den Anreißer des Dokumentes anzeigen ist nur eine kleine Änderung nötig:

index.jsp Zeile 13: 

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

Mit dem setzen von String[] cms.cmsfile.dataFields gibt getEntry die entsprechenden Felder zurück. Der Name der Felder wird in der Vorlage angegeben.

Da das Teaserfeld ein Richedit-Feld ist, wird die Ausgabe mit parseDomHtml gerendert, dadurch werden Entities und HTML Tags korrekt ausgegeben.

test1/document_name.xsl Zeile 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>

Da ein Anreisser durchaus länger sein kann, wird der im oberen Bereich nur der Teil bis zum ersten Punkt verwendet. Dies läst sich mit XPath realisieren.

templates/content.xhtml Zeile 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">

Da der Anreisser bereits angezeigt wird, klammern wir ihn in der CMS Vorlage aus (mit corinis-comment wird ein Bereich zwar im Editiermodus angezeigt, nicht jedoch im Lifesystem).

Die angepassten Dateien

INSTALLATIONSDIR\webroot\test1\index.jsp

<%@ page language="java" import="corinis.*,corinis.modules.*" %>
<%
  Core core = new Core ("corinis", request, response, getServletContext());
  Cms cms = new Cms(core);
  CmsLifeFileManager cf = new CmsLifeFileManager(core);
%>
<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>
      <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:attribute name="href">
        <xsl:text>index.jsp?Document_id=</xsl:text>
        <xsl:value-of select="ID"/>
      </xsl:attribute>
      <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>
          <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">
            <xsl:text>index.jsp?Document_id=</xsl:text>
            <xsl:value-of select="ID"/>
          </xsl:attribute>
          <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