Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Webentwicklung: sfjquery als Schnittstelle zwischen TYPO3 und jQuery – „Die Idee war einfach wie genial“

    Webentwicklung: sfjquery als Schnittstelle zwischen TYPO3 und jQuery - „Die Idee war einfach wie genial“

Auch bei TYPO3-Entwicklern wird jQuery immer beliebter, aber warum muss es im TER für jeden Effekt und jedes Plugin eine eigene Extension geben? Das dachte sich Stefan Frömken und entwickelte mit sfjquery eine Extension, die als Schnittstelle zwischen TYPO3 und dem jQuery-Framework fungiert. Wir haben ihm per E-Mail einige Fragen dazu gestellt.

t3n: Was ist sfjquery?

Stefan Frömken: sfjquery ist eine Schnittstelle zwischen TYPO3 und dem jQuery-Framework. Diese Extension ist als Frontend-Plugin ausgelegt und vereint alle benötigten Sprachen (HTML, CSS, JavaScript und TypoScript) an einer zentralen Stelle.

t3n: Was sind Besonderheiten und Vorteile?

Stefan Frömken: sfjquery kann nicht nur die Dynamik von jQuery verwenden, sondern auch die von TypoScript. Ich habe die Möglichkeit implementiert, ein Template mit selbsterstellten Markern zu versehen, die man dann mit Daten aus der Datenbank per TypoScript befüllen kann. Wie das geht, ist mit vielen Beispielen in der Dokumentation selbst und in deutsch auch auf meiner Website erklärt.

Alle integrierten jQuery-UI-Plugins lassen sich individuell de- und aktivieren. Erstellt Euch mit dem jQuery-Designer eigene Stylesheets und bindet sie mit sfjquery ein. Euch fehlt ein Plugin? Dann holt es Euch von der jQuery-Website und bindet es per Hook ein. Falls dieses gewählte Plugin ein eigenes Stylesheet mitbringt, auch dafür gibt es einen Hook. Ihr wollt nur das Template mit Markern und TypoScript verwenden, ganz ohne JavaScript? Aktiviert die Checkbox im Konstanteneditor und dem ist so.

Ihr braucht nicht mehr zwischen den ganzen JavaScript-, HTML-, TypoScript- und CSS-Dateien hin und her zu springen. Alle benötigten Bereich werden über diese Extension abgedeckt und falls Ihr es doch vorzieht, eigene Dateien zu verwenden: Dann tut es und bindet die Dateien mit den File-Feldern ein. Der Inhalt der Textfelder und der Dateien wird bei der Ausgabe im Frontend zusammengeführt.

sfjquery lässt sich auch mehrfach auf einer Seite einbinden, ohne dass die benötigten jQuery-Files dann doppelt im Header geladen werden.

t3n: Wie entstand die Idee?

Stefan Frömken: sfjquery basierte auf meiner Extension sfslideshow. Allerdings durfte ich diese Extension nicht der Öffentlichkeit verfügbar machen. Das hat mich schon sehr geärgert. Also habe ich einfach den JavaScript-Code entfernt und hatte damit eine „nackte“ Extension vor mir, mit der man nichts anfangen konnte. Die Idee war einfach wie genial: Lass die Leute den Quellcode doch selber da reinschreiben und meine Extension fügt dann alles zusammen.

Schon mal einen Blick in das überladene TER gewagt? Für jedes Framework-Plugin, sei es Slideshows, Lightboxen, Tab- und Accordionextensions, gibt es eine eigene Extension und in Foren häufen sich die Beiträge, warum die einzelnen Extensions untereinander nicht lauffähig sind.

sfjquery ist da unabhängig und kann Dank Kompatibilitätsmodus sogar parallel zu anderen Frameworks installiert werden.

t3n: Wie bist Du bei der Umsetzung der Extension herangegangen?

Stefan Frömken: Die Extension ist genau in der Reihenfolge entstanden, wie Dmitry Dulepov es in seinem Buch vorgesehen hat. Dank meinem ersten Eintrags in der Liste von TYPO3 habe ich dann die Möglichkeit implementiert, meine Extension auch mehrfach auf einer Seite einfügen zu können. Dank static_info_tables wusste ich nun, wie man Datensätz auf die PID 0 hinterlegt. Dank mootools habe ich mich inspirieren lassen, auch bei mir alle Effekte und Plugins individuell aktivieren zu können. Dank unzähliger Hook-Tutorials habe ich es dann geschaft, auch in meine Extension solche einzubinden.

t3n: Kannst Du praktische Beispiele zeigen, bei denen es zum Einsatz kommt?

Stefan Frömken: Meine Beispiele, die ich mit sfjquery realisiert habe, findet Ihr auf dieser Seite.

Finde einen Job, den du liebst

3 Reaktionen
froemken
froemken

Wenn Du den Kompatibilitätsmodus aktivierst läuft meine Extension auch mit anderen Frameworks zusammen. Nach der Aktivierung kannst Du den $()-Parameter im domready-Feld weiterhin verwenden. Für Deinen Code außerhalb von Domready musst Du allerdings den jquery()-Parameter verwenden.

Vielen Dank auch für das Lob und testet fleißig weiter :-)

Stefan

Antworten
webworky
webworky

Funktioniert das gut zusammen mit prototype und script.aculo.us?

Antworten
Hamrath
Hamrath

Sehr cool! Und Stefan Frömken's Seite ist eine Goldgrube. :-) Sehr tolle Tipps dabei, direkt mal in die Favoriten aufgenommen.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen