Wie können die Templates von eingebetteten Components (z.B. in der DateComponent) angepaßt werden

Komplexere Components, wie z.B. die DateComponent enthalten Sub-Components.
Im Falle der DateComponent sind dies

  • $component.textcomponent (zur Eingabe des Datums)
  • $component.calendarbuttoncomponent (zum Öffnen/Schließen des Kalenders)
  • $component.monthselectcomponent (zur Auswahl des Monats im Kalender)
  • $component.yearselectcomponent (zur Auswahl des Jahres im Kalender)
  • $component.applybuttoncomponent (Wechsel des Kalenders zum eingestellten Monat/Jahr)

Im Template der DateComponent können diese Sub-Components z.B. so verwendet werden
$component.textcomponent $component.calendarbuttoncomponent
#if ($component.calendar.open)
$component.monthselectcomponent $component.yearselectcomponent $component.applybuttoncomponent
...

Die Sub-Components würden dann mit den jeweiligen Standard Templates ihres Typs gerendert werden, also die $component.textcomponent z.B. mit dem gewöhnlichen Template der TextComponent, usw.

Man kann allerdings die Sub-Components auch direkt im Template der DateComponent rendern, um das Aussehen der DateComponent zu verändern:
Möchte man z.B. für die $component.textcomponent folgendes (vereinfachte) Template anwenden

<input type="text" id="$component.name" name="$component.name"
  value="$portal.imps.string.escapeHTML($component.value)"/>

so kann man diesen Code direkt im Template der DateComponent verwenden, wobei jeweils $component durch $component.textcomponent zu ersetzen ist.
Das Template der DateComponent würde dann z.B. so aussehen:
<input type="text" id="$component.textcomponent.name" name="$component.textcomponent.name"
  value="$portal.imps.string.escapeHTML($component.textcomponent.value)"/> $component.calendarbuttoncomponent
#if ($component.calendar.open)
$component.monthselectcomponent $component.yearselectcomponent $component.applybuttoncomponent
...

Beim anpassen von eingebetteten ButtonComponents (z.B. der $component.calendarbuttoncomponent) muß beachtet werden, daß für eine ButtonComponent ähnliches gilt, wie für eine DateComponent:
Die ButtonComponent kann mehrere Buttons enthalten, die unter $component.buttons zur Verfügung stehen, und sich entweder selbst rendern, oder im Template der ButtonComponent gerendert werden.
Die Anpassung der DateComponent für die $component.calendarbuttoncomponent könnte also so aussehen:
<input type="text" id="$component.textcomponent.name" name="$component.textcomponent.name"
  value="$portal.imps.string.escapeHTML($component.textcomponent.value)"/>
#foreach ( $button in $component.calendarbuttoncomponent.buttons )
  <input id="$button.name" value="$button.label" name="$button.name"
type="submit" />
#end
#if ($component.calendar.open)
$component.monthselectcomponent $component.yearselectcomponent $component.applybuttoncomponent
...




Seite drucken
Seite empfehlen


Downloads & Links

 
top