Jun
19
2010
PHP // Webentwicklung

ZendX_JQuery Basics

Author von nico    Comments 3 Kommentare

Im letzen Screencast wurde ja bereits über jQuery in einer Zend Framework Applikation berichtet. Heute möchte ich euch zeigen, wie man mit relativ wenig Aufwand die ZendX_JQuery Komponente benutzt.

Bitte beachten das ZendX nicht Bestandteil des normalen Zend Frameworks ist. ZendX befindet sich im Zend Framework Full Package.  Das Zend und ZendX in einem include_path liegen, davon gehe ich mal aus.

Unsere Zend Framework Applikation hat folgende Merkmale:

  • MVC basiert
  • Verwendung von Zend_Layout
  • Verwendung der Bootstrap-Klasse, welche von Zend_Application_Bootstrap_Bootstrap erbt.
  • Verwendung von jQuery
  • Verwendung von jQueryUI
  • Custom CSS
  • Darstellung eines TabContainers


Fangen wir an. Als erstes müssen wir natürlich unsere Applikation darauf vorbereiten, dass ZendX_JQuery verwendet wird. Dazu öffnen wir unsere Bootstrap Klasse und fügen eine _init Methode hinzu. Pfad: ${project}/application/Bootstrap.php

protected function _initJQuery()
{
    $this->bootstrap('layout');
    $view = $this->getResource('layout')->getView();
    $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
    ZendX_JQuery::enableView($view);
    $view->jQuery()->enable()->uienable();
    $view->jQuery()->addStylesheet('/css/ui-lightness/jquery-ui-1.8.2.custom.css');
}

Wir sorgen dafür, dass das Layout zuerst initialisiert wird. Holen uns die Instanz von Zend_View und fügen den Helper Path für ZendX_JQuery an. Dann aktivieren wir jQuery und jQueryUI. In der letzten Zeilen definieren wir noch der Einfachheit halber, wo unser Stylesheet gefunden werden kann. Ich habe ein Standard-Theme verwendet. Theme Roller Das CSS muss natürlich im /public Ordner hinterlegt werden.

Jetzt müssen wir unserer layout.phtml anpassen. Pfad: ${project}/application/layouts/layout.phtml

<?php echo $this->doctype();?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ZendX_JQuery</title>
<?php echo $this->jQuery(); ?>
</head>
<body>
<div id="content">
<?= $this->layout()->content; ?>
</div>
</body>
</html>

Ich habe hier in den HTML-Head die Zeile “jQuery(); ?>” eingefügt. Dieser Methodenaufruf sorgt dafür, dass die korrekten Script-Sourcen geladen werden. Als Standard werden die CDN von Google, mit den in ZendX_JQuery definierten Versionen genutzt. Damit können wir erstmal leben.

Jetzt fehlt eigentlich nur noch ein View. Wir wollen im Index einen TabContainer darstellen. Dafür öffnen wir das zu dem IndexController und IndexAction zugehörige View-Script. Pfad: ${project}/application/views/scripts/index/index.phtml

<?php
echo $this->tabPane("newstab","Panel1",array('title' => 'Allgemein'));
echo $this->tabPane("newstab","Panel2",array('title' => 'Gemein'));
echo $this->tabPane("newstab","Panel3",array('title' => 'Main'));

echo $this->tabContainer("newstab",
                        array(),
                        array()
                        ); ?>

Beim Aufruf von http://${project}/public sollte nun ein entsprechender TabContainer zu sehen sein. Thats it.

Das Beispielprojekt könnt Ihr hier runterladen: JQuery ZF Project

Schlagwörter: , ,

Ähnliche Artikel

3 Kommentare Kommentar schreiben

  • Kleines Tutorial für die Verwendung von ZendX_JQuery | nico-hofmann.de 19. Juni 2010 um 00:28 Uhr

    [...] soeben ein kleines Tutorial auf dev-talk.info veröffentlicht. Die Seite wurde von 2 meiner Kollegen veröffentlicht. Ich hoffe [...]

    Antworten
  • daniel 24. Juli 2010 um 16:20 Uhr

    Falls man eine bestimmte Version von jQuery oder jQuery UI laden möchte.

    Für jQuery:
    $view->jQuery()->setVersion(’1.4.2′);

    Für jQuery UI:
    $view->jQuery()->setUiVersion(’1.8.2′);

    Antworten
  • Stefan 10. Oktober 2011 um 17:13 Uhr

    Danke für die Mühe!

    Antworten

Kommentar schreiben