Template

Mit Templates lassen sich neben dem CSS Stylesheet auch die HTML-Vorlagen von mediaDESK anpassen. Somit ist es möglich mediaDESK komplett nach den eigenen Wünschen und Vorgaben der CI zu designen.

Ein Template stellt sich zusammen aus:

• Einen oder mehreren Page-Files
• Einen oder mehreren Include-Files

1 Page-File 1.1 Namenskonventionen 1.2 Liste unterstützter Page-Files 2 Include File 2.1 header.jsp 2.2 footer.jsp 2.3 Variablen 2.4 Links 2.5 Überprüfungen und Abfragen 3 Generische Files

Page-File

Jede aufgerufene Seite braucht ein Page-File aus dem dann die Html-Datei generiert wird. Bei der Loginseite (http://demo.mediadesk.net/login) ist das z.b. pLoginForm.jsp. Ein Page-File beginnt immer mit p...

Ein rudimentärres Page-Template-File für die Loginseite kann beispielsweise so aussehen:

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8" language="java" %>

<jsp:include page="header.jsp"/>

<form id="login" method="post" action="/login">
  <dl>
        <spring:bind path="command.userName">
            <dt><label for="textUsername"><spring:message code="login.username"/>:</label></dt>
            <dd><input name="userName" value="<c:out value="${status.value}"/>" type="text" id="textUsername"/></dd>
        </spring:bind>
        <spring:bind path="command.password">
            <dt><label for="textPassword"><spring:message code="login.password"/>:</label></dt>
            <dd><input name="password" type="password" id="textPassword"/></dd>
        </spring:bind>
        <dt> </dt>
        <dd><input type="submit" value="Login" class="actionButton submitButton"/></dd>
  </dl>
</forum>

<jsp:include page="footer.jsp"/>

Namenskonventionen

Es gibt zwei Arten von Seiten:

• Ansichts-Seiten: in denen Listen oder Informationen angezeigt werden (z.b. Datei u. Bildübersicht)
• Formular-Seiten: in denen Daten eingegeben werden (z.b. Kategorie bearbeiten-Seite)

Ansichtsseiten bestehen immer aus einer Datei und verwenden Dateinamen nach dem Schema: p#SeitenName#.jsp

Formularseiten sind meistens ein Paar und verwenden Dateinamen nach dem Schema:

• p#SeitenName#Form.jsp für das Formular
• p#SeitenName#Success.jsp für die Ergebnis-Seite, wenn die Formulardaten korrekt eingegeben wurden

Liste unterstützter Page-Files

• Login
  • pLoginForm.jsp: Login-Formular-Seite
  • pLoginSuccess.jsp: Login erfolgreich-Seite
  • pLoginRequired.jsp: spezielle Login-Formular-Seite die angezeigt wird, wenn ein Benutzer eine Aktion ausführen wollte obwohl er nicht angemeldet ist. Er wird dann gefragt ob er sich anmelden oder registrieren will.
• Event-Übersicht
  • pEventIndex.jsp: Event-Übersicht
  • pEvent.jsp: Event-Ansicht
• Medien-Vorschau (Popup)
  • pPreview.jsp
• Leuchtkasten
  • pLightbox.jsp
• Shopping-Cart
  • pCart.jsp
• Suche
  • pSearchadvanced.jsp: Erweiterte Suche
  • pSearchresult.jsp: Such-Ergebnis
• Kategorien
  • pCategory.jsp: Kategorieübersicht
• Aktuellste Bilder
  • pLatest.jsp

Include File

Da es auch Seitenbereiche gibt, die auf mehreren oder teilweise sogar allen Seiten vorkommen gibt es Include-Files. Das sind HTML-Vorlagen, die nicht speziell für eine Seite (z.b. Login-Seite) aufgerufen werden, sondern aus den Page-Files augerufen werden können.

Liste der Include Dateien:

• header.jsp
• footer.jsp

Include Dateien für Auflistungen (Datei und Thumbnail-View):

• listFiles.jsp
• listThumbnails.jsp
• list.jsp (Übernimmt die Entscheidung ob listFiles.jsp oder listThumbnails.jsp angezeigt werden soll)

header.jsp

Die header.jsp sollte von jedem Page-File aufgerufen werden, um den HTML-Header und den Kopf der Seite zu generieren.

Ein header.jsp-File könnte so aussehen:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %><%@ taglib uri="/suside" prefix="suside" %><%@page contentType="text/html;charset=utf-8"%><%  response.setHeader("Pragma", "no-cache"); %><%  response.setHeader("Cache-Control", "no-cache"); %><%  response.setHeader("Cache-Control","no-store" ); %><%  response.setDateHeader("Expires", 0); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title><%= Config.webTitle %></title>
<script	type="text/javascript" src="/js/submit.js"></script>

<!-- calendar -->
<style type="text/css">@import url(/js/jscalendar-1.0/calendar-win2k-1.css);</style>
<script type="text/javascript" src="/js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="/js/jscalendar-1.0/lang/calendar-de.js"></script>
<script type="text/javascript" src="/js/jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript" src="/js/fixed.js"></script>

<script type="text/javascript" src="/js/imagemenu.js"></script>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="/js/ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.1/ext-all.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="/js/ext-2.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/js/ext-2.1/resources/css/xtheme-gray.css">

<link rel="stylesheet" href="/css/style.css">
<link rel="alternate" type="text/xml" title="RSS .92" href="/rss/folder.xml">

Das header.jsp-File wird mit folgendem Code in ein Page-File eingebaut:

 <jsp:include page="header.jsp"/>

Existiert im selbst erstellten Template eine header.jsp wird diese Datei verwendet, ansonsten die Standard-Datei von mediaDESK.

footer.jsp

Auch die footer.jsp sollte von jedem Page-Template aufgerufen werden, hier wird der Fuss der Seite generiert.

Das footer.jsp-File wird mit folgendem Code in ein Page-File eingebaut:

 <jsp:include page="footer.jsp"/>

Das Footer Template wird mit folgen

Variablen

Code	Bedeutung
<c:out value="${config.webTitle}"/>	Der Titel der Website (aus den Einstellungen)
<c:out value="${config.cssUrl}"/>	Url unter der die CSS-Stylesheets erreichbar sind (Verlinkung)
<c:out value="${config.css}"/>	Css Anweisungen die Inline in der Seite ausgegeben werden
<c:out value="${config.googleWebmasters}	HTML-Code für Google Webmasters (aus den Einstellungen)
<c:out value="${config.includePostHtml}"/>	HTML-Code der am Ende jeder Seite angezeigt wird

Links

Code	Bedeutung
<c:out value="${setLangDe}"/>	Link auf die deutschsprachige Seite
<c:out value="${setLangEn}"/>	Link auf die englischsprachige Seite
<c:url value="/login"/>	Link auf die Login-Seite
<c:url value="${config.footerCorpLink}"/>	Link auf die konfigurierte Firmen-Website
<c:url value="/${lng}/popup/tac"/>	Link auf die AGB

Überprüfungen und Abfragen

Code	Bedeutung
<c:if test="${showRss}>.</c:if>	Inhalt wird angezeigt wenn, die RSS-Funktion aktiviert wurde
<c:if test="${config.multiLang}">.</c:if>	Inhalt wird angezeigt wenn, die Mehrsprachigkeit aktiviert ist
<suside:login notLoggedIn="false">.</suside:login>	Inhalt wird angezeigt wenn, der Benutzer eingeloggt ist
<suside:login notLoggedIn="true">.</suside:login>	Inhalt wird angezeigt wenn, der Benutzer nicht eingeloggt ist

Generische Files

Darunter sind globale Masken, Dialoge, Message-Boxen usw. zu verstehen. Die Template-Datei beginnt mit g.

Folgende Generische Files gibt es:

• gMessageOk.jsp: Zeigt eine Seite mit einem Infotext und OK-Button an.