Seminarfach Informatik im Schuljahr 2006/2007. Themenstellung der Seminararbeit:

Transkript

1 Seminarfach Informatik im Schuljahr 2006/2007 Themenstellung der Seminararbeit: HTML-Workshop zur Programmierung grafischer Benutzeroberflächen mit Eclipse vorgelegt von: Christoph Kösters Bozener Str Ottobrunn am 17. August 2007 Prüfer: Peter Brichzin, StR

2 Gliederung: 1. Themenstellung... Seite 1 2. Warum Eclipse... Seite 1 3. Der Aufbau des Lernprogramms... Seite Einleitung... Seite Swing contra SWT... Seite Ein Währungsrechner als Leitfaden Seite Eine Aufgabe zum Schluss... Seite Inhaltsverzeichnis... Seite Expertenbereich... Seite 6 4. Anforderungen an das Lernprogramm... Seite Zielgruppen... Seite Das Design... Seite Gezielt Informationen vermitteln... Seite Weiterführende Informationen... Seite 8 5. Rückblick... Seite 9 6. Quellen... Seite 9

3 - 1-1 Themenstellung In den Anfangszeiten des Computerzeitalters waren nur wenige Leute in der Lage, ein solches Gerät zu bedienen. Das lag nicht unwesentlich an der komplizierten Benutzeroberfläche: In der textorientierten Benutzeroberfläche (engl. Character-based User Interface, kurz CUI) erfolgen Usereingaben als Kommandos, Dialoge, Antworten oder Formulareintragungen mit Hilfe einer Tastatur. Zur Bedienung einer solchen Oberfläche musste man also genauestens wissen, was man tat. Das ist heute anders. Die neuen grafischen Benutzeroberflächen machen es heutzutage möglich, die Bedienung eines PCs selbst für Einsteiger problemlos zu gestalten. Ein Graphical User Interface, kurz GUI, ist eine Softwarekomponente, die eine Interaktion mit der Maschine mittels grafischer, metapherartiger Elemente erlaubt und dadurch Anwendungssoftware leicht bedienbar macht. Es fasziniert mich immer wieder zu sehen, wie einfache Textzeilen eines Quellcodes eine komplexe Oberfläche, bestehend aus verschiedensten grafischen Elementen und Symbolen, erstellen können. Aber wie entsteht eine solche Oberfläche? Aufgrund dieser Frage fiel mir die Wahl des Themas dieser Seminararbeit nicht schwer, auch deshalb, weil meine eigenen Kenntnisse darüber mehr als dürftig waren: Entwicklung eines HTML basierten Lernprogramms zum Erlernen der Programmierung grafischer Benutzeroberflächen mit Eclipse. 2 Warum Eclipse? Für die Entwicklung von Software ist eine leistungsstarke integrierte Entwicklungsumgebung, kurz IDE, unverzichtbar. Da auf dem Markt jedoch einige sowohl kommerzielle als auch freie Lösungen angeboten werden, ist die Auswahl eines adäquaten Programms oftmals nicht einfach. Weil eine falsche Entscheidung bei der Auswahl einer passenden IDE im schlimmsten Fall den Gesamterfolg des Projektes gefährden kann, sollte man Bauchentscheidungen oder Entscheidungen auf Basis von

