Hi, diese Woche geht es um die Programmierung von grafischen Benutzerschnittstellen,
also Guis oder wie richtige Programmierer sagen, Clicky Bunty.
Ich werde dazu mit euch auch wieder zwei Videos machen,
in dem ersten werden wir so eine ganz rudimentäre Gui bauen.
Einfach einen alten, ein bisschen Tags, zwei Buttons,
damit man das mal from the scratch gesehen hat.
Und im zweiten Video werden wir das Ganze dann ein bisschen in dem
etwas größeren Kontext von unserer von unserem Bar-Projekt sehen und dann Tool bauen,
mit dem man dann theoretisch auch Bestellungen aufnehmen könnte.
Ich mache das jetzt hier einfach mal weg.
Und wir fangen einfach mal an, eine Klasse zu bauen,
also New Class. Wir nennen die Artikelwerkzeug.
Artikelwerkzeug, QI. Und der Artikel hat einen Namen.
Das ist so ein Typ String
Und brauch einen J-Frame, das ist eigentlich das eigentliche Fensterchen,
deswegen nennen wir es auch Window.
Dann wollen wir zwei Buttons haben. Einer heißt Ed Button
, was zur Bestellung hinzuzufügen
Und dazu entfernen, nennen wir es dann also Remove.
So, J Frame muss importiert werden,
da haben wir es. Dann sollen wir noch Labels haben
, umgekehrt
Und zwar ein Icon Label. Und das L muss ich
großschreiben. Und ich muss es importieren.
Das ganze andere heißt ein Name Label
So, was brauchen wir noch? Wir brauchen Panels.
Also ich werde das jetzt mit euch erstmal so hintereinander
weg programmieren und dann aber am Ende nochmal darauf eignen,
was wir da alles so gemacht haben.
Das eine heißt Icon, Panel und das andere.
Heißt Button Panel
Und dann wollen wir da jetzt auch einen Icon haben.
Ein Image. Hi, cool.
Und das heißt einfach Icon. Okay, wir wollen,
dass wir im Konstruktor den Artikelnamen übergeben können.
Also haben wir hier einen String,
der heißt Tikölname.
Und das weißen wir einfach
Der entsprechenden, sage ich, Exemplare erhebenden Zoom.
Dann wollen wir unser Fensterchen auch tatsächlich überhaupt erzeugen. Das heißt,
ein Exemplar der Klasse, also haben wir hier Window.
Gleich, jo. Jay Frame. Kann man aufknurzen,
sind wir Colan. Okay,
und jetzt würde ich einfach mal lieben Methoden,
mit denen ich hier Dinge tun will,
erstmal schreiben und dann sie hinterher erzeugen und befüllen.
Also als erstes wollen wir die Buttons Erzeugen.
Dann wollen wir die Panels erzeugen. Dann würde ich
das Icon initialisieren.
Dann die Labels
Die Panels und am Ende den Layout-Manager des gesamten des gesamten Windows.
Ich mache das jetzt hier außerhalb einer Methode,
dass ich für das Window Die Größesätze,
das sind 600 Breite, 600 Pixel und 125 Höhe,
was man auf keinen Fall vergessen darf,
ist Set Visible True zu setzen,
weil ansonsten macht es ganz wundervolle Dinge.
Man sieht nur nix, das speichere ich jetzt mal
so zwischendurch. Und dann Steuerung 1, Create Method,
Private Void,
alles gut
Und da erzeugen wir uns die Buttons.
Das heißt also, add... Warten gleich.
Schönes Button. Und in den Konstruktor von dem Button kommt,
dass was draufstehen soll, nämlich add, wenn sie jetzt wundern.
Und dann setzen wir auch noch die Größe davon,
da gibt es
eine Dimension
Und das Ding soll 90 mal 90 Pixel groß sein.
Das Gleiche machen wir mit dem Remove-Button.
Da steht dann halt Remove. Und der kriegt auch
eine Größe
1990 mal 90. Okay, jetzt haben wir das gemacht,
jetzt bauen wir uns die Panels.
Und zwar das Eigenpaneln. Gleich. J. Panel.
Und das Button Panel
Jo. J. Panel. So, jetzt kommt was.
Das müsst ihr nicht vollständig verstehen. Das ist
keinesfalls stoff von SE 2. Ich möchte aber ganz gern,
dass da so ein Bildchen drin ist in der UI.
Ich wollte auch nicht was machen auf dem Level.
Ich habe da schon mal was vorbereitet. Deswegen gehe ich
das hier im Schnelldurchlauf mit euch durch. Wie gesagt,
das ist weder für die Übung noch für die Klausur relevant.
Wir wollen so ein Icon haben und das Ding hat irgendwie Nein.
Das Ding hat einen Ort, wo es liegt.
Um genau zu sein, liegt es hier unter Icons.
Das ist also ein String und wir haben zuerst den Weg zu Icons.
Dann heißt das Bild wieder Artikelname. Nein,
die Straße, plus wenn wir kokatinieren wollen.
Und das ist ein JPEG
Das ist ein Punkt JPEG. So, Semi-Cola und hier
wollen wir es natürlich verknüpfen und nicht einfach nur stumpf hinschreiben.
Schon ist es gut. Jetzt baue ich, jetzt deklariere
ich ein Bufferd-Image. Wie gesagt, das werdet ihr alles
noch nicht verstehen und auch noch nicht verstehen müssen.
Ich mache das alles nur, damit wir dann hinterher
ein Bildchen auch tatsächlich in der UI haben.
You mage
I out.reat
Und das ist Get Class. Get resources, er streamt,
damit hole ich mir im Prinzip von der Adresse,
die ich oben als Image-Essource angegeben habe,
tatsächlich in einem Input-Stream das Bild,
dass es rot wird, macht nichts,
das hatten wir irgendwie letztes oder vorletzte Woche.
Das liegt einfach daran, dass das Ding eine Acception wirft.
Das mache ich mir nochmal eine Sariable,
die halten nämlich
das Geld-Image
Und das ist vom Image hole ich mir eine galierte Instanz,
dann hole ich mir ein Image.
Die Höhe. Und multiplizier sie mit 900. Das habe ich
einfach vorher mal ausprobiert. Das ist um das Bild so zu skalieren.
Das ist dann auch dahin passt, wo es hin soll.
Und jetzt hole ich mir von dem Image nochmal
Die Breite macht damit das Gleiche, also mal neun durch.
100, die Werte sind durch intensives Ausprobieren entstanden.
Und jetzt sage ich zu dem Image auch noch,
das soll smooth skaliert werden.
Das müsst ihr auch noch nicht verstehen.
Und jetzt kann ich mein Icon hier erzeugen,
gleich new
Image, I can. Und da kommt eben dieses Scaled.
Das Geld-Image schreien, natürlich kommt es rein und nicht dahinter.
So, Image muss importiert werden. Okay, und hier
machen wir einfach ohne viel Aufheben Surround with Try Catch.
Genau, deswegen brauche ich nicht. Jetzt kennt er das
natürlich nicht, weil das oben deklariert wurde.
Also schieb ich, ich schiebe am besten
die beiden
Zeilen mit Altfall nach oben, in den Tri-Block.
Und schon funktioniert das. So, als nächstes bauen wir
uns die Labels. Und das machen wir zuerst,
das Icon Label. Das müssen wir haben,
weil wir uns nicht direkt auf den Panel irgendwelche Dimensionen
von Bildern
hinbauen können
Und da kommt das Icon rein. Und dann sagen wir
auch noch zu dem Icon-Label, da können wir es nämlich machen.z.
Uprefer Size. Und das ist ein New... Dein Menschen.
Und genau wie die Buttons hat das 90. Mal 90.
Und dann haben wir noch das Name-Label
Ist auch ein neues Jell-Label. Da kommt der Artikelname rein
. Und auch der kommt wieder rein und nicht dahinter.
Und da spielen wir jetzt einfach mit den Fonts rum.
Und das ist
New Frontstring-Name, da nehmen wir Arial. Style ist Front.bold
und wir wollen 50 Pixel groß das Ganze haben.
So, ich gespeichere mal wieder zwischendurch.
Wir initialisieren uns
die Panels
Die Pendels habe ich deswegen, damit ich
das Ganze nach links und nach rechts floaten lassen kann.
Ich nehme zuerst das Icon-Panel. Punkt. Set.
Layout. Flowlayout. Flowlayouters heißt, es fließt entweder an
die Linke oder an die rechte Seite in unserem Fall.
Und hier schreiben wir dann auch wieder Flow
Nee, out.left, weil wir bei dem alten Panel wollen,
dass es links hängt und zu dem alten Panel können wir
mit at component jetzt unseren Icon Label hinzufügen.
Und dann auch unser Name-Label. Und was ähnliches machen wir
mit dem Button-Panel
Set lay out Manager New. Set lay out New.
Low lay out. Und wir haben wieder Flow. Lay out,
aber diesmal wollen wir, dass es an die andere Seite flirtet.
Ed component zuerst den Ed Button.
Und dann Den Remove-Button, da ist er. So,
und jetzt müssen wir noch unseren Layout-Manager setzen.
Diese Methode. Und da nehmen wir für unser Window Set
Layout. Und da nehmen wir ein Grid Playout
Er bietet uns eine Menge an, wo Grid auch drinsteht.
Wir wollen das richtige Gridlayout und dann können wir jetzt sagen,
wie viele Zeilen, wie viele Spalten es hat.
Zeile kommt immer zuerst. Wir wollen eine Zeile und zwei Spalten
. Und dem fügen wir jetzt einfach die Panels hinzu.
At Component zuerst unser alten Panel.
Und dann unser Button Panel
So, jetzt sollte das soweit eigentlich alles ganz gut sein.
Ich sehe, wir haben hier noch irgendwas rot.
Dann müssen wir mal gucken, wo... Ach ja,
Remove gehört natürlich, wie ich das bei allen anderen auch schon gesagt habe.
Nicht dahinter, sondern da rein. So, aber jetzt,
und jetzt bauen wir uns einfach nur wieder eine Klasse,
mit der wir das ganze Ding starten.
Deswegen nennen wir es langweiligerweise.
Auch wieder Start-up
Lassen uns gleich eine Main-Methode mit erzeugen. Den Konstruktor brauchen wir
auch diesmal nicht. Die geschweifte Klammer hätten wir gebraucht.
So, das können wir löschen. Das können wir löschen
. So, und dann... Einfach New Artikelwerkzeug.
Wir wollen ja den Artikel namen, hier im Konstruktor übergeben.
Unser Artikel ist Clouds
Nochmal ein bisschen Real-Life-Experience-Clouds ist lecker. Gordons zum Beispiel,
damit beizt man Möbel ab, das Zeugs trinkt man nicht.
Man macht schon gar keinen Gin Tonic damit. So,
jetzt wollen wir mal hoffen, dass es auch so läuft,
wie es laufen soll. Ja, da haben wir es
. Wir haben also hier unser Image, unser Icon,
dass wir uns hier aus der Ressource gezogen haben.
Das Ding heißt Clouds, es hat ein Ad und ein Remove-Button.
Das hier ist das Fensterchen, das ist dieser J-Frame
Und um das Ganze jetzt noch mal so ein bisschen langsamer zu wiederholen,
habe ich das Ganze noch mal so ein bisschen zusammengefasst.
Also was haben wir gemacht? Wir haben uns Buttons erzeugt,
Panels erzeugt und Labels erzeugt. Dann haben wir ein Image
irgendwo gehabt. Das ist noch der Mare, auch lecker.
Dann haben wir die Labels initialisiert auf dem alten Label,
auf das alten Label haben wir tatsächlich dann Unser Bildchen macht,
was wir uns auf diese komplizierte Art und Weise aus der Ressource gezogen haben,
auf das Name-Label, da haben wir einfach den Namen draufgeschrieben und das natürlich auch entsprechend mit einem Fondsize gemacht.
Dann haben wir zwei Panels bei den beiden Panels,
die wir erzeugt hätten, Flow-Layout nach links für das Icon-Panel,
Flow-Layout nach rechts für das Button-Panel,
damit wir hier außen unser Bild haben und daneben den Namen und hier das Gleiche,
wir wollen hier außen den Remove-Button haben und dann nehmen den Ad-Button
Dann haben wir das Ganze befüllt mit den Icons, beziehungsweise alten Label und Name-Label.
Also ich kann hier auch nicht direkt auf einen eigenen Panel draufschreiben.
Und bei dem Button Panel haben wir einfach dann die beiden Buttons reingetan.
Und dann haben wir uns ein Fenster erzeugt mit einem Gridlayout.
Grid ist einfach nur ein Gitter, wie der Name schon sagt.
Wir haben eine Zeile, zwei Spalten in die eine Spalte,
haben wir das alten Panel getan und in die andere Spalte, das Button-Pendel.
Es gibt halt von diesen Layouts ganz viele.
Wir haben jetzt kennengelernt, ein Grid-Layout und ein Flow-Playout.
Da gibt es noch einige mehr und üblicherweise werden die
in Klausuren auch ganz gerne mal gefragt. Wie gesagt,
zwei habt ihr jetzt kennengelernt, auch in der Anwendung.
Den Rest würde ich mir aber auch dann in der Vorlesung
von Professor Webisch und auch in den Folien ganz genau angucken,
weil das ist schlicht und einfach auch mal relativ beliebtes Klausurthema.
Das, was von mir für das erste Video und in
einem zweiten Video werden wir dann das nehmen,
was wir uns hier gebaut haben,
noch ein paar mehr davon erzeugen und dann für unser Barprojekt
verwenden.
Also bis dann