Wat is een grafische gebruikersinterface (GUI)?

Transcriptie

1 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

2 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

3 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 Frame 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. 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

4 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 FileDialog 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. 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 niet communiceren met het bestandsssysteem van de computer. Menu 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

5 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 Panel Label 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. 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. 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

6 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

7 <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

8 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