Auch eine mit Hilfe der Eclipse Rich Client Platform geschriebene Anwendung braucht ein eigenes Gesicht. Diese Folge des RCP-Tutorials verleiht dem Beispiel-Bildbetrachter individuelle Züge.

Das Aussehen der grafischen Oberfläche entscheidet über den ersten Eindruck beim Benutzer. Sie sorgt außerdem für den Wiedererkennungswert der Anwendung, was vor allem bei kommerzieller Software im Interesse jedes Entwicklers liegt. Mit der Rich Client Platform geschaffene Anwendungen gleichen sich jedoch zunächst wie ein Ei dem anderen. Das Schaffen eines individuellen Oberflächendesigns heißt im Eclipse-Jargon Branding und sorgt dafür, dass kreative und praktische Ideen des Entwicklers ins Programm einfließen.

Branding leicht gemacht

Der erste Teil dieses Artikels widmet sich den für das Branding notwendigen Schritten. Der zweite Teil kümmert sich um eine Introseite und die Hilfefunktion. Die Introseite erläutert neuen Benutzern Sinn und Zweck der Anwendung. Eine Hilfe ist gerade bei komplexen Programmen wichtig, ihre Bedeutung unterschätzen die meisten Programmierer allerdings. Zumindest bei dem technischen Aufwand für solche Aufgaben nimmt die Rich Client Platform dem Entwickler viel Arbeit ab.

Die ersten Folgen des RCP-Tutorials zeigten die Entwicklung einer Applikation. Der in der einfachen Variante nötige Start des Programms über ein Shellskript ist für Linux-Benutzer nicht ungewöhnlich. Auf anderen Plattformen ist dies Vorgehen jedoch schon deshalb problematisch, weil sich die Möglichkeiten der plattformspezifischen Skriptsprachen im Einzelnen deutlich unterscheiden.

Das Branding setzt zusätzlich zu der Application ein so genanntes Product voraus. Es definiert die Konfigurationseinstellungen, darunter einen Verweis auf jene Application, die das Skript ausführen soll. Damit ist ein Product die Hülle um eine bestehende Anwendung.

Um es anzuwenden, benötigt man zuerst eine »MANIFEST.MF«-Datei. Auf der ersten Seite des Plugin-Editors (der Reiter heißt »Overview«) steht unter »Plug-in Content« der Link »create an OSGI bundle manifest«. Er erzeugt diese Datei automatisch.

Zum Erstellen eines Products in Eclipse wählt man einen geeigneten Extension Point – in diesem Beispiel »org.eclipse.core.runtime.products« – und implementiert ihn. Der dafür zuständige Wizard unter »File | New | Other… | Product Configuration« erledigt die meiste Handarbeit automatisch (Abbildung 1).

Von der Anwendung zum Produkt

Zur Bearbeitung der so erzeugten Datei »epm.product« dient der eingebaute Product-Editor, der beim Doppelklick auf das File startet. Im Reiter »Overview« (Abbildung 2) wählt der Eclipse-Programmierer die Produkt-ID, die Applikation und den Namen des Produkts. Der Link »Synchronize« rechts unten erweitert danach die Datei »plugin.xml« um die entsprechenden Zeilen (siehe Listing 1). An dieser Stelle verhält sich Eclipse nicht ganz konsistent: Ãœber den Product-Editor vorgenommene Einstellungen landen in der Datei »plugin.xml«, umgekehrt übernimmt der Product-Editor Änderungen in der »plugin.xml« jedoch nicht automatisch.

Der Reiter »Configuration« enthält Angaben zu den Plugins, den Startparametern und der zu erzeugenden Konfigurationsdatei (Abbildung 3). In der linken Box stehen die Plugins und Fragmente des Produkts. Fragmente sind Teile von Plugins, die der Update-Mechanismus von Eclipse nachladen kann. Hier ist zwar jedes notwendige Plugin manuell einzutragen, der Plugin-Editor enthält aber im Reiter »Dependencies« eine Liste aller Plugins; aus dieser Listenansicht lassen sie sich bequem übertragen.

