Guten morgen
In der letzten Woche habe ich recht viel am Widget System gebaut. Dies funktioniert recht gut. Widgets verschieben, vergrößern, löschen funktioniert direkt unter
http://www.clansuite-dev.com/index.php?action=editDas ist jedoch noch nicht direkt mit den templates verknüpft, sodass die Widgets noch nicht permanent auf ihren Positionen bleiben bzw. ihre Größe halten. Dafür sind Eingriffe notwendig, die man absprechen muss. Die verschiedenen Verfahren zur Realisierung will ich kurz erklären. Für jedes dieser Verfahren gibt es jedoch Voraussetzungen.
VoraussetzungenUm Widgets Platzieren und verschieben zu können, bedarf es verschiedener Wrapper, welche vorgeben, wo Widgets im DOM Platziert werden können. Im jetzigen Stadium werden diese Wrapper per ID identifiziert:
- left_widget_bar
- right_widget_bar
- bottom_widget_bar
- all_widgets_cont
Der Container "all_widgets_cont" dient dazu, um entfernte Widgets aufzufangen und sie wieder zu präsentieren, falls man diese wieder hinzufügen möchte.
Eine weitere Voraussetzung ist,
dass die Widgets innerhalb eines <span> Containers gehalten werden müssen.
Zur Begründung: <span> Container sind sogenannte "inline" Elemente. Sie besitzen keine Größe und können nicht richtig positioniert werden. Vorzugsweise werden deshalb häufiger <div> Container verwendet. Dies sind "block" Elemente und können mit "width" und "height" ausgestattet werden. <div> Container haben jedoch einen signifikanten Nachteil: Sie nehmen IMMER 100% width ein. Man kann dies durch eine feste Breite einschränken, das ist aber nur ein Trugschluss. In wirklichkeit besitzt der <div> Container immernoch 100% und wird nur innerhalb dessen auf die gewünschte Größe beschränkt. Daraus resultiert ein "Umbruch" nach jedem <div> Container. Will man diesen jedoch durch float:left verhindern, kann man die Elemente nichtmehr richtig zentrieren, da sie außerhalb des Textflusses gehalten werden.
Somit gelangt man zu der Einsicht, das Block Elemente sehr unpraktikabel sind, wenn es um dynamische Positionierung derer geht. Man braucht also ein Block Element, was positionierbar ist, nicht permanent auf 100% width gestellt ist und somit keine Umbrüche erzeugt. Dies wird durch einen CSS Modifier genannt "display: inline-block;" realisiert. Dieser Modifier wurde speziell in CSS 2.1 eingeführt, um das oben beschriebene Problem zu beheben, doch wie sooft halten sich die Browser nicht an die Spezifikationen von CSS, im Speziellen der Internet Explorer 7. Die Eigenschaft "inline-block" kann dort NICHT auf <div> Elemente angewendet werden (der einzige Browser, der dies vroschreibt -.-), sondern nur auf native inline Elemente. Somit bleibt nur die logische Schlussfolgerung, ein natives Inline Element zu verwenden: <span>
Dies dient zur Erklärung, denn viele werden mich fragen, warum ich "bescheuerterweise" ein Text-Inline Element zur Positionierung der Widgets genommen habe.
Doch nun zu den Verfahren zur Speicherung der Widget Positionen und Größen:
1. index.tpl überschreibenEine recht invasive Methode ist, die Widgets schlichtweg innerhalb der index.tpl neu anzupassen. Dabei wird die XML Struktur des HTML Dokuments aufgebrochen und die darunterliegenden Widgets werden neu angeordnet.
Vorteile:
- die index.tpl enthält immer genau die Struktur, welche gerade vorherrscht
Nachteile:
- recht aufwändiges Platzierungsverfahren der Widgets
- manuelle Änderungen der <span> Elemente durch den User können schlecht abgefangen werden
2. Widget System einführenDies würde Smarty Tags oder Funktionen einführen, im Stil von {$left_widgets}, {$right_widgets}, etc.! Dies wäre dem Joomla System recht ähnlich.
Vorteile:
- Position/Größe der Widgets kann überall gespeichert werden (vorzugsweise in der Datenbank) und kann von überall heraus dynamisch verändert werden.
- Das schlichte umpositionieren von "Widget Bars" (left, right, bottom) wird zum Kinderspiel
- Kapselung
Nachteile:
- die index.tpl würde "schmal" aussehen. Es wird immernoch möglich sein, in der index.tpl feststehende Widgets einzubinden, dennoch kann es verwirrend sein, wenn dort nur steht {$left_widgets}. Mit einer guten Doku kann man dies jedoch recht solide Auffangen.
Ich tendiere sehr stark zu einem Widget System hin, auch wenn es in Richtung Joomla geht (und ich dieses Prinzip von Joomla stark ablehne, aber eben nur auf Grund der Tatsache, dass man dort die Positionen im Backend angeben muss und kein Drag&Drop hat).
Deutsch
