5 - Anzeige von RedPage

Die Anzeige der rechten Spalte kann jetzt erweitert werden. Die ursprüngliche Page-Anzeige wird davon nicht berührt. Andererseits werden wir alle schon getätigten Schritte zur Anzeige des Page-Typs übernehmen und nicht noch einmal schreiben oder beim Seitenaufruf neu laden. Wir habe also zwei Vorteile mit dieser Lösung: keinen doppelten Code.

Anzeige der rechten Spalte

Zur Erinnerung, für unsere rechte Spalte haben wir im RightBarPage-Controller folgende Datenbank-Spalte erzeugt.

static $db = array(
        "RightBarTitle"     => "Varchar(100)",
        "RightBarContent"    => "HTMLText"
    );

Wir werden die beiden Datenbank-Spalten mit den PHP-Platzhaltern $RightBarTitle und $RightBarContent in der Anzeige-Datei RightBarPage.ss aufrufen können.

Eine interessante Zusatzfrage: Warum zeigt Silverstripe immer den "richtigen" Datensatz an.
Wir werden nach dem Bauen auf diese Frage eingehen.

Den zur Anzeige erforderliche HTML-Code schreiben wir in die Datei RightBarPage.ss, den CSS-Code in die Datei layout.css.

Wir beginnen mit HTML. Titel und Inhalttext, die wir im Page-Typ verwenden, möchten wir weiterhin anzeigen. Der Inhalt hat 600 Pixel Breite. Jetzt soll der Inhalt nur noch 400 Pixel Breite haben, die rechte Spalte die restlichen 200 Pixel. Wir erstellen also einen zusätzlichen div-Rahmen "RightBarInhalt" und floaten die rechte Spalte, so dass sie rechts davon angezeigt wird.

 <div id="RightBarInhalt">
    <h3>$Title</h3>
    $Content
    $Form
</div>

1. Öffne die Datei RightBarPage.ss
2. Erstelle den Div-Rahmen für den Inhalt

Für die rechte Spalte, deren Titel und Inhalt erstellen wir je einen div-Rahmen mit eigener id, um sie einzeln formatieren zu können. Beachte, dass für den div-Inhalt kein Absatzformat <p>...</p> gesetzt werden muss, da dies bereits durch den FCK-Editor im Backend erledigt wird. Nicht so für den Titel, der durch ein normales Textfeld eingegeben wird, ist hier der Absatz mit <p>...</p> zu umgeben. (Ein doppelter Absatz-Tag erzeugt im Browser keinen Syntax-Fehler, ist aber semantisch falsch und sinnlos.)

<div id="RightBarInhalt">
    <h3>$Title</h3>
    $Content
    $Form
</div>

<div id="RightCol">
    <div id="RightBarTitle"><p>$RightBarTitle</p></div>
    <div id="RightBarContent">$RightBarContent</div>
</div>

3. Füge die div-Rahmen in deinen Code ein
4. Speichere und publizieren die Datei RigtBarPage.ss

Die CSS-Deklarationen schreiben wir in die Datei "layout.css". Die beiden div-Rahmen "RightBarInhalt" und "RightBarCol" liegen beide innerhalb des Div-Inhalt nebeneinander.

#RightBarInhalt {width: 380px;float:left;padding-right:20px;}

#RightCol {width:200px;float:right;}
#RightBarTitle p {color:red;font-size:24px;padding: 6px 0;border-top:1px solid #333;}
#RightBarContent p {padding: 6px 0;border-bottom:1px solid #333;}

5. Öffne die Datei layout.css
6. Füge die CSS-Code für die rechte Spalte ein
7. Speichere und publiziere die Datei
8. Rufe die neue Seite im Browser auf
    Änderungen im CSS können mit ?flush=1 aktualisiert werden

Inhalt und Rechte Spalte liegen jetzt nebeneinander. Die Textfelder der rechten Spalte stehen im Backend zur Verfügung, wenn der Pagetyp (RightBarPage) gewählt wird.

Weiter mit der Zusammenfassung von Tutorial 3