Seitenlayout im ConPresso Backend

ConPresso benutzt auf allen Seiten im Backend eine identische Gestaltung der einzelnen Seitenelemente.

Hierzu zählen Überschriften, der Untertitel, Tabellen, die Nachrichtenbox, usw. Dies ist insbesondere wichtig, um durch kleine Anpassungen der CSS-Datei die Gestaltung des gesamten ConPresso Backends ändern zu können.

Die einzelnen Elemente sollen auf dieser Seite vorgestellt werden, damit Modulentwickler ein möglichst identisches Layout einhalten können.

Header und Footer

Wie auf den generierten Seiten gibt es im ConPresso Administrationsbereich Header- und Footer-Dateien. Diese sollten am Anfang und Ende jeder internen Seite eingebunden werden:

 include(CPO_BASEDIR.'_include/header.php');
 include(CPO_BASEDIR.'_include/footer.php');

Um sich im Footer z.B. als Hersteller des Moduls verewigen zu können, gibt es die Möglichkeit das Array $MOD zu benutzen:

 $MOD['productlink'] = 'http://www.example.com/modul/';
 $MOD['product'] = 'Modulname';
 $MOD['version'] = 'Modulversion';
 $MOD['producerlink'] = 'http://www.example.com/';
 $MOD['producer'] = 'Herstellername';

Diese Variablen werden dann in dem ConPresso-Standardfooter ("_include/footer.php) ausgegeben.

Natürlich muss sichergestellt werden, dass das nur auf Seiten passiert, die auch zu dem Modul gehören.

Hierzu gibt es verschiedene Möglichkeiten:

 * Setzen der Variablen auf jeder Seite (z.B. durch ein include)
 * Setzen der Variablen in der common-module.inc.php (nach Überprüfung z.B. einer Konstanten, die in den Seiten gesetzt wird)
 * ...

Titel und Untertitel

Zur Ausgabe von Titel und Untertitel sollte die Funktion printPageHeader() benutzt werden.

 printPageHeader(string titel, string untertitel);

Der Titel sollte in einem engen Zusammenhang mit dem Eintrag in der Navigation stehen, über den die entsprechende Ansicht aufgerufen wurde. Im Idealfall - also sofern möglich - sind diese Einträge identisch.

Der Untertitel startet im englischen ueblicherweise mit einem "In this view you can..." bzw. "In dieser Ansicht...".

Nachrichtenbox

Direkt nach dem Untertitel wird eine Nachrichten-Box eingeblendet:

 include(CPO_BASEDIR.'_include/message.php');

Dieses include zeigt alle Nachrichten aus dem $message-Array an und löscht diese anschließend.

Tabellenaufbau

Es gibt zwei grundsätzliche Arten von Tabellen in ConPresso:

  • Listen-Tabellen und
  • "Parameter"-Tabellen.

Listen-Tabellen sind einfache Listen (Übersichten) von z.B. Artikeln, deren Zeilen beim Überfahren mit der Maus hervorgehoben werden.

Parameter-Tabellen bestehen aus dem Namen eines Feldes links und dem Eingabefeld rechts. In diesem Fall wird die linke Spalte abwechselnd eingefärbt.

Listen-Tabelle:

 <table class="ruler" style="width: 100%;">
 <thead><tr>
     <th style="width: 100%;">SPALTENTITEL<span></th>
     ....
 </tr></thead>
 <tbody>
     <tr>
         <td>SPALTE</td>
         ....
     </tr>
     ....
 </tbody>
 </table>

In dieser Art von Tabelle sollte die Summe der einzelnen CSS-width-Angaben des Spaltentitel 100% ergeben.

Parameter-Tabelle:

 <table class="colored" style="width: 100%">
 <thead><tr>
     <th colspan="2"><span>TABELLENTITEL</span></th>
 </tr></thead>
 <tbody>
     <tr>
         <td class="leftrow">LINKE SPALTE</td>
         <td class="rightrow">RECHTE SPALTE</td>
     </tr>
     ...
 </tbody>
 </table>

Sollten zwei aufeinander folgende Tabellenzeilen in der "leftrow" dieselbe Farbe haben, so lässt sich das über eine Klassendefinition im TR-Tag erzeugen:

 <tr class="same">

Aktions-Icons

Auch die "manage"-Icons - also jene Bilder, die in ConPresso eine Aktion ausführen - haben eine eigene Funktion, damit sie immer gleich ausgegeben werden:

 printIcon(string url, string icon, string caption[, bool active]);

Die zu übergebenden Parameter sind wie folgt definiert:

url ist der hinter dem Icon stehende Link (wird nur bei aktivem Icon ausgegeben).

icon ist der Pfad zur auszugebenden Grafik - z.B. SKIN_URL.'pic_edit.gif' (diese Icons haben eine Größe von 18x21 Pixel).

caption wird als "title"- (und "Alt"-) Attribut des Icons verwendet und sollte die Funktion des Icons beschreiben - z.B. ___('edit something')

active ist ein optionaler Parameter, der per Default "true" ist. Wird er auf "false" gesetzt, wird das Icon als inaktiv ausgegeben: Es wird kein Link erzeugt und das Bild wird "schattiert". In diesem Fall sollte die caption dem Anwender sagen, wieso die Aktion nicht durchgefuehrt werden kann.

Navigation

Die Informationen zum Aufbau der Navigation im Backend gibt es auf der Extraseite Aufbau der Navigation.