4 - 2 - Hab ich schon mal gehört 1 unbedingt vermeiden. Eclipse ist eine Open- Source-Gemeinschaft, deren Projekte darauf ausgerichtet sind, eine erweiterbare Entwicklungsumgebung zur Entwicklung von Software nahezu jeder Art zu erstellen. Viele Menschen kennen und schätzen Eclipse als Java IDE; Eclipse hat aber weitaus mehr zu bieten als das: Insgesamt stellt die Eclipse-Gemeinschaft über 60 Projekte bereit, beispielsweise für Rich-Client-Applikationen auf Basis der Rich-Client- Plattform 2. Die Eclipse-Plattform zeichnet sich neben ihren eigenen Features besonders durch ihren starken Integrationscharakter aus. Zwar stellt die Plattform von Haus aus nur einen kleinen 3 Umfang an Basisfunktionalitäten bereit, wird aber dank ihrer Plug-In-Architektur wandlungsfähig wie ein Chamäleon und kann durch die große Vielfalt an Plug-Ins stetig erweitert werden. Dieses schlanke Design ermöglicht es dem Benutzer, die Plattform in verschiedensten Szenarien einzusetzen und sie seinen individuellen Anwendungsgebieten anzupassen. Von einigen Anwendern wird Eclipse sogar dazu benutzt, teilweise kommerziell erhältliche Erweiterungen für die Plattform zu entwickeln. Eclipse selbst basiert vollständig auf Java. Das Vorurteil, dass Java langsam erscheint, wiederlegt Eclipse eindeutig, auch deshalb, weil es im Vergleich zu vielen anderen in Java programmierten Entwicklungsumgebungen keine Swing-Klassen, sondern ein plattformabhängiges Windowing Toolkit (SWT) benutzt, das für die jeweilige Plattform optimiert ist. Zusätzlich kommt Eclipse der Open-Source-Faktor zu Gute: Durch den frei erhältlichen Download und zahlreiche kostenlose Plug-Ins bildet sich international ein breites Benutzerfeld, und Eclipse wird von vielen Seiten wie z.b. von Universitäten oder Forschungseinrichtungen unterstützt. Namhafte Firmen des unabhängigen Konsortiums, das Eclipse im November des Jahres 2001 von IBM als Geschenk erhielt, sind z.b. 1 vgl Abschnitt Motivation 2 vgl erster Abschnitt 3 vgl Abschnitt Architektur

5 - 3 - Oracle, HP, Fujitsu oder Sybase 4. Das Interesse an Eclipse, das all diese Benutzer verbindet, und die Verpflichtung des Konsortiums, den Kern von Eclipse in seiner Open-Source-Eigenschaft zu bewahren, bewirken eine kontinuierliche Weiterentwicklung und Kooperation untereinander. Diese Popularität sorgt zusätzlich dafür, dass man mit eigenen Projekten oder Fehlern so gut wie nie alleine dasteht: Foren und Support-Funktionen in vielen Sprachen lassen sich problemlos schnell im Internet finden. 3 Der Aufbau des Lernprogramms 3.1 Einleitung Der Workshop startet mit einem kurzen Vorwort zu Eclipse, gefolgt von einer Installationsanleitung und einer Übersicht über die Benutzeroberfläche, um dem Benutzer zu zeigen, wo er was finden kann. Da ein theoretischer Teil für Anfänger oftmals zäh und uninteressant erscheint, versuche ich, in meinem Workshop so schnell wie möglich mit dem eigenen Arbeiten zu beginnen. Durch diese praktische Anwendung, in der anfangs alles Schritt für Schritt erklärt ist, findet sich der Benutzer mit der Einstiegshilfe auch schnell selbst in der relativ unkomplizierten Umgebung von Eclipse zurecht. 3.2 Swing contra SWT Dieses Arbeiten beginnt mit der Erstellung eines neuen Projekts: Will man eine GUI in Java programmieren, hat man die Auswahl zwischen 3 APIs (application programming interface): Abstract Window Toolkit (AWT), Swing und dem Standard Widget Toolkit (SWT). Da sowohl SWT als auch 4 vgl Seite1

