Grafische Benutzeroberfläche

Präsentation zum Thema: "Grafische Benutzeroberfläche"—  Präsentation transkript:

1 Grafische Benutzeroberfläche
Fenster

2 Vorbemerkung Für die hier verwendeten Programme wurden aus didaktischen Gründen folgende Vereinbarungen getroffen;

3 Alle Klassen, in denen sich die Methode main befindet, beginnen mit Main... Bem: Die Programmdatei muss also den gleichen Namen haben und public sein.

4 2) Alle von uns frei wählbaren Bezeichnungen für Klassen, Variablen, Methoden usw. beginnen mit dem Bezeichner my... Ausnahme: Einfache Variablen wie z.B. i,j, usw.

5 import java.awt.*; import javax.swing.*; public class MainFenster1 { public static void main(String[] args) { JFrame myF = new JFrame(); myF.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); myF.setLocation(200,200); myF.setSize(400,200); myF.setVisible(true); } Hier wird ein Objekt, also myF der Klasse JFrame, also ein Fenster erzeugt und später auf den Bildschirm gebracht. Deshalb muss "dankenswerterweise" der Bauplan nicht von uns gebastelt werden.

6 import java.awt.*; import javax.swing.*; public class MainFenster1 { public static void main(String[] args) { JFrame myF = new JFrame(); myF.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); myF.setLocation(200,200); myF.setSize(400,200); myF.setVisible(true); } Programm wird beendet (aus dem Arbeitsspeicher entfernt), wenn Fenster weggeklickt wird. Nachprüfen mit Task-Manager Linke obere Ecke des Fensters bringt das Fenster auf den Bildschirm Grösse des Fensters festlegen, das auf den Bildschirm kommt

7 import java.awt.*; import javax.swing.*; public class MainFenster1 { public static void main(String[] args) { JFrame myF = new JFrame(); myF.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); myF.setLocation(200,200); myF.setSize(400,200); myF.setVisible(true); } Aus Gründen der OOP soll zukünftig dieses Fenster in einer eigenen, selbst gebastelten Klasse entworfen werden. Welche Eigenschaft der OOP muss dabei verwendet werden? Die Vererbung!

8 Deswegen ...

