Zelfstudie Boek: Hoofdstuk 1 tm. 3.5 uit het boek Aan de slag met Java (Gertjan Laan).

Transcriptie

1 Applicatiebouw 2015/2016 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 Zelfstudie Boek: Hoofdstuk 1 tm. 3.5 uit het boek Aan de slag met Java (Gertjan Laan). Oefenen Boek: Neem de opgaven bij deze hoofdstukken door om je de stof beter eigen te maken. Programmeer zelf voorbeeld 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

2 Opdrachten controleren en uitvoeren Je mag opdrachten met 2 personen doen. Dat hoeft niet, je mag opdrachten dus ook alleen doen. Opdrachten met 3 of meer personen doen is dus niet toegestaan en zal zonder verdere controle automatisch leiden tot een onvoldoende beoordeling. Je laat opdrachten controleren op uiterlijk het eerstvolgende werkcollege (dat is dus de deadline!) door de docent of een assistent. Bedoeling van de controle is dat je aantoont de stof te begrijpen. De opdracht wordt beoordeeld met een voldoende (1) of onvoldoende (0). De opdrachten 2 tm. 7 tellen mee voor het cijfer (details zijn in het college gegeven). Laat opdracht 1 ook controleren, hiermee oefenen je de controle en weet je wat er van je verwacht wordt! Inleiding 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 App (=eenvoudig programma) schrijven. In deze eerste opdracht ga je een Java App maken die 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. Een programma dat hierop lijkt 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. Voeg componenten toe aan de gebruikersinterface. 4. Realiseer de functies van de knoppen. Hieronder worden deze stappen uitgebreid behandeld. 2 Universiteit Twente

3 1. Start Eclipse en maak een nieuw project Start Eclipse via het icon op de Desktop. 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 hier onder. 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. Geen icon op de Desktop? Blader met de Windows Verkenner naar de map waar je de ZIP-file met Eclipse hebt uitgepakt. Als je het installatie script hebt gebruikt kan je Eclipse vinden in de map C:\Program Files (x86)\eclipse Dubbelklik op Eclipse.exe om deze te starten. Tip: In de beschrijving van de opdrachten gaan we ervan uit dat je voor iedere cursusdag een nieuw project aanmaakt. Universiteit Twente 3

4 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 hebt weg-geklikt, dan kan je altijd terug naar dit scherm via Window > Perspective > Reset Perspective 4 Universiteit Twente

5 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. 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: Universiteit Twente 5

6 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 Tabs om te wisselen tussen Source en Design Outline Views gescheiden dmv tabs. Met oa. de Views Problems, Javadoc en Console. 6 Universiteit Twente

7 Druk nu op de Design-tab in de Editor: 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. Universiteit Twente 7

8 3. Voeg componenten toe aan de gebruikersinterface Je gaat nu een tekstveld plaatsen dat nodig is voor invoer van de naam van de gebruiker. 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. Het tekstveld verschijnt dan op de aangegeven plek: Je kunt de afmetingen van het tekstveld aanpassen door aan de puntjes te trekken. Ook kan je het veld verplaatsen door ermee te slepen. De twee blauwe bolletjes 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: 8 Universiteit Twente

9 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. We verwerken het type en de functie in de naam van de component. 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 textfieldname. Pas de naam aan bij de Properties: Het kan handig zijn om bij de tooltiptext een hint te geven over de bedoeling van het tekstveld. Om te zorgen dat de bedoeling van het tekstveld nog een stukje duidelijker wordt plaatsen we er nog een Label voor: 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: Universiteit Twente 9

10 Door op het kruisje te klikken verlaat je het programma weer en keer je terug in Eclipse waar je gebleven was. 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 ernaast weergeven met hieronder de Properties van het geselecteerde item. 10 Universiteit Twente

11 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 Ok in de WindowBuilder. Als je dit hebt gedaan wordt een stukje Java code toegevoegd waarmee de EventHandler wordt gemaakt: Klik hier en druk op Enter om code toe te voegen. 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 hierboven aangegeven plek in de editor achter de accolade { en druk op Enter. Er verschijnt dan een lege regel waar je Java code kan gaan typen. We gaan dit tekstveld gebruiken om de naam van een persoon in te typen. Het is dus een invoer-veld. Om de naam van de persoon op te slaan, gebruiken we een variabele van het type String. We declareren deze als volgt: Type vervolgens een = teken en daarachter 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 gettext : Universiteit Twente 11

12 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: We gaan de ingevoerde naam weergeven in de gebruikersinterface, in een label. Voeg daarvoor een label toe (wissel naar tab Design!): Zorg dat het label leeg is (dus geen tekst bevat) door in de Properties de tekst New Label bij text te verwijderen. Geef het label ook een zinvolle naam: Klik ook nog op het icon Convert local to field. Hiermee maken we van het label een veld dat we als uitvoer kunnen gebruiken in de hele class (later volgt hierover meer uitleg). Dubbelklik nu weer op de Ok-knop om naar de code van de eventhandler te gaan en voeg daar de tweede regelcode in: 12 Universiteit Twente

13 Let op: als je het label een andere naam gegeven hebt, moet je hier dus die naam gebruiken! Voer nu je programma uit dmv. de Run-knop drukt. en kijk wat er gebeurd als je op de Ok-knop Begrijp je de twee regels code die je hebt toegevoegd aan de eventhandler? Zo niet, kijk dan nog even in de collegesheets. 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. Als deze knop wordt gedrukt, wordt de inhoud van het tekstveld gewist. We roepen dan de methode settext() van deze knop aan, met een lege String tussen de haakjes: Type eerst de naam van het tekstveld, gevolgd door een punt en dubbelklik dan op de methode die je nodig hebt: Mocht de methode settext niet als hint verschijnen, type dan door totdat deze wel verschijnt. Start het programma opnieuw en controleer of door indrukken van de Wis-knop het tekstveld leeg gemaakt wordt. Universiteit Twente 13

14 Documenteer de applicatie Lees eerst paragraaf 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 Type op de volgende regel ook een korte beschrijving van het programma. Eea. ziet er dan bijvoorbeeld zo uit: 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. 14 Universiteit Twente

15 Extra uitdaging Dit is geen onderdeel van de Stel, je wil in plaats van Welkom, de gebruiker opdracht maar mag je als je dat verwelkomen met een aan het tijdstip van de dag leuk vindt toevoegen. aangepaste boodschap. Bijvoorbeeld Goede morgen als het ochtend is. Pas dan de eventhandler van de Ok-knop als volgt aan: Met de aanroep van de methode LocalDateTime.now().getHour() kunnen we dus het huidige uur opvragen, waarna we mbv. een if-statement bepalen of het dan ochtend is. 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. Methode-aanroepen gerealiseerd. 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. Universiteit Twente 15

16 Bijlage 1: een voorbeeld uit het boek gebruiken in Eclipse We gaan voorbeeld Voorbeeld 0204 (zie boek 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. Maak een (leeg) Java Project 2. Copy: Kopieer.java file(s) uit src map voorbeelden 3. Paste: Plak in Eclipse project in map src 4. 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 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\bijlagen_4e_druk\voorbeelden Broncode. Ga verder naar de map H02\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: 16 Universiteit Twente

17 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. Universiteit Twente 17

18 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, en dus versie 77 (of hoger). Heb je wel andere of meer of oudere 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. 18 Universiteit Twente