Seit dem Zend Framework 1.7 Release wird nun auch in der Zend Extension das JavaScript Framework jQuery offiziell unterstützt und weiterentwickelt.
Die ZendX_jQuery Klasse erweitert die aktuellen View Helfer um weitere nützliche jQuery Funktionen.
Es wird sowohl der jQuery Core als auch die jQuery UI unterstützt.
Dadurch hat man die Möglichkeit ganz einfach Ajax Links, Tabs oder auch den Datepicker in seine Applikationen einzubinden.
Die Installation bzw. Einrichtung ist denkbar einfach.
Vorausgesetzt wird eine bestehende Standard Zend Framework Installation.
Wer dies noch nicht hat, kann es dem Quickstart, des Zend Framework entnehmen:
framework.zend.com/docs/quickstart
Um die Zend Framework jQuery Klasse einzubinden muss man die Zend Extension herunterladen und in seinen library Ordner einbinden.
Die Zend Extension ist nur in der "Full Installation" enthalten und kann leider nicht separat heruntergeladen werden.
framework.zend.com/download/latest
Dort befinden sich die Extension Klassen unter "/extras/library/".
In dem library Ordner der Zend Framework Struktur muss jetzt der ZendX sowie der Zend Ordner liegen.
Um den View Helfer zu aktivieren und verfügbar zu machen, muss man diesen in seiner bootstrap.php Datei einbinden.
Als nächstes wird die jQuery Version festgelegt.
Das jQuery Framework braucht nicht heruntergeladen zu werden, sondern wird automatisch extern vom Google Ajax Library Content Distribution Network kurz CDN eingebunden.
Standardmäßig wird die ältere jQuery Version 1.2.6 und die UI Version 1.5.3 unterstützt.
Um dies zu ändern ruft man die container.php Datei, welche sich in ZendX/jQuery/View/Helper/jQuery/container.php versteckt, auf.
Dort werden am Anfang 2 Variablen deklariert, welche man einfach nach seinen Präferenzen anpasst.
Die Verfügbaren Versionen, die das CDN anbietet kann man hier entnehmen:
code.google.com/intl/de-DE/api…ntation/index.html#jquery
Wenn man alles angepasst hat, kann man loslegen.
Die jQuery Bibiliothek(en) kann man nun in seinem Layout oder innerhalb der Views einfügen.
Dies geschieht mit einem einfachen Befehl.
Dadurch wird automatisch der jQuery Core und die UI eingebunden und gestartet.
Der Output sollte so aussehen:
Wenn man nun den Datepicker, Tabs oder andere Widgets der Ui nutzen möchte, muss man aber noch das entsprechende Theme (Stylesheet) herunterladen.
Der Themeroller von der jQuery UI bietet die Möglichkeit ein fertiges Style auszuwählen oder ein Style selbst zu gestalten:
jqueryui.com/themeroller/
Man sollte beachten, dass man auf der Downloadseite beim herunterladen eines Themes die Widgets angbit, die man nutzen möchte, auch wenn man nur das Theme benötigt, da sonst die Styles nicht mit eingebunden werden und es zu Anzeigefehlern kommt.
Das heruntergeladene Theme, welches aus sehr vielen CSS Dateien und einem Image Ordner besteht, habe ich in den public Order der Zend Struktur unter "/css/theme" abgelegt.
Wenn man jQuery innerhalb seines Layout oder View starten möchte, hat man die Möglichkeit das Stylesheet einzubinden.
Dies geschieht mit dem selben Befehl, der nur um eine Funktion erweitert wurde.
Achtung!
Das ist keine zusätzliche Angabe, sondern ersetzt den oben genannten Befehl, da sonst alles doppelt eingebunden wird.
Dadurch erhält man diese Ausgabe
Weitere CSS Dateien müssen nicht eingebunden werden, da die ui.all.css alle weiteren Abhängigkeiten automatisch lädt.
Nun kann man endlich zur Tat schreiten und die View Helfer innerhalb des Layouts oder Views testen.
Dieser Defaultcode erstellt einen "Ajaxlink" der bei einem Klick die Index Action innerhalb des Indexcontrollers asynchron nach lädt sowie einen Datepicker, der bei einem Klick auf das Inputfeld automatisch öffnet und einen Tabcontainer mit einem Tab und Inhalt.
Alles anzeigen
Für weitere Beispiele, Funktionen, Einstellungsmöglichkeiten und Erklärungen verweise ich hier auf die offizielle Dokumentation:
framework.zend.com/manual/en/zendx.jquery.view.html
Achtung!
Man muss beachten, dass leider weder die Spinner noch die Autocomplete Funktion funktionieren, da diese aus der jQuery UI wieder entfernt wurden und erst später released werden.
Die ZendX_jQuery Klasse erweitert die aktuellen View Helfer um weitere nützliche jQuery Funktionen.
Es wird sowohl der jQuery Core als auch die jQuery UI unterstützt.
Dadurch hat man die Möglichkeit ganz einfach Ajax Links, Tabs oder auch den Datepicker in seine Applikationen einzubinden.
Die Installation bzw. Einrichtung ist denkbar einfach.
Vorausgesetzt wird eine bestehende Standard Zend Framework Installation.
Wer dies noch nicht hat, kann es dem Quickstart, des Zend Framework entnehmen:
framework.zend.com/docs/quickstart
Um die Zend Framework jQuery Klasse einzubinden muss man die Zend Extension herunterladen und in seinen library Ordner einbinden.
Die Zend Extension ist nur in der "Full Installation" enthalten und kann leider nicht separat heruntergeladen werden.
framework.zend.com/download/latest
Dort befinden sich die Extension Klassen unter "/extras/library/".
In dem library Ordner der Zend Framework Struktur muss jetzt der ZendX sowie der Zend Ordner liegen.
Um den View Helfer zu aktivieren und verfügbar zu machen, muss man diesen in seiner bootstrap.php Datei einbinden.
Als nächstes wird die jQuery Version festgelegt.
Das jQuery Framework braucht nicht heruntergeladen zu werden, sondern wird automatisch extern vom Google Ajax Library Content Distribution Network kurz CDN eingebunden.
Standardmäßig wird die ältere jQuery Version 1.2.6 und die UI Version 1.5.3 unterstützt.
Um dies zu ändern ruft man die container.php Datei, welche sich in ZendX/jQuery/View/Helper/jQuery/container.php versteckt, auf.
Dort werden am Anfang 2 Variablen deklariert, welche man einfach nach seinen Präferenzen anpasst.
Die Verfügbaren Versionen, die das CDN anbietet kann man hier entnehmen:
code.google.com/intl/de-DE/api…ntation/index.html#jquery
Wenn man alles angepasst hat, kann man loslegen.
Die jQuery Bibiliothek(en) kann man nun in seinem Layout oder innerhalb der Views einfügen.
Dies geschieht mit einem einfachen Befehl.
Dadurch wird automatisch der jQuery Core und die UI eingebunden und gestartet.
Der Output sollte so aussehen:
Wenn man nun den Datepicker, Tabs oder andere Widgets der Ui nutzen möchte, muss man aber noch das entsprechende Theme (Stylesheet) herunterladen.
Der Themeroller von der jQuery UI bietet die Möglichkeit ein fertiges Style auszuwählen oder ein Style selbst zu gestalten:
jqueryui.com/themeroller/
Man sollte beachten, dass man auf der Downloadseite beim herunterladen eines Themes die Widgets angbit, die man nutzen möchte, auch wenn man nur das Theme benötigt, da sonst die Styles nicht mit eingebunden werden und es zu Anzeigefehlern kommt.
Das heruntergeladene Theme, welches aus sehr vielen CSS Dateien und einem Image Ordner besteht, habe ich in den public Order der Zend Struktur unter "/css/theme" abgelegt.
Wenn man jQuery innerhalb seines Layout oder View starten möchte, hat man die Möglichkeit das Stylesheet einzubinden.
Dies geschieht mit dem selben Befehl, der nur um eine Funktion erweitert wurde.
Achtung!
Das ist keine zusätzliche Angabe, sondern ersetzt den oben genannten Befehl, da sonst alles doppelt eingebunden wird.
Dadurch erhält man diese Ausgabe
Quellcode
- <link rel="stylesheet" href="css/theme/ui.all.css" type="text/css" media="screen" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
Weitere CSS Dateien müssen nicht eingebunden werden, da die ui.all.css alle weiteren Abhängigkeiten automatisch lädt.
Nun kann man endlich zur Tat schreiten und die View Helfer innerhalb des Layouts oder Views testen.
Dieser Defaultcode erstellt einen "Ajaxlink" der bei einem Klick die Index Action innerhalb des Indexcontrollers asynchron nach lädt sowie einen Datepicker, der bei einem Klick auf das Inputfeld automatisch öffnet und einen Tabcontainer mit einem Tab und Inhalt.
Quellcode
- <?= $this->ajaxLink("Show me something",
- "/index/index",
- array('update' => '#content')); ?>
- <div id="content"></div>
- <br /><br /><br />
- Datepicker: <?= $this->datePicker("dp1",
- '',
- array('defaultDate' =>
- date('Y/m/d', time()))); ?>
- <br /><br /><br />
- <?= $this->tabPane("newstab","inhalt",array('title' => 'der Titel')); ?>
- <h2>Ein schöner Tab</h2>
- <?= $this->tabContainer("newstab",
- array(),
- array('class' => 'flora')); ?>
Für weitere Beispiele, Funktionen, Einstellungsmöglichkeiten und Erklärungen verweise ich hier auf die offizielle Dokumentation:
framework.zend.com/manual/en/zendx.jquery.view.html
Achtung!
Man muss beachten, dass leider weder die Spinner noch die Autocomplete Funktion funktionieren, da diese aus der jQuery UI wieder entfernt wurden und erst später released werden.