Inhaltsverzeichnis
Werbung
Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Fallstudienarbeit Hochschule: Hochschule für Oekonomie & Management Standort: Essen Studiengang: Bachelor Wirtschaftsinformatik Veranstaltung: Fallstudie / Wissenschaftliches Arbeiten Betreuer: Dipl-Inf._(FH)_Christian_Schäfer Typ: Fallstudienarbeit Themengebiet: GUI Autor(en): C. Schröter, A. Warmers Studienzeitmodell: Abendstudium Semesterbezeichnung: SS11 Studiensemester: 2 Bearbeitungsstatus: Bearbeitung abgeschlossen Prüfungstermin: Abgabetermin: Hinweise für Studenten Inhaltsverzeichnis • 1 Einleitung und Vorgehensweise • 2 Graphical User Interface ♦ 2.1 Definition ♦ 2.2 Geschichte ♦ 2.3 Anforderungen an ein GUI ◊ 2.3.1 1. Aufgabenangemessenheit ◊ 2.3.2 2. Selbstbeschreibungsfähigkeit ◊ 2.3.3 3. Erwartungskonformität ◊ 2.3.4 4. Fehlertoleranz ◊ 2.3.5 5. Steuerbarkeit ◊ 2.3.6 6. Individualisierbarkeit ◊ 2.3.7 7. Lernförderlichkeit ♦ 2.4 GUI-Elemente • 3 Geschichte der Programmiersprachen ♦ 3.1 1. Generation ♦ 3.2 2. Generation ♦ 3.3 3. Generation ♦ 3.4 4. Generation • 4 Bestandteile der GUI-Entwicklung ♦ 4.1 Editor Inhaltsverzeichnis 1 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich ♦ 4.2 Integrierte Entwicklungsumgebung (IDE) ◊ 4.2.1 Texteditor ◊ 4.2.2 Compiler ◊ 4.2.3 Linker ◊ 4.2.4 Debugger ◊ 4.2.5 Quelltextformatierer ◊ 4.2.6 GUI-Builder ♦ 4.3 Framework ◊ 4.3.1 Aufgabe ◊ 4.3.2 Funktionsweise ⋅ 4.3.2.1 White-Box ⋅ 4.3.2.2 Black-Box ◊ 4.3.3 Arten ⋅ 4.3.3.1 Application Frameworks ⋅ 4.3.3.2 Domain Frameworks ⋅ 4.3.3.3 Support Frameworks ◊ 4.3.4 Vor- u. Nachteile ♦ 4.4 Layoutmanager • 5 Werkzeuge zur GUI-Entwicklung ♦ 5.1 NetBeans ◊ 5.1.1 Swing ◊ 5.1.2 Matisse ♦ 5.2 ECLIPSE ◊ 5.2.1 SWT Framework ◊ 5.2.2 UI-BUILDER ◊ 5.2.3 Visual Editor ◊ 5.2.4 Jigloo ◊ 5.2.5 Matisse4MyEclipse ◊ 5.2.6 Übersicht der GUI-Builer für Eclipse ♦ 5.3 Qt ♦ 5.4 Microsoft Visual Studio ◊ 5.4.1 .Net Framework ◊ 5.4.2 IDE und Inhaltsverzeichnis 2 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich GUI-Designer • 6 Ausblick • 7 Abbildungsverzeichnis • 8 Tabellenverzeichnis • 9 Fußnoten • 10 Literatur- und Quellenverzeichnis 1 Einleitung und Vorgehensweise Im Laufe der Jahre wurden einige Werkzeuge zur Entwicklung grafischer Benutzeroberflächen entworfen. Im Vordergrund steht hierbei natürlich die Verringerung der Komplexität hinsichtlich der Software-Entwicklung und Anwendung. In dieser Hausarbeit werden wir versuchen einen Überblick über die grafische Benutzeroberfläche und deren Editoren im Allgemeinen zu vermitteln, sowie konkret auf einzelne Editoren einzugehen und diese miteinander zu vergleichen, um Gemeinsamkeiten, sowie Unterschiede zu ermitteln. 2 Graphical User Interface 2.1 Definition Graphical User Interface [GUI] bedeutet übersetzt, grafische Benutzeroberfläche. Die GUI dient als Schnittstelle zwischen Programm und Anwender.[1] Mit Hilfe von Icons, Eingabefeldern, Buttons und Fenstern, hat der Benutzer die Möglichkeit, z.B. bei einer hinterlegten Datenbank Daten einzugeben, zu manipulieren, zu löschen oder abzufragen. Der Anwender benötigt daher keinerlei Programmierkenntnisse und kann das Programm einzig und allein mit der GUI bedienen. Abbildung 1: GUI[2] 1 Einleitung und Vorgehensweise 3 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich 2.2 Geschichte Die ersten Annäherungen an eine GUI entstanden schon in den 60er Jahren. Douglas Engelbart entwickelte in dieser Zeit bereits die erste Maus. Umgesetzt wurde die GUI zum ersten Mal dann Anfang der 80er Jahre vom Kopiererhersteller Xerox PARC, die 1974 den Xerox Alto auf den Markt brachten. Bekannt wurde die GUI allerdings erst durch Apple, die neue Ideen wie z.B. verschiebbare Icons oder Pull-down-Menüs umgesetzt haben. Als Reaktion entwickelte Microsoft 1985 ihr erstes Betriebssystem ?Windows 1.0?. Die Entwicklung der GUI nahm fortan ihren Lauf. Immer mehr Ideen und Verbesserungen flossen in die Konzeption mit ein und versuchen bis heute dem Benutzer die Anwendung von Computern und Programmen zu erleichtern.[3] 2.3 Anforderungen an ein GUI Die Anorderungen an eine GUI sind in der europäischen Norm EN ISO 9241 festgelegt. Deutsche Fassung: ?Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten Teil 10: Grundsätze der Dialoggestaltung (ISO 9241-10 : 1995)?[4] Nach dieser Norm müssen 7 Grundsätze der Dialoggestaltung stets beachtet werden: 2.3.1 1. Aufgabenangemessenheit ?Ein Dialog ist aufgabenangemessen, wenn er den Benutzer unterstützt, seine Arbeitsaufgabe effektiv und effizient zu erledigen.?[4] Im Beispiel einer konkreten Arbeitsanweisung bedeutet dies z.B., dass dem Benutzer nur die Informationen zur Verfügung stehen sollen, die auch der Verwirklichung seiner Arbeit dienlich sind. Der Dialog soll so simple wie möglich gehalten werden und keine unnötigen Arbeitsschritte enthalten.[5] 2.3.2 2. Selbstbeschreibungsfähigkeit ?Ein Dialog ist selbstbeschreibungsfähig, wenn jeder einzelne Dialogschritt durch Rückmeldung des Dialogsystems unmittelbar verständlich ist oder dem Benutzer auf Anfrage erklärt wird.?[4] Durch Rückmeldungen des Systems wie z.B. ?Änderungen wurden übernommen? oder ?Datensatz wird gespeichert?, erhält der Anwender Informationen über Änderungen am System. Des Weiteren impliziert Selbstbeschreibungsfähigkeit auch das Einbinden einer Begriffserklärung oder das eigenständige Anhängen von Informationen an einen Datensatz, wie z.B. das Datum.[5] 2.3.3 3. Erwartungskonformität ?Ein Dialog ist erwartungskonform, wenn er konsistent ist und den Merkmalen des Benutzers entspricht, z.B. den Kenntnissen aus dem Arbeitsgebiet, der Ausbildung und der Erfahrung des Benutzers sowie den allgemein anerkannten Konventionen.?[4] Erwartungskonform betrifft im eigentlichen die Einheitlichkeit des Dialoges. Sprich die Verwendung von Fachbegriffen, Funktionen von Tasten und Buttons, Rückmeldungen vom System usw.[5] 2.2 Geschichte 4 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich 2.3.4 4. Fehlertoleranz ?Ein Dialog ist fehlertolerant, wenn das beabsichtigte Arbeitsergebnis trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand durch den Benutzer erreicht werden kann.?[4] Durch Prüfung der Eingaben können schon unzulässige Eingaben vermieden werden. Es wird eine entsprechende Rückmeldung vom System gegeben und auf den entsprechenden Fehler verwiesen. Ein zusätzlicher Punkt der Fehlertoleranz kann beispielsweise eine Rechtschreibprüfung sein oder eine Anfrage an den Benutzer, ob die ausgewählten Datensätze wirklich gelöscht werden sollen.[5] 2.3.5 5. Steuerbarkeit ?Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist.?[4] Beispiele für Steuerbarkeit eines Dialoges sind die Auswahl der Eingabegeräte (Maus oder Tastatur) und Kurzwahltasten, die dem Benutzer ermöglichen, Arbeitsschritte zu überspringen oder zu verkürzen. Weiterhin spricht man von Steuerbarkeit, wenn die Möglichkeit einer textlichen und bildlichen Darstellung einer Ausgabe besteht. Der Zugriff auf bereits gelöschte Objekte ist hier als weiterer Punkt aufzuführen.[5] 2.3.6 6. Individualisierbarkeit ?Ein Dialog ist individualisierbar, wenn das Dialogsystem Anpassungen an die Erfordernisse der Arbeitsaufgabe, individuelle Vorlieben des Benutzers und Benutzerfähigkeiten zuläßt.?[4] Individualisierbarkeit ist mit Anpassungsfähigkeit gleichzusetzen. Das bedeutet der Anwender kann den Dialog bzw. die Ausgabe seinen eigenen Wünschen anpassen. Somit können z.B. Schriftgröße und Schriftart, sowie Farben oder Scrollgeschwindigkeiten verändert werden. Das Anpassen der Maus an die linke oder rechte Hand zählt auch zur Individualisierbarkeit.[5] 2.3.7 7. Lernförderlichkeit ?Ein Dialog ist lernförderlich, wenn er dem Benutzer beim Erlernen des Dialogsystems unterstützt und anleitet.?[4] Lernförderlichkeit bedeutet, der Benutzer kann zusätzliche Informationen über die Anwendung abrufen. Er erhält somit Hintergrundinformationen, die über den Dialog hinausgehen, z.B. hinsichtlich der hinterlegten Datenbank. Des Weiteren sollen konkrete Beispiele das Konzept ?Learning-by-doing? ermöglichen. Der User kann an Hand von Beispielen erkennen, was passiert, wenn er bestimmte Funktionen verwendet. Das verringert die Fehlerquote und schult den Anwender.[5] 2.4 GUI-Elemente GUI-Elemente werden zumeist über die Verwendung einer Maus oder einer Tastatur gesteuert und bedient. Aber auch Touch-Screens rücken heutzutage immer mehr im Fokus der Bedienung von grafischen Benutzeroberflächen. 2.3.4 4. Fehlertoleranz 5 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Zu den gängigsten GUI-Elementen heute gehören Schaltflächen, Toolbars, Textfelder, Checkboxes, Radiobuttons, Listenfelder, Dialogboxen und Symbole. Schaltfläche: Schaltflächen sind Buttons mit einer i.d.R. hinterlegten Funktion. Ausgeführt werden diese durch einen Mausklick oder Tastaturkürzel.[6] Toolbar: Auch als Werkzeugleiste bekannt. Die Toolbar erweitert das Menü um eine Anreihung von Schaltflächen, meistens waagerecht, bei denen häufig verwendete Funktionen hinterlegt sind z.B. Drucken oder Speichern.[7] Textfeld: Ein Steuerelement, das die Eingabe von Zeichensätzen (Buchstaben, Ziffern, Sonderzeichen, ?) übergeben kann.[8] Checkbox: Steuerelemente die dem Benutzer eine Mehrfachauswahl ermöglichen. Hier kann der Benutzer keins, eins, mehrere oder alle Elemente auswählen.[9] Radiobutton: Weitere Bezeichnung: Optionsfeld. Im Gegensatzzur Checkbox, kann hier keins oder nur ein Optionsfeld aktiviert werden.[10] Listenfeld: Ansammlung von Einträgen. Diese basieren meist auf schriftlicher Basis. Angezeigt wird die Liste i.d.R. durch aktivieren des Steuerelementes mit einem Mausklick.[11] Dialogboxen: Dialogboxen sind Fenster die dem Anwender begrenzte Eingabemöglichkeiten bieten. Hierzu werden Schaltflächen, Textfelder oder Checkboxes verwendet.[12] Symbole: Bildlich dargestellte Steuerelemente die meist durch einen Doppelklick mit der Maus ausgeführt werden. Symbole können sein: ausführbare Exe-Dateien, Ordner, Dokumente usw.[13] 3 Geschichte der Programmiersprachen 3.1 1. Generation Der Grund für das Entwickeln einer Programmiersprache war die Industrielle Revolution. Im 19. Jahrhundert wurden immer mehr Maschinen entwickelt. Um diese maximal auslasten zu können, wurde gefordert, dass die Maschinen auch wechselnde Tätigkeiten übernehmen können. Joseph-Marie Jacquard hatte die ersten programmierbaren Webstühle in seine Werkstätten integriert. Diese Webstühle konnten alle möglichen Arten von Muster herstellen. Die Lochstreifen der Webstühle wurden mit Nadeln abgetastet. So wurde entweder bei einem Loch der Faden gehoben oder gesenkt. [14] 3.2 2. Generation Die logische Programmierung hatte allerdings ihre Anfänge erst in den 30er Jahren des 20. Jahrhunderts. Die Prozessoren arbeiten nur mit 2 Zuständen. Strom and und Strom aus. Das ist die Maschinensprache und die Befehle wurden also binär mit 0 und 1 eingegeben. [14] In Folge darauf wurden die ersten Assemblersprachen entwickelt. Hier können bereits die Befehle als Buchstabencode eingegeben werden. Da sich die Assemblersprachen stark an die Maschine orientiert mussten 2.4 GUI-Elemente 6 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich diese Buchstabenkombinationen mit Hilfe von speziellen Compilern individuell umgeschrieben werden. Mittlerweile konnte man schon diverse Werte in den Speicherplatz der CPU schreiben. [14] 3.3 3. Generation Mit zunehmender Komplexität der zu erfüllenden Aufgaben, war schnell klar, dass Informatiker die Programmiersprachen weiter entwickeln müssen. Einerseits sollen die Programme rechnerunabhängig eingesetzt werden können. Andererseits soll keine Spezialkenntnis über die Rechner vorausgesetzt sein.[14] Die erste so genannte Hochsprache war FORTRAN, gefolgt von LISP und COBOL. Im Laufe der Jahre entwickelten sich dann weitere nicht so spezialisierte Programmiersprachen wie z.B. BASIC, C, PASCAL, C++, JAVA oder HTML. [14] 3.4 4. Generation Fourth Generation Language (4GL) bezeichnet die Kombination verschiedener Programmiersprachen und Programmierumgebungen für die Dateneingabe, Datenabfrage oder Datenmanipulation. Hinzu kommt die Berichterstellung sowie Formularerstellung. Die Benutzer sollen mit möglichst wenig Fachwissen Programme schreiben können. Ein gutes Beispiel hierfür ist Structured Query Language (SQL). Der Benutzer muss lediglich angeben welche Daten er haben will. Der Computer sucht die passenden Informationen entsprechend der Abfrage selbstständig heraus.[14] 4 Bestandteile der GUI-Entwicklung 4.1 Editor Definition: Ein Editor ist ein Programm aus der EDV und dient der Eingabe, Änderung und Aufbereitung von Texten und Grafiken. [15] Man unterscheidet zwischen Texteditor und Grafikeditor. Texteditor: Sie dienen der grafischen Aufbereitung von Texten. Dies geschieht mit Hilfe von bereits implementierten Funktionen, wie z.B. automatischen Umbrüchen oder Rechtschreibkorrektur. Unterstützte Zeichensätze sind z.B. ASCII und der Unicode. [15] Grafikeditor: Grafikeditoren werden zum Erstellen von Bildern und Grafiken verwendet. Eines der wohl bekanntesten Grafikeditoren ist Microsoft Paint. Es eignet sich besonders gut zum Darstellen einfacher Formen wie z.B. Linien, Kreise, Ovale, usw.[15] 4.2 Integrierte Entwicklungsumgebung (IDE) IDE entstand aus der Idee, den Programmierern eine Reihe von Werkzeugen zur Software-Entwicklung durch eine grafische Benutzeroberfläche zur Verfügung zu stellen. So sollten z.B. der Zugriff auf wiederkehrende Funktionen handlicher und schneller gemacht werden.[16] 3.2 2. Generation 7 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Die erste IDE wurde unter den Namen Maestro I von Softlab bekannt. ?Sie wurde insgesamt 22.000 mal installiert, davon allein 6.000 mal in der Bundesrepublik Deutschland.?[17] Als Nachfolger zu nennen ist das auch noch heute bekannte Turbo Pascal.[16] IDEs existieren für fast jede Programmiersprache. Sie sind oftmals als Open-Source oder Freeware zu haben. Open-Source: Frei zur Verfügung stehende Lizenzen für Programme. Der Quelltext ist frei einsehbar und durch die Linzens veränderbar.[16] Freeware: Im Gegensatz zu Open-Source, sind Freiheiten wie z.B. das Verändern des Quellcodes verboten.[16] Eine Integrierte Entwicklungsumgebung besitzt folgende Elemente:[16] • Texteditor • Compiler oder Interpreter • Linker • Debugger • Quelltextformatierer 4.2.1 Texteditor Der Editor in diesem Sinne, ist die Entwicklungsumgebung der Software-Entwickler. Die Informationen werden solange flüchtig gespeichert, bis die Endgültige Speicherung ausgeführt wird. Mit Hilfe von Funktion wie ?Undo? können Eingaben rückgängig gemacht werden. [16] 4.2.2 Compiler Compiler sind wie bereits in der ?Geschichte der Programmiersprachen? beschrieben Übersetzer, die den geschriebenen Code in Assemblersprache, Bytecode oder Maschinensprache umwandeln.[16] Analysiert werden hier die Lexikalik, Syntaktik und die Semantik.[16] Lexikalik: Beschreibt die gültigen Worte und Zeichen der Programmiersprache. Syntaktik: Beschreibt den formalen Aufbau von Anweisungen und Programmen. Semantik: Beschreibt die Bedeutung von Anweisungen und Programmen. 4.2.3 Linker Ein Linker dient der Zusammenführung unterschiedlicher Programmmodule. Dadurch entsteht letztendlich ein ausführbares Programm. [16] Da kompilierte Module auch in anderen Programmen Verwendung finden können, ist es möglich sie zu einer Funktionsbibliothek hinzuzufügen. Der Code wird durch den Linker im Hauptprogramm unterlegt, sodass sie jederzeit aufrufbar ist.[16] 4.2 Integrierte Entwicklungsumgebung (IDE) 8 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Um diese Module jedoch verwenden zu können, müssen die symbolischen Adressen der Funktionen und Variablen in Speicheradressen umgewandelt. Die Verlinkung erfolgt am Ende der Programmierung. [16] Man unterscheidet zwischen Statisches Linken und Dynamisches Linken: Statisches Linken: Verlinkung erfolgt in Fertigung ? Nutzer erhält sofort ausführbares Programm[16] Dynamisches Linken: Verlinkung erfolgt bei Ausführung ? Speicher wird nur einmal benötigt und Bibliotheken sind leicht austauschbar[16] 4.2.4 Debugger Die Hauptaufgabe eines Debuggers besteht darin, das Programm auf Fehler zu überprüfen. Er prüft den Programmcode, Speicher und das Register. Sie dienen dazu die Fehler aufzuspüren, Rückmeldung zu geben und gegebenenfalls selber zu beheben. [16] 4.2.5 Quelltextformatierer Er dient zur Verschönerung des Quelltextes. Er kann den Code nachträglich formatieren und vereinheitlichen. Es verbessert die Lesbarkeit und Wartung. [16] 4.2.6 GUI-Builder Ein weiterer Bestandteil der IDE kann der GUI-Builder oder GUI-Designer sein. Mit Hilfe dieses ?Builders? können die Steuerelemente via Drag & Drop nach belieben platziert werden. Dies geschieht frei nach dem Motto: ?What you see is what you get.? Ohne dieses Werkzeug, müssen die Steuerelemente durch Programmierung angeordnet werden. [18] 4.3 Framework Ein Framework ist eine Art Grundstruktur in der Softwareentwicklung. Das Framework ist das Grundgerüst der Anwendungsprogrammierung, welches den Entwicklungsrahmen zur Programmierung vorgibt. Sie sind selbst eine Ansammlung abstrakter und konkreter Klassen und dienen der Wiederverwendung von Designs. Bestandteil des Frameworks sind unter anderem Bibliotheken und Komponenten, wie z.B. Laufzeitumgebungen und Designstrukturen. Frameworks sind überwiegend in der objektorientierten Programmierung vorzufinden. Mit Hilfe von Frameworks wird das entwerfen ähnlicher Programme erheblich erleichtert.[19] 4.3.1 Aufgabe Frameworks haben die Aufgabe den Kontrollfluss der Anwendungen und Schnittstellen zu definieren. Es legt fest, wie die Anwendungen funktionieren, indem es die Strukturen bestimmter Klassen des Programms definiert. [20] 4.2.3 Linker 9 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich 4.3.2 Funktionsweise Wie schon erwähnt besteht das Framework aus abstrakter und konkreter Klassen. Die Klassen arbeiten eng zusammen. Der Entwickler registriert seine Implementierungen. Die Steuerung und Verwendung erfolgt dann aber über das Framework. Programmierer nennen diesen Ablauf ?Umkehrung der Steuerung?.[20] 4.3.2.1 White-Box Das White-Box Framework besteht aus abstrakten Klassen. Der Softwareentwickler, kann aus diesen Klassen eigene ableiten. Sie sind daher in der Nutzung komplizierter, da sie Klasseninterne Kenntnisse erfordern. In diesem Fall wird häufig die Klassenvererbung angewendet.[21] 4.3.2.2 Black-Box Das Black-Box Framework dagegen enthält fertige Klassen, welche nur noch konfiguriert werden müssen. Die Klassen haben den Vorteil, dass sie keine großartigen Kenntnisse erfordern und sind daher leicht zu nutzen. Allerdings ist die Leistungsfähigkeit auf die Funktionen dieser Komponenten beschränkt, da die Klassen wenig flexibel sind.[21] 4.3.3 Arten 4.3.3.1 Application Frameworks Diese Art von Frameworks ist überwiegend in der GUI-Entwicklung und bei Datenbanken zu finden. Designs und Codes werden hier zur erneuten Verwendung zur Verfügung gestellt und unterstützen somit die Software-Entwicklung.[21] 4.3.3.2 Domain Frameworks Domain Frameworks sind auf bestimmte Probleme zugeschnitten. Daher steigert es Qualität und verringert den Zeitaufwand der zur Anwendungsprogrammierung benötigt wird. Einsatzgebiete können hier z.B. Banken oder Arlarmsysteme sein.[21] 4.3.3.3 Support Frameworks Support Frameworks sind für spezielle Computerbereiche, wie z.B. Speicherverwaltung oder Dateisysteme gedacht. Sie werden oft in Kombination mit Application Frameworks oder Domain Frameworks verwendet.[21] 4.3.4 Vor- u. Nachteile Vorteile Wiederverwendbarkeit[21] Wiedererkennungswert 4.3.2 Funktionsweise Nachteile Oft mehrere Frameworks erforderlich[21] Frameworks können sich gegenseitig Kontrolle entziehen[21] 10 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Genormte Schnittstellen Erweiterbarkeit[21] Funktionsstörungen möglich[21] Entwicklen sich weiter - Anpassung der Anwengung notwendig[21] Lernkurve[21] Effizienz 4.4 Layoutmanager Layoutmanger sind für die Anordnung und Positionierung visueller Komponenten in der objektorientierten Programmierung zuständig. Das kann beispielsweise ein einfaches Dialogfenster sein. Auch hierbei gibt es ein vordefiniertes Regelwerk, an das sich der Layoutmanager bei der Positionierung der Komponenten orientiert. Vorteil: Zeichensatz und Fenstergröße sind unabhängig.[22] Das absolute Positionieren von Komponenten ist mit erheblichem Aufwand verbunden. Diese Aufgabe übernimmt der Layoutmanager. Der Programmierer muss lediglich qualitative Aufgaben übernehmen. Z.B. muss er nur angeben, dass die Komponenten nebeneinander oder untereinander stehen sollen. Mit Hilfe der Methoden getMinimumSize() und getPreferredSize() werden die Komponentengrößen durch den Layoutmanager generiert. Sie geben die Mindestgröße und die bevorzugte Größe an. Buttons richten sich nach dem beschrifteten Text. Wird dieser länger, erweitert sich z.B. auch automatisch die Buttongröße. Bei Änderung einer Komponentengröße, berücksichtigt der Layoutmanager alle mit ihm in Verbindung stehenden Komponenten. So wird auch hier dem Programmierer die Festlegung von Größen erspart. Die Methoden getMinimumSize() und getPreferredSize() können natürlich vom Entwickler überschrieben werden. [22] Ein Nachteil von Layoutmanagern ist, dass sie nicht zwangsläufig Plattformunabhängig sind. Es kann also passieren, dass die Koordinaten unter Windows nicht mehr dem gewünschten Erscheinungsbild der Komponente auf anderen Betriebssystemen gleichen. Beispielsweise können Texte in Eingabefeldern abgeschnitten sein. [22] Sogar die Änderung der Auflösung kann zu Komplikationen führen. Am häufigstens vorzufinden ist der Layoutmanager in Java.[22] Mögliche Beispiele für Layouts:[22] • BorderLayout • BoxLayout • CardLayout • FlowLayout (Standardmäßig aktiviert) • GridLayout • GridBagLayout • SpringLayout BorderLayout: In einem BorderLayout kann mit 5 Komponenten arbeiten. Nach den Regeln des BorderLayouts werden die Komponenten jeweils links, rechts, oben, unten und zentral angeordnet. Die Richtungen werden bezeichnet als ?West?, ?East?, ?North?, ?South? und ?Center?. Das kann z.B. wie folgt aussehen:[22] Man kann das BorderLayout individuell gestalten. Lässt man beispielsweise North and South leer, so kann sich West und East in voller Höhe erstrecken. Wenn man nachträglich North and South füllt, sind diese in der Breite begrenzt. [22] 4.3.4 Vor- u. Nachteile 11 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Abbildung 2: BorderLayout[2] BoxLayout: Das Boxlayout ähnelt dem GridBagLayout. Die Komponenten orientieren sich an einer vorgegeben Linie. Die Komponenten können folgendermaßen angeordnet werden:[23] - X-Axis: Horizontal, von links nach rechts.[23] - Y-Axis: Vertikal, von oben nach unten.[23] - Line_Axis: Horizontal mit Berücksichtung des ComponentOrientation des Container. Das gibt an, ob die Komponenten von links nach rechts oder von rechts nach links angeordnet werden. Bei einer vertikalen Ausrichtung, wird immer von oben nach unten ausgerichtet.[23] - Page_Axis: Die Komponenten werden in Zeilenform ausgerichtet.[23] Abbildung 3: BoxLayout, horizontal[2] Abbildung 4: BoxLayout, vertikal[2] CardLayout: Bei einem CardLayout kann man es sich wie bei einem Kartenspiel vorstellen. Die Karten sind in diesem Beispiel die Container. Zieht man die erste Karte (Container 1) aus dem Stapel, so erscheint die zweite (Container 2).[24] Mit Hilfe von folgenden Befehlen können alle möglichen Container angesprochen werden:[24] • next(Container) - Zeigt das nächste Element an[24] • previous(Container) - Zeigt das vorherige Element an[24] • first(Container) - Zeigt das erste Element an[24] • last(Container) - Zeigt das letzte Element an[24] • show(Container, String) - Zeigt ein bestimmtes Element direkt an[24] 4.4 Layoutmanager 12 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Abbildung 4: CardLayout[2] FlowLayout: Hier werden die Komponenten nacheinander angeordnet, sowie sie auf dem Panel hinzugefügt worden sind. Ist das Ende des Frames erreicht, so wird ein Zeilenumbruch hinzugefügt und in einer neuen Reihe weiter gemacht.[25] Abbildung 5: FlowLayout[2] GridLayout Das GridLayout arbeitet mit einem Gitternetz mit Zellen gleicher Größe. Anzahl der Spalten und Zeilen des Gitters sind frei wählbar. Die einzelnen Zellen werden komplett mit den Komponenten ausgefüllt. Dies geschieht zeilenweise.[26] Abbildung 6: GridLayout[2] GridBagLayout Dieses Layout basiert auf ein Gitter. Hierbei spielt die Größe der Komponenten keine Rolle. Diese können Gitterzellen übergreifend dargstellt werden. Der Programmierer kann die Gitterzellen beliebig den Größenänderungen des Containers anpassen, sodass beispielsweise Höhenänderungen eines Fensters auch nur Auswirkung auf bestimmte Gitterzellen haben. Spalten und Zeilen können hierbei unterschiedliche Größen haben. [27] Abbildung 7: GridBagLayout[2] SpringLayout Hier werden die die Abstände zwischen den einzelnen Buttons definiert. [28] 4.4 Layoutmanager 13 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Abbildung 8: SpringLayout[2] Das Panel kann nun beliebig gefüllt werden. Z.B. kann der Northbereich wieder in einem FlowLayout belegt werden, welches mit Symbolleisten-Schaltflächen gefüllt ist. Der South-Bereich kann ebenfalls mit Schaltflächen, wie z.B. ?Ok? oder ?Abbrechen? mit Hilfe eines FlowLayouts belegt werden. Im Center-Bereich sollte man einen GridBagLayout verwenden, da hier größtenteils die Eingaben getätigt werden.[22] 5 Werkzeuge zur GUI-Entwicklung 5.1 NetBeans NetBeans bezeichnet eine Plattform für Java-Desktop-Anwendungen, als auch eine integrierte Entwicklungsumgebung (IDE). NetBean begann als ein studentisches Projekt, welches so erfolgreich war, dass kurze Zeit später eine Firma gegründet wurde, welche die Entwicklungsumgebung ?NetBeans IDE? kommerziell verkaufte. 1999 kaufte Sun Microsystems die Firma und veröffentliche ein halbes Jahr später die Entwicklungsumgebung als Open-Source-Projekt.[29] Die NetBeans IDE ist zwar in Java geschrieben, allerdings werden auch andere Programmiersprachen unterstützt, wie z. B. JavaScript, PHP, Python, als auch C und C++. Sprachen die nicht in der Basisversion enthalten sind, können durch Plug-ins auf einfache Weise zusätzlich installiert werden.[30] Alle Funktionen der IDE werden durch Module zur Verfügung gestellt und lassen sich problemlos erweitern. Neue Features, die von NetBeans oder der Community zur Verfügung gestellt werden, können durch das Update-Center auf einfache heruntergeladen werden und können direkt in die Applikation eingefügt werden. Für die Entwicklung mit Java werden alle Module in einem einzigen Download zur Verfügung gestellt. NetBeans ist plattformunabhänig und kann somit mit Windows, Linux,Solaris als auch Mac OS X genutzt werden. Die aktuelle Version ist die 7.0.[31] 5.1.1 Swing Für die Erstellung einer Java-Applikation mit NetBeans wird das GUI-Framework Swing benötigt. Swing ist das primäre Java GUI-Framework. Es ist der Nachfolger des Abstract Window Toolkit (AWT) und wurde entwickelt um komplexere GUI-Komponenten darzustellen. Neben den bekannten Komponenten wie Schaltflächen, Kontrollkästchen und Labels, bietet Swing mehrere erweiterte Elemente wie Tabellen, Listen, Menü-Bäume und Registerkarten. Im Gegensatz zu den AWT-Komponenten sind Swing-Komponenten nicht von Plattform-Spezifischen Code implementiert. Stattdessen sind sie komplett in Java geschrieben und daher plattformunabhängig.[32] 5.1.2 Matisse 5 Werkzeuge zur GUI-Entwicklung 14 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Abbildung 9: GUI-Builder Matisse[2] Zur Erstellung von grafischen Benutzeroberflächen wird der GUI-Builder ?Matisse? zur Verfügung gestellt. Die einzelnen GUI-Komponenten findet man auf mehreren Menü-Leisten und diese lassen sich durch einfaches ziehen auf die Programmieroberfläche positionieren. Der GUI-Builder kümmert sich automatisch um den richtigen Abstand und die Ausrichtung zu den anderen Elementen. Über das Kontextmenü können die Eigenschaften der Elemente wie z. B. Buttons, Textfelder, oder Labels bearbeitet werden. Die Hilfsleiste zeigt direkt an, was mit dem ausgewählten Element durchgeführt werden kann und welche anderen Elemente als Verknüpfung in Frage kommen. Wie die meisten GUI-Builder besitzt Matisse eine WYSIWYG-Ansicht. GUI-Anwendungen müssen somit nicht jedes Mal ausgeführt werden, wenn man eine Änderung vorgenommen hat und sich die Auswirkungen anschauen möchte. 5.2 ECLIPSE Eclipse ist primär eine Java-Entwicklungsumgebung, welche aber auch durch das integrierte Plug-in-System für weitere Sprachen genutzt werden. Die ersten Versionen von Eclipse wurden in einem Projekt von IBM entwickelt. IBM wollte die Anzahl ihrer IDEs reduzieren und eine einzige Entwicklungsumgebung anbieten. Im Jahr 2001 wurde die Eclipse Foundation gegründet und Eclipse als freie Entwicklungsumgebung angeboten. Abbildung 10: Eclipse IDE[2] Die ersten Versionen von Eclipse wurden unter der Common Public License (CPL) veröffentlicht, später jedoch unter der Eclipse Public Licenz (EPL). Diese Lizenz gewährt das Recht zur freien Nutzung, Weiterverbreitung und auch Veränderung der Software. Nach Aussage der ?Free Software Foundation? sind beides freie Lizenzen, allerdings nicht zu vergleichen mit der General Public Lizenz (GPL). Anzumerken sei hier, dass selbst erstellte Plug-ins nicht unter der EPL veröffentlicht werden müssen. Wie auch die NetBeans IDE ist Eclipse in Java geschrieben und unterstützt unter anderem die Programmierung in C, C++, PHP, oder auch Perl. Auch die plattformunabhängigkeit ist wie bei NetBeans gegeben. Neben der klassischen Version von Eclipse, welche das JDT enthält (Java Development Tools), werden weitere Pakete angeboten, die sich in der Zusammenstellung der Komponenten und Plug-ins unterscheiden. Paketname 5.1.2 Matisse Beschreibung 15 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Eclipse IDE for Java Developers Besteht aus den Basis Komponenten zum Entwickeln von Java -Anwendungen Eclipse IDE for Java EE Enthält die Java IDE und zusätzlich Tools für Java EE und Webentwicklung Developers Eclipse IDE for C/C++ Developers Speziell auf die C/C++ Programmierung abgestimmtes Paket Eclipse for PHP Developers Paket für die Entwicklung von Webseiten mit PHP. Pulsar for Mobile Java Developers Stellt Tools für die Erstellung von Applikationen für Handys bereit. Heutzutage gibt es rund um Eclipse eine große Community, welche freie, aber auch zum Teil kommerzielle Plug-ins zur Verfügung stellt. Allgemein hat die Eclipse-Community einen sehr guten Ruf für die Bereitstellung qualitativ hochwertiger Plug-ins. Dies ist vor allem auf das Engagement der Eclipse Foundation zurückzuführen, welche einige Dienstleistungen im Hinblick auf die Entwicklung von Plug-in-Projekten anbietet. Die Installation von Plug-ins ist bei Eclipse sehr benutzerfreundlich gestaltet. Möchte man ein Plug-in online installieren, so gelangt man über den Menüpunkt ?Install New Software? zu einem Formular, bei dem man nur die URL eingeben muss und das Plug-in wird automatisch heruntergeladen und installiert. Falls zusätzlich Features benötigt werden, werden diese ebenfalls mit installiert. Nichts desto trotz kann man die Pakete auch auf manuelle Weise installieren. Die Mitarbeiter der Stiftung helfen bei der Implementierung der Eclipse Development Process. Dieser Prozess unterstützt einen Projekt-Start und gewährleistet, dass alle Eclipse Projekte in einer offenen, transparenten und leistungsorientierten Art und Weise ausgeführt werden. Als Teil dieses Prozesses, organisiert die Stiftung Beiträge für qualifizierte Projekte. Einmal jährlich organisiert die Eclipse Community einen Release Termin, so dass neue und weiterentwickelte Plug-ins gleichzeitig veröffentlicht werden. 5.2.1 SWT Framework In der Eclipse-Plattform implementiert ist das Java-GUI-Framework SWT (Standard Widget Toolkit), welches gleichzeitig mit der Entwicklungsumgebung entwickelt wurde. SWT und Swing sind zwei verschiedene Frameworks, die mit unterschiedlichen Zielen im Hinterkopf entstanden sind. Der Zweck der SWT ist es, eine gemeinsame API für den Zugriff standardisierten UI-Widgets (Fensterelemente) der unterschiedlichen Plattformen anzubieten. Primäre Ziele von SWT sind eine hohe Leistung, ein natives Look & Feel und eine tiefe Plattform-Integration. Swing ist auf der anderen Seite so konzipiert, dass sich Elemente hochgradig anpassen lassen und das über alle Plattformen hinweg. 5.2.2 UI-BUILDER Im Unterschied zu NetBeans enthält die Entwicklungsumgebung von Eclipse keinen integrierten GUI-Builder. Es gibt aber eine Vielzahl an freien GUI-Buildern und welche, die man käuflich erwerben kann. 5.2.3 Visual Editor Einer der meistgenutzten freien GUI-Builder ist der Visual Editor. Dieser unterstützt die GUI-Frameworks SWING, AWT und SWT. Wie die meisten Editoren besteht auch der Visual Editor aus mehreren Fenstern. So werden im oberen Bereich die erstellten GUI-Elemente angezeigt und darunter der entsprechende Code. Je nachdem, welche Version von Eclipse eingesetzt wird, werden die einzelnen Fenster anders angeordnet. Diese kann man aber nach seinen eigenen Bedürfnissen anpassen. Die erforderlichen Bausteine für die Erstellung der Oberfläche findet man in 5.2 ECLIPSE 16 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich einer übersichtlichen Palette auf der rechten Seite. Die Bausteine können per Drag-and-Drop in den oberen Editor platziert werden. Ist der Layoutmanager ausgeschaltet, können die Elemente frei positioniert werden. Ansonsten werden sie automatisch angeordnet. Mit Hilfe der Properties-Sicht können die Eigenschaften der einzelnen Komponenten eingestellt werden und die zugehörigen Ereignisse werden in dem Bereich der Komponentenansicht Java-Beans angezeigt. Wählt man ein Element der Komponentenansicht aus, springt die Einfügemarke zum entsprechenden Programmcode. 5.2.4 Jigloo Jigloo ist ein GUI-Builder der Firma Cloudgarden. Dieser kann auf sehr einfache Weise als Plugi-in installiert werden, da er nur sehr wenig Speicherplatz benötigt. Bei Jigloo wird bei der Installation die Online-Hilfe direkt mitinstalliert. Für den nichtkommerziellen Einsatz ist Jigloo kostenlos und ohne Funktionseinschränkungen verwendbar, für eine kommerzielle Nutzung muss man ihn käuflich erwerben. Jigloo besitzt keinen Layout-Assistenten, wodurch sich das Erstellen von komplexen Layouts etwas schwierig ereignet, da alle Komponenteneigenschaften manuell eingestellt werden müssen. Abbildung 11: GUI-Builder Jigloo[2] 5.2.5 Matisse4MyEclipse Matisse4MyEclipse ist ein kommerzieller GUI-Builder der Firma Genuitec, für die Entwicklungsumgebung MyEclipse. Wie der Name schon erahnen lässt, ist der GUI-Builder an den bereits erwähnten GUI-Builder Matisse von NetBeans angelehnt. Er enthält unter anderem einen Formular-Designer mit einem Source-Modus und eine erweiterbaren Palette von SWING und AWT-Steuerelementen. Der Formular-Editor bietet erweiterte Hilfslinien und ein Design-Tool zur schnellen Entwicklung von Benutzeroberflächen. Matisse4MyEclipse hat gegenüber anderen GUI-Buildern allerdings einen großen Nachteil, da er ausschließlich nur mit der IDE MyEclipse verwendet werden kann, arbeitet er nur mit dem Framework Swing und muss käuflich erworben werden. 5.2.6 Übersicht der GUI-Builer für Eclipse GUI-Builder Hersteller Webseite 5.2.3 Visual Editor Visual Editor Eclipse Foundation eclipse.org Jigloo Cloudgarden cloudgarden.com Matisse4MyEclipse Genuitec genuitec.com 17 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Version Downloadgröße Betriebssystem SWT Swing / AWT Preis kommerziell / 1.5 418 MB Linux, Mac OS X, Solaris, Windows Ja Ja kostenlos/ kostenlos 4.6.4 14 MB Linux, Mac OS X, Solaris, Windows Ja Ja kostenlos / 85 Dollar 6.0 Linux, Windows Nein Ja Inklusive IDE MyEclipse 63 ? 158 Dollar nicht kommerziell Alle drei GUI-Builder bieten eine ergonomische Oberfläche und erzeugen einen übersichtlichen Code. Matisse4MyEclipse kann nur in Verbindung mit der Entwicklungsumgebung MyEclipse verwendet werden, weshalb viele auf die kostenlosen GUI-Builder zurückgreifen. Der Vorteil von Visual Editor ist, das er Open-Source ist und durch die Eclipse Community stetig weiterentwickelt wird. Im Gegegensatz zum Visual Editor ist das Installationspaket von Jigloo nur wenige MB groß, was aber keine Auswirkungen auf den Funktionsumfang des Buildes hat. 5.3 Qt Qt alleine bezeichnet eine C++ Klassenbibliothek, welche häufig für die Entwicklung von Anwendungen mit einer grafischen Benutzeroberfläche verwendet wird. Ein zusätzliches Einsatzgebiet ist die Entwicklung von Kommandozeilen-Tools und Serverkonsolen. Die integrierte Entwicklungsumgebung nennt sich Qt Creator. Ins Leben gerufen wurde Qt von der Firma Trolltech. Diese wurde von Nokia aufgekauft und seitdem wird es von der Tochterfirma Qt Development Frameworks Devision weiterentwickelt.[33] Abbildung 12: Qt[34] Am meisten wird bei Qt die Programmiersprache C++ verwendet. Allerdings muss dies nicht zwingend so sein. Durch die zusätzliche Installation von Sprachpaketen, welche von der Entwicklerhomepage heruntergeladen werden können, kann man auch mit anderen Programmiersprachen grafische Benutzeroberflächen erstellen. Z. B. kann man mit dem Paket Qt Jambi auch in Java programmieren. Weitere Sprachen wie Ada, PHP, Perl, Python, oder Ruby werden ebenfalls unterstützt. Qt ist plattformübergreifend und kann mit dem Windows Betriebssystem verwendet werden, aber auch mit Mac OS X, Symbion OS, Unix, Linux und weiteren Systemen. 5.2.6 Übersicht der GUI-Builer für Eclipse 18 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Der Quellcode steht unter verschiedenen Open Source Lizenzen zur Verfügung, wie z. B. der General Public License (GPL) und kann somit frei benutzt werden. Seit der Qt-Version 4.5 wird neben der kommerziellen Lizenz und auch eine LGPL-Variante (Lesser General Public License) angeboten.[35] Qt Creator Der Qt Creator verfügt über zwei integrierte GUI-Builder, den Qt Designer und den Qt Quick Designer. Mit dem Qt Designer lassen sich grafische Benutzeroberflächen entwerfen und erstellen. Dialoge oder Widgets können mit wenigen klicks in unterschiedlichen Stilen und Auflösungen getestet werden. Abbildung 13: Qt Designer[2] Mit dem Qt-Designer ist es nicht nur möglich die Oberfläche zu erstellen, sondern auch den einzelnen Elementen direkt Variablen und Werte zu zuordnen. Zusätzlich können die einzelnen GUI-Elemente miteinander verknüpft werden. "Die Oberflächenbeschreibung wird dabei in einer XML-Datei gespeichert und ist somit auch für den Menschen lesbar und auch bedingt ohne den Qt-Designer veränderbar. Der Quellcode, der zu der Oberfläche gehört, wird automatisch während des Build-Vorgangs erzeugt."[36] Sollte man bei der Erstellung der GUI auf Probleme stoßen, kann man getrost auf die sehr ausführliche und umfangreiche Dokumentation zurückgreifen. Der Qt Quick Designer ermöglicht die einfache Entwicklung von Animationen durch eine Programmiersprache namens QML. 5.4 Microsoft Visual Studio Microsoft Visual Studio ist eine integrierte Entwicklungsumgebung, welche nur auf dem Windows-Beriebssystem zum Einsatz kommt. Die Microsoft Corporation veröffentlichte 1995 die erste Version von Visual Studio. Seitdem sind 7 weitere Versionen hinzugekommen. In Visual Studio 2010 - der aktuellsten Version von Visual Studio - werden die Programmiersprachen C, C++, C#, VB und F# unterstützt. Für Programmiersprachen wie z. B. Ruby oder Python, müssen zusätzliche Sprachpakete installiert werden. Microsoft bietet verschiedene Versionen der Entwicklungsumgebung an Visual Studio Express Visual Studio LightSwitch Visual Studio Professional 5.3 Qt Microsoft bietet mit den so genannten Express Editions abgespeckte Versionen von Visual Studio an, die jeweils nur eine Programmiersprache beinhalten. * Visual Basic Express * Visual C++ Express * Visual C# Express * Visual Web Developer Express * Express for Windows Phone Microsoft Visual Studio LightSwitch ist eine IDE speziell für die Erstellung von Line-of-Business-Anwendungen. Sie kann als Stand-alone Version und als Add-in für höhere Versionen installiert werden. Die Professional-Version bietet eine Entwicklungsumgebung für alle unterstützten Programmiersprachen. Sie umfasst unter anderem Werkzeuge für die Entwicklung von Anwendungen für Windows Phone 7 19 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Visual Studio Premium Visual Studio Ultimate Visual Studio Premium Edition enthält alle Tools von Visual Studio Professional und bietet zusätzliche Funktionen, wie Profiling, Statische Code-Analyse und Datenbank-Unit-Tests. Die Ulimate-Edition ist die umfangreichste IDE von Visual Studio und ist hauptsächlich für Softwareentwicklungsteams gedacht. So enthält sie eine größere und erweiterte Bericht- und Projektmanagementfunktionen als die Professional-Edition. 5.4.1 .Net Framework Um mit Visual Studio arbeiten zu können, wird das .Net Framework 4.0 benötigt. ?Das .NET Framework bietet über 8000 Objekte (Klassen) mit wiederverwendbaren Funktionen für z. B. performante Grafik- und Fensterdarstellung, Website-Entwicklung und Datenzugriff. Microsoft .NET ist auf vielen Geräten und Plattformen verfügbar und unterstützt über 30 Programmiersprachen wie z. B. Visual Basic.NET. Microsoft setzt .NET selbst für die Entwicklung seiner Produkte ein - so ist z. B. Microsoft Sharepoint mit .NET entwickelt worden.? GRAFIKFRAMEWORK WPF Für die Entwicklung von GUI-Elementen ist in dem .Net Framework (ab Version 3.5) das Grafikframework Windows Presentation Foundation (WPF) integriert. Vor WPF konnten grafische Benutzeroberflächen nur mit Hilfe von Windows Forms entwickelt werden. Zur Gestaltung von Formularen stehen bei Windows Forms allgemeine Steuerelemente zur Verfügung, wie z. B. Buttons oder Text-Boxen. Diese beruhen auf Klassen und werden in die entwickelten Methoden implementiert. Die Formulare werden somit über den reinen Programmcode definiert. WPF-Anwendungen bestehen unter anderem auch aus Steuerelemente, diese werden aber über ein XAML-Dokument (Extensible Application Markup Language) definiert. Microsoft entwickelte dafür die Beschreibungssprache XAML, welche auf XML (Extensible Markup Language) basiert. Durch die zusätzlich erstellten XAML-Dateien lassen sich Formulare unabhängig von der Programmlogik designen. Bei der Erstellung eines einfachen RadioButtons wird folgender XALM-Code ausgegeben: * * * * * * * * * <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <RadioButton Content="RadioButton" Height="16" HorizontalAlignment="Left" Margin="161,140,0,0" Name="RadioButton1" VerticalAlignment="Top" /> </Grid> </Window> 5.4.2 IDE und GUI-Designer Die Benutzeroberfläche der Entwicklungsumgebung bietet eine große Anzahl an Fenstern für die Entwicklung von GUIs an, wodurch man schnell den Überblick verlieren kann. Aber auch bei dieser IDE kann man die Fenster auf seine eigenen Bedürfnisse zuschneiden und mit Hilfe der Registerkarten lassen sie sich leicht verwalten. 5.4 Microsoft Visual Studio 20 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Abbildung 14: WPF-Designer[2] Ein Standard-Fenster ist der Projektmappen-Explorer, mit dessen Hilfe man einen Überblick über alle verwendeten Dateien behält. Für die Bearbeitung der Steuerelemente für die GUI-Entwicklung steht das Eigenschaftsfenster bereit. Beim Kompilieren des Programmcodes werden in der Fehlerliste nicht nur die einzelnen Fehler angezeigt, sondern auch Warnungen, zusätzliche Informationen und Hinweise. Beim Kompilieren werden normalerweise die meisten Fehler angezeigt. Allerdings wird der XALM-Code erst in der Laufzeit ausgeführt, wodurch Fehler bei der GUI-Programmierung erst beim Debuggen erkannt werden. Mit dem Windows Presentation Foundation-Designer (WPF-Designer) kann man WPF-Anwendungen und benutzerdefinierte Steuerelemente in der IDE erstellen. Die Bearbeitung der GUI-Elemente kann man direkt in dem Fenster mit dem XALM-Code vornehmen, oder in dem Fenster mit der grafischen Oberfläche. Wie bei den meisten GUI-Builder, lassen sich die Steuerelemente per Drag and Drop aus der Toolbox in das Fenster ziehen und anschließend bearbeiten. Entwickler Webseite Aktuelle Version Betriebssystem Programmiersprache (hauptsächlich) Weitere unterstützte Programmiersprachen NetBeans Oracle Corporation netbeans.org 7.0 Eclipse Eclipse Foundation eclipse.org 3.7 Linux, Mac OS X, plattformunabhängig Solaris, Windows Qt Nokia, Qt community qt.nokia.com 4.7.3 Linux, Mac OS X, Symbian, Windows Visual Studio Microsoft microsoft.com 2010 Java Java C++ C, C++, C#, VB, F# Ja Ja Ja Ja Windows Eclipse Public GNU GPL, GNU Nicht Frei License LGPL Integrierter GUI-Builder Matisse Qt Designer WPF-Designer Ein großer Vorteil von Eclipse ist die große Community, wodurch eine Vielzahl von Plug-ins zur Verfügung gestellt und ständig weiterentwickelt werden. Auch die einfache Installation von Plug-ins kann sich sehen lassen. Bevor man mit der GUI-Programmierung beginnen kann, muss man sich für einen GUI-Builder entscheiden, da in Eclipse keine eigener integriert ist. Für Anfänger ist dies kein leichter Schritt, da mehrere GUI-Builder zur Auswahl stehen und diese nicht unbedingt jedes Framework unterstützen. NetBeans ermöglicht es, direkt mit der Programmierung von grafischen Benutzeroberflächen zu beginnen, da mit der Entwicklungsumgebung auch Matisse installiert wird. Qt liefert mit dem Qt Designer ebenfalls einen integrierten GUI-Builder. Die sehr ausführliche Dokumentation von Qt bietet eine gute Hilfe bei der Arbeit mit den verschiedenen GUI-Komponenten. Bei der Programmierung mit Visual Studio muss sich der Anwender als erstes für eine passende Version der Entwicklungsumgebung entscheiden. Anfänger oder Entwickler die gelegentlich Programmieren, können auf die kostenlose Express Edition zurückgreifen. Für eine professionelle GUI-Programmierung sollte man sich aber für die Professional-Edition, oder eine höhere Edition entscheiden. Lizenz CDDL or GPL2 5.4.2 IDE und GUI-Designer 21 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich Diese sind zwar kostenpflichtig, aber die enthaltenden Features vereinfachen auf längere Zeit gesehen die Arbeit. Mit dem WPF-Designer erhält man ein umfangreiches Werkzeug, in dem auch neuere Steuerelemente enthalten sind. Ein Nachteil von Visual Studio ist, dass die Entwicklungsumgebung nur auf dem Windows-Betriebssystem lauffähig ist. Was die hier aufgeführten Entwicklungsumgebungen gemeinsam haben, ist die zusätzliche Unterstützung für weitere Programmiersprachen. Bei der Erstellung von Anwendungen mit unterschiedlichen Sprachen, muss nicht zwingend eine andere Entwicklungsumgebung verwendet werden, sondern es können zusätzliche Pakete installiert und die Arbeit in der gewohnten Umgebung fortgesetzt werden. 6 Ausblick Grundsätzlich ist zu sagen, dass sich die Entwicklung neuer GUIs immer mehr von der textbasierten Programmierung entfernt und die Modellierung von Benutzeroberflächen immer weiter in den Vordergrund gerät. Durch die steigende Anzahl von Endgeräten gewinnt die Kompatibilität mit diversen Plattformen immer mehr an Wichtigkeit. 7 Abbildungsverzeichnis Abb.-Nr. 1 2 3 4 5 6 7 8 8 9 10 11 12 13 14 Abbildung GUI BorderLayout BoxLayout, horizontal BoxLayout, vertikal Cardlayout FlowLayout GridLayout GridBagLayout SpringLayout GUI-Builder Matisse Eclipse IDE GUI-Builder Jigloo Qt Qt Designer WPF-Designer 8 Tabellenverzeichnis Tabelle Nr. 1 2 3 4 5 6 Ausblick Quelle Vor- u. Nachteile von Frameworks Eclipse-Pakete Übersicht der GUI-Builer für Eclipse Visual Studio Editions Übersicht der Entwicklungsumgebungen 22 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich 9 Fußnoten 1. ? Vgl. Weblink: http://www.bullhost.de/b/benutzeroberflaeche.html 2. ? 2,00 2,01 2,02 2,03 2,04 2,05 2,06 2,07 2,08 2,09 2,10 2,11 2,12 2,13 Selbst erstellte Abbildung 3. ? Vgl. Weblink: http://derstandard.at/866936/Die-Geschichte-des-User-Interfaces 4. ? 4,0 4,1 4,2 4,3 4,4 4,5 4,6 4,7 Weblink: http://www.interactive-quality.de/site/DE/int/pdf/ISO_9241-10.pdf 5. ? 5,0 5,1 5,2 5,3 5,4 5,5 5,6 Vgl. Weblink: http://www.interactive-quality.de/site/DE/int/pdf/ISO_9241-10.pdf 6. ? Vgl. Weblink: http://de.mimi.hu/infotech/button.html 7. ? Vgl. Weblink: http://szenesprachenwiki.de/definition/toolbar/ 8. ? Vgl. Weblink: http://woerterbuch.babylon.com/textfeld/ 9. ? Vgl. Weblink: http://szenesprachenwiki.de/definition/checkbox/ 10. ? Vgl. Weblink: http://www.akademie.de/gestalten/html-und-css/kurse/html-lernen-formulare-einbinden/radiobuttons/radiobuttons. 11. ? Vgl. Weblink: http://www.at-mix.de/listenfeld.htm 12. ? Vgl. Weblink: http://www.bullhost.de/d/dialogbox.html 13. ? Vgl. Weblink: http://www.bullhost.de/i/icon.html 14. ? 14,0 14,1 14,2 14,3 14,4 14,5 Vgl. Weblink: http://www.weiterbildung-programmierer.de/programmiersprachen/entwicklung.php 15. ? 15,0 15,1 15,2 Vgl. Weblink: http://www.weiterbildung-programmierer.de/programmiersprachen/entwicklung.php 16. ? 16,00 16,01 16,02 16,03 16,04 16,05 16,06 16,07 16,08 16,09 16,10 16,11 16,12 16,13 16,14 Vgl. Weblink: http://www.weiterbildung-programmierer.de/programmieren/integrierte-entwicklungsumgebung.php 17. ? Weblink: http://www.weiterbildung-programmierer.de/programmieren/integrierte-entwicklungsumgebung.php 18. ? Vgl. Weblink: http://wiki.computerwoche.de/doku.php/programmierung/gui-builder_fuer_eclipse 19. ? Vgl. Weblink: http://www.itwissen.info/definition/lexikon/Framework-framework.html 20. ? 20,0 20,1 Vgl. Weblink: http://www.madeyourweb.com/webentwicklung/was-sind-frameworks.html 21. ? 21,00 21,01 21,02 21,03 21,04 21,05 21,06 21,07 21,08 21,09 21,10 21,11 Vgl. Weblink: http://www-gs.informatik.tu-cottbus.de/projektstudium/vortraege/Frameworks.pdf 22. ? 22,0 22,1 22,2 22,3 22,4 22,5 22,6 22,7 Vgl. Weblink: http://www.dpunkt.de/java/Programmieren_mit_Java/Oberflaechenprogrammierung/72.html 23. ? 23,0 23,1 23,2 23,3 23,4 Vgl. Weblink: http://www.dpunkt.de/java/Programmieren_mit_Java/Oberflaechenprogrammierung/84.html 24. ? 24,0 24,1 24,2 24,3 24,4 24,5 24,6 Vgl. Weblink: http://www0.fh-trier.de/~rudolph/gdv/cg/node14.html 25. ? Vgl. Weblink: http://www.dpunkt.de/java/Programmieren_mit_Java/Oberflaechenprogrammierung/74.html 26. ? Vgl. Weblink: http://www.teialehrbuch.de/Kostenlose-Kurse/JAVA/6705-GridLayout.html 27. ? Vgl. Weblink: http://www.dpunkt.de/java/Programmieren_mit_Java/Oberflaechenprogrammierung/82.html 28. ? Vgl. Weblink: http://www.dpunkt.de/java/Programmieren_mit_Java/Oberflaechenprogrammierung/85.html 29. ? Vgl. Weblink: http://netbeans.org/about/history.html 30. ? Vgl. Weblink: http://netbeans.org/features/index.html 31. ? Vgl. Weblink: http://netbeans.org/downloads/index.html 32. ? Vgl. Krüger (2008), Seite 529 ff. 33. ? Vgl. Weblink: http://www.heise.de/newsticker/meldung/Nokia-kauft-Qt-Entwickler-Trolltech-183652.html 34. ? Vgl. Weblink: http://qt.nokia.com 35. ? Vgl. Weblink: http://qt.nokia.com/about/licensing 36. ? Weblink: http://wiki.ubuntuusers.de/Qt 9 Fußnoten 23 Werkzeuge_zur_GUI-Entwicklung_im_Vergleich 10 Literatur- und Quellenverzeichnis 10 Literatur- und Quellenverzeichnis 24
