AJAX DRUPAL 7 AJAX FRAMEWORK. Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks.

Transkript

1 DRUPAL 7 AJAX FRAMEWORK Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks AJAX Beispiele Fragen: Gibt es jemanden der noch gar keine Erfahrungen mit AJAX gemacht hat? Unterschied innerhalb / ausserhalb kurz er wähnen.

2 Was ist das Ajax Framework? Eine Sammlung von API Funktionen für einheitliche Ajax Programmierung in Drupal. Viele Möglichkeiten ohne eigene Javascript Entwicklung. Ein Kommando orientierter Ajax Responder. Bestandteil vom Drupal 7 Core (in Drupal 6 war es Teil der CTools API von merlinofchaos)

3 Ein typischer Ablauf eines Ajax Requests Drupal / PHP Client Browser / JS Trigger Element: z.b. Link mit einer ID oder CSS Klasse. AJAX Implementation: - Element mit CSS Klasse suchen - Events zuweisen z.b. click - Bei Event: AJAX Request erzeugen - Daten über AJAX Laden Menü Callback: Rückgabe von HTML oder JSON - Auswerten der AJAX Antwort. - AJAX Fehler abfangen. - DOM Manipulieren z.b. jquery.replace / jquery.append

4 Nachteile beim selber Programmieren Drupal / PHP Trigger Element: z.b. Link mit einer ID oder CSS Klasse. Menü Callback: Rückgabe von HTML oder JSON Nachteile: Client Browser / JS Die Javascript Teil muss komplett selber implementiert AJAX Implementation: werden incl. AJAX Auswertung und AJAX - Element Error-Handling. mit CSS Klasse suchen - Events zuweisen z.b. click Nachgeladene - Bei Event: AJAX Elemente Request könnten erzeugenjavascript enthalten, - Daten über welches AJAX Laden ausgeführt werden muss. (Drupal.attachBehaviors) (z.b. Filefield Ajax Upload) Besucher ohne Javascript sind ebenfalls immer noch ein Thema und sollten auch beachtet werden (Alternativer Menü Callback für non-js Besucher - Auswerten der AJAX Antwort. - AJAX Fehler abfangen. Defakto: - DOM Manipulieren Es ist nicht der z.b. Drupal way! ;) jquery.replace / jquery.append

5 ETWAS TROCKENE THEORIE...

6 Die Bestandteile des AJAX Frameworks Drupal / PHP Client Browser / JS Form API Ajax Attribut #ajax Drupal.ajax Objekt Menü Callback system/ajax Ajax Commands

7 Form API #ajax Attribut Lädt notwendige Library ajax.js und jquery.form.js Makiert das Element zur Nutzung mit Ajax (Drupal.settings.ajax) Überträgt Einstellungen wie method / effect / callback / wrapper Pflicht Eigenschaften von #ajax sind: callback & wrapper Kann verwendet werden bei den Form Elementen: button, checkbox, checkboxes, image button, password, radio, radios, select, submit, tableselect, textarea, text_format, textfield

8 Menü Callback system/ajax Drupal_process_form - Form API / Form Processing Führt drupal_process_form aus und verarbeitet unser Formular. Erkennt welches Element den Ajax Request ausgelöst hat Führt unseren #ajax Callback vom passenden Element aus liefert die Ergebnisse als JSON zurück. (ajax_deliver)

9 Drupal.ajax Objekt Wird an das Element als Objekt gehängt und kann via JS verändert werden. Bindet den Eventhandler (z.b. click) an das Element und unterbindet Standardverhalten. (z.b. submit) Führt den Ajax Request aus und übernimmt Error Handling & Verarbeitung der Ajax Response Führt Ajax Command aus

10 Ajax Commands Client seitig Javascript Funktionen ausführen. Manipulieren den DOM Können verkettet werden. Können selber durch eigene Commands Erweitert werden. (Drupal.ajax.prototype.commands.example) ajax_command_insert ajax_command_replace ajax_command_alert uvm... ajax_command_replace = Default Command

11 EINFACHE BEISPIELE

12 Ajax Replace Beispiel

13 Ajax Replace Beispiel

14 Ajax Alert Beispiel

15 Ajax Alert Beispiel

16 BEISPIELE MIT EIGENEN AJAX COMMANDS

17 Ajax Dialog mit jquery.ui Beispiel

18 Ajax Colorbox Beispiel

19 Warum eigendlich Form API? Ein kurzes Fazit: Formulare in Drupal lassen sich leicht mit Ajax ausrüsten. Bei Nutzung der vorhanden Ajax Commands - Kein Javascript selber schreiben notwendig. Kein eigener Menü Callback notwendig. Fallback für non-js Benutzer ist von Hause aus vorhanden. Die einfachste Implementation benötigt nur ein #ajax Attribut (mit callback und wrapper) und eine ajax callback Funktion.

20 NOCH FRAGEN?

21 Links Drupal API Ajax Framework: oder Drupal Examples Modul oder Session von: Dennis Brücke von team-wd.de aka blackice2999 Danke auch an: Patrick Jungbluth von eniky.de für seine Unterstützung