Programmieren mit Harald R. Haberstroh (original) (raw)

Mittwoch, 19. November 2014

Java Grafik/GUI (POS1: 3BHIF)

Einfache Grafik

Schreiben Sie eine Klasse PaintQuadrats, welche in einem Fenster (JFrame) eine Reihe von Quadraten zeichnet, die fortlaufend nummeriert sind:

Verwenden Sie eine Liste (ArrayList oder ein Feld) von Knoten (Node), die "sich zeichnen" (paint(Graphics g)) können. In der Methode paintComponents(Graphics g) des JPanels müssen dann für alle Knoten deren paint()-Methode aufgerufen werden.

Experimente mit Swing-Komponenten

Alle Steuerelemente von Swing (javax.swing.*) und AWT können auch als sogenannte Java Beans verwendet werden und damit auch dynamisch geladen werden. Eine JavaBean besitzt immer einen Standardkonstruktor. Dies ermöglicht eine standardisierte Instanzierung (vgl. Java Beans).

Im public/3bhif/java-gui-experiments/.hg finden Sie ein Mercurial Repository, welches ein Eclipse-Projekt mit den nötigen Klassen für die folgenden Beispiele enthält. Sie können in der Schule das Repository einfach klonen:

$ hg clone /home/teachers/hp/public/3bhif/java-gui-experiments Zielverzeichnis: java-gui-experiments Aktualisiere auf Zweig default 25 Dateien aktualisiert, 0 Dateien zusammengeführt, 0 Dateien entfernt, 0 Dateien ungelöst $

Damit wird im aktuellen Verzeichnis ein Projektverzeichnis java-gui-experiments erzeugt.
Das Projekt wird eventuell um neue Klassen ergänzt. Sie können sich die Änderungen holen:

$ cd java-gui-experiments $ hg pull /home/teachers/hp/public/3bhif/java-gui-experiments Hole von /home/teachers/hp/public/3bhif/java-gui-experiments Suche nach Änderungen Keine Änderungen gefunden $

Sollten Sie nicht auf einem Schul-PC das Repository klonen wollen, dann müssen Sie das Verzeichnis erst "mounten" und dann klonen:

$ mkdir ~/edvossh $ sshfs user@edvossh.htlwrn.ac.at:/home/teachers/hp/public/3bhif ~/edvossh $ hg clone ~/edvossh/java-gui-experiments Zielverzeichnis: java-gui-experiments Aktualisiere auf Zweig default 25 Dateien aktualisiert, 0 Dateien zusammengeführt, 0 Dateien entfernt, 0 Dateien ungelöst $

**user** ist natürlich mit Ihrem Usernamen in der Schule zu ersetzen. Die Eingabe des Passworts ist in obigen Beispielen nicht angezeigt,
Neue Versionen bekommen Sie sinngemäß mit hg pull ins lokale Repository.
Zurück zu den Steuerelementen/JavaBeans.
Im Projekt java-gui-experiments/bin können Sie Klassen nun aufrufen. Ein Beispiel zum Demonstrieren eines JButtons mit der Beschriftung "Hello World!" in einer 48 Punkt Schriftart:

$ cd java-gui-experiments/bin/ $ java je3.gui.ShowBean javax.swing.JButton 'text=Hello World!' font=helvetica-bold-48

Das sieht etwa folgendermaßen aus:

Sie können auch mehrere Steuerelemente auf der Kommandozeile angeben. Z.B.:

$ cd java-gui-experiments/bin/ $ java je3.gui.ShowBean javax.swing.JButton 'text=Hello World!' font=helvetica-bold-48
javax.swing.JRadioButton 'text=pick me'
java.awt.Button label=Hello javax.swing.JSlider

Experimentieren Sie mit weiteren Steuerelementen (Lesson: Getting Started with Swing).

Experimentieren Sie mit folgender Klasse. Sie zeigt die Verschachtelung verschiedener Container:

package je3.gui; import javax.swing.; import java.awt.;

