Tutorial mit eZ JSCore
Schon mal was von eZ JSCore gehört? Dabei handelt es sich um den kleinen JavaScript Helfer von eZ Publish!
JavaScript ist in der heutigen Online-Welt unausweichlich: Slideshows, Effekte, Ajax-Events und vieles mehr wird nur noch darüber abgebildet. Flash hat ausgedient – endlich.
eZ Publish bietet als Unterstützung für die Arbeiten mit JavaScript die kleine aber feine Erweiterung namens eZ JScore. Diese Erweiterung bietet drei ganz besondere Funktionen: JavaScript einbinden, Ajax-Event und JS/CSS Packer. Diese möchte ich dir heute näher bringen.
JavaScript einbinden
Wie jeder eZ Entwickler weiß, werden JavaScripts und CSS-Dateien über die design.ini definiert.
[StylesheetSettings] CSSFileList[]=base.css CSSFileList[]=customize.css [JavaScriptSettings] FrontendJavaScriptList[]=main.js BackendJavaScriptList[]=main_admin.js
Diese Dateien werden im pagelayout.tpl direkt eingebunden und stehen auf jeder Seite zur Verfügung. Wunderbar! Oder doch nicht? Nicht überall benötigt man jede CSS- oder JS-Datei. In diesem Fall würde man nun wahrscheinlich im jeweiligen Template ein händisches Include machen. Aber Stop! Es geht auch anders!
{ezscript( array('jquery-ui.min.js')}
{ezcss( array('blue.css' )}
Somit nutzt man die Struktur von eZ Publish und die jeweilige Dateien werden nur eingebunden, wenn das Template aufgerufen wird. Wichtig ist das im Header
ezcss_load() und ezscript_load()
eingebunden wird. (Im Standard brauchst dir um den letzten Befehl keine Sorgen machen)
Ajax-Event
Wenn ich mal kurz in die Vergangenheit gehen dürfte, so in etwa 10 Jahre, wie lange habe ich da gebraucht, um ein stinknormales Ajax-Event abzusetzen? Mindestens einen Tag, wenn nicht auch mal länger. Dann kam jQuery und Prototype – 5 Minuten?! Mit eZJSCore braucht man gerade mal noch 3 Minuten.
In Summe musst du genau zwei Schritte erledigen.
1. Ajax-Landigpage Template anlegen
unter design/../ezjsctemplate/meinbeispiel.tpl
2. JavaScript Befehl einbinden
Mit folgenden Befehl werden die Funktionen für den Ajax-Befehl von eZ Publish erstellt
{ezscript_load(array( 'ezjsc::jqueryio') )}
und der JavaScript Befehl (Info: das was nach ezsctemplate:: steht wäre der Name Deines Templates name ohne die Endung .tpl)
jQuery.ez( 'ezjsctemplate::meinbeispiel', {postData: 'node_id=12'}, function(data){ alert('success'); })
erledigt den Rest. Das war auch schon alles, was man tun muss. 🙂
JS/CSS Packer
Bevor man eine Seite online stellt, sollte man eine INI Einstellung tätigen und zwar
[eZJSCore] Packer=enabled
damit packt eZ Publish alle JavaScript/CSS Dateien in eine Datei und komprimiert den Code. Sollte eigentlich ein Pflichtakt auf jeder eZ Publish Seite sein.
Zusätzliche Funktionen
Es gibt noch einige weitere Funktionen in dieser Erweiterung auf welche ich leider aus Zeitgründen an dieser Stelle nicht näher eingehen kann, aber vielleicht das nächste Mal.
- Lade Dateien von CDN
- binde jQuery / UI oder YUI 2/3 ein
- div. Hilfs Operatoren
Weitere Links:
https://blog.silversolutions.de/2012/08/b2b-technologie/tutorial-mit-ez-jscore/https://blog.silversolutions.de/wp-content/uploads/2018/12/ez_dummy.pnghttps://blog.silversolutions.de/wp-content/uploads/2018/12/ez_dummy-150x150.pngB2B.technologieCMS,Entwicklung,Javascript,ToolsSchon mal was von eZ JSCore gehört? Dabei handelt es sich um den kleinen JavaScript Helfer von eZ Publish! JavaScript ist in der heutigen Online-Welt unausweichlich: Slideshows, Effekte, Ajax-Events und vieles mehr wird nur noch darüber abgebildet. Flash hat ausgedient – endlich. eZ Publish bietet als Unterstützung für die Arbeiten mit...David HohlDavid Hohldho@silversolutions.deEditorDavid Hohl ist seit 1995 Entwickler und Projektleiter und bringt langjährige Erfahrung mit eZ Publish mit. Bei silver.solutions war David 2012 bis 2014 als Entwickler, Konzeptionen und Projektleiter für eZ Publish Projekte verantwortlich. Er hat das eZ-Publish-Blog ins Leben gerufen.silver.solutions
