Information & Consulting

Das JavaScript-Framework Rico ist objektorientiert geschrieben, alle grafischen Elemente, die man auch von außen ansprechen kann, sind Objekte und die HTML-Elemente werden via DOM (Document Object Model) auf die Seite gebracht.

Dadurch ist es relativ einfach, neue Funktionalitäten in das System zu bekommen, denn die vorhandenen Klassen lassen sich mittels Vererbung via Prototype erweitern. Das Laden der neuen Klassen wird allerdings etwas hakelig, wenn man sie nicht richtig in Rico integriert.

Normalerweise wird das Framework durch Laden einer einzigen Datei in die Webseite integriert. Damit die gewünschten Klassen bzw. Module zur Verfügung stehen, werden sie anschließend mit der Methode »loadModule« geladen:

   <script type="text/javascript" src="lib/rico/rico.js"></script>
   <script type="text/javascript">
   Rico.loadModule('LiveGridForms','LiveGridAjax','LiveGridMenu');
   </script>

Erweitert man die Klassenhierarchie, dann stellt sich das Problem, daß Prototype verschiedene Variablen benötigt, die erst nach dem Laden der passenden Rico-Module zur Verfügung stehen. Es ist daher nicht ohne weiteres möglich, alle JavaScript-Dateien der Reihe nach aufzulisten und einzubinden und erst anschließend Rico zu initialisieren.

Dabei kann es passieren (und je nach Konstellation ist das in 90% der Fälle der Fall), daß die Module noch nicht geladen sind, wenn man die Klassen erweitert. Dadurch schlägt die Vererbung fehl und letztendlich fehlen Elemente auf der Seite.

Das Problem läßt sich jedoch ziemlich elegant lösen, da Rico Abhängigkeiten der Module definiert hat. Es gibt im Quellcode die Struktur »Rico.moduleDependencies«, in der die enthaltenen Module zusammen mit den zugehörigen JavaScript-Dateien und benötigten anderen Modulen verzeichnet sind.

Diese Liste wird vor dem Laden der Module um die eigenen Module und Code-Dateien erweitert. Der Pfad zum Quellcode ist dabei relativ zum Rico-Verzeichnis. Wenn die eigene Klasse nicht im gleichen Verzeichnis liegt, werden entsprechend viele »../« verwendet. Wenn der Eintrag mit einem Pluszeichen beginnt, wird eine Abhängigkeit zu einem anderen Modul definiert, das zuerst geladen wird.

   <script type="text/javascript">
   Rico.moduleDependencies['Checkboxes'] = ['+LiveGrid', '../ricoCheckboxes.js'];
   Rico.loadModule('Checkboxes');
   </script>

Die neuen Module werden mit diesem Snippet bequem und korrekt geladen. Zum Schluß sollte Rico noch informiert werden, daß das Modul erfolgreich geladen wurde:

   Rico.includeLoaded('ricoCheckboxes.js');