Open Java-Editor en maak een nieuwe applet aan:

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?
K.
Test het applet en kijk of deze goed werkt.