Customizing mit Framework ZK

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.

Barcamp Bodensee 2012 – Die Sessions der Unkonferenz

Jeder kann kommen – man kennt sich zwar nicht, aber eines haben die Teilnehmer eines Barcamps doch gemeinsam: Sie interessieren sich für Themen wie Social Media, Marketing, Kommunikation und Informatik und wollen darüber diskutieren und sich austauschen.

Barcamp Bodensee Friedrichshafen supported by doubleSlashErfunden wurden die Barcamps in Kalifornien und sie sind das absolute Gegenteil von gängigen Konferenzformaten. Unkonventionell, aber trotzdem individuell. Als Teilnehmer weiß man nicht, was einen erwartet und welche Themen angeboten werden.

Eine richtige Agenda gibt es nicht. Erst wenn sich die meistens über einhundert Teilnehmer zu Beginn des Barcamps vorstellen, wird klar, über welches Thema referiert wird und wie sich der Barcamp-Tagesablauf gestaltet.

Einfach nur zuhören und Nichtstun? Bei Barcamps ist das anders: jeder Teilnehmer ist involviert, ob als Referent eines Themas, als Assistent eines Referenten oder einfach als freiwilliger Helfer, damit die Veranstaltung auch gelingt.

Continue reading

Einbettung verschiedener Technologien in ZK

Die Anforderungen und Erwartungen an eine Webseite haben sich in den letzten Jahren stark verändert. Animation und Interaktion haben sich auf Webseiten etabliert und gelten inzwischen als ein nicht mehr wegzudenkender Standard. So haben wir bei doubleSlash auf unserer Webseite darauf geachtet, dem Besucher ein möglichst einprägsames Erlebnis zu bieten.

Da viele Webseiten sehr umfangreich sind, ist eine Minimierung des Zeitaufwands für das Programmieren essenziell. In einer Webseite werden verschiedene Technologien wie z.B. Java, Javascript und CSS verwendet, um unterschiedliche Eigenschaften zu steuern. Das Zusammenfassen der einzelnen Technologien stellt oft eine Herausforderung für den Programmierer dar.

An dieser Stelle kommt meist ein Framework ins Spiel, das die Technologien verschiedener Programmiersprachen ohne großes Know-How miteinander fusionieren kann. Die Framework-spezifische Sprachen lehnen sich meist an Sprachen wie HTML oder XML an. Zudem bieten Frameworks zusätzliche Funktionen an, um die Webseite mit wenigen Handgriffen besser zu gestalten.

Ein häufig verwendetes Framework ist ZK. Dieses unterstützt eine Vielzahl anderer Technologien, wie die bereits erwähnten:  Java, Javascript, und Cascading Style Sheets (und weitere). Die zu ZK gehörige Sprache heißt ‚ZUML‘ und wird zur Erstellung sogenannter ‚ZUL‘ Dateien verwendet. Diese Dateien dienen als ‚Fundament‘ der Webseite, in dem andere Dateien eingebettet werden können. Das Einbetten findet am Anfang der Datei statt.

 

 

 

Es können auch verschiedene ZUL Dateien ineinander verflochten werden, zum Beispiel wenn ein Popup Fenster erscheinen soll, oder wenn ein Frame aus mehreren Einzelteilen besteht (siehe Bild). Ein Part kann z.B. eine Liste von Ordnern und ein anderer eine Liste von Dateien enthalten.

Aus dem kompletten Konstrukt wird per Javascript-Befehl ein HTML Code beim Client generiert. Dieser Code kann dann mit jedem Browser aufgerufen werden. ZK erstellt automatisch IDs für einzelne Elemente. Wird innerhalb des Programmcodes eine Funktion oder Eigenschaft aus einer anderen Datei benötigt weiß ZK welche ID verwendet werden muss, um auf bestimmte Stellen zuzugreifen. Mithilfe der IDs kann ZK dann z.B. im Java Quellcode auf einzelne Komponenten zugreifen.

Auch doubleSlash setzt bei der Entwicklung von secureTransfer und Marketing Planner auf ZK. Wie das Ganze aussieht und funktioniert, können Sie mit der kostenlosen Community Edition unserer Produkte austesten.

Einfache Entwicklung von Rich Internet Applications mit ZK

open source java web frameworkUnser Umgang mit Daten hat sich in den letzten Jahren drastisch verändert. Überall auf diese zurückgreifen zu können ist nicht nur bequem, sondern kann in unserer schnelllebigen Welt zum entscheidenden Wettbewerbsvorteil werden.

Durch diesen Wandel im Umgang mit Daten verlieren die klassischen Desktopanwendungen zunehmend an Attraktivität. Immer mehr Arbeitsabläufe werden in den Browser verlegt: Dokumente, Präsentationen und Diagramme lassen sich inzwischen darin erstellen, speichern und verteilen.

Umso wichtiger ist die Benutzungsfreundlichkeit solcher Webanwendungen. Mit Hilfe sogenannter „Rich Internet Applications“ (RIA) lassen sich Look and Feel und die Bedienbarkeit klassischer Desktopanwendungen in den Browser übertragen.

Ein weit verbreitetes RIA Framework, das die Entwicklung anspruchsvoller Webanwendungen mit Hilfe von Java unterstützt, ist ZK. Als Framework stellt es Werkzeuge und Komponenten bereit, um die Arbeit eines Webentwicklers zu erleichtern und effizienter zu gestalten.

