Widgets
Drei Technologien innerhalb vieler Module
Bei der Frontendentwicklung kommen mit HTML, CSS und JavaScript drei unterschiedliche clientseitige Sprachen zum Einsatz, welche an unterschiedlichen Stellen des Dokumentbaums an den Browser übergeben werden. Dies ist aus Sicht der Entwickler in der Praxis aus zwei Gründen problematisch.
Auf der einen Seite besteht das Problem, dass es, sobald der <head>
-Kontext
vollständig beschrieben und an den Client ausgeliefert wurde, unmöglich ist, nachträglich innerhalb
dieses Kontexts CSS-Definitionen oder JavaScript einzubinden.
Bereits vor der Auszeichnung des HTML-Codes innerhalb des
<body>
-Kontexts müssen demnach sämtliche verwendeten
CSS- und JavaScript-Beschreibungen eindeutig festgelegt
sein, was sich oftmals nicht feststellen lässt, bevor der weitere Verarbeitungsprozess fortfährt.
Auf der anderen Seite lassen sich Frontendkomponenten, bestehend aus separaten Beschreibungen für HTML, CSS und JavaScript, welche zwecks Wiederverwendbarkeit baukastenartig als Frontendmodule eine umfassende Webpräsenz bilden, nur sehr schwierig dergestalt realisieren, dass sie einerseits global einsetzbar und andererseits mit anderen Modulen kombinierbar sind. Gleiches gilt auch für externe Plugins, beispielsweise solche für das JavaScript-Framework «jQuery».
Widgets sollen diesen Problemen entgegen wirken, indem sie die drei unterschiedlichen Technologien mithilfe der Templatesprachen in sich vereinen und einen Sichtbarkeitsbereich schaffen, welcher es Entwicklern ermöglicht, an jedem Punkt der Webanwendung die passenden Beschreibungen einzufügen. Dies wird durch die GWidget-Monade ermöglicht.[1]
Aufbau von Widgets
Widgets fassen ein HTML-Dokument nicht als riesigen Tagbaum auf, bei dem man die gewünschten Beschreibungen an den richtigen Stellen einfügt, sondern führen stattdessen unterschiedliche Zugriffspunkte ein, die es dem Nutzer erlauben, zu jeder Zeit neue Module des Frontends einzufügen, ohne dabei die Richtlinien valider HTML-Auszeichnung zu verletzen. Ein solches Modul könnte z. B. eine Navigationsleiste oder der Artikel eines Blogs sein, zu dem unterschiedliche Beschreibungen der bereits erläuterten Technologien gehören.
Diese verschiedenen Zugriffspunkte oder auch Komponenten des HTML-Dokuments sind die folgenden.
- Titel der Webseite
- Externe Stylesheets
- Externe JavaScript-Dateien
- CSS-Deklarationen innerhalb des Dokuments
- JavaScript-Code innerhalb des Dokuments
- Beliebiger Inhalt innerhalb des
<head>
-Kontexts - Beliebiger Inhalt innerhalb des
<body>
-Kontexts
Über die hier aufgeführten Zugriffspunkte lassen sich die entsprechenden Inhalte übergeben. Die in einem wohlgeformten und validen HTML-Dokumentbaum resultierende Ausgabe wird bei der Verarbeitung der Anfrage durch das Framework generiert.[2]
Praktische Anwendungen
Widgets werden über die Monaden-Semantik realisiert und verfügen entsprechend über die Fähigkeit, aus kleineren Widgets größere zusammenzubauen. Dies ist für das Verständnis über die Herangehensweise bei der Modularisierung einer Webanwendung mit Yesod ein essentieller Mechanismus.
An dem folgenden Beispiel wird die Beschreibung eines Widgets verdeutlicht.
1getHomeR = defaultLayout $ do
2 setTitle "I was built by widgets"
3 addHtml [hamlet|<a>Hello Widgets!|]
4 addCassius [cassius|
5a:hover
6 text-decoration: underline
7|]
Die Definition kann wie bei allen Monaden über die do
-Notation erfolgen. Über die
oben beschriebenen Zugriffskomponenten werden nach und nach neue Inhalte eingefügt. Die dabei
übermittelten Inhalte werden an die umwickelnde Funktion defaultLayout
übergeben, welche
diese ihrerseits an den vorgesehenen Stellen einsetzt.[3]
Weitere Widgets könnten innerhalb des Widget-Kontextes über die Funktion addWidget
hinzugefügt werden.
- [1] Michael Snoyman, Yesod Web Framework Book: Widgets, Introduction http://www.yesodweb.com/show/topic/130
- [2] Michael Snoyman, Yesod Web Framework Book: Widgets, What's in a Widget? http://www.yesodweb.com/show/topic/158
- [3] Michael Snoyman, Yesod Web Framework Book: Widgets, Building Widgets http://www.yesodweb.com/show/topic/157