Seitentemplate

Seitentemplate-Verwaltung

Änderungen

Bitte beachten Sie, dass hier mit Release 5.20 grundlegende Änderungen stattgefunden haben. Bisher wurden die Seitentemplates im Dateisystem editiert. Nunmehr werden sie (wie alle Templates in contentXXL) sowohl in der Datenbank als auch im Dateisystem gespeichert. In Sitemanager gibt es den neuen Bereich "Seitentemplates".

Das Standard-Seitentemplate (desktopdefault.ascx) wird nunmehr unter ~\portaldata\<portalid>\pagetemplates\ gespeichert. Device-Templates können im Seitentemplate-Manager nicht bearbeitet werden. Die Layout-Controls (tablayout.asc etc.), die bisher notwendig waren, um Module mit Drag & Drop in bestimmten Seitenbereiche zu platzieren, entfallen. Die Bereiche werden nun direkt im Seitentemplate definiert.

Beim Upgrade bestehender Installationen auf Release 5.20 oder höher werden alle notwendigen Änderungen automatisch durchgeführt.

Konzept

Seitentemplates in contentXXL enthalten

  • aktive Zonen zur Platzierung von Modulen per Drag & Drop
  • Programmcode zum Laden von Modulen
  • zusätzlicher Header- oder Footer-Informationen

Zwar können beliebig viele Seitentemplates erzeugt werden, es ist aber sinnvoll, sich auf einige wenige zu beschränken. In vielen Fällen genügt ein einziges.

Wenn Sie ein neues Portal erzeugt haben und aufrufen, sehen Sie eine weiße Seite. Hier greift das Standard-Seitentemplate, das mit der Codebasis ausgeliefert wird und im Root-Verzeichnis von contentXXL liegt (desktopdefault.ascx). Sie können diese Datei als Modell für den Aufbau kundenspezifisch angepasster Seitentemplates nehmen. Im Folgenden erklären wir den die Struktur eines Seitentemplates, wie sie im Dateisystem vorliegt:

Ein sehr einfaches Seitentemplate könnte so aussehen:

<%@ Control %>
<div id="contentpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"></div>

Da es sich bei einem Seitentemplate um ein ASP.NET-Steuerelement handelt, befindet sich in der ersten Zeile die Control-Deklaration. Das HTML-Steuerelement in der zweiten Zeile (statt <div> kann natürlich auch ein anderes geeignetes Element, z.B. <td>, verwendet werden) definiert einen Seitenbereich, in dem Module platziert werden können. Es können beliebig viele unterschiedliche Bereiche definiert werden, obligatorisch ist das Vorhandensein eines HTML-Controls mit der ID "contentpane". Das Attribut data-contentxxl-layoutclass="LayoutZoneAny" kann entfallen, wenn der Bereich nicht für Drag & Drop aktiv sein soll.

Neu ab Release 5.20: Seitenbereiche, die für das Platzieren von Modulen mit Drag & Drop zugänglich sein sollen, müssen mit dem Attribut data-contentxxl-layoutclass="LayoutZoneAny" versehen werden.  <asp:placeholder>-Controls können weiterhin in Templates verwendet werden, dürfen aber nicht dieses Attribut tragen (ruft einen .NET-Ausnahmefehler hervor). Gegebenenfalls müssen solche Placeholder durch HTML-Controls wie <div> oder <td> ausgetauscht werden.

Üblicherweise werden Module im Seiten-Manager per Drag & Drop in den gewünschten Bereich gezogen. Ein solches Modul ist dann nur auf der jeweiligen Seite vorhanden. Module können aber mit der addmoduletopane-Funktion im Seitentemplate fest verankert werden, In diesem Fall erscheinen sie auf jeder Seite, die dieses Seitentemplate verwendet (das macht. z.B. Sinn bei Navigationsmodulen, related Modulen, Header-Grafiken...):

<%@ Control %>
<%@ Import Namespace="AspNetPortal" %>
<script language="vb" runat="server">
Sub Page_Load()
contentxxlhelper.addmoduletopane(5,headerpane.controls)
End Sub 
</script>
<div id="headerpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"></div>
<div id="contentpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"></div>

In diesem Beispiel wird ein Modul mit der ID 5 im Headerpane platziert.

Neu ab Release 5.20: Module können nun ohne .NET-Code fest im Seitentemplate durch Einbettung von <xxl:module moduleid="<moduleid>"  runat="server" /> an der gewünschten Stelle im HTML-Markup verankert werden.

Das vorige Beispiel könnte also in einfacher Weise auch so realisiert werden:

