Embed Size (px)
Citation preview
Seite 1
Programmieren lernen mit Groovy
Graphische Oberflächen – GUIs (Graphical User Interfaces)
Th Letschert
Seite 2
GUI Beispiel Addierer : Code und erzeugte GUI
Th Letschert
Zeile 1: Label , Texteingabefeld
Zeile 2: Label , Texteingabefeld
Zeile 3: Knopf
Zeile 4: Label , Textausgabefeld
import groovy.swing.SwingBuilderimport javax.swing.WindowConstantsswing = new SwingBuilder()def frame = swing.frame(title:'Addierer',
size:[200,120], defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
tableLayout {tr {
td { label('Operand 1 ') }td { textField(columns:10) }
}tr {
td { label('Operand 2 ') }td { textField(columns:10) }
}tr {
td(colspan:2, align:'left') {button ' + '
}}tr {
td { label('Ergebnis ') }td { textField(columns:10) }
}}
}frame.show()
Seite 3
GUI Beispiel Addierer
Aufbau : Rahmenaufbau
• Swing Framework: Vordefinierte Java-Klassen zum Aufbau von GUIs (komplex)
• Swing-Frame: Fenster, Erzeugung mit Parametern und Inhalt
Th Letschert
import groovy.swing.SwingBuilder
import javax.swing.WindowConstants
swing = new SwingBuilder()
def frame = swing.frame(
title:'Addierer',
size:[200,120],
defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE ) {
... Fensterinhalt...
}frame.show()
Parameter: - Fenstertitel - Fenstergröße - Was soll beim Schließen des Fensters passieren. (Hier Anwendung beenden)
GUIs können über einen Builder (den SwingBuilder) erstellt werden. Vergl. Generierung von XML- und HTML-Code.
Seite 4
GUI Beispiel Addierer
Aufbau : Strukturierung mit Tabellen-Layout
Tabellenlayout: Zeilen mit Zeilenelementen (~ Html-Tabellen)
tr : Table Row Zeile
td : Table Data Zeilenelement
Th Letschert
tableLayout {tr {
td { ... } td { ... }
}...tr {
td(colspan:2, align:'left') { ... } }
}
. . .
Seite 5
vbox: einfaches Layout, setzt Elemente untereinander
GUI-Elemente und Aktionen
Von GUI-Elementen aus Aktionen starten ➔ actionPerformed : Aktion die bei Aktivierung
gestartet wird
Th Letschert
def frame = swing.frame(title:'Klickmich', size:[250,70], defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
vbox {button( text :'KLICK MICH',
actionPerformed : { println 'Es hat geKlickt'
})
}}frame.show() button:
text ~> Beschriftung actionPerformed ~> Aktion bei Klick
Es hat geKlickt
Seite 6
GUI-Elemente und Aktionen
Beispiel vollständig
Th Letschert
import groovy.swing.SwingBuilderimport javax.swing.WindowConstants
swing = new SwingBuilder()
def frame = swing.frame(title:'Klickmich',
size:[250,70],
defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
vbox {
button( text:'KLICK MICH',
actionPerformed: {
println 'Es hat geKlickt'
}
)
}
}
frame.show()
Es hat geKlickt
Seite 7
GUI-Elemente und Aktionen
Von GUI-Elementen aus Aktionen starten
Elemente verknüpfen: Bei Klick Textfeld ausgeben
Th Letschert
def frame = swing.frame(title:'Klickmich',
size:[250,80],
defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
vbox {
textField(id:'msg')
button( text:'KLICK MICH',
actionPerformed: {
println swing.msg.text
}
)
}
}
Hallo
Seite 8
GUI-Elemente und Aktionen
Von GUI-Elementen aus Aktionen starten
Elemente verknüpfen: bei Klick Textfeld füllen
Th Letschert
vbox {
hbox {
textField(id:'msgIn')
textField(id:'msgOut')
}
button( text:'KLICK MICH',
actionPerformed: {
swing.msgOut.setText(swing.msgIn.text)
}
)
}
hbox: horizontal Boxeinfaches Layout, setzt Elemente nebeneinander
setText : Textfeld vom Programm aus beschreiben
Seite 9
GUI-Elemente und Aktionen
Beispiel vollständig
Th Letschert
import groovy.swing.SwingBuilderimport javax.swing.WindowConstants
swing = new SwingBuilder()
def frame = swing.frame(title:'Klickmich', size:[250,80], defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
vbox {hbox {textField(id:'msgIn')textField(id:'msgOut')
}button( text:'KLICK MICH',
actionPerformed: { swing.msgOut.setText(swing.msgIn.text)
})
}}frame.show()
Seite 10
GUI-Elemente und Aktionen
Beispiel Addierer
Th Letschert
tableLayout { tr {
td { label('Operand 1 ') }td { textField(id: 'op1', columns:10) }
} tr {
td { label('Operand 2 ') }td { textField(id: 'op2', columns:10) }
} tr {
td(colspan:2, align:'left') {button(text:' + ', actionPerformed:{
def resultat = Integer.parseInt(swing.op1.text) +Integer.parseInt(swing.op2.text)
swing.erg.setText(resultat.toString())
})}
} tr {
td { label('Ergebnis ') }td { textField(id:'erg', columns:10) }
}}
Seite 11
GUI-Elemente und Aktionen
Addierer verschönern
Th Letschert
Font setzen,
Linksbündige Eingabefelder
Ergebnisfeld nicht beschreibbar
textField(id: 'op1', columns: 10, font: new Font("monspaced", Font.PLAIN, 12), horizontalAlignment: JTextField.RIGHT)
textField(id: 'erg', columns: 10,font: new Font("monspaced", Font.PLAIN, 12), horizontalAlignment: JTextField.RIGHT,editable: false)
textField(id: 'op1', columns: 10, font: new Font("monspaced", Font.PLAIN, 12), horizontalAlignment: JTextField.RIGHT)
Seite 12
Addierer vollständig (1)
Th Letschert
import groovy.swing.SwingBuilderimport javax.swing.WindowConstantsimport java.awt.Fontimport javax.swing.JTextField
swing = new SwingBuilder()
def frame = swing.frame(title:'Addierer', size:[250,120], defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
tableLayout {tr { td { label('Operand 1 ') } td { textField(id: 'op1',
columns:10, font: new Font("monspaced", Font.PLAIN, 12), horizontalAlignment:JTextField.RIGHT) }
}tr { td { label('Operand 2 ') } td { textField(id: 'op2',
columns:10, font:new Font("monspaced", Font.PLAIN, 12), horizontalAlignment:JTextField.RIGHT) }
}
Seite 13
Addierer vollständig (2)
Th Letschert
tr {td(colspan:2, align:'left') {
button(text:' + ', actionPerformed:{ def erg = Integer.parseInt(swing.op1.text) +
Integer.parseInt(swing.op2.text) swing.erg.setText(erg.toString()) })
}}tr {
td { label('Ergebnis ') }td { textField(id: 'erg',
columns:10,font: new Font("monspaced", Font.PLAIN, 12), horizontalAlignment:JTextField.RIGHT,editable:false) }
}}
}frame.show()
Seite 14
Menüs
Th Letschert
Menü-Beispiel
import groovy.swing.SwingBuilderimport javax.swing.WindowConstants
swing = new SwingBuilder()def frame = swing.frame(title:'Menue',
size:[250,120], defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {
menuBar() {menu('File') {
menuItem(text: 'Exit', actionPerformed: {
System.exit(0)}
)}
}}frame.show()
Exit: Programm wird beendet
Seite 15
Gui-Elemente dynamisch erzeugen
Th Letschert
Dynamisch erzeugte GUI-Elemente
– GUI-Elemente können aus Datenstrukturen erzeugt werden
– Beispiel: Tabelle mit einer Zeile pro Attribut
def attrNames = ['Anlage', 'Bezeichnung', 'Baujahr', 'Garantie', 'Typbezeichnung']
def attrType = ['Anlage' : 'Integer', 'Bezeichnung' : 'String', 'Baujahr' : 'Integer', 'Garantie' : 'Date', 'Typbezeichnung' : 'String']
Festlegung von Attribut-Namen und -Typen.Gesucht: Eingabemaske für die entsprechenden Werte
Seite 16
GUI-Elemente dynamisch erzeugen
Th Letschert
tableLayout { attrNames.each { attrName -> switch(attrType[attrName]) { case 'Integer': tr { td { label(attrName) } td { label(' ') } td { formattedTextField( id : attrName, columns : 15, font : new Font("monspaced", Font.PLAIN, 12), format : new DecimalFormat(), horizontalAlignment: JTextField.RIGHT) } } break case 'String': tr { td { label(attrName) } td { label(' ') } td { formattedTextField( id : attrName, columns : 15, font : new Font("monspaced", Font.PLAIN, 12), horizontalAlignment: JTextField.LEFT) } } break
Seite 17
GUI-Elemente dynamisch erzeugen
Th Letschert
case 'Date': tr { td { label(attrName) } td { label(' ') } td { formattedTextField( id : attrName,
columns : 15, format : new SimpleDateFormat('dd:MM:yy'), font : new Font("monspaced", Font.PLAIN, 12), horizontalAlignment: JTextField.LEFT) } } break }}
Seite 18
Modelle
Th Letschert
Modell
Datenstruktur deren Inhalt in einer GUI
dargestellt undmanipuliert
werden kann
Modell(Model)
Ansicht (View)
Seite 19
Modelle: Table Model
Th Letschert
Tabellen-Modell: Datentabelle darstellenimport groovy.swing.SwingBuilderimport javax.swing.WindowConstants
daten = [ [id:283006025, bezeichnung:'Rollstuhl Venezia XTRA',baujahr:2006],
...
[id:287006025, bezeichnung:'Personenrollstuhl Esprit',baujahr:2006]]swing = new SwingBuilder()def frame = swing.frame(title:'Anlagentabelle', defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) { scrollPane {
table() { tableModel(list:daten) {
propertyColumn(header:'Anlage', propertyName:'id')propertyColumn(header:'Bez.', propertyName:'bezeichnung')propertyColumn(header:'Baujahr',propertyName:'baujahr')
} }
}}
frame.pack()frame.show()
die Daten die dargestellt werden sollen
Seite 20
Modelle: Table Model
Th Letschert
Tabellen-Modell: Datentabelle darstellen
scrollPane {table() { tableModel(list:daten) {
propertyColumn(header:'Anlage', propertyName:'id')propertyColumn(header:'Bez.', propertyName:'bezeichnung')propertyColumn(header:'Baujahr',propertyName:'baujahr')
}}
}
Seite 21
Modelle: Table Model / Beispiel
Th Letschert
Combo-Box Auswahl mit Links-Klick
Tabellen-Modell: Daten editieren
Seite 22
Modelle: Table Model
Th Letschert
Tabellen-Modell: Datenzelle mit Combo-Box (Auswahl-Tabelle) editieren
table() { tableModel(list:daten) {
propertyColumn( header:'Anlage', propertyName:'id')propertyColumn( header:'Bez.', propertyName:'bezeichnung')
propertyColumn( header:'Baujahr', propertyName:'baujahr',
cellEditor: new DefaultCellEditor(
comboBox(items: [2005, 2006, 2007, 2008, 2009])),
cellRenderer: new DefaultTableCellRenderer()) }}
Das Baujahr kann mit einer Combo-Box editiert werden
Auswahlwerte
Seite 23
Modelle: Table Model
Th Letschert
Tabellen-Modell: Datenzelle als Textfeld editieren
table() { tableModel(list:daten) {
propertyColumn( header:'Anlage', propertyName:'id')
propertyColumn( header: 'Bez.',propertyName: 'bezeichnung',
cellEditor: new DefaultCellEditor(textField()),cellRenderer:new DefaultTableCellRenderer())
propertyColumn( header: 'Baujahr', propertyName: 'baujahr',
cellEditor: new DefaultCellEditor(comboBox(items:
[2005, 2006, 2007, 2008, 2009])),
cellRenderer: new DefaultTableCellRenderer()) }}
Auswählen,Editieren
Seite 24
Modelle: Table Model / Beispiel vollständig (1)
Th Letschert
import groovy.swing.*import javax.swing.*import groovy.swing.SwingBuilderimport javax.swing.WindowConstantsimport javax.swing.table.*import javax.swing.event.TableModelListener
daten = [[id:283006025, bezeichnung:'Rollstuhl Venezia XTRA', baujahr:2006],
...]swing = new SwingBuilder()def frame = swing.frame(title:'Anlagentabelle', defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) { menuBar() {
menu('File') {menuItem(text: 'Print',
actionPerformed: {println daten})
menuItem(text: 'Exit', actionPerformed: {
System.exit(0)})}
}
Seite 25
Modelle: Table Model / Beispiel vollständig (2)
Th Letschert
scrollPane {table() { tableModel(list:daten) {
propertyColumn(header:'Anlage', propertyName:'id')
propertyColumn(header: 'Bez.',propertyName: 'bezeichnung',cellEditor: new DefaultCellEditor(textField()),cellRenderer:new DefaultTableCellRenderer())
propertyColumn(header:'Baujahr', propertyName:'baujahr', cellEditor:
new DefaultCellEditor(comboBox(
items: [2005, 2006, 2007, 2008,2009])),
cellRenderer: new DefaultTableCellRenderer()) } } }}
frame.pack()frame.show()
Seite 26
Modelle: Tree Model
Th Letschert
Baum-Modell: Daten als Baum darstellen
data = [ [id:283006025, bezeichnung:'Rollstuhl Venezia XTRA', baujahr:2006], .... ]
DefaultMutableTreeNode root = new DefaultMutableTreeNode("Anlagen");
data.each{ item ->def node = new DefaultMutableTreeNode(item.id)node.add(new DefaultMutableTreeNode(item.bezeichnung))node.add(new DefaultMutableTreeNode(item.baujahr))root.add(node)
}....
Seite 27
Modelle: Tree Model (1)
Th Letschert
import groovy.swing.*import javax.swing.*import groovy.swing.SwingBuilderimport javax.swing.WindowConstantsimport javax.swing.tree.*import javax.swing.tree.DefaultMutableTreeNode
data = [ [id:283006025, bezeichnung:'Rollstuhl Venezia XTRA', baujahr:2006], [id:287006026, bezeichnung:'Personenrollstuhl Esprit', baujahr:2006],
.... ]
DefaultMutableTreeNode root = new DefaultMutableTreeNode("Anlagen");
data.each{ item ->def node = new DefaultMutableTreeNode(item.id)node.add(new DefaultMutableTreeNode(item.bezeichnung))node.add(new DefaultMutableTreeNode(item.baujahr))root.add(node)
}
swing = new SwingBuilder()
Seite 28
Modelle: Tree Model (2)
Th Letschert
def frame = swing.frame(title:'Tree', size:[350,250],
defaultCloseOperation:WindowConstants.EXIT_ON_CLOSE) {menuBar() {
menu('File') {menuItem(text: 'Save',
actionPerformed: { println daten })menuItem(text: 'Exit',
actionPerformed: { System.exit(0)})}
}scrollPane {
tree(model: new DefaultTreeModel(root), valueChanged : { event ->
def node = (DefaultMutableTreeNode) event.source.getLastSelectedPathComponent()
if (node != null) {println(node.getUserObject());
}})
}}frame.show()
ausgewählter Knoten im Baum wird ausgegeben.
