Layout
Die im Listing gezeigte Controller-Action besteht im Moment aus einer einzigen Quellcodezeile, über welche die weitere Abarbeitung des Aufrufes gesteuert wird. In unserem Fall sorgt das Zurückgeben des Success-Status dafür, dass nach dem Controller der View-Teil der Action aufgerufen wird, der si...
Die im Listing gezeigte Controller-Action besteht im Moment aus einer einzigen Quellcodezeile, über welche die weitere Abarbeitung des Aufrufes gesteuert wird. In unserem Fall sorgt das Zurückgeben des Success-Status dafür, dass nach dem Controller der View-Teil der Action aufgerufen wird, der sich um die Ausgabe des HTML kümmert.Später werden in diesem Controller beispielsweise auch die anzuzeigenden Daten geladen und an den View weitergegeben. Der View-Verarbeitung muss ein passendes Template hinterlegt werden, das für die Ausgabe des HTML-Quelltextes verantwortlich ist. Die Zuordnung bei Symfony findet über den Namen statt. Zu der Funktion executeShow erwartet das Framework eine Template-Datei mit dem Namen showSuccess.php im Template-Verzeichnis des Moduls (apps/frontend/calendar/templates). Legen Sie diese Datei an und fügen ihr eine erste HTML-Ausgabe hinzu
<h1>Kalender</h1>Wenn Sie den soeben angelegten Controller/ View mit der URL https://localhost/scd/frontend_dev.php/calendar/show aufrufen, sollten Sie als Resultat die Ausgabe des im Template definierten HTML-Konstrukts angezeigt bekommen.
Layout
Wenn Sie sich den Quelltext der Seite im Browser ansehen, werden Sie feststellen, dass dort deutlich mehr HTML zu sehen ist, als wir in unserem Template geschrieben haben. So ist dort etwa der Head- und Body-Bereich zu sehen. Diesen zusätzlichen HTML-Quellcode zaubert Symfony nicht einfach aus seinem virtuellen Hut, er ist in einer zusätzlichen Datei (dem sogenannten Layout) definiert. Symfony führt die Ausgabe des Templates und des Layouts automatisch zusammen. Die Template-Daten werden dabei wie in der Abbildung ersichtlich in das Layout eingebettet.
Das Layout wird oft auch als Dekorator bezeichnet. Der Vorteil dieses Vorgehens liegt darin, dass gemeinsame Seitenteile in einer einzigen Datei zusammengefasst sind, was Änderungen erleichtert. Innerhalb einer Template-Datei können Sie sich dadurch voll und ganz auf die seitenspezifischen Ausgaben konzentrieren.Die Layout-Datei befindet sich im Verzeichnis apps/frontend/templates/layout.php. Da alle Templates in dieses Layout eingebettet werden, kann in dieser Datei HTML-Quellcode untergebracht werden, der für alle gilt. Für unser Beispiel wollen wir uns auf einen benutzerdefinierten Header und Footer und etwas HTML zur späteren Strukturierung der Seite beschränken.Die HTML-Struktur für das zweispaltige Layout mit Header und Footer wurde dabei mit dem Yaml-Builder-Tool erstellt (builder.yaml.de/ ), mit dem sich mit wenigen Mausklicks ein CSS-Layout erstellen lässt, das Yaml (www.yaml.de ) als Basisimplemetierung nutzt. Den vom Yaml-Builder erstellten CSS-Quellcode können Sie nach einem Klick auf den Get-Code-Button herunterladen und in das web/css-Verzeichnis unseres Projektes speichern. Was uns nun noch fehlt, sind die CSS-Basisdateien von Yaml. Die Download-Version von Yaml enthält im Verzeichnis yaml/core verschiedene CSS-Dateien, die Sie der Einfachheit halber alle in den web/css-Ordner kopieren.Damit alle diese Dateien auch wirklich von Symfony in das Layout eingebunden werden, müssen wir noch Hand an die Datei apps/frontend/config/view.yml legen. Die Änderung von zwei Zeilen genügt, um die jeweiligen Dateien für alle Webseiten der Anwendung einzubinden. Achten Sie darauf, dass die Reihenfolge dem folgenden Quelltextausschnitt entspricht, damit die Skripte in der richtigen Reihenfolge eingebunden werden:
stylesheets: [main.css,
fullcalendar.css]Damit haben wir vorerst alle CSS-Sourcen eingebunden und können uns dem weiteren Aufbau der Anwendung widmen.Das folgende Listing zeigt den Inhalt der bereits angesprochenen layout.php. Das Meiste davon wurde vom Yaml-Builder erstellt. Interessant ist, wie die Ausgaben unserer Template-Datei in dieses Layout eingebettet werden. Dies geschieht mit der Ausgabe echo $sf_content.
<body><div class="page"><div id="header"><h1>Kalenderdemo</h1><div id="topnav"><a href="#">Administration</a></div></div><div id="main"><div id="col1"><div id="col1_content" class=
"clearfix"><?php echo $sf_content ?></div></div><div id="col3"><div id="col3_content" class=
"clearfix"></div><div id="ie_clearing"></div></div></div><div id="footer">powered by Symfony</a></div></div></body>
JavaScript und CSS
Für die Darstellung des Kalenders wollen wir auf jQuery und einige zusätzlichen Bibliotheken zurückgreifen. Laden Sie sich dazu eine aktuelle Version von jQuery herunter (jQuery.com ) und platzieren Sie die JavaScript-Datei im Verzeichnis web/js. Das Kalenderskript finden Sie unter arshaw.com/fullcalendar/download/ .Von den Dateien des Download-Archives sind lediglich drei für unsere Zwecke wichtig. Kopieren Sie die beiden Dateien gcal.js und fullcalendar.min.js in das web/js-Verzeichnis. Die CSS-Datei fullcalendar.css muss in den Order web/css kopiert werden. Auch in diesem muss die Datei view.yml angepasst und die Einträge für Stylesheets und JavaScripts um die neuen Dateien ergänzt werden:
stylesheets: [main.css, ...,
fullcalendar.css]
Javascripts: [jquery.js,
fullcalendar.min.js, gcal.js ]
Kalenderdarstellung
Damit sind alle Abhängigkeiten in Position gebracht, wir können in einem letzten Schritt noch die Ausgabe des Gesamtkalenders in unserem showSuccess-php- Template unterbringen. Der einfache Teil ist dabei das dazu notwendige HTML-Konstrukt. Es genügt die folgende Zeile HTML in unser Template zu schreiben.
<div id='calendar'></div>Mehr HTML ist vorerst nicht notwendig. Der etwas aufwändigere Teil ist die Initialisierung des Kalenders in JavaScript. Fügen Sie dazu den folgenden Quelltext in die Template-Datei mit ein (unterhalb des HTML-DIVs):
<script type='text/Javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: []
});
});</script>Das Kalenderskript kümmert sich durch das Ausführen des JavaScriptes nach dem Laden der Seite darum eine komplette Monatsansicht darzustellen. Termine sind hier im Moment nicht enthalten. Diese werden im gezeigten JavaScript als Array dem Parameter events übergeben.Im vorangegangenen Listing war dieser Array leer, was zur Folge hat, das keine Termine angezeigt werden, was sich allerdings sehr einfach ändern lässt. Erweitern Sie das Listing um folgende Zeilen:
events: [<?php foreach($events as $event):
{
title: <?php echo $event['name'];?>,
start: new Date(<?php echo strtotime
($event['date']);?>)
},<?php endif;?>
]Dadurch werden alle Termine des PHP-Arrays $events in JavaScript-Kalender-Termine umgesetzt. Der Inhalt des Arrays wird vom Controller an das Template übergeben:
public function executeShow
(sfWebRequest $request) {
$this->events = array();
$this->events[] = array('name'=>
'Testtermin',
'date'=>'2010-08-08');
return sfView::SUCCESS;
}Selbstverständlich können Sie auch noch weitere Events dem Array hinzufügen. In der kommenden Ausgabe werden wir diese Termine aus der Datenbank laden.
Fundament gelegt
Die ersten Schritte hin zu einer fertigen Anwendung sind gemacht. Nachdem die Hürde der Installation genommen ist, lässt sich mit Symfony einfach und schnell entwickeln. Zwar gibt es in unserer Anwendung noch wenig zu sehen, die Grundsteine sind aber gelegt. In den nächsten Ausgaben werden wir uns dem weiteren Ausbau der Anwendung widmen, was für die nächste Ausgabe bedeutet, dass wir uns mit allem rund um das Thema Datenbankzugriff beschäftigen.
