De pingpongbal

Werkcollege Elektrotechniek

Alle info aangeduid met  is niet noodzakelijk en enkel voor de super-geïnteresseerden

Java-experten
      Isabel Gonzalez:    igonzale@etro.vub.ac.be   Ke.3.15   tel: (02/629) 2969
      Hans Ingelberts:   hingelbe@etro.vub.ac.be   K.5.328A   tel: (02/629) 2930

In het werkcollege elektrotechniek "de pingpongbal" is het de bedoeling een pingpongbal te laten zweven in een doorzichtige kolom op een ingestelde hoogte. De pingpongbal kan je doen zweven door hem met een ventilator omhoog te stuwen of aan te zuigen. De hoogte kan je meten met een ultrasone sensor. Om de bal stabiel te krijgen op een ingestelde hoogte zal je een goede regelkring moeten maken. Deze regelkring kan je programmeren in een microcontroller (MCU). Om op een gebruiksvriendelijke manier je regelkring in te kunnen stellen zal je ook nog een grafische user interface (GUI) in java moeten programmeren. Dit java programma communiceert met je microcontroller over een USB interface. Studenten die graag programmeren kunnen ook nog via java een webcam aanspreken en zo de instelhoogte van de bal bepalen door dit met je hand op de kolom aan te duiden en de beelden van de cam te analyseren. Studenten die liever extra aandacht besteden aan elektronica kunnen hun regelkring ook volledig opbouwen uit analoge elektronica (opamps e.d.).

documentatie - installatie - evaluatiecriteria - oefening vrienden - oefening USB-muis - oefening bordje - oefening GUI - oefening Visual Editor

Documentatie

• Java tutorial -> Kom stap voor stap alles te weten over Java!
• Java Swing Tutorial -> Goed startpunt om zelf Swing te leren (maar onderaan tonen we de Visual Editor die veel codeerwerk voor u gaat doen)
  

