## Opdracht 2.1 - EersteApplet

Open Java-Editor en maak een nieuwe applet aan:

1. Bestand → Nieuw → Frame.
2. Maak een nieuwe map aan (geel icoontje) en en noem die EersteApplet.
3. Plaats in deze map de applet en geef deze de naam EersteApplet (dezelfde naam als de map dus).

We gaan een programma schrijven waarvan de interface bestaat uit één knop en twee tekstvelden. In het eerste tekstveld voert de gebruiker zijn naam in en zodra hij op de knop Verplaats drukt, wordt zijn naam verplaatst naar het tekstveld er onder.

We beginnen met het maken van de user interface. We maken daarbij gebruik van het hulpmiddel dat Java-Editor ons biedt: het designformulier.

A.
In het designformulier moeten twee tekstvelden worden geplaatst: één voor de invoer en één voor de uitvoer. In het tabblad AWT van Java-Editor is daar een aparte knop voor met de naam TextField.

B.
Plaats een tekstveld in het designformulier door een rechthoek te trekken.

C.
Plaats het tweede tekstveld op dezelfde manier.
D.
Vervolgens plaatsen we een knop in het designformulier. Klik daarvoor op de knop Button in de knoppenbalk en plaats de knop in het designformulier.

Dan verschijnt het volgende scherm:

Selecteer de knop door er op te klikken. In de Object-inspecteur verschijnen de eigenschappen van de knop. Daarin wordt o.a. de grootte van de knop, de tekst op de knop (label) en de naam van de knop (name) getoond.

Wijzig de tekst op de knop in Verplaats.

F.
De naam die Java-Editor aan de knop heeft gegeven is button1. Wanneer we meerdere knoppen in de applet plaatsen, is aan de naam niet goed te zien welke knop bedoeld wordt. Daarom moet ieder knop/widget van een betekenisvolle naam worden voorzien.

Wijzig de naam van de knop in verplaatsknop.

G.
Wijzig op dezelfde manier de naam van het bovenste tekstveld in invoerveld en het onderste tekstveld in uitvoerveld. Verwijder de tekst die staat bij het vak Text.

H.

Het ontwerp van de user interface is klaar! De applet kan proefdraaien!

Kies, om het applet te testen: Start → Starten applicatie.

Typ in het invoerveld je naam en klik op de knop.

In het uitvoerveld verschijnt er niets :-(. We hebben wel keurig de velden en de knop in de interface geplaatst, maar niet aangegeven wat de applet moet doen als er op de knop wordt gedrukt.

Het klikken op de knop noemen we een event (een gebeurtenis). De gebruiker wil het programma iets laten doen. Daarvoor moet er een stukje programmacode worden geschreven, dat de event (de gebeurtenis) afhandelt. Het stukje code dat een event afhandelt, noemen we de event-handler.

I.
Om de applet te laten reageren op de knop, moet er programmacode worden geschreven. Daarvoor kunnen we gebruik maken van de editor in Java-Editor.

Als je het venster open, zie je dat er al code staat. Deze code heeft Java-Editor gemaakt op het moment dat je een tekstveld of een knop op het designformulier plaatste.
Om de verplaatsknop iets te laten doen moeten we aan de event-handler van de knop, code toevoegen. De code moet de tekst uit het invoerveld halen en in het uitvoerveld plaatsen. Daarna moet het invoerveld worden leeggemaakt.

Onder aan de code staat de event-handler van de verplaatsknop. De event-handler kan je herkennen doordat de naam ervan eindigt met ActionPerformed.

    public void verplaatsknopActionPerformed (ActionEvent evt) {

      // Plaats altijd hier de code!!

    }

    1    // De tekst in het invoerveld wordt verplaatst naar het uitvoerveld.
    2
    3    String naam;
    4    naam = invoerveld.getText();
    5
    6    uitvoerveld.setText(naam);
    7    invoerveld.setText("");

J.
Wat betekent bovenstaande code?

1. De eerste regel is commentaar. Commentaar is bedoeld om de code beter leesbaar te maken voor de programmeur. In Java kun je commentaar toevoegen door tekst achter twee schuine strepen // te plaatsen of tussen /* en */ te zetten.
2. In de derde regel wordt de variabele naam gecreëerd van het type String. In deze variabele kan tekst worden opgeslagen. In onderdeel 3 wordt uitlegd wat er met variabelen wordt bedoeld.
3. In de vierde regel wordt de inhoud van het invoerveld met behulp van de actie getText() opgeslagen in de variabele naam.
4. In regel zes wordt de inhoud van de variabele naam met behulp van de actie setText() in het uitvoerveld geplaatst.
5. In de laatste regel wordt het invoerveld leeg gemaakt.

K.
Test het applet en kijk of deze goed werkt.