Wat is een grafische gebruikersinterface (GUI)

theorie
Wat is een grafische gebruikersinterface (GUI)?
GUI is een Engelse afkorting voor Graphical User Interface, oftewel
grafische gebruikersinterface.
Het is de term voor het ‘bedieningspaneel’ van een computerprogramma.
Het vormt de brug tussen de computer en de gebruiker. Het maakt
gebruik van grafische elementen die het gebruik van het programma
moeten vergemakkelijken. Grafische elementen zijn o.a. menu’s,
knoppen, selectielijsten, tekstvelden, aanvinkboxjes (checkboxes) en
afbeeldingen.
Waarom een GUI?
Een GUI heeft de volgende functies, in willekeurige volgorde:
•
•
•
•
Een grafisch overzicht geven van de beschikbare programmafuncties
Het bestuurbaar/bedienbaar maken van een applicatie
Gebruikersinput vereenvoudigen
Output weergeven
Waaruit is een GUI opgebouwd?
De onderdelen van de Java−GUI vormen een complexe klassenhierarchie,
zoals je in de onderstaande figuur kunt zien.
1 van 8
theorie
Figuur 1
Op het op één na hoogste niveau vind je de belangrijkste.
Component De Component ‘s zijn de ”echte” dingen, die je ook als een soor fysiek object
ziet. De klasse Component heeft diverse subklassen als Button, Checkbox,
TextFiel, Textarea, Label enz.
De rest is nodig om ze te maken (kleur, tekst, positie, …).
De Component’s vormen ook nog een grote klasse.
Container
Een container behoort tot de klasse Component en kan weer andere dingen
‘in zich’ houden. Componenten worden gevat in een container dus containers
bevatten componenten.
2 van 8
theorie
Applet
Layout
manager
Een applet is een voorbeeld van een container maar ook een frame zoals je in
de imageviewer hebt gezien.
Iedere container heeft een layoutmanager die bepaalt hoe de verschillende
componenten ten opzichte van elkaar worden gepositioneerd.
Er zijn verschillende manieren om iets zichtbaar te maken zoals je kunt zien
in de bovenstaande tekening. Dialogen worden bijvoorbeeld gebruikt om de
gebruiker een bericht mee te geven. Applets openen in de browser en kunnen
via html pagina’s zichtbaar worden gemaakt op het internet.
Window
Een Window, ook een soort Container, is een gebied zonder menu of
titelbalk, waarop componen ten geplaatst kunnen worden. Het wordt
voornamelijk gebruikt voor pop-up berichten.
Frame
Een Frame is in principe een Window, maar dan met alle gebruikelijke
eigenschappen van een zelfstandig venster: titelbalk, randen,
minimimaliseerr/maximaliseer/afsluit-knoppen rechts bovenin.
Verder kan een Frame een aangepaste muiscursor hebben, eventueel
een menubalk en een icoon in de titelbalk.
Een Frame wordt doorgaans gebruikt voor applicaties (in tegenstelling
tot applets).
AWT/Swing Meestal zullen we gebruik maken van de nieuwste grafische omgeving
van Java, Swing, gebruik zullen maken en niet de wat oudere en meer
beperkte AWT (Abstract Window Toolkit).
Elke grafische applicatie met Swing is een extensie van een JFrame of een
Japplet.
Swing is, net als AWT, een GUI-toolkit en onderdeel van de Java Foundation
Classes (JFC). Het is geschreven in pure Java-code, waardoor Swingapplicaties er hetzelfde uitzien op elk platform. Swing wordt beschouwd als de
opvolger van AWT, maar eerder als een soort uitbreiding dan een vervanger.
Immers, Swing’s JComponent klasse erft (extends) alle eigenschappen van
AWT’s Component klasse.
Om onderscheid te maken tussen de twee toolkits, worden Swing’s
componenten voorafgegaan door een ‘J’, als in: JButton, JTextField, etc.
Om iets zichtbaar te kunnen maken moet je een aantal dingen doen:
•
•
•
Je moet het object maken (met new).
Als je de grootte niet bepaalt, blijft het een heel klein venster.
Met onzichtbare vensters kun je echt heel weinig.
Subklasse
In Java worden klassen afgeleid van weer andere klassen.
De afgeleide klassen worden subklassen (derived classes) genoemd.
Superklasse Zij zijn afgeleid van een andere (super)klasse.
De subklasse bevat vaak specifieke methoden voor de desbetreffende klasse.
Wanneer vervoermiddel() de superklasse is, kunnen bijvoorbeeld auto() en
fiets() subklassen zijn.
De subklasse erft alle velden en methoden van de bijbehorende superklasse.
In de leertaken Dialogen is Jframe de superklasse van Dialoogvenster.
Dat betekent dat Dialoogvenster constructormethoden van JFrame kan
gebruiken. Constructormethoden van Jframe vind je in figuur 3.
3 van 8
theorie
Super()
Een verwijzing naar een constructor van de superklasse gebeurt door
het keywoord super() of super(parameterlijst) waarin de parameterlijst
verwijst naar de parameters in een constructormethode van de
superklasse.
Overerving Het bovenstaande wordt overerving genoemd.
Overerving betekent dus dat nieuwe klassen worden gebaseerd op
andere, bestaande klassen. Dit leidt tot hergebruik van code en brengt
klassen met elkaar in verband.
Dialog
Een Dialog is een pop-up dialoogvenster, onderdeel van Window, dat
berichten (in de vorm van waarschuwingen, vragen of foutmeldingen)
kan weergeven en de gebruiker kan vragen om actie (bevestiging of
een keuze).
Een Dialog kan modal zijn, dat wil zeggen dat de Dialog op de
voorgrond blijft staan totdat de gebruiker actie onderneemt.
Ondertussen kan de gebruiker geen andere vensters selecteren of
aanklikken. Deze functionaliteit is in te bouwen met de
programmeerinstructie setModal.
FileDialog
Een FileDialog is een voorgedefiniëerde Dialog, bestemd voor interactie
met het bestandssysteem van de computer. Het kan een Open of
Opslaan-functie hebben (al naar gelang de wens van de programmeur).
FileDialogs worden in principe alleen gebruikt in applicaties.
Applets kunnen door ingebouwde veiligheidsmaatregelen
communiceren met het bestandsssysteem van de computer.
Menu
niet
Een Menu is te vinden bovenaan een applicatievenster en huisvest
diverse opties. Het bestaat uit een balk met categorieën, met daaronder
een lijst specifieke opties, de MenuItems, al dan niet van elkaar
gescheiden door een lijn (Separator).
Optioneel kan een Menu een tear-off mogelijkheid bevatten. Dat wil
zeggen dat het menu weg te slepen is van zijn oorspronkelijke locatie
en overal neergezet kan worden. Dit wordt echter niet door elk platform
ondersteund.
Eveneens kan een Menu gebruik maken van keyboard short-cuts,
oftewel sneltoetsen.
figuur 2
4 van 8
theorie
In het programma Dialoogvenster_1.java bevat de titelbalk van het menu
geen tekst. Het is handig om een titel mee te geven aan een
dialoogscherm.
De klasse Dialoogvenster is een uitbreiding van de klasse JFrame. In de
klasse Dialoogvenster staat geen aparte methode gedefinieerd welke een
titelbalk kan plaatsen. Dat hoeft ook niet want in Java kan worden
verwezen naar de superklasse, in dit geval Jframe.
Figuur 3: Constructor summary
Overloading In figuur 3 zie je dat er verschillende constructormethoden jet dezelfde
naam Jframe() bestaan.
Het naast elkaar bestaan vann methoden met dezelfde naam maar met
verschillende parameters (zie bovenstaande figuur) heet overloading.
Nog meer componenten…………….
Canvas
De Canvas klasse is slechts een leeg gebied waarop grafische
elementen of speciale componenten geplaatst kunnen worden, zoals
afbeeldingen en getekende vormen en lijnen, die eventueel klikbaar
gemaakt kunnen worden door de muisklikken te registreren en te
koppelen aan een event.
Panel
Een Panel is een soort Container, een rechthoekig gebied waar andere
componenten in geplaatst kunnen worden. Het is de grafische
bouwsteen van een applet. Componenten zoals bijvoorbeeld Buttons
worden gepositioneerd op het Panel, welke weer getoond wordt door de
browser of applet viewer.
Label
Wellicht de meest eenvoudige component. Het doet niets meer dan een
regel tekst op het scherm zetten, bijvoorbeeld voor de beschrijving van
een tekstveld of keuzeknop.
De Label component heeft enkele attributen die aanpasbaar zijn:
lettertype (Font), lettergrootte en de kleur.
TextComponent: TextField en TextArea
De TextComponent klasse huisvest twee componenten: TextField en
TextArea. Beiden zijn bedoeld voor gebruikersinvoer en -uitvoer.
5 van 8
theorie
Met een setEditable instructie kun je aangeven of het tekstveld bestemd
is voor invoer of uitvoer.
TextField kan maximaal één regel tekst aan invoer verwerken of tonen,
terwijl TextArea meerdere regels kan verwerken of tonen.
Deze componenten hebben o.a. de aanpasbare attributen lettertype,
lettergrootte en kleur.
De methode main
public static void main(String args [ ] ){
}
De main methode is een methode die ervoor zorgt dat elk java
programma start.
De methode is ‘public’ omdat het toegankelijk moet zijn voor de Java
Virtual Machine om de executie van een programma te starten. De Java
Virtual Machine is de toepassing die het java programma uitvoert.
De methode is ‘static’ omdat er geen instantie nodig is voor de executie
van een programma. Voor iedere andere methode aanroep is een
objectinstantie noodzakelijk.
Een klasse zou niet gerund kunnen worden zonder de creatie van een
objectinstantie van die klasse als de main methode niet static was.
De methode main is void. Wanneer de main methode is uitgevoerd,
stopt het programma. Om die reden kan de main methode geen data
teruggeven. Een void methode heeft geen terugkeer (return) waarde.
De parameter String args[ ] : de gebruiker mag parameters toevoegen.
This
Binnen een methode of een constructormethode, verwijst het woord ‘this’
naar het object wiens methode of constructor wordt aangeroepen.
In ons voorbeeld staat in de body van de constructor methode
class CirkelCanvas extends Canvas
{
JPanels_1 fr;
CirkelCanvas(JPanels_1 fr)
{
this.fr = fr;
}
De regel this.fr = fr; is een assignment statement (een
toekenningsopdracht). Het wijst de waarde aan de rechterkant van het ‘=’
teken toe aan de variabele aan de linkerkant.
Een algemene vorm van een toekenningsopdracht ziet er als volgt uit:
6 van 8
theorie
<veranderlijke> = <uitdrukking>
De <uitdrukking> kan een constante waarde zijn (bijv. int temperatuur = 20)
maar ook een veranderlijke waarde.
In het cirkelprogramma wordt deze assignment gebruikt om duidelijk te
maken dat hier wordt verwezen naar het object JPanels_2 fr. Eigenlijk staat
er dus dat met de parameter JPanels_1 fr in de constructormethode verwijst
naar de instantie JPanels_1 fr in de klasse CirkelCanvas.
Event afhandeling
Er zijn een aantal klassen betrokken bij de afhandeling van events.
java.awt.event
Interface ActionListener
De klasse die geintereseerd is om een actie (ActionEvent) uit te voeren
implementeert de bovenstaande interface, Het object dat de actie moet
uitvoeren roept de methode actionPerformed (Action event e) aan.
Het object in de interface waarop de event (gebeurtenis) plaatsvindt krijgt de
ActionEvent.
java.util
Class EventObject
java.lang.Object
java.util.EventObject
(Deze klasse bevat de methode: getSource() zoals je hieronder kunt
lezen. Deze methode vraagt op welk object de gebeurtenis moet
worden afgehandeld)
getSource
public Object getSource()
The object on which the Event initially occurred.
7 van 8
theorie
Containers
Een container is een component die andere componenten in zich heeft. Applets en
Windows zijn voorbeelden van containers.
Een toplevelcontainer is het hoogste niveau container.
Swing definieert twee typen containers.
Het eerste type wordt Top-level containers (JFrame, JApplet, JWindow en JDialog)
genoemd. Deze top-levelcontainers erven niet van Jcomponent (Zie figuur 1). Zij
erven wel over van de AWT klassen (AWT is de voorloper van Swing).
Een top-level container is de hoogste container in hierarchie en zit in geen enkele
andere container. Iedere container moet beginnen met zijn top-levelcontainer. De
meest voorkomende in applicaties zijn JFrame en JApplet.
Een tweede type containers zijn de containers die wel van Jcomponent overerven. Zij
worden in figuur 1 niet genoemd. Het zijn JPanel, JScrollPane en JRootPane. Dit type
container kan voorkomen in een andere container. Zij worden veel gebruikt om
componenten te organiseren.
ContentPane
Iedere top-level container heeft een ContentPane in zich welke de visuele
componenten van de GUI bevat.
Met de methode add voeg je componenten aan het ContentPane toe.
8 van 8