★ Aan de slag 5

Het eerste applet

Hieronder leggen we stap voor stap uit hoe je je eerste applet maakt. Doorloop nu zelf alle stappen om het EersteApplet te maken.

We gaan een programma schrijven waarvan de interface bestaat uit twee tekstvelden en een knop. In het eerste tekstveld typt de gebruiker zijn naam in. Het klikken op de knop heeft als resultaat dat de ingevoerde naam in het tweede tekstveld wordt geplaatst. Het eerste tekstveld wordt weer leeggemaakt.

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

  1. In het designformulier moeten twee tekstvelden geplaatst worden: een voor de invoer en een voor de uitvoer. In de symboollijst van JavaEditor is daar een aparte knop voor.

Klik in de symboollijst op het tabblad AWT en vervolgens op de knop TextField.

  1. Plaats een tekstveld in het designformulier door een rechthoek te trekken.
  2. Plaats het tweede tekstveld op dezelfde manier.
  3. 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:
  4. Op de knop staat standaard de tekst “button‟. We willen natuurlijk een tekst geven die duidelijk maakt wat de functie van de knop is. Dergelijke kenmerken van een object kunnen we wijzigen in de Object-inspecteur. Selecteer de knop door er op te klikken. In de Object-inspecteur verschijnen de kenmerken (attributen) van de knop. Daarin wordt bijvoorbeeld het lettertype van de knop (font), de positie en grootte van het knop, de tekst op de knop (label) en de naam van de knop (name) getoond.

    Wijzig het label van de knop in Verplaats.
  1. De naam die JavaEditor aan de knop heeft gegeven is button1. Wanneer we meerdere knoppen gebruiken in een applet is aan de naam niet af te lezen welke knop bedoeld wordt. Daarom moet ieder object van een betekenisvolle naam worden voorzien.
    Wijzig de naam van de knop in verplaatsKnop.
    Let daarbij op het gebruik van hoofdletters en kleine letters. Java ziet dat als verschillende tekens. De naam van een object begint met een kleine letter. Het type object, in dit geval knop, schrijven we met een hoofdletter.
  2. Wijzig op dezelfde manier de naam van het bovenste tekstveld in invoerVeld en het onderste tekstveld in uitvoerVeld. Verwijder de tekst in het vak Text.
  3. Het ontwerp van de user interface is klaar. Het applet kan proefdraaien. Daarvoor bezit JavaEditor een interpreter: de Applet Viewer. Uiteindelijk als het applet klaar is, kan het ook in een browser draaien.
    Om het applet te testen kies: Start → Starten.
    Typ in het invoerveld je naam en klik op de knop Verplaats.
    In het uitvoerveld verschijnt niets. We hebben wel keurig de velden en de knop geplaatst, maar nog niet aangegeven wat het applet moet doen als er op de knop gedrukt wordt. Het klikken op de knop noemen we een event (een gebeurtenis). De gebruiker wil het programma iets laten doen. Daarvoor moet er een stukje programma worden geschreven, dat de event afhandelt. Dat stukje code noemen we een event-handler (het afhandelen van een event).
  1. Sluit de Applet Viewer af.
  2. Om het applet te laten reageren op de verplaatsknop, moet er een programmacode worden toegevoegd. Daarvoor maken we gebruik van de editor in JavaEditor.


    In het venster staat de code al. Dit is de code (blauw en zwart gekleurd) die JavaEditor gemaakt heeft op het moment dat je een tekstveld of een knop in het designformulier plaatste. We gaan nu nog niet in op de betekenis van die code.
    Om de verplaatsknop iets te laten doen moeten we de event-handler voor de knop toevoegen. Deze code moet de tekst uit het invoerveld halen, die tekst in het uitvoerveld zetten en het uitvoerveld leegmaken.
    Onder aan de programmacode staat de event-handler van de verplaatsKnop.

    // Begin eventmethoden
    public void verplaatsKnopActionPerformed(ActionEvent evt) { }


    Tussen de accolades typ je de programmacode in die op de volgende pagina staat. Denk eraan dat je de code letterlijk overneemt. Let daarbij op het gebruik van hoofdletters en de leestekens.

// De tekst in het invoerVeld wordt verplaatst naar het uitvoerVeld.
String naam;
naam = invoerVeld.getText();
uitvoerVeld.setText(naam);
invoerVeld.setText("");

  1. Wat betekent de code?
    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 // te plaatsen of tussen /* en */. In de tweede regel wordt de variabele naam gecreëerd van het type String. In deze variabele kan tekst worden opgeslagen. In de derde de regel wordt de inhoud van het invoerveld met behulp van de methode getText() opgeslagen in de variabele naam. In regel vier wordt de inhoud van de variabele met behulp van de methode setText() in het uitvoerveld geplaatst. In de laatste regel wordt het invoerveld leeg gemaakt.
  2. Test het applet nu nog een keer en kijk of alles werkt.
  3. Als laatste stap moet je het applet bewaren in de vorm van een project.
    Kies Bestand → Als project opslaan.
    Geef het project de naam EersteAppletProject.