/**

*/ public class Containers extends JPanel { public Containers( ) { this.setBackground(Color.white); // This component is white this.setFont(new Font("Dialog", Font.BOLD, 24));

    JPanel p1 = new JPanel( );
    p1.setBackground(new Color(200, 200, 200)); // Panel1 is darker
    this.add(p1);                // p1 is contained by this component
    p1.add(new JButton("#1"));   // Button 1 is contained in p1
    
    JPanel p2 = new JPanel( );
    p2.setBackground(new Color(150, 150, 150)); // p2 is darker than p2
    p1.add(p2);                  // p2 is contained in p1
    p2.add(new JButton("#2"));   // Button 2 is contained in p2
    
    JPanel p3 = new JPanel( );
    p3.setBackground(new Color(100, 100, 100)); // p3 is darker than p2
    p2.add(p3);                  // p3 is contained in p2
    p3.add(new JButton("#3"));   // Button 3 is contained in p3
    
    JPanel p4 = new JPanel( );
    p4.setBackground(new Color(150, 150, 150)); // p4 is darker than p1
    p1.add(p4);                  // p4 is contained in p1
    p4.add(new JButton("#4"));   // Button4 is contained in p4
    p4.add(new JButton("#5"));   // Button5 is also contained in p4
    
    this.add(new JButton("#6")); // Button6 is contained in this component
}

}

Starten/verwenden kann man diese Klasse mit:

$ cd java-gui-experiments/bin/ $ java je3.gui.ShowBean je3.gui.Containers

Im package je3.gui finden Sie ein paar Klassen *Layout*, welche die verschiedenen Layoutmanager demonstrieren. Dokumentation finden Sie hier: Lesson: Laying Out Components Within a Container

Ein Beispiel für das GroupLayout finden Sie in layout.Find, welches etwa so aussieht:

Verwenden Sie diese Beispiele als Basis für eigene Projekte!

Labels: Aufgabe, GUI, Java, POS1-3, User Interface

Donnerstag, 23. Mai 2013

Graph Algorithms (POS1:3BHIF)

Erstellen Sie ein Java-Programm zum Zeichnen von gerichteten Graphen. Das folgende Bild zeigt ein mögliches User-Interface.

Anforderungen

Die Nummerierung dient nur, um auf die einzelnen Anforderungen zu referenzieren.

  1. Anlegen von Knoten - Knoten sollen durch einfachen Klick auf die leere Zeichenfläche angelegt werden. Die Beschriftung soll automatisch erfolgen (A, B, C, ...). Die Knoten dürfen sich nicht überlappen.
  2. Anlegen von gerichteten Kanten - durch Ziehen mit der rechten Maustaste soll eine Kante von einem Knoten zu einem anderen Knoten gezeichnet werden können (gerade Linie mit Pfeilspitze). Alternativ kann die linke Maustaste mit gedrückter Strg-Taste verwendet werden.
  3. Die Gewichtung einer Kante soll eingegeben werden können.
  4. Die Gewichtung einer Kante soll geändert werden können.
  5. Knoten sollen durch ziehen verschoben werden können (linke Maustaste), die Kanten von/zu diesem Knoten müssen entsprechend neu gezeichnet werden können. Die Knoten dürfen sich nicht überlappen!
  6. Knoten sollen (de-)selektiert/markiert werden können (Mausklick). Markierung/Selektion soll umgeschaltet werden (toggle).
  7. Kanten sollen (de-)selektiert/markiert werden können (Mausklick). Markierung/Selektion soll umgeschaltet werden (toggle).
  8. Markierte Elemente sollen gelöscht werden können (Menüpunkt, Shortcut Entf).
  9. Ein Graph soll in einer Datei gespeichert werden können.
  10. Ein Graph soll aus einer Datei geladen werden können.
  11. Die Zeichenfläche soll gelöscht werden können.
  12. Im Hilfemenü soll eine Infobox mit Ihrem Namen, der Klasse und dem Erstellungsjahr aufgerufen werden können.
  13. Optional: Eine Hilfe zur Bedienung (Dialogfenster mit HTML-Text).
  14. Optional: Die Sprache soll geändert werden können (Englisch, Deutsch, weitere mit Sprachdateien). Standard ist die Systemeinstellung.
  15. Scrollbars sollen eingeblendet werden, wenn das Fenster kleiner als die benötigte Zeichenfläche ist.
  16. Ein Graph soll gedruckt werden können. Gegebenenfalls auf eine Seite skalieren.
  17. Simulation der Tiefensuche - Ist ein Knoten markiert, so soll die Tiefensuche beginnend nur mit diesem Knoten durchgeführt werden und die einzelnen Schritte dargestellt werden (weiß/grau/schwarz). Ist kein Knoten markiert, so soll der Algorithmus auf alle Knoten angewendet werden.
    Verwenden Sie dazu einen Thread.
  18. Simulation der Breitensuche - Ist ein Knoten markiert, so soll die Breitensuche beginnend nur mit diesem Knoten durchgeführt werden und die einzelnen Schritte dargestellt werden (weiß/grau/schwarz). Ist kein Knoten markiert, so soll der Algorithmus auf alle Knoten angewendet werden.
    Verwenden Sie dazu einen Thread.
  19. Optional: Die Simulation(en) sollen abgebrochen werden können.
  20. Optional: Es soll eine undo/redo-Funktionalität implementiert werden (Command Pattern).
  21. Das Programm soll als "ausführbare" Jar-Datei geliefert werden, d.h. alle nötigen Klassen, Bibliotheken, Grafiken und Konfigurationsdateien (Sprachdateien) sollen sich in dem Jar-Archiv befinden. Aufruf soll nur über java -jar graph.jar möglich sein (meist kann man die graphische Oberfläche so einstellen, dass ein Klick auf die Datei genügt).