Neben einer kostenlosen Community Edition gibt es die kostenpflichtige und für professionelle Einsätze gedachte Professional und Enterprise Edition. Alle Editionen liegen als Open Source-Variante vor.

Das Framework stellt neben einer großen Anzahl von Oberflächenkomponenten wie Fenster, Buttons und Eingabefelder, auch die Kommunikation zwischen Client und Server bereit. Die Einbindung von Asynchronous JavaScript and XML (AJAX) erlaubt es, Anfragen an den Server für den Nutzer unsichtbar in den Hintergrund zu verlagern. Nur in wenigen Fällen muss eine Seite vollständig neu geladen werden. Die zu ZK gehörende und auf XML basierende Oberflächenbeschreibungssprache ZUML (ZK User Interface Markup Language) ermöglicht die einfache und schnelle Entwicklung anspruchsvoller Oberflächen, die kaum von jenen einer Desktopanwendung zu unterscheiden sind. Dadurch ist ZK auch für Prototypen und Machbarkeitsstudien geeignet.

Die eigentliche Business Logik wird mit Hilfe von Java implementiert und auf dem Server ausgeführt. Benötigt wird dafür gerade einmal ein Servlet Container, wie z.B. Apache Tomcat.

ZK erlaubt es dem Entwickler sich auf seine eigentliche Aufgabe zu konzentrieren: die Implementierung der fachlichen Anforderungen. Dadurch reduziert ZK den Entwicklungs- und Wartungsaufwand.

Übrigens: Auch doubleSlash setzt bei seinen Produkten secureTransfer und Marketing Planner auf ZK. Neugierig geworden? Probieren Sie unsere kostenlose Community Edition aus und überzeugen Sie sich selbst, wie anspruchsvolle Anwendungen mit ZK aussehen können.

Interview: Programmieren mit AJAX und der Einsatz von Frameworks

In der letzten Ausgabe des slashUp Magazins ist ein Interview mit unserem Software Architecten Nicky Graßmann zum Thema „Ajax“ erschienen.
Hier finden Sie nun die ausführlichere Beschreibung, sowie eine Betrachtung und Differenzierung von verschiedenen Frameworks im Bereich der Rich Client Application Programmierung.

Kurz zur Person:
Nicky Graßmann ist seit ein paar Jahren für doubleSlash als Software Architect tätig. Sein Studium der Medieninformatik an der HS Furtwangen schloss er erfolgreich ab. Er beschäftigt sich in seiner Arbeit ausführlich mit modernsten Web-Anwendungen. Deshalb möchten wir von ihm gerne mehr zum Thema AJAX erfahren.

1.) Was macht der Einsatz von AJAX in ihrem Projektumfeld möglich?
Der Trend von Desktopapplikationen hin zu webbasierten Anwendungen ist ungebrochen. Angestoßen wurde diese Entwicklung schon im Jahre 2005 mit der Prägung des Begriffs AJAX durch Jesse James Garrett. Wir setzten schon früh auf die Vorteile von AJAX und konnten dadurch Anwendungen entwickeln, welche weit größere Datenmengen verwalten als bislang möglich war. Für den Benutzer konnte dennoch eine gute Geschwindigkeit erzielt werden.
Continue reading

ContactManager – Das kleine CRM für große Unternehmen

Das kleine CRM für große UnternehmenVon den Adressen einer Kundendatenbank werden jährlich durchschnittlich mehr als 10 Prozent unzustellbar, weil beispielsweise die Empfänger umgezogen, unter neuem Namen verheiratet oder die Anschriften nicht korrekt sind.

Der Erfolg eines jeden Kundendialogs steht und fällt jedoch mit der Qualität der verwendeten Adressen. Mit qualifizierten Adressen erreichen Unternehmen ihre Kunden effektiver.

Hier kommt das doubleSlash-Produkt ContactManager ins Spiel. Das Produkt verwaltet Adressdaten und kategorisiert im Sinne eines CRM-Systems. Eine Funktion zum Abgleich der Adressdaten mit der Deutschen Post Direkt GmbH stellt den USP (unique selling propositon) des Produktes dar.

Im Rahmen meiner Bachelorthesis beschäftigte ich mich auch mit dem Contact Manager. Ziel des ersten Schritt war die theoretische Aufarbeitung des Themas Serviceorientierte Architekturen. Eine solche Technik ist mit der Integrationsplattform dip (doubleSlash integration plattform) vorhanden. Auch untersuchte ich, vorbereitend für die kommenden Releases, notwendigen Voraussetzungen für die Neuerstellung des Adressverwaltungsmoduls.

Im zweiten Schritt wurde das Konzept in ein Adressverwaltungsmodul umgesetzt. Als Benutzermanagement kommt des doubleSlash Produkt „Identity Manager“ zum Einsatz. Das Frontend wird mittels des freien Ajax Frameworks ZK entwickelt.

Schon heute bietet das System dem Benutzer unter anderem folgende Features:

  • Das Verwalten von Personen- & Institutionskontakten
  • Kategorisierung der Kontakte mittels beliebig definierbarer Schlagworte
  • Import und Exportfunktionalität
  • Qualifizierte Adressen durch Adressabgleich
  • Eigene Filter können erstellt werden

Mit Hilfe des ContactManagers wird es Unternehmen ermöglicht, die Qualität ihrer Kundenadressen stets auf einem aktuellen Stand zu halten.