6 - 4 - Swing Applikationen einen größeren Umfang an Bedienmöglichkeiten bieten als AWT 5, fällt diese Option schon einmal heraus. Für gewöhnlich sind also beide APIs leistungsfähig genug, eine umfangreiche GUI zu erstellen. SWT hat den Vorteil, dass es native (betriebssystemnahe) Elemente benutzt und dadurch an Leistung und Kompatibilität gewinnt. Seine Bibliotheken ermöglichen die Erstellung von Java-Anwendungen, die in puncto Ansprechverhalten und Look&Feel dem Verhalten nativer (also z.b. in C oder C++ geschriebener) Anwendungen in nichts nachstehen 6. Dieser Vorteil ist aber auch gleichzeitig ein großer Nachteil: Im Gegensatz zu Swing leidet SWT auf einigen Nicht-Windows- Plattformen, da es viele Features voraussetzt, die oftmals nicht vorhanden sind. Swing dagegen ist komplett tragbar, die Komponenten werden direkt von Java gerendert und sind somit nicht von verschiedenen Plattformen abhängig. Dadurch entsteht zwar der Nachteil, dass Swing-Anwendungen nicht wie für das Betriebssystem entwickelte Anwendungen aussehen, allerdings kann auch das durch eine Auswahl an entsprechenden pluggable Look-and-Feels kompensiert werden. Deshalb habe ich mich zusammen mit meinem Betreuer, Herrn Martin Hölzl, dazu entschieden, eine Swing- statt SWT-Klasse als visuelle Komponente zu benutzen. 3.3 Ein Währungsrechner als Leitfaden Das Projekt, an dem sich der Workshop orientiert, ist ein Währungsrechner, der vom Benutzer beim Durcharbeiten des Lernprogramms Schritt für Schritt erstellt wird. Dabei ist der Währungsrechner in 3 Arbeitsschritte unterteilt: - ein einfacher Währungsrechner, der einen Eingabewert von Euro in Dollar umrechnet, - eine erste Erweiterung, in der verschiedene Eingabe- sowie Ausgabewährungen gewählt werden können, und - eine zweite Erweiterung, in der man die Kurse der jeweiligen Währungen verändern kann. 5 vgl Bild von 6 [Absatz] vgl Eclipse Einführung und Referenz, Ramin Assisi, S198 ff.

7 - 5 - Diese Aufteilung hat zwei wesentliche Vorteile: Zum einen wird der Benutzer nicht überfordert. Jeder Teilbereich hat seine eigenen, neuen Komponenten. Ich persönlich finde die Aufteilung auch deshalb so praktisch, weil die Komponenten der Erweiterung, der JRadioButton und die JComboBox, meiner Meinung nach komplexer sind als die des einfachen Währungsrechners. Zum anderen stecken die einzelnen Bereiche leicht und schnell erreichbare Ziele. Der Leser erreicht auf dem Weg zum fertigen Währungsrechner zwei Zwischenziele, die ihm ein positives Feedback zu seiner Arbeit vermitteln. Durch diese Erfolge hoffe ich, das Interesse des Nutzers weiter zu steigern und ihm zusätzliche Motivation geben zu können. 3.4 Eine Aufgabe zum Schluss Um dem Benutzer noch eine Übungsmöglichkeit anbieten zu können, bevor er sich in die weite Eclipse-Welt hineinwagt, stelle ich die Aufgabe, einen Taschenrechner zu entwickeln. Dabei kann das erlangte Wissen überprüft und gegebenenfalls noch einmal vertieft werden. Lösungen sowohl zum Währungsrechner als auch zum Taschenrechner werden selbstverständlich zum Vergleich oder zur Überprüfung bereitgestellt. 3.5 Inhaltsverzeichnis Zusätzlich bietet das Lernprogramm ein Inhaltsverzeichnis, das von jeder Seite des Workshops aus erreichbar ist. Dieses Inhaltsverzeichnis ermöglicht umgekehrt ebenfalls einen direkten Link zu allen Seiten. Dadurch kann der Workshop jederzeit unterbrochen und zu einem späteren Zeitpunkt an einer bestimmten Stelle schnell fortgesetzt werden. Des Weiteren können sich Leser, die mit der Nutzung von Eclipse teilweise vertraut sind, einen Überblick über den Inhalt des Workshops verschaffen, um nur die Bereiche auswählen zu können, die er oder sie noch nicht kennt.