Literatur

Labels: algorithmen, Aufgabe, GUI, Java, POS1-3, User Interface

# Eingestellt von Harald R. Haberstroh @ 10:45 0 Kommentare

Mittwoch, 20. Februar 2013

JTable (POS1: 3BHIF)

Erstellen Sie ein Java-Programm, welches einfache CSV-Dateien erzeugen, darstellen und ändern kann. Verwenden Sie zur Darstellung der CSV-Datei eine JTable. Beim Neuanlegen wird die Anzahl der Spalten festgelegt. Beim Laden einer CSV-Datei wird die Anzahl der Zeilen/Spalten durch die Datei gegeben. Das Programm soll es ermöglichen, jede Zelle (definiert durch Zeile und Spalte) zu ändern. Sehen Sie eine Möglichkeit zum Einfügen neuer Zeilen vor. Eine markierte Zeile soll gelöscht werden können.

Labels: Aufgabe, GUI, Java, POS1-3, User Interface

# Eingestellt von Harald R. Haberstroh @ 20:24 0 Kommentare

Mittwoch, 9. Januar 2013

Java Grafik/GUI (POS1: 3BHIF)

Einfache Grafik

Schreiben Sie eine Klasse PaintQuadrats, welche in einem Fenster (JFrame) eine Reihe von Quadraten zeichnet, die fortlaufend nummeriert sind:

Verwenden Sie eine Liste (ArrayList oder ein Feld) von Knoten (Node), die "sich zeichnen" (paint(Graphics g)) können. In der Methode paintComponents(Graphics g) des JPanels müssen dann für alle Knoten deren paint()-Methode aufgerufen werden.

Experimente mit Swing-Komponenten

Alle Steuerelemente von Swing (javax.swing.*) und AWT können auch als sogenannte Java Beans verwendet werden und damit auch dynamisch geladen werden. Eine JavaBean besitzt immer einen Standardkonstruktor. Dies ermöglicht eine standardisierte Instanzierung (vgl. Java Beans).

Im public/3bhif/java-gui-experiments/.hg finden Sie ein Mercurial Repository, welches ein Eclipse-Projekt mit den nötigen Klassen für die folgenden Beispiele enthält. Sie können in der Schule das Repository einfach klonen:

$ hg clone /home/teachers/hp/public/3bhif/java-gui-experiments Zielverzeichnis: java-gui-experiments Aktualisiere auf Zweig default 25 Dateien aktualisiert, 0 Dateien zusammengeführt, 0 Dateien entfernt, 0 Dateien ungelöst $

Damit wird im aktuellen Verzeichnis ein Projektverzeichnis java-gui-experiments erzeugt.
Das Projekt wird eventuell um neue Klassen ergänzt. Sie können sich die Änderungen holen:

$ cd java-gui-experiments $ hg pull /home/teachers/hp/public/3bhif/java-gui-experiments Hole von /home/teachers/hp/public/3bhif/java-gui-experiments Suche nach Änderungen Keine Änderungen gefunden $

Sollten Sie nicht auf einem Schul-PC das Repository klonen wollen, dann müssen Sie das Verzeichnis erst "mounten" und dann klonen:

$ mkdir ~/edvossh $ sshfs user@edvossh.htlwrn.ac.at:/home/teachers/hp/public/3bhif ~/edvossh $ hg clone ~/edvossh/java-gui-experiments Zielverzeichnis: java-gui-experiments Aktualisiere auf Zweig default 25 Dateien aktualisiert, 0 Dateien zusammengeführt, 0 Dateien entfernt, 0 Dateien ungelöst $

**user** ist natürlich mit Ihrem Usernamen in der Schule zu ersetzen. Die Eingabe des Passworts ist in obigen Beispielen nicht angezeigt,
Neue Versionen bekommen Sie sinngemäß mit hg pull ins lokale Repository.
Zurück zu den Steuerelementen/JavaBeans.
Im Projekt java-gui-experiments/bin können Sie Klassen nun aufrufen. Ein Beispiel zum Demonstrieren eines JButtons mit der Beschriftung "Hello World!" in einer 48 Punkt Schriftart:

$ cd java-gui-experiments/bin/ $ java je3.gui.ShowBean javax.swing.JButton 'text=Hello World!' font=helvetica-bold-48

Das sieht etwa folgendermaßen aus:

Sie können auch mehrere Steuerelemente auf der Kommandozeile angeben. Z.B.:

$ cd java-gui-experiments/bin/ $ java je3.gui.ShowBean javax.swing.JButton 'text=Hello World!' font=helvetica-bold-48
javax.swing.JRadioButton 'text=pick me'
java.awt.Button label=Hello javax.swing.JSlider

Experimentieren Sie mit weiteren Steuerelementen (A Visual Guide to Swing Components).

Experimentieren Sie mit folgender Klasse. Sie zeigt die Verschachtelung verschiedener Container:

package je3.gui; import javax.swing.; import java.awt.;

/**

*/ public class Containers extends JPanel { public Containers( ) { this.setBackground(Color.white); // This component is white this.setFont(new Font("Dialog", Font.BOLD, 24));

    JPanel p1 = new JPanel( );
    p1.setBackground(new Color(200, 200, 200)); // Panel1 is darker
    this.add(p1);                // p1 is contained by this component
    p1.add(new JButton("#1"));   // Button 1 is contained in p1
    
    JPanel p2 = new JPanel( );
    p2.setBackground(new Color(150, 150, 150)); // p2 is darker than p2
    p1.add(p2);                  // p2 is contained in p1
    p2.add(new JButton("#2"));   // Button 2 is contained in p2
    
    JPanel p3 = new JPanel( );
    p3.setBackground(new Color(100, 100, 100)); // p3 is darker than p2
    p2.add(p3);                  // p3 is contained in p2
    p3.add(new JButton("#3"));   // Button 3 is contained in p3
    
    JPanel p4 = new JPanel( );
    p4.setBackground(new Color(150, 150, 150)); // p4 is darker than p1
    p1.add(p4);                  // p4 is contained in p1
    p4.add(new JButton("#4"));   // Button4 is contained in p4
    p4.add(new JButton("#5"));   // Button5 is also contained in p4
    
    this.add(new JButton("#6")); // Button6 is contained in this component
}

}

Im package je3.gui finden Sie ein paar Klassen *Layout*, welche die verschiedenen Layoutmanager demonstrieren. Dokumentation finden Sie hier: Lesson: Laying Out Components Within a Container

Ein Beispiel für das GroupLayout finden Sie in layout.Find, welches etwa so aussieht:

Verwenden Sie diese Beispiele als Basis für eigene Projekte!

Labels: Aufgabe, Java, POS1-3, User Interface

# Eingestellt von Harald R. Haberstroh @ 21:15 0 Kommentare

Dienstag, 20. September 2011

Commandline resurrected

Am Anfang war die Kommandozeile
Das stimmt natürlich nicht ganz, denn davor gab es Programme durch Verdraten der Computer-Hardware, dann "Schreibmaschinen", mit denen man Lochkarten/Lochstreifen stanzen konnte, welche dann über ein Lesegerät in den Computer gelangten.

Die Ausgabe erfolgte über Endlos-Drucker.

Zur Datenspeicherung gab es Wieder Lochkarten oder Magnetbänder:

Natürlich gab es noch verschiedenste Ein- und Ausgabegeräte, aber das Wesentliche an der Arbeit mit Computern war damals, dass es nur "Stapelverarbeitung" (Batch Processing) gab (bis Anfang der 70er-Jahre, in Schulen etwas länger - bis Anfang der 80er). Der große Fortschritt waren dann Fernschreiber/Teletypes, mit denen man interaktiv am Computer arbeiten konnte. Das waren quasi Schreibmaschinen mit eingebautem Drucker. Aus dieser Zeit stammt die Kommandozeile. Der Computer druckte einen "Prompt" aus und wartete dann auf eine Eingabezeile, die er dann verarbeitete und das Ergebnis oder die Fehlermeldungen ausdruckte.

Natürlich wartete der Computer die meiste Zeit auf Eingaben. Daher wurde aus dem Batch Processing ein Multi Processing, d.h. mehrere Terminals wurden an den Computer angeschlossen und mehrere Programme konnten (scheinbar) gleichzeitig laufen.
Aus den Teletypes entwickelten sich echte Terminals (Bildschirm und Tastatur).