9 import java.awt.*; import javax.swing.*; public class MainFenster1 { public static void main(String[] args) { MyFenster myF = new MyFenster(); myF.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } Hier wird ein Objekt, also myF, der selbstgebastelten Klasse MyFenster erzeugt, d.h. auf den Bildschirm gebracht Programm wird beendet (aus dem Arbeitsspeicher entfernt), wenn Fenster weggeklickt wird. Nachprüfen mit Task-Manager

10 class MyFenster extends JFrame{ private JButton myB1, myB2;
private JTextField myT1, myT2; private JLabel myL1, myL2; private Container myCont; private GridLayout myGL_2_3; public MyFenster(){ Buttons deklarieren Textfelder deklarieren Labels deklarieren Liefert die Stelle, an der die sichtbaren Komponenten (Buttons, usw.) an das Fenster montiert werden. Layout deklarieren, es besteht aus 2 Zeilen und 3 Spalten Ein Layout ist eine Vorgabe, wie die sichtbaren Komponenten innerhalb beim Einfügen (mit add) in das Fenster oder in ein Panel (siehe später) angeordnet werden

11 class MyFenster extends JFrame{
private JButton myB1, myB2; private JTextField myT1, myT2; private JLabel myL1, myL2; private Container myCont; private GridLayout myGL_2_3; public MyFenster(){ 1) Beim GridLayout werden die Elemente zeilenweise eingefügt, d.h. zuerst wird die 1. Zeile aufgefüllt, dann die 2. Zeile, usw. Mit myGL_2_3 = new GridLayout(2,3); wird ein Layout von 2 Zeilen und 3 Spalten angelegt. 2) Es müssen _ALLE_ Zeilen bis zur letzten Spalte befüllt werden

12 myT1=new JTextField("hier eingeben",30);
myB1=new JButton("Go"); myB2=new JButton("Ok"); myT1=new JTextField("hier eingeben",30); myT2=new JTextField("hier eingeben",30); myL1=new JLabel("Euro-->Dollar"); myL2=new JLabel("Dollar-->Euro"); myCont=getContentPane(); myGL_2_3=new GridLayout(2,3); myCont.setLayout(myGL_2_3); Buttons anlegen Textfelder anlegen Labels anlegen Stelle des Anmontierens bestimmen GridLayout mit 2 Zeilen und 3 Spalten anlegen. Die Stelle, an der die Elemente angefügt werden, muss mit einem Layout versehen werden.

13 myB1=new JButton("Go"); myB2=new JButton("Ok"); myT1=new JTextField("hier eingeben",30); myT2=new JTextField("hier eingeben",30); myL1=new JLabel("Euro-->Dollar"); myL2=new JLabel("Dollar-->Euro"); myCont=getContentPane(); myGL_2_3=new GridLayout(2,3); myCont.setLayout(myGL_2_3); Die sichtbaren Komponenten müssen an unser Fenster “MyFenster“ an eine dafür vorgesehene, ganz bestimmte Stelle, montiert werden. Die Methode getContentPane() liefert die Stelle, an die das Panel an den Top-Level-Container JFrame montiert werden muß.

14 myCont.add(myL1); myCont.add(myT1); myCont.add(myB1); myCont.add(myL2); myCont.add(myT2); myCont.add(myB2); setTitle("Meine Zeichnung"); setLocation(30,60); setSize(600,400); setVisible(true); } Lables, Textfelder und Buttons werden an das Fenster montiert unter der Regie des GridLayouts, das aus 2 Zeilen und 3 Spalten besteht. Fensterüberschrift Linke obere Ecke des Fensters Grösse des Fensters festlegen bringt das Fenster auf den Bildschirm

15 Man kann nicht nur direkt am Fenster sichtbare Komponenten (Buttons,
Man kann nicht nur direkt am Fenster sichtbare Komponenten (Buttons, ...) anbringen, sondern Behälter (Container), in die man (wieder Untercontainer) oder sichtbare Komponenten anbringt. Diese Behälter haben die ähnliche Bedeutung wie die Ordner im Explorer. Diese Behälter werden realisiert durch Objekte vom Typ JPanel. Sie werden hier auch oft Zeichenflächen genannt.

16 Im Folgenden sollen hier 2 Zeichenflächen an das Fenster montiert werden, wobei in diese Zeichenflächen vorher sichtbare Komponenten eingefügt wurden. Wichtig: Auch diese Zeichenflächen müssen (genauso wie die Stelle, an der wiederum diese angebracht werden) ein Layout bekommen (müssen "formatiert" werden).

17 In diesen 2 Zeichenflächen sollen jeweils 1 Button, 1 Label und 1 Textfeld angebracht werden. Damit diese sichtbaren Komponenten nicht zu groß werden, sollen zusätzlich noch weitere "DummyLabels" angebracht werden. Konkret: (siehe nächste Folie)

18 Konkret: 1. Zeichenfläche: Button | Label | Textfeld | Dummy Dummy | Dummy | Dummy | Dummy 2. Zeichenfläche: Dummy | Dummy | Dummy | Dummy Button | Label | Textfeld | Dummy

19 import java.awt.*; import javax.swing.*; public class MainFenster1 { public static void main(String[] args) { MyFenster myF = new MyFenster(); myF.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } Das gleiche wie vorher... Was neu hinzukommt wird rot gekennzeichnet.

20 Zeichenflächen deklarieren
class MyFenster extends JFrame{ private JButton myB1, myB2; private JTextField myT1, myT2; private JLabel myL1, myL2; // Zeichenflächen private JPanel myPan1; private JPanel myPan2; private Container myCont; private GridLayout myGL_2_1; private GridLayout myGL1_2_4; private GridLayout myGL2_2_4; public MyFenster(){ Zeichenflächen deklarieren Für jede Zeichenfläche ein eigenes Layout (auch wenn alle Layouts die gleiche Zeilen- und Spaltenzahl haben).

21 myT1=new JTextField("hier eingeben",30);
myB1=new JButton("Go"); myB2=new JButton("Ok"); myT1=new JTextField("hier eingeben",30); myT2=new JTextField("hier eingeben",30); myL1=new JLabel("Euro-->Dollar"); myL2=new JLabel("Dollar-->Euro"); myPan1=new JPanel(); myPan2=new JPanel(); myCont=getContentPane(); myGL_2_1=new GridLayout(2,1); myGL1_2_4=new GridLayout(2,4); myGL2_2_4=new GridLayout(2,4); myCont.setLayout(myGL_2_1); myPan1.setLayout(myGL1_2_4); myPan2.setLayout(myGL2_2_4); Zeichenflächen anlegen GridLayouts anlegen GridLayouts an die entsprechenden Stellen anbringen

22 myPan1.add(myL1); myPan1.add(myT1); myPan1.add(myB1); myPan1.add(new JLabel()); Anbringen des Labels, Textfelds und Buttons an die 1. Zeichenfläche. Anbringen der DummyLabels Beachte: Durch jedes new JLabel() wird ein neues Objekt angelegt. Man hat nachher also 5 verschiedene JLabels Label Textfeld Button DummyLabel DummyLabel DummyLabel DummyLabel DummyLabel

23 myPan2.add(new JLabel());
myPan2.add(myL2); myPan2.add(myT2); myPan2.add(myB2); Anbringen der DummyLabels Anbringen des Labels, Textfelds und Buttons an die 2. Zeichenfläche. Beachte: Durch jedes new JLabel() wird ein neues Objekt angelegt. Man hat nachher also 5 verschiedene JLabels DummyLabel DummyLabel DummyLabel DummyLabel Label Textfeld Button DummyLabel

24 Anbringen der zwei Zeichenflächen an das Fenster
myCont.add(myPan1); myCont.add(myPan2); setTitle("Meine Zeichnung"); setLocation(30,60); setSize(600,400); setVisible(true); }

25 Zeichnen mit Java

26 Um in Java zu zeichnen, müssen alle Linien, Kreise, usw
Um in Java zu zeichnen, müssen alle Linien, Kreise, usw. in eine Zeichenfläche (JPanel) gezeichnet werden. Aus Demogründen soll hier neben der Zeichenfläche noch eine weitere Zeichenfläche erstellt werden, in die nur sichtbare Elemente (1 Label, 1 Textfeld, 1 Button) montiert werden sollen.

27 Gezeichnet wird durch den Aufruf der Methode (hier müssen dann z. B
Gezeichnet wird durch den Aufruf der Methode (hier müssen dann z.B. die Befehle zum Zeichnen von Ellipsen, Linien, Rechtecken, usw. stehen) paintComponent(Graphics g) Diese soll niemals direkt innerhalb des selbst geschriebenen Programms aufgerufen werden ! Java (bzw. das Betriebssystem) entscheidet selbst, wenn es paintComponent(Graphics g) aufruft. Dies geschieht:

28 --> bei der ersten Anzeige des
Fensters (setVisible(true)) --> nachdem ein Fenster vergrößert (verkleinert) wurde, --> nach dem Wegziehen überlagernder Fenster (verdeckte Elemente werden aufgedeckt) --> nach dem Aufruf des Befehls repaint() im Programm

29 Bemerkung: 1) Den Parameter Graphics g in paintComponent(Graphics g) kann man sich als den Teil des Bildspeicherbereichs vorstellen, der die zugehörige grafische Komponente (z.B. Ellipse) auf dem Bildschirm repräsentiert.

30 2) Die erste Anweisung in paintComponent(Graphics g) sollte super
2) Die erste Anweisung in paintComponent(Graphics g) sollte super.paintComponent(g) sein, da super.paintComponent(g) die Methode paintComponent(g) der Vaterklasse aufruft. Die Standard-Implementation dieser Methode der Klasse JPanel löscht den kompletten Inhalt des Panels. Ansonsten wird auch noch der alte Inhalt des Panels auf dem Bildschirm ausgegeben.

31 Wie kann der Programmierer eine Zeichenfläche (Panel) erzeugen und in diese Ellipsen, Linien, Rechtecke, usw. anbringen? Zusätzlich soll er außerdem noch die ganzen Möglichkeiten von JPanel (z.B. wird durch paintComponent automatisch die Zeichnung auf den Bildschirm gebracht) verwenden können!

32 Indem man eine Klasse bastelt, die von JPanel erbt !

33 import java.awt.*; import javax.swing.*; public class MainZeichnen1 { public static void main(String[] args) { MyFenster myf = new MyFenster(); myf.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } Das gleiche wie vorher...

34 class MyFenster extends JFrame{
private JButton myB1; private JTextField myT1; private JLabel myL1; private JPanel myPan1; private MyZeichenflaeche myZf1; private Container myCont; private BorderLayout myBoLa; private GridLayout myGL_1_2; public MyFenster(){ Ein JPanel deklarieren Eine selbstgebastelte Zeichenflaeche deklarieren Nur für myPan1 braucht man ein Layout: Da an myZf1 keine sichtbaren Komponenten (wie Buttons, usw.) angebracht werden.

35 class MyFenster extends JFrame{
private JButton myB1; private JTextField myT1; private JLabel myL1; private JPanel myPan1; private MyZeichenflaeche myZf1; private Container myCont; private BorderLayout myBoLa; private GridLayout myGL_1_2; public MyFenster(){ Ein JPanel deklarieren Eine selbstgebastelte Zeichenflaeche deklarieren Das BorderLayout unterteilt in 5 Bereiche: North, South, East, West, Center. Einem Bereich kann dabei immer nur eine Komponente (z.B. ein Button) zugeordnet werden. Will man einem Bereich mehrere Komponenten zuordnen, muß dieser Bereich auch mit einem Layout-Manager bestückt werden (siehe nächste Folien). Wird ein Bereich nicht gefüllt, wird diese Fläche von den anderen Bereichen genutzt. Ein Border-Layout, siehe wie folgt aus (wenn alle Bereiche gefüllt sind)...

36 NORTH EAST WEST CENTER SOUTH

37 Wichtige Bemerkung: Wenn kein Layout-Manager benutzt wird, gilt standardmäßig folgende Zuweisung (Vorbelegung): JFrame-Objekt --> BorderLayout JPanel-Objekt --> FlowLayout

38 myT1 = new JTextField("hier eingeben",30);
myB1 = new JButton("Go"); myT1 = new JTextField("hier eingeben",30); myL1 = new JLabel("Rechts Text eingeben"); myPan1 = new JPanel(); myZf1 = new MyZeichenflaeche(); myCont = getContentPane(); myBoLa = new BorderLayout(); myGL_1_2 = new GridLayout(1,2); myCont.setLayout(myBoLa); myPan1.setLayout(myGL_1_2); Zeichenflächen anlegen Selbstgebasteltes Objekt der KLasse MyZeichenflaeche anlegen.

39 myPan1.add(myL1); myPan1.add(myT1); myPan1.add(myB1); myCont.add(myZf1,BorderLayout.CENTER); myCont.add(myPan1,BorderLayout.SOUTH); setTitle("Meine Zeichnung"); setLocation(30,60); setSize(600,800); setVisible(true); } Anbringen des Labels, Textfelds und Buttons an die 1. Zeichenfläche. Anbringen der zwei Zeichenflächen an das Fenster

40 class MyZeichenflaeche extends JPanel{
public void paintComponent(Graphics myG){ Color myFarbe = new Color(100, 250, 200); myG.setColor(myFarbe); myG.drawOval(100, 50, 250, 300); myG.fillOval(100, 50, 250, 300); myG.setColor(Color.red); myG.drawString("Das bin ich",200,20); myG.drawLine(150,160,180,160); myG.drawLine(270,160,300,160); myG.drawLine(230,200,230,230); myG.drawRect(200,280,50,30); } Diese Farbe setzen Eigene Farbe basteln: 150, 180, 234 sind die Rot-, Grün- und Blauteile einer Farbe jeweils im Bereich zwischen 0 und 255

41 class MyZeichenflaeche extends JPanel{
public void paintComponent(Graphics myG){ Color myFarbe = new Color(100, 250, 200); myG.setColor(myFarbe); myG.drawOval(100, 50, 250, 300); myG.fillOval(100, 50, 250, 300); myG.setColor(Color.red); myG.drawString("Das bin ich",200,20); myG.drawLine(150,160,180,160); myG.drawLine(270,160,300,160); myG.drawLine(230,200,230,230); myG.drawRect(200,280,50,30); } Zeichnet die Randlinie einer Ellipse, die sich in einem gedachten Rechteck befindet. Der linke obere Punkt hat die Koordinaten Koordinate x = 100, Koordinate y = 50. Die Breite des Rechtecks in x-Richtung = 250 Die Breite des Rechtecks in y-Richtung = 300

42 class MyZeichenflaeche extends JPanel{
public void paintComponent(Graphics myG){ Color myFarbe = new Color(100, 250, 200); myG.setColor(myFarbe); myG.drawOval(100, 50, 250, 300); myG.fillOval(100, 50, 250, 300); myG.setColor(Color.red); myG.drawString("Das bin ich",200,20); myG.drawLine(150,160,180,160); myG.drawLine(270,160,300,160); myG.drawLine(230,200,230,230); myG.drawRect(200,280,50,30); } Füllt die Ellipse mit der vorher gesetzten Farbe Die Farbe rot auswählen (setzen) Text ausgeben

43 class MyZeichenflaeche extends JPanel{
public void paintComponent(Graphics myG){ Color myFarbe = new Color(100, 250, 200); myG.setColor(myFarbe); myG.drawOval(100, 50, 250, 300); myG.fillOval(100, 50, 250, 300); myG.setColor(Color.red); myG.drawString("Das bin ich",200,20); myG.drawLine(150,160,180,160); myG.drawLine(270,160,300,160); myG.drawLine(230,200,230,230); myG.drawRect(200,280,50,30); } Linie zeichnen Rechteck zeichnen

44 Hier nochmals das Border-Layout kurz beschrieben:

45 Das Border-Layout besteht aus 5 Zonen, in denen jeweils eine Komponente eingefügt werden kann. Sollen z.B. mehrere Buttons in eine Zone eingefügt werden, fügt man diese zuerst in ein Panel ein und danach dieses Panel in die Zone! Nimmt man weniger als fünf Komponenten auf, so werden die nicht benutzten Zonen von den benutzten Zonen belegt. NORTH WEST EAST CENTER SOUTH

46 NORTH und SOUTH nehmen die volle Breite ein
NORTH und SOUTH nehmen die volle Breite ein. Die Höhe hängt von der einzufügenden Komponente ab. WEST und EAST nehmen die Breite der einzufügenden Komponente an und belegen in der Höhe den restlichen freien Raum. Den Rest bekommt CENTER. NORTH WEST EAST CENTER SOUTH