8 - 6 - User, die dieses Lernprogramm bereits einmal durchgearbeitet haben, können es allerdings auch als Nachschlagewerk benutzen. Bei der Erstellung des Workshops musste ich deshalb darauf achten, den einzelnen Seiten stichhaltige Titel zu geben, die Klarheit über das entsprechende Thema verschaffen. Informationen zu einem bestimmten Bereich dürfen sich deshalb nicht oder nur wenig über mehrere Seiten erstrecken, da sonst ein einzelner Abruf dieser Informationen unmöglich wird. 3.6 Der Expertenbereich Der Expertenbereich ist speziell für interessierte Leser, die hinter die Kulisse der grafischen Oberfläche schauen wollen. Auch Eclipse erstellt ja bei der Einfügung einer grafischen Komponente die dazugehörigen Zeilen im Quelltext, damit genau diese Komponente mit genau diesen eingestellten Eigenschaften im Programm angezeigt werden kann. Was genau Eclipse aber macht bzw. mit welchen Befehlen man selbst eine grafische Komponente erstellen kann, wird hier erklärt. Es werden die Befehle für die Erstellung und für mögliche Einstellungsoptionen aufgeführt, die vorgenommen werden können. Befehle selbst gibt es allerdings wie Sand am Meer und deshalb war es mir wichtig, den Aufbau des teilweise sehr monotonen Codes verständlich zu vermitteln. Wie diese Befehle in der Praxis umgesetzt aussehen können, wird jeweils anhand eines Beispiels des Währungsrechners demonstriert. Dieser Bereich wurde aber nicht für blutige Java-Anfänger konzipiert, es sollte also ein gewisses Grundwissen dieser Sprache vorhanden sein, um auch wirklich erfolgreich im Quelltext arbeiten zu können.

9 - 7-4 Anforderungen an den Workshop 4.1 Zielgruppen Die Hauptzielgruppe meines Workshops sind Anfänger die noch nie zuvor GUI programmiert haben. Von dieser Gruppe ist zu erwarten, dass sie weder wissen, was Eclipse ist, noch - viel wichtiger! - wie sie damit umgehen können. Folglich muss zu Beginn des Workshops eine Einführung in das Programm Eclipse stehen. Ebenso habe ich mich bemüht, die ersten Schritte so genau wie möglich zu beschreiben, um dem Benutzer eine optimale Einarbeitungsphase zu gewährleisten. Ist diese Phase überwunden, findet sich der Leser automatisch besser in Eclipse zurecht und kann damit in der Folgezeit selbstständiger arbeiten. Eine detailgetreue Beschreibung ist deshalb zum Schluss des Workshops nicht mehr von Nöten. Um dennoch nicht den Faden zu verlieren, kann sich der Leser an den Vorgaben bzw. den Bildern orientieren, die ihm zeigen, wie das Zielprogramm auszusehen hat. Allerdings ist das Lernprogramm durch sein Inhaltsverzeichnis auch als Nachschlagewerk geeignet, und bietet zusätzlich einen Bereich, in dem Quellcode-interessierte Leser auf ihre Kosten kommen. 4.2 Das Design Bei der Erstellung des Layouts habe ich mir zum Ziel gesetzt, einen freundlich und gut anzuschauenden und vor allen Dingen übersichtlichen Workshop zu erstellen. Ich stand vor der Wahl, entweder Frames oder Tabellen innerhalb meines Lernprogramms zu verwenden, habe mich aber letztlich für Tabellen entschieden, da sie schöner anzusehen sind. Zwar hätte ich mit Frames auf jeder Seite eine Art Inhaltsverzeichnis anbieten können, sodass von Seite zu Seite gesprungen werden könnte, allerdings hätte das in meinen Augen

