Zend Framework und jQUery (ZendX_jQuery)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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.

    Quellcode

    1. $view = Zend_Layout::getMvcInstance()->getView();
    2. $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");



    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.

    Quellcode

    1. /**
    2. * Default CDN jQuery Library version
    3. *
    4. * @var String
    5. */
    6. protected $_version = "1.3.2";

    Quellcode

    1. /**
    2. * jQuery UI Google CDN Version
    3. *
    4. * @var String
    5. */
    6. protected $_uiVersion = "1.7";


    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.

    Quellcode

    1. <?= $this->jQuery(); ?>

    Dadurch wird automatisch der jQuery Core und die UI eingebunden und gestartet.

    Der Output sollte so aussehen:

    Quellcode

    1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>



    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.

    Quellcode

    1. <?= $this->jQuery()->addStylesheet('css/theme/ui.all.css'); ?>


    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

    1. <link rel="stylesheet" href="css/theme/ui.all.css" type="text/css" media="screen" />
    2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    3. <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

    1. <?= $this->ajaxLink("Show me something",
    2. "/index/index",
    3. array('update' => '#content')); ?>
    4. <div id="content"></div>
    5. <br /><br /><br />
    6. Datepicker: <?= $this->datePicker("dp1",
    7. '',
    8. array('defaultDate' =>
    9. date('Y/m/d', time()))); ?>
    10. <br /><br /><br />
    11. <?= $this->tabPane("newstab","inhalt",array('title' => 'der Titel')); ?>
    12. <h2>Ein schöner Tab</h2>
    13. <?= $this->tabContainer("newstab",
    14. array(),
    15. array('class' => 'flora')); ?>
    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.

    7.512 mal gelesen