Customizing mit Framework ZK

24.07.2012

Das bereits vorgestellte RIA Framework ZK bietet eine Vielzahl von vorgefertigten Oberflächenkomponenten an, mit denen es möglich ist das typische Look and Feel einer Desktopanwendung in den Browser zu bringen. Mit diesen bereitgestellten Komponenten und der Oberflächenbeschreibungssprache ZUML (ZK User Interface Markup Language) lassen sich schnell und einfach browserbasierte Anwendungen erstellen. Implementiert man eine solche Anwendung, kann es vorkommen, dass die von ZK bereitgestellten Elemente nicht ausreichen oder auch das Design der Komponenten nicht zum eigenen Corporate Design passt. Deshalb bietet ZK die Möglichkeit solche Elemente nach eigenen Wünschen zu erweitern und zu gestalten.

ZK-Komponenten erweitern und erstellen

Will man bestehende Komponenten erweitern, ist es möglich, nur einzelne Elemente anzupassen. Alle ZK Komponenten können jedoch auch ergänzt werden, indem man Eigenschaften standardmäßig global definiert, also alle Komponenten damit versieht. Ebenso lassen sich eigene Elemente entwickeln, die dann gleichermaßen wie die vorhandenen Komponenten in den „ZUL“-Dateien verwendet werden können. Die neu erstellten Komponenten können von bestehenden abgeleitet werden. Ebenfalls lassen sich komplett neue Komponenten entwickeln, die sich dann in die vorhandene Applikation integrieren lassen.

Mit ZK das „Look and Feel“ an die eigenen Wünsche anpassen

Erweiterungen in ZK vorzunehmen haben mehrere Vorteile: Zum Einen lässt sich das bestehende Design der verschiedenen Komponenten anpassen. Zum Anderen können Anpassungen so vorgenommen werden, dass diese dem eigenen CI entsprechen. Mithilfe der ZK Themes (Vorlagen) lässt sich das Design schnell und einfach austauschen. Mit den aktuellen Themes von ZK kann das Design von Anwendungen schnell ausgetauscht werden. Ebenso können eigene Themes erstellt werden. Die Attribute „sclass“ und „style“ helfen dabei, die Komponenten dem eigenen Look & Feel anzugleichen. Die Klasse der Komponente wird mit der Eigenschaft „sclass“ nur erweitert, so dass die gesetzten Klassen des Frameworks beibehalten werden. Das funktioniert natürlich mit allen ZK Komponenten. Da aber oft nicht nur einzelne Elemente angepasst werden sollen, sondern alle Elemente einer Komponente in der Applikation, können die Attribute auch global gesetzt werden. Dies bietet den Vorteil schnell und einfach die Elemente zu gestalten, vor allem wenn Komponenten und das Design sich sehr häufig wiederholen.

Beispiele für „sclass“

Globales Setzen der Eigenschaft „sclass“ für alle Buttons.

<language-addon>
  <addon-name>button</addon-name>
  <language-name>xul/html</language-name>
  <component>
    <extends>button</extends>
    <component-name>button</component-name>
    <property>
      <property-name>sclass</property-name>
      <property-value>ds-orange</property-value>
    </property>
  </component>
</language-addon>

Setzen der Eigenschaft „sclass“ für alle Buttons einer Seite

Wiederholt sich das Layout einer Komponente nur auf einer Seite, lassen sich die Attribute für eine Komponente auch nur zentral auf dieser definieren und haben somit keinen Einfluss auf die Komponenten anderer Seiten.

 <?component name=“button“ extends=“button“ sclass=“ds-orange“?>

Setzen der Eigenschaft „sclass“ für einen Button

<button sclass="ds-orange"/>

Ist die Eigenschaft „sclass“ gesetzt, kann im CSS mit der Klasse die Komponente angesprochen werden. Hierbei kann dann die Komponente an das eigene CI angepasst werden, indem Bilder und Farben ausgetauscht werden.

. ds-orange.z-button-cl,
. ds-orange.z-button-cr {
    background-image:url(/button/btn-y-ds-orange.png);
}

Wie ein solches CI-konformes Design aussehen kann, demonstrieren die doubleSlash Softwareprodukte secureTransfer und Marketing Planner, die mit ZK entwickelt werden.

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*