<div id="headerpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"><xxl:module moduleid="5" runat="server" /></div>

Wenn man vom Seitentemplate aus auf das body-Tag der Seite zugreifen will um eine CSS-Klasse zuzuweisen, ist das mit einem Property "bodyparams" möglich. Weiterhin können mit der insertcontrol-Funktion beliebige Controls im Header- (zwischen <head> und </head>) oder Footer-Bereich (zwischen </form> und </body>) eingebaut werden:

<%@ Control %>
<%@ Import Namespace="AspNetPortal" %>
<script language="vb" runat="server">
Public ReadOnly Property bodyparams()
Get 
Return " class=""contentxxl"" "
End Get
End Property
Sub Page_Load()
contentxxlhelper.insertcontrol("portaldata/1/modules/myheadcontrol.ascx", Page.FindControl("headcontrols").Controls) 
contentxxlhelper.insertcontrol("portaldata/1/modules/myfootcontrol.ascx", Page.FindControl("footcontrols").Controls)
End Sub
</script>
<div id="headerpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"></div>
<div id="contentpane" data-contentxxl-layoutclass="LayoutZoneAny" runat="server"></div>

Arbeiten mit dem Seitentemplate-Manager

Um mit den Seitentemplate-Manager sinnvoll arbeiten zu können, ist es wichtig, den Aufbau der Seitentemplates aus Code und HTML-Markup grundsätzlich verstanden zu haben. In der Bedienoberfläche wird dies aufgespalten in die Bereiche "BASISDATEN", "HTML" und "CODE".

Abb.: Seitentemplate-Verwaltung (Versionierung aktiviert)

 

Im linken Bereich sind die aktuell existierenden Seitentemplates gelistet. Das Standard-Template heißt desktopdefault und kann nicht umbenannt werden. Ein neues Template wird bei Klick auf den Button "+ Neu" generiert. Existierende Templates können mit dem Button "Kopieren" dupliziert werden.

 

 

Pflege der Basisdaten

In diesem Bereich wird dem Seitentemplate die zu verwendende Programmiersprache C# oder VB mitgegeben. Im Feld "Inherits" hinterlegt man gegebenenfalls eine eigene Basisklasse, von der das Seitentemplate abgeleitet ist. Optional kann ein Vorschaubild (Layout einer Seite mit diesem Template) zugewiesen werden. Dies erleichtert Redakteuren die Auswahl eines geeigneten Templates. Unter "Header-Daten" können Controls, die im Code verwendet werden sollen, registriert oder benötigte Namespaces importiert werden.

Beispiel:

<%@ Register TagPrefix="xxl" TagName="ResourceSelect" Src="~/Sitemanager/Controls/ImageSelect.ascx" %><%@Import Namespace="AspNetPortal">
 

Pflege des HTML-Markups

Dieser Bereich ist für das HTML-Markup, wie unter "Konzept" beschrieben, vorgesehen. Auch Javascript wäre gegebenenfalls hier zu hinterlegen.
Module können fest im Seitentemplate durch Einbettung von <xxl:module moduleid="<moduleid>" runat="server" />
an der gewünschten Stelle im HTML-Markup verankert werden.

 

Pflege des Codes

Dieser Bereich ist für .NET Code, wie unter "Konzept" beschrieben, vorgesehen. Die passenden Scriptblöcke werden automatisch durch contentXXL generiert.

 

Sitemanager Ansicht-CSS

Hier können optional CSS-Styles hinterlegt werden, die nur im Seiten-Manager unter dem Reiter "Layout" aktiv sind (zur Behebung eventuell auftretender Anzeigeprobleme).

 

Siteedit Ansicht-CSS

Dieser Reiter ist nur sichtbar, wenn Siteedit aktiviert wurde. Hier können optional CSS-Styles hinterlegt werden, die nur im Siteedit-Modus aktiv sind (zur Behebung eventuell auftretender Anzeigeprobleme).

 

 

Vorschau

In der Vorschau werden die verschiedenen Layout-Bereiche des aktuell ausgewählten Seitentemplates visualisiert.

 

 

Arbeiten mit Versionierung: Bitte beachten Sie, dass ausgecheckte Seitentemplates bearbeitet werden können, ohne dass dies einen Effekt auf andere Benutzer hat. In diesem Fall rendert contentXXL für den jeweiligen Bearbeiter die Arbeitsversion, für alle anderen (anonym oder authentifiziert) die aktuell veröffentlichte Version. Damit können Seitentemplates einfach und ohne Risiko auch in einem Live-System editiert werden.

Service Links