## ★ Aan de slag 5

De eerste app
Hieronder leggen we stap voor stap uit hoe je je eerste app maakt.
Doorloop nu zelf alle stappen om de eerste app 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 FX Base en vervolgens op de knop TextField.

2. Plaats een tekstveld in het designformulier door een rechthoek te trekken.
3. Plaats het tweede tekstveld op dezelfde manier.
4. Vervolgens plaatsen we een knop in het designformulier. Klik daarvoor op de knop Button in de knoppenbalk en plaats de knop in het designformulier.
5. 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 erop te klikken. In de Object-inspecteur verschijnen de kenmerken (attributen) van de knop. Daarin wordt bijvoorbeeld het lettertype van de knop (font), de positie van de knop, de tekst op de knop (label) en de naam van de knop (name) getoond.
   Wijzig het label van de knop in Verplaats.

6. De naam die JavaEditor aan de knop heeft gegeven is button1. Wanneer we meerdere knoppen gebruiken in een app 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.
7. Wijzig op dezelfde manier de naam van het bovenste tekstveld in invoerVeld en het onderste tekstveld in uitvoerVeld.
8. Het ontwerp van de user interface is klaar. De app kan proefdraaien.
   Om de app te testen kies: Start → Starten applicatie.
   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 de app 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).

9. Sluit de App af.
10. Om de app 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.
    public void verplaatsKnop_Action(Event evt) {
    // TODO add your code here
    } // end of verplaatsKnop_Action
    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("");

11. 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.
12. Test de app nu nog een keer en kijk of alles werkt.
13. Als laatste stap moet je de app bewaren in de vorm van een project.
    Kies Bestand → Als project opslaan.
    Geef het project de naam EersteAppProject.