Praktikum Internet-Werkzeuge
			Aufgaben  Dokus  Links

Aufgabe 11: Java AWT und Swing

In der letzten Woche haben wir den Chat funktionsfähig gemacht, indem wir die Anbindung an den Server implementiert haben. Das GUI war für die letzte Aufgabe noch sehr einfach gehalten und soll in dieser Woche erweitert werden, um die Bedienbarkeit zu verbessern.

Zum einen soll eine Liste der gerade im Chat befindlichen User angezeigt werden, damit man einen besseren Überblick über das Chatgeschehen erhält. Zum anderen sollen Buttons für die vom Server bereitgestellten Kommandos eingebunden werden. Eine Liste verfügbarer Kommandes erhaltet Ihr, wenn Ihr im Chat "/help" eingebt. Die Kommandos sollen jeweils nur auf diejenigen Benutzer angewendet werden, die in der Liste ausgewählt worden sind.

Wie sollen wir das machen?

Layout Damit Ihr genau wisst, wie Ihr Euer GUI realisieren wollt, solltet Ihr das Layout zunächst auf Papier entwerfen. Überlegt Euch, wie Ihr die einzelnen Teile (Textbereich, Eingabezeile, Benutzerliste, Kommandos) anordnen wollt und durch welche Komponenten sie realisiert werden sollen. Textbereich und Eingabezeile sind bereits im GUI für die letzte Aufgabe, durch JTextArea bzw. JTextField, realisiert. Passt zunächst den Konstruktor des ChatJFrame aus der letzten Woche an Euren Layout-Entwurf an. Um zu entscheiden, welche Behälter-Struktur und welche LayoutManager Ihr verwenden müsst, überlegt auch, welche Komponenten sich der Fenstergröße anpassen sollen und welche eine feste Größe haben.

Benutzerliste Der Server sendet Update-Informationen zum Client, die dafür verwendet werden sollen, das GUI immer auf dem neuesten Stand zu halten. Diese Clientkommandos sind (#users user1,user2,...,userN), welches die aktuellen User des Chats mitteilt und für die Aktualisierung der Benutzerliste verwendet werden soll, und (#nick user), was in einer Änderung der Titelzeile des Fensters resultieren soll. Die Verarbeitung der Nachrichten vom Server ist bereits implementiert, Ihr braucht nur noch die setUsers() Methode des ChatJFrame so anzupassen, dass Eure Benutzerliste aktualisiert wird. Um die Benutzerliste darzustellen, könnt Ihr z.B. die JList verwenden. Erzeugt dazu eine Instanz der Klasse DefaultListModel, der Ihr die Benutzer hinzufügt bzw. aus der Ihr sie wieder entfernt. Alternativ zur JList könntet Ihr auch die ansprechendere JTable (in Verbindung mit dem DefaultTableModel) verwenden.

Kommandos Da sich die Kommandos auf die in der Liste ausgewählten Benutzer beziehen, sollten die Komponenten für die Kommandos in der Nähe (also z.B. unter oder neben) der Benutzerliste angezeigt werden. Am einfachsten ist es, für jedes Kommando einen JButton zu erzeugen. Nur wenig anspruchsvoller ist es, eine JToolBar zu verwenden. Wenn ein Kommando ausgelöst wird, ermittelt Ihr die ausgewählten Benutzer und sendet ein entsprechendes Kommando an den Server. Dazu sollt Ihr natürlich die send()-Methode Eures ChatClients von letzter Woche verwenden.

Bonusaufgaben

Tooltips (1 Punkt) Tooltips sind kleine Hilfefenster (Popups), die eine Kurzbeschreibung für eine einzelne Komponente anzeigen, wenn der Mauszeiger über der Komponente verweilt. Obwohl vom Ansatz ganz einfach, sind Tooltips ein mächtiges Werkzeug, um selbsterklärende Programme zu realisieren. Verseht alle für den Benutzer relevanten Komponenten mit einem Tooltip, der eine kurze Erklärung enthält.

Borders (1 Punkt) Damit der Chat nicht nur funktioniert, sondern auch ansprechend aussieht, kann man den Layout-Eindruck durch Rahmen verbessern. Rahmen können auf beliebigen Komponenten gesetzt werden, besonders bieten sich dazu die Behälter an, die sowieso schon zur Gruppierung verwendet werden. Verbessert das Aussehen Eures GUI, indem Ihr passende Rahmen verwendet.

Icons (1 Punkt) Um Benutzern auch grafisch etwas zu bieten, kann man Kompononten mit Icons versehen. Icons sind Bilder, die geladen und in einer Komponente dargestellt werden. Überlegt Euch passende Bilder, z.B. für die Kommandos, und baut sie als Icons in das GUI ein.

Tipps

Um Euch den Einstieg in die GUI-Programmierung etwas zu vereinfachen, haben wir eine praktische Einführung zusammengestellt.

Um für die Bonusaufgabe geeignete Bilder zu finden, probiert mal die Google Bildersuche. Um Bilder nachzubearbeiten (z.B. verkleinern oder zuschneiden), ist auf den Uni-Rechnern das Programm "xv" installiert.

Viel Spaß