Man arbeitete immer mit einer Read-eval-print loop (REPL). Der Computer las einen Befehl ein, führte ihn aus, gab das Ergebnis aus und wartete auf die nächste Eingabe (wieder zurück zum Lesen).
Um effizient zu arbeiten, musste man ziemlich viele Kommandos auswendig wissen (übrigens funktionierten damals Texteditoren auch mit einer Kommandozeile, z.B. edlin unter DOS oder ed unter Unix). Die Kommandos bestanden oft nur aus wenigen Buchstaben. Jedenfalls nichts für Anfänger oder Personen, die nur ab und zu einen Computer bedienen wollten.
Durch Menü-Bedienung wurde es langsam aber sicher auch für "Laien" möglich Computer zu bedienen. Viele elektronische Geräten können über Menüs bedient werden. Die Menüführung war der Tod der Kommandozeile.
Auch in grafischen Benutzeroberflächen (GUI) gibt es jede Menge Menüs oder andere Dialoge, bei denen man etwas auswählen kann und nicht Befehle auswendig wissen muss. Durch Shortcuts (Tastenkombinationen) kann man als geübter Benutzer trotzdem relativ flink arbeiten. Manche User verwenden aber immer noch gerne Commandline Interfaces, weil sie damit schneller arbeiten können. Dazu gibt es auf praktisch allen Systemen Terminal-Emulatoren.

Im Prinzip werden moderne Systeme immer noch großteils mit Menüs bedient, aber je mehr Funktionen, desto mehr Einträge gibt es. Es wird also selbst für geübte Benutzer teilweise ziemlich mühsam, zumal man oft zur Maus greifen muss.

Optionen (Einstellungen) sind oft ziemlich umfangreich, viele Tabs, Radio-Knöpfe usw.

eclipse hat so viele Einstellungsmöglichkeiten, dass im Optionendialog schon lange eine Suchfunktion integriert ist:

Auch das Windows-Menü oder KDE-Menü hat seit einigen Jahren eine integrierte Suchfunktion, sodass man z.B. [Alt]+[F1]ecl[Enter] (KDE) drücken muss, um Eclipse zu starten. Unter Windows muss man die Windows-Taste drücken und z.B. "not" eingeben um Notepad aufzurufen. Ist der Befehl noch nicht eindeutig, so werden mögliche Alternativen angezeigt.

Übrigens gibt es so eine Art Mini-Kommandozeile ([Alt]+[F2]) schon seit es KDE gibt (1996), also lange bevor so etwas unter Windows existierte.
Bei Mobiltelefonen hat sich auch die Menüführung schon lange durchgesetzt. Selbst bei Smartphones ist es noch so, wenn man die vielen Anwendungs-Icons als Menü betrachtet:

Man muss oft einige Zeit "herumswipen", um die richtige App zu finden. Ich weiß nicht, ob es das beim iPhone gibt, aber bei Andorid kann man einfach den Such-Button drücken und dann ein paar Buchstaben tippen und man bekommt die passenden Anwendungen nebst Kontakten angezeigt.

Das geht oft viel schneller als "Swipen".
Im übrigen verwenden die meisten im Browser eine Art Kommandozeile, wenn sie oben Fragmente eines URLs eingeben. Der Browser schlägt sinnvolle Ergänzungen vor oder man ruft gleich die (Google-)Suchfunktion damit auf. Geht meist viel schneller als Bookmarks.

Natürlich unterscheidet sich diese neue Form der Kommandozeile von der ursprünglichen: man muss nicht alle "Befehle" auswendig wissen, man braucht nur etwas über das Kommando oder die Funktion wissen und das eingeben. Meist findet das System dann die gewünschte Funktion.

In eclipse wäre das dann so, dass ich, um den Sourcecode schön zu formatieren nicht im (Kontext-)Menü suchen muss oder mir das Tastenkürzel dafür (und für viele andere Funktionen) merken muss, sondern nur ein Tastenkürzel - z.B. [Strg]+[F1] - und dann brauche ich nur einfach tippen, was ich will: "format", "build", "class" (für neue Klasse anlegen, das geht aber auch jetzt schon auf anderem Weg) usw. Meist müsste ich gar nicht alles tippen.
Diese neue Form der Kommandozeile ist sowohl für Anfänger und Personen, die selten ein bestimmtes Programm verwenden, als auch für Power User, die alles mit der Tastatur bedienen wollen. Ich bin nur gespannt, wann sich so etwas noch allgemeiner durchsetzen wird.

Die Kommandozeile ist wiederauferstanden!

Labels: allgemeines, GUI, User Interface

# Eingestellt von Harald R. Haberstroh @ 12:29 0 Kommentare

This page is powered by Blogger. Isn't yours?

Abonnieren Kommentare [Atom]