Nun steht dem Start des Produkts direkt über die »Overview«-Seite nichts mehr im Weg. Anschließend exportiert es der Entwickler über den »Eclipse Product Export Wizard«. Jetzt ist der Programmstart bereits per »Eclipse Executable« möglich, das Shellskript aus dem ersten Teil des Tutorials hat ausgedient.

Vor dem Start der Anwendung empfiehlt es sich, im Unterverzeichnis »configuration« des Exportverzeichnisses alle Unterverzeichnisse, die mit »org.eclipse« beginnen, zu löschen. Das ist ebenfalls Pflicht für alle, die an der Anwendung selbst Änderungen vornehmen. Auch beim Export-Wizard treten gelegentlich Schwierigkeiten auf. Hier hilft es, das Projekt zu schließen und erneut zu öffnen und zu exportieren.

Optik als I-Tüpfelchen

Der Reiter »Branding« ist für die Optik zuständig. Hier trägt man den zukünftigen Namen der Executable ein und definiert Icons sowie den Splashscreen, der beim Programmstart erscheint. Letzterer muss im BMP-Format vorliegen, die Dokumentation empfiehlt eine Größe von ungefähr 500 mal 330 Pixeln. Gerade bei umfangreicheren RCP-Anwendungen braucht der Start seine Zeit, ein frühzeitiges visuelles Feedback an den Benutzer verkürzt dessen Wartezeit zumindest subjektiv.

Das RCP-Framework bietet einen standardisierten »About«-Dialog, den die letzte Folge des Tutorials bereits beschrieben hat – er lässt sich jedoch kaum anders als hässlich nennen. Das Feld »About Dialog« bietet die Möglichkeit, ein eigenes Bild sowie zugehörigen Text anzugeben, am besten als Referenz definiert (»%aboutText«). Solche Referenzen können überall in der Datei »plugin.xml« stehen. Die dazugehörigen Werte finden ihren Platz in der Datei »plugin.properties«. Dies Vorgehen erleichtert die Internationalisierung und im Falle des About-Dialogtextes ist es derzeit auch die einzige Möglichkeit, Zeilenumbrüche einzufügen.

Der fertige About-Dialog sieht damit ohne jede weitere Programmierung wie in Abbildung 4 aus. Der Splashscreen verwendet in diesem Beispiel dasselbe Motiv.

01 1:<extension
02 2:  id="product"
03 3:  point="org.eclipse.core.runtime.products">
04 4:  <product
05 5:    application="EPM.application"
06 6:    name="Eclipse Photo Management"/>
07 7:</extension>

01: <extension
02:   id="intro"
03:   name="Introduction"
04:   point="org.eclipse.ui.intro">
05: <intro
06:   class="de.bablokb.epm.Introduction"
07:   icon="epm16.gif"
08:   id="intro"/>
09: <introProductBinding
10:   introId="intro"
11:   productId="EPM.product"/>
12: </extension>

Einstiegsseite

Nachdem die Anwendung nun über ein individuelles Design verfügt, ist es Zeit für die inneren Werte. An erster Stelle steht die Willkommens- oder auch Introseite. Der Benutzer soll der Anwendung nicht unvorbereitet gegenüberstehen, sondern eine freundliche Begrüßung und erste Informationen erhalten.

Für die Einstiegsseite sieht Eclipse ebenfalls einen Extension Point vor, allerdings leider keinen Wizard. Das Erstellen einer Einstiegsseite ist insgesamt leider schlecht dokumentiert und außer Eclipse selbst gibt es dafür keine Beispiele.

Abbildung 1: Der Product Configuration Wizard erstellt ein Eclipse-Product, das aus einer Eclipse-Application eine eigenständige Anwendung mit markantem Äußeren macht.

Ãœber den »plugin.xml«-Editor im Reiter »Extensions« ist der Extension-Point schnell manuell hinzugefügt. Er benötigt Definitionen für »intro« und »introProductBinding«. Unter »intro« steht die implementierende Klasse, im Binding die Verbindung zum Produkt. Listing 2 zeigt die entsprechenden Codezeilen in der »plugin.xml«. Der gesamte Code für die Introseite liegt auf dem Listing-Server des Linux-Magazins [1] für den Download bereit.

Abbildung 2: Der Product-Editor überträgt die Konfiguration automatisch in die Datei »plugin.xml«.