• Java documentatie (op de parallel website onder documentation)

  • Interessant voor project: Java spelregels (1 pagina), Java Summary (7 pagina's)

    • Java API Documentatie

  • Eclipse documentatie en tips

  • Visual Editor plugin of  Google WindowBuilder Pro
    

  • Printen van bytes in hexadecimaal stelsel:

    • System.out.format("%02x", 255);  (met %x geef je aan dat er een argument volgt dat hexadecimaal geprint moet worden, de 02 zorgt ervoor dat je een nullen schrijft, bvb 0f ipv gewoon f)

    • De java Formatter klasse heeft uitgebreide mogelijkheden om waarden af te drukken.

    • Je kan zo ook formatteren naar string, bvb:

    •             StringBuilder sb = new StringBuilder();
              Formatter formatter = new Formatter(sb, Locale.US);
              formatter.format(" %02x %02x %02x", 15, 91, 100);
              String string = sb.toString().toUpperCase(); // omzetten naar je string
              System.out.println(string);

• LibUsbJava documentatie

• USB documentatie

• Alles uitgelegd in a een notendop: USB in a nutshell
• De USB specification zelf
  

Programma's

• Zelf je Java programmeer omgeving installeren en instellen
  

  • Zorg er voor dat je de Java Runtime (jre) en Java Development Kit (jdk) geinstalleerd hebt. (32bit versie vereist voor USB communicatie en webcam!!!).
    

  • Installeer Eclipse, hiervoor moet je enkel de files downloaden en extracten in een folder (niets installeren dus). Er wordt een eclipse folder aangemaakt waarin je het programma vind.

    • Kies "Eclipse IDE version for Java Developers"  in de download sectie.

    
    
  • Je bent nu klaar om Java programma's te schrijven. Om USB communicatie en media toepassingen (zoals de webcam) mogelijk te maken zijn er nog enkele extra's vereist.
  • USB communicatie mogelijk maken
    
  • Download en installeer libusb-win32  (download de binaries in een zip of de exe-installer)
    
  • Download de libusbjava.dll en plaats deze in je system32 folder (werkt niet op de ETRO-pc's) of in je projectfolder (werkt altijd)
    
  • Download de ch.ntb.usb-x.x.x.jar java library en plaats hem in je java/jdk/jre/lib/ext folder, je projectfolder of gelijk welke folder waar je hem weet terug te vinden.
  • Wanneer je in een eclipse project gebruik wilt maken van libusb ga dan naar properties van je project -> java build path -> libraries -> add external jars en voeg de library toe die je gedownload hebt.
  • Media toepassingen mogelijk maken
  • Download en installeer het Java Media Framework (JMF) (Net zoals libusb bestaat deze installatie uit een reeks dll libraries, jar java libraries, test en configuratieprogramma's).
  • Wanneer je in een eclipse project gebruik wilt maken van JMF ga dan naar properties van je project -> java build path -> libraries -> add external jars en voeg all .jar bestanden toe in de lib folder van JMF (op win7 te vinden in C:\Program Files (x86)\JMF2.1.1e\lib)
  • Soms is het nodig de dll's in de projectmap te zetten. Om dit te kunnen doen moet je tijdens de installatie van JMF er voor kiezen de dll's niet in de system folder te plaatsen.
                                Je vindt ze dan terug in de JMF map in program files en kan ze van daar kopieren.
  • Soms is het ook nodig je webcam eerst te laten detecteren via de JMF Registry tool (te vinden in C:\Program Files (x86)\JMF2.1.1e\bin of via de startmenu). Ga naar het tabblad capture devices en klik op "Detect Capture Devices".
  • Een voorbeeld Java programma om de beelden van de webcam op een schermpje te tonen, kan je hier downloaden. The FrameGrabber klasse zal de beelden systematisch ophalen van de webcam. De MainWindow vraagt om de zoveel tijd het huidige beeld van de FrameGrabber op, en toont het in het scherm. Gebruik de FrameGrabber klasse zoals ze is, en breidt de MainWindow/RGBImage klasse uit om je ''hand hoogte'' detectie algoritme te schrijven. Uitleg over de code, en van een detectie algoritme kan je vinden in de slides.
    
  
  

Evaluatiecriteria van je code

Dit zijn de evaluatiecriteria:

1. Correctheid

2. Begrijpbaarheid: gebruik logische namen, indenteer correct (!!) en kuis je code op (!!).

3. Flexibiliteit: aanpasbaarheid & uitbreidbaarheid

4. Herbruikbaarheid: delen van je code kunnen gebruikt worden om andere problemen op te lossen.

Om dit te bereiken heb je ten eerste de principes van gestructureerd programmeren (zie Modula-2 project)

1. Duidelijke naamgeving (dan is niet veel documentatie nodig). Tip: gebruik Refactor => Rename in Eclipse om namen in 1x aan te passen over het gehele project.

2. Documenteer niet-triviale code. Er is wel gevraagd een handleiding te schrijven. Die moet sowieso de structuur van je programma uitleggen, voor bepaalde details kan je naar de code verwijzen. Er moet zeker een schema met de codestructuur gedocumenteerd worden!!

3. Geen redundantie, geen dubbele code.

Ten tweede heb je de mogelijkheden die Object-geöriënteerd programmeren biedt:

1. Encapsulatie: een object vormt een logisch geheel die een bepaald aspect van je probleem oplost. Je steekt niet alles in 1 object, maar verdeelt de verschillende verantwoordelijkheden over verschillende objecten (zo bekom je duidelijke en herbruikbare code). Je zorgt ervoor dat niet alle objecten met elkaar praten, want dan krijg je spagetticode.

2. Overerving (inheritance): gemeenschappelijke onderdelen worden in hoofdklasses gestoken, specificiteiten in subklasses. Zo bekom je herbruikbaarheid en flexibiliteit.

3. Polymorfisme & abstractie: een abstracte klasse of een interface definieren een abstract concept. Dit concept kan dan gebruikt worden in delen van je programma, die onafhankelijk van de concrete invulling van het concept worden! Dit zorgt voor de uitbreidbaarheid van je programma. Een interface definieert wat een bepaald deel van je programma moet kennen van een ander.

Tracht flexibiliteit en herbruikbaarheid te bereiken voor de volgende aspecten

1. Maak een abstractie van je regelaar in Java: Je regelaar zit in de MCU en niet in Java. Toch kan je in java ook regelaar klasse maken. Met je GUI stel je die java regelaar in. Je java regelaar zorgt er voor dat de juiste instellingen bij de echte regelaar geraken.

2. Scheiden GUI - Regelaar: Tracht je GUI code gescheiden te houden van je regelaar. Misschien verandert je regelaar op een dag en dan kan je de GUI gewoon houden, of omgekeerd.
3. Scheiden Regelaar - USB communicatie: Probeer ook hier beide gescheiden te houden. Probeer je in te beelden dat je op een dag niet meer met USB maar met firewire zou werken...

Oefeningen   (Documentatie standaard Java packages)

   Voorbeeld 'Vrienden': wat is object-geöriënteerd programmeren?

1. Download de klasse Persoon ergens op je pc.

2. Start Eclipse , hij zal je vragen waar je je workspace wilt hebben. Maak een folder bij jou files (bvb 'java'). Vink 'Remember my decision' aan. Eclipse bied je dan een welkom-pagina met een introductie aan, je kan die skippen met (rechtsboven).

3. Maak een nieuw java projekt in Eclipse en geef het een naam. Eclipse maakt een folder met die naam aan.

4. Importeer de Persoon.java file mbv Import (File => Import => General => File System => Browse)
   

• Alternatief: Download de file direct onder de map src in de project map gemaakt door Eclipse. Selecteer vervolgens het projekt en druk F5 om te refreshen, jou file verschijnt nu onder Default Package. Open hem.



5. Maak een klasse Vrienden met een Main method waarin je aanmaakt:
• Bij het maken van een nieuwe klasse (met ) selecteer je het toevoegen van een 'public static void main(String[] args) '.
• anders moet je die method zelf toevoegen:

• 4 personen: jan, piet, an, elke
• jan's vriend is piet, piet's vriend is an, an's vriend is elke
• check of jan an kent (print af).
• maak an geen vriend meer van elke en test nog eens of jan an kent.
  

1. Run de Main van Vrienden  met (je moet wel ergens in de file te staan)

    Uitbreiding vrienden-voorbeeld: Leugenaars en Ontkenners

• Oefeningen:

  • Maak een subklasse Ontkenner voor een persoon die steeds ontkent iemand te kennen. Maak van bvb Elke een Ontkenner.

  • Voeg een klasse Leugenaar toe (iemand die altijd liegt, dit is natuurlijk ook een persoon) en maak van Piet een leugenaar.

  • Print de vrienden-keten af: "Jan heeft als vriend Piet heeft als vriend xxx"

  Spelen met een USB muis (een USB HID class device)

• Installatie instructies:

  1. Zorg er voor dat libusb-win32 en libusbjava correct geinstalleerd zijn. (zie onder "Programma's" op deze pagina)
     

  2. Gebruik de "Inf Wizard" van libusb om je USB device compatibel te maken met libusb
     

  3. Start Eclipse , hij zal je vragen waar je je workspace wilt hebben. Maak een folder bij jou files (bvb 'java'). Vink 'Remember my decision' aan. Eclipse bied je dan een welkom-pagina met een introductie aan, je kan die skippen met (rechtsboven).

  4. Maak een nieuw java projekt in Eclipse en open de project properties. Ga naar Java Build Path, selecteer tabblad "Libraries", Add external Jars en voeg ch.ntb.usb-x.x.x.jar toe. (normaal gezien te vinden in je java/jdk/jre/lib folder). Deze library stelt je USB functionaliteit ter beschikking. Zonder deze library kent java niets van USB!

• Oefeningen:

  In de documentatie van libusbjava kan je zien welke classen de library allemaal ter beschikking stelt. Hiervan gaan we enkel de classen USB en Device gebruiken.
  • USB is een class die heel het USB systeem van je computer voorstelt. Het heeft enkel static methods, je moet dus geen object instatieren om deze methods aan te spreken. Waarom zou je ook? USB stelt héél de USB van je computer voor. Het zou dus onzin zijn om twee USB objecten te hebben. USB heeft methods om de verschillende USB bussen en USB devices die aan je systeem verbonden zijn op te vragen.
  • Device is een class die een USB device voorstelt. Zo kunnen er zeker meerdere zijn per computer dus moet je per USB Device één Device object maken. Een Device heeft methods om het te openen, sluiten, resetten en op verschillende manieren data te sturen of te ontvangen van of naar het device.
  
  
  1. Maak een nieuwe klasse aan en selecteer "public void main(String[] args)".
  2. Gebruik een methode van de USB class om een Device te bekomen dat geassocieerd is met je muis. Vendor ID en Product ID kan je terugvinden in je device manager.
            Het Vendor ID is het hexadecimaal getal dat achter VID staat, analoog voor het Product ID.
              
• 3. Je Device weet nu met welke fysiek USB device je het wilt associeren maar dit gaat pas gebeuren wanneer je het Device ook werkelijk opent.
            Je kan een device openen met verschillende configuraties en je device kan meer dan 1 interface ter beschikking stellen. Voor onze muis volstaat de default configuratie (1) en moet er geen alternatieve configuratie zijn (-1). Ook heeft onze muis enkel interface 0 ter beschikking. Kijk of je het device kan openen zonder errors.
  
  
  4. Aan een USB device kan je via controle transfers rapporten opvragen. In deze rapporten kan vanalle informatie over je device zitten. Zo is er voor een muis ook een rapport dat verslag uitbrengt over de toestand van de muisknoppen en de verplaatsing van de muis.
            Wanneer je via een controle transfer rapporten opvraagt hebben de argumenten volgende betekenis:
• requestType: Dit is 1 byte die volgende informatie bevat:     Bit 7: Request direction (0=Host to device - Out, 1=Device to host - In).
                                                                                                 Bits 5-6: Request type (0=standard, 1=class, 2=vendor, 3=reserved).
                                                                                                 Bits 0-4: Recipient (0=device, 1=interface, 2=endpoint,3=other).
• request: Dit is de identificatie van de request: 1 byte
• value: Dit zijn 2 bytes waarvan de twee meest significante byte het type raport is en de andere de identificatie van het raport.
• index: Dit is het nummer van de interface over dewelke je de request wilt sturen
• data: De data die je meestuurt of lege data in dewelke het Device iets mag zetten als antwoord.
• size: De grootte (in aantal bytes) van de data die je meestuurt of terug verwacht
• timeout: De tijd in milliseconden die je wacht voor je beslist dat de transfer mislukt is
• reopenOnTimeout: een boolean: Als de transfer te lang duurde en dus als mislukt beschouwd wordt, wil je dan het device opnieuw openen? (dit heeft enkele herinitialisaties tot gevolg die het mogelijke probleem kunnen oplossen)   

                           Het rapport dat we willen opvragen is 3 bytes groot, is van het type "Input" (0x01) en heeft ID 0x00  Het opvragen van rapporten is een controle request met ID 0x01 (GET_REPORT). Het type van request is Device naar Host, class type, interface recipient)
                            (Deze informatie komt uit de documentatie op www.usb.org, er is aparte documentatie voor de USB standaard en voor dingen die specifiek zijn aan de HID class (Human Interface Device (zoals muis, keyboard, pointers, barcode readers,...)))

                            -> Voer een controle transfer uit die het gewenste rapport opvraagt.

                5. Print de opgevraagde informatie af in de console en probeer uit te vissen welke bytes wat voorstellen door wat met de muis te bewegen en knoppen te gebruiken en te kijken hoe de rapporten veranderen.             

        Jan &Tibi, the game: Multiplayer game met 2 muizen in één pagina Java code 
                In dit spel moet Tiberghien, Jan te pakken krijgen!
                Tiberghien bedien je met één muis, Jan met een andere.
                        -> Download de code met de nodige images
                Om het te spelen moet je één muis kunnen aanspreken via libusb zoals in de oefening hierboven en vergeet de vender en product id van jouw muis niet in te geven

                Dit spel is in enkele uren gemaakt en nog lang niet zo leuk als het zou kunnen zijn. Analyseer de code, verbeter het spel, stuur het ons, wordt onsterfelijk!

• Eén muis wordt rechtstreeks aangesproken zoals in de vorige oefening, de andere muis lees je uit met de standaard Java mouseMotionListener class die de muiscoördinaten uitleest via het bestuuringssysteem.     
  
• Dit spel maakt gebruik van Threads (Runnable & TimerTask). Zoek op wat Threads zijn en bekijk hoe ze in dit spel gebruikt worden.    
  
• Voer eventueel nog wat Threads toe die met het spel interageren, laat je gaan!    
• De collision detection kan veel beter.
• Die witte flash wanneer Tibi, Jan vangt, die is eigenlijk ook maar saai.
• Misschien moet het een heel ander spel worden (Air Hockey?). Zolang de hoofdrolspelers maar dezelfde blijven!
  

    Communicatie met de MCU bordjes (Een USB vendor specific device)

• Installatie instructies:

  1. Zorg er voor dat libusb-win32 en libusbjava correct geinstalleerd zijn. (In de etro pc zaal is dit het geval, anders zie onder "Programma's" op deze pagina)
     

  2. Start Eclipse , hij zal je vragen waar je je workspace wilt hebben. Maak een folder bij jou files (bvb 'java'). Vink 'Remember my decision' aan. Eclipse bied je dan een welkom-pagina met een introductie aan, je kan die skippen met (rechtsboven).

  3. Maak een nieuw java projekt in Eclipse en open de project properties. Ga naar Java Build Path, selecteer tabblad "Libraries", Add external Jars en voeg ch.ntb.usb-x.x.x.jar toe. (normaal gezien te vinden in je java/jdk/jre/lib folder). Deze library stelt je USB functionaliteit ter beschikking. Zonder deze library kent java niets van USB!

• Oefeningen:

  • Maak een nieuwe klasse aan en selecteer "public void main(String[] args)".

  • Probeer zoals bij de muis het MCU bord te openen als USB Device (dit bord heeft een andere Vender en Product ID)

  • Probeer via controle transfers ledjes aan en uit te schakelen
    

    
    
    • De ledjes zijn gemapt ap adres 8. Op dit adres zit een floating point value bestaande uit 4 bytes (32 bits). De ledjes komen overeen met de minst significante bits (b0 en b1).
      

    • Let op, deze keer schrijf je iets naar het device

    • Let op, dit is geen class device maar een vendor specific device

    • De request ID is vastgelegd als 0x01

    • Het adres wordt meegegeven als value van de controle transfer, deze value bestaat uit twee bytes waarvan het de meest significante is die het adres bevat, de andere is "don't care"
      

    • Ook dit device heeft maar 1 interface

  
  
  • Maak een nieuwe klasse "LedBord" aan die de USB functionaliteit verbergt
  
  
  • Zorg er voor dat wanneer een object van deze klasse geïnstatieerd wordt, er een USB device geopend wordt dat gelinkt is aan het MCU bord
    
  • Geef deze klasse twee methods, ledAan(int led) en ledUit(int led) en zorg dat je via deze methods de led met nummer "led" aan en uit kan zetten.
  • Maak nu vanuit je main method een LedBord object aan en gebruik zijn methods om leds aan en uit te schakelen
    
                           -> Een programmeur die niets van USB of de interne werking van het MCU bord kent kan nu jouw klasse gebruiken om leds aan en uit te schakelen!!!
  

• Voor een GUI-applicatie gaan we gebruik maken van Visual Classes van de Visual Editor (hier wat documentatie).

  • Maak een nieuwe klasse, maar kies Visual Class (via zwart pijltje naast ). Kies een Frame (is een applicatie met window) en selecteer "public void main(String[] args)".

    • Nu zie je je window grafisch en ook de gegenereerde code van de JFrame klasse.

  • Voeg componenten toe via de Palette (zie je rechts van je scherm): knoppen, sliders, ...

  • Voeg akties toe aan de knoppen door met rechtermuis op het component te klikken en Events -> actionPerformed (of een andere actie) te kiezen. Je krijgt dan de mogelijkheid om eigen code toe te voegen.

    • Voeg een button toe waarmee je één van de leds aan en uit kan zetten. Doe dit met een LedBord object.
      

  • Zelf tekenen doe je door de void paint(Graphics g) van je JFrame te overschrijven. Deze methode wordt door Windows opgeroepen.

    • Vergeet niet super.paint(g); op te roepen zodat je buttons en andere componenten getekend worden.

    
    

    De essentie van java GUIs

    Een GUI bestaat componenten, hierarchisch geordend: componenten worden geplaatst binnen in een container, een container kan in een container staan. Elk component is een object met eigen attributen en methodes. Windows zal events triggeren telkens er iets gebeurd, zoals een muisklik.De events vang je op met listeners die 'luisteren' naar bepaalde events. Het ordenen van de componenten gebeurt via de layout manager van een container. Een JPanel kan je als container gebruiken waarop je andere componenten kan plaatsen. Een JPanel kan je ook gebruiken voor te tekenen. Deze paintComponent(Graphics g) methode wordt opgeroepen door windows om een component te tekenen. Deze wordt elke keer opgeroepen als Windows denkt dat het nodig is, bvb als je je window herschaalt. Je kan ook expliciet aangeven dat een component of de hele window hertekend moet worden. Dit doe je door de repaint() methode op te roepen van het component of de frame. Als je de painComponent(Graphics g) methode overschrijft gebruik je het Graphics object om tekencommando's te versturen.

    De standaard java-objecten voor GUIs staan in de javax.swing package (de awt package is een verouderde package voor dit). De API van de swing package laat je alle mogelijkheden zien, maar is nogal uitgebreid en afschrikwekkend in het begin. Gelukkig vind je bij elke belangrijke klasse een link naar een handige tutorial.

    
    

  Oefening om GUIs te leren maken

• Op de parallel java-pagina vind je geavanceerde voorbeelden
• Hier nogmaals de java API
  

• Bestudeer de volgende 2 voorbeelden:

• SimpleFrameNoLayout.java
  
• SimpleFrameLayout.java
  

• Maak een window en voeg de volgende componenten met functionaliteit toe:
• Een stop knop (JButton): sluit de applicatie. Dit doe je met System.exit(0);
  
• JComboBox waarbij je de gebruiker tussen verschillende kleuren laat kiezen.
• Geef een array van kleuren mee (bvb Color.red, Color.blue, Color.black, Color.yellow)
  
• Een label (JLabel) die je voor het volgend veld zet met een tekst (bvb "geef een getal")
  
• Een inputveld waar de user een getal kan invoeren.
• JTextField
• Overschrijf de actionPerformed methode van de ActionListener die je toevoegt aan het veld
• Omzetten naar integer doe je met int x = Integer.parseInt(String); waarbij je de ingegeven string opvraagt aan het ActionEvent met e.getActionCommand()
• Je moet de NumberFormatException opvangen. Die error wordt 'gethrowd' als een ongeldig getal wordt ingevoerd.
• Een panel waar je op kan tekenen
• JPanel
• Zet achtergrondkleur met setBackground(Color.white);
• Overschrijf de methode public void paintComponent(Graphics g) om te tekenen
• Tekenen doe je met het Graphics object: bvb g.drawOval(100, 100, 200, 200);  de kleur verander je met g.setColor(Color.red); 
  
• geef de kleur mee gekozen door de combobox.
• gebruik de ingegeven waarde voor de plaats waar je tekent.
• Hertekenen roep je op met de repaint(); methode
  

   Oefening om GUIs te leren maken mbv de Visual Editor (een plugin voor Eclipse) (hier wat documentatie + hoe te installeren).

• Maak een nieuwe klasse, maar kies Visual Class (via zwart pijltje naast ). Kies een Frame onder de Swing componenten (is een applicatie met window) en selecteer "public void main(String[] args)". Een frame is een window.

  • Nu zie je je window grafisch en ook de gegenereerde code van de JFrame klasse. De visual editor genereert dus java code. Best kom je niet aan die code, dan zal de Visual Editor in de war geraken. Wel kan je code toevoegen.

• Voeg GUI componenten toe via de Palette (zie je rechts van je scherm) of via de knop : knoppen, sliders, ... De Swing componenten zijn de basiscomponenten.

• Kies een button, geef hem een naam en plaats hem in de frame.
• De tekst die op de button getoond moet worden edit je door op de button te klikken.
  
• Voeg akties toe aan de knoppen door met rechtermuis op het component te klikken en Events -> actionPerformed (of een andere actie) te kiezen. Je krijgt dan de mogelijkheid om eigen code toe te voegen.
• Voor een quit button voeg je de actie System.exit(0); toe.
  
• Bij het plaatsen geeft hij u 5 mogelijke posities, deze worden aagegeven door de layout van het frame. De layout kan je veranderen in de Properties tab van je frame (er is ook een icoontje voor voorzien: ). De Properties tab geeft je alle eigenschappen van je component, die kan je daar veranderen.
• Met Borderlayout zet je componenten van boven (NORTH), links (WEST), rechts (EAST), onderaan (SOUTH) of in het midden (CENTER).
• Met Boxlayout worden de componenten horizontaal of verticaal geordend.
• Met GridLayout klik je de componenten vast aan een grid.
• Met Flowlayout worden de componenten rij per rij geplaatst.
• Voeg een combobox toe aan je frame.
• Vul hem met een aantal standaard kleuren: (bvb Color.red, Color.blue, Color.black, Color.yellow)
• In de outline view zie je alle onderdelen van je applicatie: de attributen en de methodes van de klasses.
• De combobox opvullen met initiele waarden: ga naar de methode waar hij wordt aangemaakt (waar 'new JComboBox') staat. 
• Na de instantiatie (de new) kan je elementen toevoegen met de addItem(Object o) methode van de combobox.
• Noot: elke java klasse is altijd een kindje van de Object klasse. Deze klasse staat dus aan de top van de hierarchie. De parameter van de addItem klasse moet van het type Object zijn, dit is dus het geval voor alle klassen!
  

• Om componenten hierarchisch te groeperen gebruik je best een JPanel. (Die is vergelijkbaar met de Box die je vindt in de voorbeelden zonder Visual editor.)
• Je voegt een JPanel toe, je kiest een layout manager en dan kan je componenten plaatsen op deze panel.
• Om je eigen tekeningen te maken moet je de public void paintComponent(Graphics g); van een JPanel overschrijven.
  
• Maak een subklasse aan van JPanel en overschrijf de public void paintComponent(Graphics g) methode.
• Deze subklasse kan je in je frame klasse definieren (da's dan een inner class), dat is lekker handig, daarbinnen heb je toegang tot al de attributen van de
  
• Gebruik het Graphics object g om tekencommando's te versturen. Graphics API documentatie.
• Nu moet je nog een panelobject aanmaken en toevoegen aan je GUI. Kies een container waarin je je panel gaat zetten. Voeg eventueel een nieuwe JPanel toe.
• Ga naar de code waar die container wordt aangemaakt, instantieer een object van je eigen panel en voeg het toe met panel.add(<jou object>);
• Het is belangrijk de grootte van je eigen panel te bepalen met de methode setPreferredSize(new Dimension(100, 100));
• De user laat je input ingeven dmv JTextFields.
• Met de getText() methode vraag je de tekst op van de textfield. Het omzetten naar een integer bvb doe je met int x = Integer.parseInt(text);.
• Gelijkaardige parse methodes vind je in de Double en Float klasse.

   Test-oefening: hoe goed is je basiskennis van java? Voorspel de output van het programma.
                    Tip: analyseer eerst hoe de klasses met elkaar relateren.

• Hier is nog eentje: Three Classes

• Wie een iets grotere uitdaging wilt, kan dit programma bekijken (klasse-schema).

    Meer over java:

• GUI layout (zie onze Java doc)

  • plaatsen van componenten mbv. absolute posities

  • groeperen van componenten in een box

• scheiden data - view

• event listeners

• Vector

• inner classes

• packages, class & jar files, import

• applets

- Back to the top -