Opdracht1 - University of Twente - Welcome

Applicatiebouw 2014/2015
Opdracht 1
Inhoud Applicatiebouw op dag 1
College
Bij het college wordt een inleiding gegeven over computers, het programmeren van klassen en
objecten in Java en de ontwikkelomgeving Eclipse.
Werkcollege
Op het werkcollege wordt Eclipse geïnstalleerd. Je maakt kennis met Java en maakt je eerste
programma.
Op het eind van dag 1 kun je
 Beschrijven waar je als ingenieur met computers en software te maken krijgt
 De belangrijkste elementen van een computer beschrijven
 Beschrijven hoe programmeren in zijn werk gaat
 Een eenvoudig programma maken en uitvoeren
 Een eenvoudige gebruikersinterface maken
 Je programma een boodschap laten weergeven op het scherm
Lezen tussen dag 1 en dag 2
Boek: Hoofdstuk 1 en 2 uit het boek Aan de slag met Java (Gertjan Laan).
Extra oefening
Boek: Neem de opgaven van hoofdstuk 1 en 2 door om je de stof beter eigen te maken.
Programmeer zelf voorbeeld 0204.
Bijlagen
In Bijlage 1 wordt uitgelegd hoe je een voorbeeld uit het boek kan gebruiken in Eclipse. Bijlage 2
bevat uitleg over enkele veel voorkomende problemen.
© Universiteit Twente
1
Applicatiebouw opdracht 1
Met deze opdracht maak je kennis met de ontwikkelomgeving Eclipse. Het is een
programmeeromgeving die ook door professionele softwareontwikkelaars wordt gebruikt en die
veel mogelijkheden heeft. Daardoor ziet het er op het eerste oog ingewikkeld uit, maar je zult
merken dat het best gebruiksvriendelijk is. Aan de hand van de eerste opdrachten ga je er de
weg in leren vinden. Je gaat een eenvoudig programma schrijven.
In deze eerste opdracht ga je een Java programma maken dat een tekst op het scherm zet na
het indrukken van een knop. Dat is geen wereldschokkende gebeurtenis, maar het geeft je
inzicht in een aantal handelingen die je steeds weer zult gebruiken. Het doel van deze opdracht is
kennis maken met de principes van het gebruik van Eclipse.
Dit zelfde programma wordt ook behandeld in hoofdstuk 2 van het boek. Daar wordt het
programma echter helemaal in Java geschreven, zonder gebruik te maken van de
programmeeromgeving Eclipse. Het is goed om nadat je deze opdracht hebt gedaan, het
programma uit het boek ook te maken (voorbeeld 0204). Hoe je dat met Eclipse doet, wordt
uitgelegd in de bijlage aan het eind van deze opdracht.
Stappenplan
De opdracht bestaat uit de volgende stappen:
1. Start Eclipse en maak een nieuw project.
2. Maak een gebruikersinterface.
3. Plaats een tekstveld en knoppen in de gebruikersinterface.
4. Realiseer de functies van de knoppen.
Hieronder worden die stappen uitgebreid behandeld.
1. Start Eclipse en maak een nieuw project
Blader met de Windows Verkenner naar de map waar je de ZIP-file met Eclipse hebt uitgepakt.
Dubbelklik op Eclipse.exe om deze te starten.
Je gaat nu eerst een nieuw project aanmaken.
Een project is een werkruimte voor een aantal
aan elkaar gerelateerde programma’s of
programma onderdelen.
Een project wordt opgeslagen in een map,
meestal onder de Workspace map die weer in
je Documents map staat.
Om een nieuw project te starten kies je File >
New > Java Project uit het menu. Er verschijnt
nu een Wizard, zoals de afbeelding hiernaast.
Hier mag je bij Project Name de naam invullen:
“Opdracht1”.
Controleer bij “Use an execution environment
JRE” of daar “JavaSE-1.8” is gekozen.
Maak nu het project door op Finish drukken.
Tip: In de beschrijving van de opdrachten gaan
we er van uit dat je voor iedere cursusdag een
nieuw project aanmaakt.
2
© Universiteit Twente
Applicatiebouw opdracht 1
Als het Welcome scherm nog zichtbaar is, klik dan op het kruisje van het Welcome scherm of op
het Restore icon om het project te kunnen zien:
Het Eclipse scherm ziet er nu ongeveer uit zoals hier onder weergegeven.
Je hebt nu een nieuw project, maar het is nog leeg. In de volgende stappen gaan we er een
gebruikersinterface aan toevoegen. Een gebruikersinterface wordt ook wel grafische userinterface
(GUI) genoemd.
Het scherm dat je nu ziet is het standaard scherm van Eclipse. Mocht je ooit terug willen naar dit
standaard scherm, bijvoorbeeld als je per ongeluk dingen het weg-geklikt, dan kan je altijd terug
naar dit scherm via Window > Reset Perspective…
2. Maak een gebruikersinterface
We gaan de gebruikersinterface opmaken in een leeg scherm en we gebruiken hiervoor een
JFrame Form.
We voegen een JFrame Form toe aan het project.
© Universiteit Twente
3
Applicatiebouw opdracht 1
Als je al meerdere projecten hebt, zorg dan dat het project Opdracht1 geselecteerd is in de
Package Explorer. Kies uit het menu: File > New > Other. Blader vervolgens naar WindowBuilder,
Swing Designer en kies daar JFrame:
Type in het volgende scherm bij Name de naam “Opdracht1GUI” en bij Package “userinterface”
en druk op Finish:
4
© Universiteit Twente
Applicatiebouw opdracht 1
Uitleg Eclipse Workbench
Hieronder wordt uitgelegd wat de hoofdonderdelen van Eclipse zijn. Het totaal van alle
onderdelen wordt de Workbench genoemd. Binnen de Workbench heb je onderdelen die Views
worden genoemd. Bijvoorbeeld de Package Explorer is een View, waarin je alle onderdelen van
een project kan bekijken.
Als het goed is, ziet je scherm er ongeveer zo uit als in onderstaande figuur. Het belangrijkste
onderdeel is de Editor, hier ga je Java code schrijven. Onderaan deze View zitten twee tabs,
hiermee kan je wisselen tussen broncode (Source) en het ontwerp van de Grafische Userinterface
(Design).
De gebruikersinterface kan in een ontwikkelomgeving als Eclipse worden ontworpen zonder zelf
veel programmaregels toe te voegen. Hiervoor gebruik je de Design-tab in de Editor.
Als je de broncode wil zien, druk dan op de tab Source.
Editor
Package
Explorer
Outline
Tabs om te
wisselen
tussen Source
en Design
Views gescheiden
dmv tabs. Met oa. de
Views Problems,
Javadoc en Console.
Druk nu op de Design-tab in de Editor.
© Universiteit Twente
5
Applicatiebouw opdracht 1
Het scherm dat dan verschijnt wordt ook wel de WindowBuilder genoemd. Hiermee kan je een
gebruikersinterface grafisch opmaken.
Ook hier zie je weer een aantal Views, zoals de Structure, met daarin de Components en
Properties, en de Palette.
Als je wisselt naar de code van het programma dmv. de Source tab, zie je dat de Java file al code
bevat. Dit is de code die Eclipse heeft toegevoegd toen we zojuist een nieuw JFrame Form
maakten.
De class die je daar ziet (Opdracht1GUI) is de start-class (opstartklasse), dit is de start van het
Java programma. Dit wordt verder toegelicht in paragraaf 2.2 tm 2.4 van het boek.
6
© Universiteit Twente
Applicatiebouw opdracht 1
3. Plaats een tekstveld en knoppen in de gebruikersinterface
Je gaat nu een tekstveld plaatsen dat nodig is om een
tekst op het scherm te krijgen. Voordat we dat doen
moeten we eerst een layout kiezen. Selecteer in de lijst
met Components het contentPane en kies bij de
Properties bij Layout: “GroupLayout” (onderaan in het
lijstje).
Zoek het jTextField op in de Palette (het staat onder
het kopje Components) en selecteer het door er met de
muis op te klikken:
Je kunt nu het tekstveld in de WindowBuilder plaatsen,
door op de plek waar het tekstveld moet komen met de
linker muisknop te klikken:
Je kunt de afmetingen van het tekst veld aanpassen door aan de puntjes te trekken. Ook kan je
het veld verplaatsen door ermee te slepen.
De twee blauwe driehoekjes en lijntjes geven aan dat de zijkant en de bovenkant van het
tekstveld aan de rand van het Window ‘gelijmd’ zijn. Dit betekend dat als de grootte van de
applicatie wordt gewijzigd, het tekstveld mee verandert. Door op de pijltjes te klikken kan je de
manier waarop eea. ‘gelijmd’ is, veranderen.
Zolang het tekstveld geselecteerd is kan je eigenschappen zoals de inhoud (Text) en de variabele
naam (Variable) aanpassen bij de Properties.
Bij de icons bovenaan in de editor, kan je een snelle preview van de gemaakte userinterface
krijgen, dmv. de Preview knop:
© Universiteit Twente
7
Applicatiebouw opdracht 1
Tip: Het is belangrijk dat je een component meteen de juiste naam geeft. Je zult straks merken
dat het de leesbaarheid van je programmaregels enorm vergroot. Er moet dus een passende
naam komen voor het tekstveld. Het is handig om in de naam van een component het type aan
te geven. Daarnaast moet de functie in de naam worden verwerkt. Dan wordt duidelijk wat het
ding kan (type) en waar het voor is (functie). De functie van het tekstveld is het uitvoeren van
tekst. Een goede naam is bijvoorbeeld “textFieldUitvoer”. Pas de naam aan bij de Properties:
Omdat we dit tekstveld alleen gaan gebruiken voor uitvoer (het weergeven van tekst), mag je
het vinkje bij “editable” weghalen.
Start het programma
Om te bekijken hoe het programma er uit ziet wanneer
je hem start (ook wel runnen of uitvoeren genoemd),
druk je op de groene pijl
in de menubalk.
Waarschijnlijk krijg je nu een waarschuwing zoals
hiernaast omdat je de Java file niet hebt opgeslagen.
Selecteer de optie “Always save …” en druk op Ok.
Als je geen fouten hebt gemaakt bij het programmeren,
verschijnt er nu een scherm dat er ongeveer uit ziet als
hieronder:
Door op het kruisje te klikken verlaat je het programma weer en keer je terug in Eclipse waar je
gebleven was.
8
© Universiteit Twente
Applicatiebouw opdracht 1
Het is je misschien opgevallen dat er onderaan in het Problems View een of meer
waarschuwingen
staan. Deze mag je voorlopig negeren. Mocht je fouten krijgen, dan zal je die
moeten (proberen) op te lossen.
Plaats nu op dezelfde manier als je net met het tekstveld hebt gedaan twee knoppen (JButton) in
de gebruikersinterface. Pas de tekst van beide aan. Eea. ziet er dan bijv. zo uit:
En de Structure wordt hiernaast weergeven.
© Universiteit Twente
9
Applicatiebouw opdracht 1
4. Realiseer de functies van de knoppen
Je hebt de gebruikersinterface van je programma vorm gegeven met de WindowBuilder. Dit is
een makkelijke manier om snel een gebruikersinterface in elkaar te zetten want Eclipse genereert
de Java code voor je. In het tweede deel van deze opdracht mag je zorgen dat de
gebruikersinterface echt gaat werken door zelf de Java code te schrijven.
De Java code die moet wordt uitgevoerd kunnen we specificeren in een EventHandler (in
paragraaf 2.8 van het boek wordt dit behandeld). Een EventHandler ‘behandelt’ een gebeurtenis
(Event). In dit geval een muisklik op een knop. Zo’n EventHandler kan je door Eclipse laten
aanmaken door te dubbelklikken op een knop. Doe dit dus: dubbelklik op de knop “Klik” in de
WindowBuilder.
Als je dit hebt gedaan wordt een stukje Java code toegevoegd waarmee de EventHandler wordt
gemaakt:
Eclipse wisselt dus naar de source-code Editor, waarin je de Java code van je applicatie kan zien
en bewerken. Je kan wisselen tussen de source-code Editor en de WindowBuilder (Design), dmv.
de tabs onderaan:
We gaan nu een regel Java code toevoegen aan de EventHandler. Klik op de aangegeven plek in
de editor achter de accolade { en druk op Enter:
Klik hier en
druk op Enter
Er verschijnt dan een lege regel waar je Java code kan gaan typen. Type hier de variabele naam
van het tekstveld (kijk evt. iets hoger in de code wat de juiste variabele naam is), gevolgd door
een punt en dan de tekst “setText”:
Terwijl je dat typt, verschijnt er van alles. Dit zijn suggesties van de Editor. De Editor herkent de
naam van de variabele, en zal daarbij behorende suggesties doen. In dit geval ziet de Editor dat
je de naam van een tekstveld hebt gebruikt, en zal je dan suggereren om eigenschappen en
methoden daarvan te gebruiken. Ook verschijnt er documentatie van die eigenschappen en
methoden. Hier gaan we bij volgende opdrachten verder op in.
Voor nu mag je de Java code als volgt afmaken:
10
© Universiteit Twente
Applicatiebouw opdracht 1
Voer nu je programma uit dmv. de Run-knop
drukt.
en kijk wat er gebeurd als je op de Klik-knop
Voeg nu op precies dezelfde manier een EventHandler toe voor de Wis-knop. Dus dubbelklik op
de Wis-knop in de WindowBuilder en type de Java code in. Nu mag je alleen ipv. de tekst “Je
hebt geklikt!” een lege String opgeven (“”).
In plaats van typen kan je natuurlijk ook de code uit de eerste EventHandler kopiëren en plakken
in de nieuwe.
Start het programma opnieuw en controleer of door indrukken van de Wis-knop het tekstveld
leeg gemaakt wordt.
Documenteer de applicatie
Lees eerst paragraaf 2.4.7 en 2.10 van het boek door. Wij gebruiken de in paragraaf 2.10
aangegeven opmaak stijl 3. We gaan nu bovenaan de Java file commentaar toevoegen, wat we
gebruiken om auteursinformatie toe te voegen. Klik bovenaan in de Editor op de lege regel boven
de definitie van de class:
Klik
hier
Kies Source > Generate Element Comment uit het menu. Er verschijnt dan een stukje
commentaar boven de class definitie:
Verander het commentaar op de aangegeven plek zodat daar je naam/jullie namen en
studentnummer(s) staan (achter @author). Type op de volgende regel ook een korte beschrijving
van het programma. Eea. ziet er dan bijvoorbeeld zo uit:
© Universiteit Twente
11
Applicatiebouw opdracht 1
Zelf doen
Je mag nu je programma voorzien van andere afmetingen*, een andere tekst die verschijnt in
het tekstvak en een andere titel*. Pas ook de opmaak aan: bijv. de Fonts of de kleuren van de
knoppen of het tekstvak.
* De titel van de applicatie is een eigenschap van het JFrame. Ga naar de WindowBuilder
(Design) en selecteer het JFrame (javax.swing.JFrame) bij de Components. Je kan dan bij
Properties de betreffende eigenschap opzoeken en bewerken.
De achtergrondkleur van de applicatie kan je aanpassen door de background van het contentPane
aan te passen.
Samenvatting
Op deze eerste dag heb je Eclipse leren kennen en je eerste stuk code geschreven.
Verder heb je het volgende geleerd.
 Een project aanmaken.
 Een Java programma in een project maken.
 De WindowBuilder gebruiken om een gebruikersinterface te bouwen.
 Een programma uitvoeren om te bekijken of het werkt zoals je wilt.
 Een gebruikersinterface opmaken.
 Je eerste regels Java code geschreven.
 Auteursgegevens en documentatie toegevoegd.
Voor de volgende opdrachten is het belangrijk dat je geoefend hebt met Eclipse en de
voorbeelden uit het boek. Doe daarom als extra oefening de opdracht in de bijlage op de
volgende pagina, waar wordt uitgelegd hoe je een voorbeeld uit het boek in Eclipse gebruikt.
12
© Universiteit Twente
Applicatiebouw opdracht 1
Bijlage 1: een voorbeeld uit het boek gebruiken in
Eclipse
We gaan voorbeeld Voorbeeld 0204 (zie blz. 22 en verder) in Eclipse zetten.
Een voorbeeld uit het boek in Eclipse zetten gaat met onderstaande vier eenvoudige stappen. De
stappen worden hierna uitgebreid uitgelegd.
1.
2.
3.
4.
Maak een (leeg) Java Project
Copy: Kopieer .java file(s) uit src map voorbeelden
Paste: Plak in Eclipse project in map src
Uitvoeren: open het java bestand met het hoofdprogramma (main methode) en kies Run
Sluit eventuele andere nog open staande projecten via File > Close All.
Stap 1: Maak een (leeg) Java Project
Kies File > New > Java Project uit het menu. Geef het project een naam, bijvoorbeeld “Voorbeeld
0204”.
Stap 2: Copy: Kopieer .java file(s) uit src map voorbeelden
Blader met de Windows Verkenner naar de map waarin alle voorbeelden staan. In de ZIP file van
dit vak staan ze in de map boek\CD_EDIEJ3\voorbeelden. Ga naar de map Vb0204\src. Selecteer
beide bestanden en kies Copy:
Stap 3: Paste: Plak in Eclipse project in map src
Ga naar Eclipse. Plak (Paste) de bestanden in de map src door deze met de rechter muisknop
aan te klikken en Paste te kiezen:
© Universiteit Twente
13
Applicatiebouw opdracht 1
Als je de map src uitklapt, zie je dat onder default package beide bestanden zijn verschenen:
Stap 4: Uitvoeren: open het java bestand met het hoofdprogramma (main
methode) en kies Run
Het bestand Vb0204.java bevat de main methode van het programma. De main methode is het
startpunt van het programma. Klik Vb0204.java aan met de rechter muisknop en kies Run As >
Java application om het programma uit te voeren.
Je kan ook de normale Run
knop gebruiken. Heb je echter meerdere main methoden binnen
een project, dan moet je het op bovengenoemde manier doen.
14
© Universiteit Twente
Applicatiebouw opdracht 1
Bijlage 2: Veel voorkomende problemen
Check bij de eerste stap van de opdracht (aanmaken project) of de juiste Java versie is gebruikt.
We gebruiken JavaSE versie 1.8. Dit kan je zien bij het overzicht van een gemaakt project aan de
linkerkant:
Als bijvoorbeeld bij stap 3 de Window Builder kuren heeft, check dan of je niet meerdere
installaties van Java op je computer hebt. Dit wordt door het installatiescript (install.bat)
gecontroleerd. Het aantal moet 2 weergeven:
Voor een correcte werking van Eclipse heb je alleen de 32-bits versie van de JDK geïnstalleerd.
In de lijst met geïnstalleerde programma's (Control Panel > Programs) zie je dan dit:
En dus geen andere of meer versies.
Heb je wel andere of meer versies, verwijder deze dan, zodat alleen bovenstaande overblijven.
Herstart daarna je computer.
Als na bovenstaande controle de Window Builder nog steeds problemen geeft, bijv. als je switcht
naar de Design-tab, probeer dan het volgende:
Sluit Eclipse af en start deze opnieuw. Lost dit het niet op, druk dan op de Run-knop om de
applicatie te starten. Sluit dan de applicatie en herstart Eclipse.
© Universiteit Twente
15