Abbildung 3: Der Product-Editor erledigt die vollständige Konfiguration.

Technisch gesehen entspricht die Introseite einer Dialogseite in einer View. Damit stehen hier alle Controls zur Verfügung, die Eclipse beziehungsweise das SWT anbieten. Zu diesem Zweck lässt sich die Klasse »org.eclipse.ui.part.IntroPart« erweitern. Der Wizard für neue Klassen erzeugt ein Gerüst (Abbildung 5), als Minimalausstattung dient die Methode »createPartControl()«.

Die Anwendung speichert, ob sie die Introseite bereits angezeigt hat. Diese Information legt sie im Verzeichnis »./workspace« ab. Sie wertet dieses Verzeichnis beim Start aber nur dann aus, wenn sie mit dem Parameter »-data ./workspace« gestartet wird. Im »Configuration«-Reiter des Produkts legt der Benutzer diese Argumente fest und stattet eine Anwendung so – bei Bedarf auch dauerhaft – mit einem eigenen Verzeichnis aus. Diese Einstellung landet in der Datei »epm.ini« im Wurzelverzeichnis der Anwendung.

Bei der Hilfe stehen zwei Alternativen zur Wahl: Entweder man integriert sie ins eigene Plugin oder schreibt ein separates Hilfe-Plugin. Das Coffeeshop-Beispiel nutzt die erste Variante.

Abbildung 4: Aus dem von der RCP mitgelieferten About-Dialog wird ohne Programmierarbeit eine Darstellung mit individuellem Touch.

Wie zu erwarten kommt der Extension Point über den Reiter »Extensions« des »plugin.xml«-Editors in die Anwendung. Für die Hilfe heißt dieser Punkt »org.eclipse.help.toc«. Für ihn existiert ein Template, das ein Gerüst erzeugt. Listing 3 zeigt den generierten XML-Code in der Datei »plugin.xml«. Der Extension Point verweist auf das Inhaltsverzeichnis (Table of Content, TOC). Dabei handelt es sich um eine XML-Datei, die im einfachen Fall auf gewöhnliche HTML-Seiten verweist, optional aber auch auf weitere XML-Dateien (Listing 4).

Damit der Benutzer die Hilfe tatsächlich erreicht, benötigt das Programm natürlich einen entsprechenden Menüpunkt (siehe Teil 2 des RCP-Tutorials im Linux-Magazin 10/05). Den Menü-Eintrag verknüpft man über »ActionFactory.HELP_CONTENTS.create()« mit einer Standard-Action.

Abbildung 5: Eine Startseite sorgt für eine freundliche Begrüßung beim ersten Programmstart. Die Rich Client Platform bietet dafür einen eigenen Extension Point.

finally{}

Extension Points sind das A und O von Eclipse und RCP-Anwendungen. Diese Architektur ermöglicht es dem Entwickler, eine Anwendung mit minimalem Aufwand an seine Bedürfnisse anzupassen. Eclipse verfügt dafür zusätzlich über ein leiden weitgehend undokumentiertes Presentation-API, mit dem sich das Aussehen weiter anpassen lässt.

Wichtiger als das Design ist aber eine intuitive Benutzerführung. Das so genannte FFF-Prinzip (Form follows Function) ist daher Thema der nächsten Folge des RCP-Tutorials für die View-Programmierung. (csc/ofr)

01: <?xml version="1.0" encoding="UTF-8"?>
02: <?NLS TYPE="org.eclipse.help.toc"?>
03:
04: <toc label="Table of Contents" topic="html/toc.html">
05:    <topic label="Getting Started">
06:       <anchor id="gettingstarted"/>
07:    </topic>
08:    <topic label="Concepts">
09:       <anchor id="concepts"/>
10:    </topic>
11:    <topic label="Tasks">
12:       <anchor id="tasks"/>
13:    </topic>
14:    <topic label="Reference">
15:       <anchor id="reference"/>
16:    </topic>
17:    <topic label="Samples">
18:       <anchor id="samples"/>
19:    </topic>
20: </toc>

01 096:<extension
02 097:  point="org.eclipse.help.toc">
03 098:  <toc
04 099:    file="toc.xml"
05 100:    primary="true"/>
06 101:</extension>