10 - 8 - der Übersichtlichkeit geschadet. Außerdem ist das auch nicht der Sinn eines Workshops. Mit der Kombination aus zwei blauen Balken, die den Text einschließen, und einer beigen Tipps&Tricks-Leiste glaube ich, letztendlich ein recht ansehnliches Design gewählt zu haben. 4.3 Gezielt Informationen vermitteln Bei der Erstellung des Textes habe ich mir vorgenommen, Informationen gezielt zu vermitteln. Auch hier ist die Übersichtlichkeit ein entscheidender Faktor: Überflutet man den Benutzer mit einer Vielzahl an Informationen, so verliert er schnell das Interesse und vergisst wesentliche Informationen relativ schnell. Deshalb habe ich mich dazu entschlossen, einige zusätzliche Informationen und Erklärungen sowie Tipps&Tricks in einer optional aufrufbaren Leiste zu verpacken, um den Haupttext auf das Wichtigste zu reduzieren. Das bewirkt, dass sich der Leser auf das Wesentliche konzentrieren kann, um schneller zum Ziel zu kommen. 4.4 Weiterführende Informationen Die sicherlich wichtigste Anforderung an das Lernprogramm ist, dass der Benutzer auch wirklich etwas lernt und nicht nur stupide Schritt für Schritt einen Währungsrechner erstellen kann. Dazu ist es extrem wichtig, den Workshop nicht nur als Anleitung zu gestalten, sondern auch weiterführende, verallgemeinerte Informationen bereit zu stellen. Diese Informationen sollen beispielsweise grundlegende Bedienmöglichkeiten oder auch Eingabehilfen sein, die am besten beim Benutzer ankommen, wenn sie direkt umgesetzt werden können. In meinem Workshop versuche ich teilweise über die Tipps&Tricks-Leiste weitere Informationen zu geben, allerdings größtenteils innerhalb des Haupttextes. Als Kontext für die Erklärung des Layout-Editors und der Properties-View bietet sich die erste Bearbeitung der Ausrichtung einer Komponente an. Besonders der durch die grafische Benutzeroberfläche leicht verständliche Layout-Editor bietet dem Benutzer von Anfang an eine

11 - 9 - gewisse Selbstständigkeit, das Layout nach seinen Wünschen individuell anzupassen. Ein weiterer wichtiger Bestandteil von Eclipse ist der Code-Assistent: Er vereinfacht das Arbeiten im Quelltext enorm und erspart lästige Schreibarbeit und Zeit. Auch dieses Feature von Eclipse versuche ich so schnell wie möglich und bei der ersten Gelegenheit an den Mann zu bringen: bei der ersten Methode umrechnen(). Hierbei erkennt Eclipse eine undefinierte Methode, dessen Gerüst sich sofort mit einem Bestandteil des Code-Assistenten, dem QuickFix, erstellen lässt. Dadurch bieten sich dem Benutzer von Beginn an diverse Eingabehilfen, die das Arbeiten enorm vereinfachen und langweilige Tipparbeit sowie Rückschläge durch eventuelle Fehler minimieren. 5 Rückblick Insgesamt hat mir die Arbeit am Lernprogramm und besonders mit Eclipse viel Spaß bereitet. Ich hoffe natürlich, dass ich auf diesem Wege auch viele andere Leute von der Erstellung einer GUI mit Eclipse begeistern kann. Ich bin froh, dieses Thema gewählt zu haben, da es mich nicht nur interessiert, sondern mir mit Eclipse auch ein neues, beeindruckendes Programm gezeigt hat. Jetzt warten auf mich aber zunächst einmal viele weitere Stunden in der Faszination Eclipse! 6 Quellen Literatur: Eclipse Einführung und Referenz, Ramin Assisi, Hanser Verlag - Seite91/92: Views Einstieg in Eclipse 3, Ulrich Cuber, Galileo Computing - Seite 114 ff.: Code Assistent - Seite 334 ff.: Java Beans - Seite 331: Der Visual Editor

12 Internet: opic=/org.eclipse.ve.doc/topics/tve_swinglayout_gridbag3.html : Layout-Editor - tml: Expertenbereich Pfeilbild: Alle weiteren Informationen/Bilder wurden durch die Arbeit mit Eclipse zusammengestellt.