OIS - WK1 - Programmeren - Maak je eigen webbrowser

OIS Week 1

WEBBROWSER OIS Programmeren week 1Niveau

DoelenWebBrowser, Windows Forms Application

InleidingTegenwoordig worden computers, en de programma's die de ze besturen in elk onderdeel van het dagelijks leven gebruikt. Computers vind je thuis, op kantoren, op school en in fabrieken. Je vindt computers op je bureau, in je mobiel maar ook in vliegtuigen en auto's.Ondanks de vele toepassingen en verschillende typen computers zijn de mogelijkheden van computers niet zo verschillend. Het zijn simpele apparaten waarmee zeer snel informatie (De I van ICT) kan worden verwerkt. Het werkelijke verschil tussen computers wordt gemaakt door hun programma's. Een programma is niets meer dan een reeks van opdrachten aan de computer zodat dat deze doet wat je wilt. Een reeks opdrachten, die als ze worden uitgevoerd, een bepaald effect hebben: bellen of vliegen.Wat is programmeren?Programmeren is de activiteit om dat programma op te stellen. Dat vergt het nodige voorstellingsvermogen, want je moet er je de hele tijd van bewust zijn, wat er in elke stap zal gebeuren, als het programma zal worden uitgevoerd. De opdrachten die samen het programma vormen moeten op een of andere manier worden geformuleerd. Er zijn vele verschillende notaties in gebruik om het programma mee te formuleren. Zon verzameling notatie-afspraken heet een programmeertaal.Daar zijn er in de recente geschiedenis nogal veel van bedacht, want telkens als iemand een nog handigere notatie bedenkt om een bepaald soort opdrachten op te schrijven wordt dat al gauw een nieuwe programmeertaal. Het heeft weinig zin om die talen allemaal te gaan leren, en dat hoeft ook niet, want er is veel overeenkomst tussen talen. Wel is het zo dat er in de afgelopen 50 jaar een ontwikkeling heeft plaatsgevonden in programmeertalen. Ging het er eerst om steeds meer nieuwe mogelijkheden van computers te gebruiken, tegenwoordig ligt de nadruk er op om een beetje orde te scheppen in de chaos die het programmeren anders dreigt te veroorzaken. Door de gigantische groei van geheugen en de verwerkingssnelheid van computers kunnen programma's steeds groter worden. In een programma staat een enorme hoeveelheid opdrachten, en het is voor een persoon totaal niet meer te bevatten wat die opdrachten precies doen. Erger is, dat ook met een team er moeilijk uit te komen is: steeds moet zon team weer vergaderen over de precieze taakverdeling. Mensen die programmas ontwikkelen in een team heten Sofware Engineers. Het ontwikkelen van een programma bestaat daarom niet alleen uit programmeren. Het bestaat uit een aantal stappen. Eerst moet duidelijk zijn wat het programma moet kunnen, dan moet het programma ontworpen worden dan kan het programma gebouwd worden volgens de ontwerpen en tenslotte moet het ook nog getest worden.De objectgeorinteerde taal C#C# is een zogenaamde Object Oriented (objectgeorinteerde) programmeertaal. Object Oriented Programming (OOP) is tegenwoordig de gebruikelijke manier om zeer grote complexe programmas in elkaar te zetten waar onder: Navigatiesystemen Pokersites Beursapplicaties Factureringssystemen (banken, verzekeringen, multinationals) en nog veel en veel meer.Het idee van OOP is dat een object in een programma een ding (=object) in de werkelijke wereld voorstelt en dat deze objecten net als in de echte wereld met elkaar communiceren en informatie uitwisselen. Voorbeelden van objecten zijn: een auto, een persoon, een hond etc. De persoon kan de auto besturen, de hond kan in de auto zitten en de persoon kan de hond voeden etc. Het is natuurlijk afhankelijk van wat het programma moet doen, welke objecten er zijn , wat de objecten kunnen en met welke objecten onderling communiceren.Hoe maak je een webbrowser?Stel je hebt het idee opgepakt om een webbrowser te maken (beter dan Internet Explorer) .Hoe moet dat? Waar begin je mee?Wat je nodig hebt is een programma om je webbrowser te bouwen. Dus een programma om een ander programma te maken .Een C#-programma kan gemaakt worden m.b.v. Microsoft Visual Studio 2013. Dat is een zeer uitgebreid programma waarmee zeer uiteenlopende programmas kunnen worden maken. Programmas zoals hierboven al eerder genoemd zijn.Maar je moet ook bedenken wat je applicatie moet kunnen. Wat moet je webbrowser kunnen? Wat is de functionaliteit? Alleen een webpagina van een ingetypt URL weergeven of ook een zoekmachine functie of favorietenoproep functie of de mogelijkheid om te printen? Dan ga je ontwerpen. Welke objecten heb je nodig om al deze functies van de webbrowser te kunnen maken? Dat is nu wat lastiger want we hebben geen echte fysieke objecten zoals in een auto of hond. Maar als je Software Engineer wilt worden zul je daar ook veel tijd aan besteden. Nu nog maar even niet OpdrachtJe kunt natuurlijk niet meteen een Webbrowser maken, dus eerst een korte oefening voor enkele basisvaardigheden. Start Microsoft Visual Studio 2013 op door naar start Programs Microsoft Visual Studio 2013 te gaan.

Opgestart? Dan kies File New Project. Zoals hieronder is weergegeven.

Je krijgt nu een ander venster te zien, zoals hierna is weergegeven.

Let op dat je een Visual C#-template pakt. Dat kun je zien doordat er naast de tekst Windows Forms Application ook de tekst Visual C# staat.

Selecteer in dit venster Windows Forms Application (let op Visual C#). Verander de naam in het veld Name: van WindowsFormsApplication1 in SEoefening1 en pas ook veld Location aan. Browse hiervoor naar een plek waar je de applicaties terug kan vinden. Klik OK. Je krijgt nu de onderstaande ontwerp-lay-out te zien.

Linksboven zie een windows-scherm, dit wordt een Form genoemd.Op het Form kun je nu zogenaamde grafische controls zetten. Zoals knoppen (Button) en tekstvelden (TextBox) en nog veel meer. Dit gaat via de Toolbox aan de linkerkant van het Form. Grafische controls zijn objecten die gebruikt worden om de gebruiker met het programma te laten werken. Bijvoorbeeld een Button is nodig om iets door te geven aan het programma en een TextBox is nodig om de gebruiker informatie in te laten typen. Ga met je muis op de Toolbox en klik op Button. Verplaats de muis naar het Form en klik op het Form. Je ziet nu een Button op het Form weergegeven. (Indien Toolbox nog niet op te zien in, klik dan op View Toolbox.)Je hebt nu al een werkende Windows applicatie gemaakt. Druk op F5 om het programma te laten werken (runnen).Het programma doet alleen niet veel, er komt geen actie als je op de knop drukt. . Sluit de applicatie door in het Form op het witte kruisje in het rode vlakje rechtsboven te klikken. Je komt nu weer in de ontwerp-lay-out. Dubbelklik op de knop. Je komt dan in de programmeercode terecht die door Microsoft Visual Studio is gegenereerd. Dat ziet er waarschijnlijk afschrikwekkend uit, maar dat is een kwestie van wennen. Het is veel logischer dan je nu vermoedt.

We kunnen hier programmacode toevoegen om iets in het programma te laten gebeuren. In dit geval laten we een meldingsvenster te voorschijn komen als er op de knop wordt gedrukt. Type daarvoor tussen de openingsaccolade { en de sluitingsaccolade } deze C#-code: MessageBox.Show("Mijn eerste C# applicatie");

Druk op F5 en test de werking van de Button.Een eigen WebsbrowserNu is het tijd voor je eigen Webbrowser. Start een nieuw project op. Dus NewFileProject. Selecteer weer een Windows Forms Application en verander de naam in MijnEigenBrowser. Klik n keer op het Form en zoek het zogenaamde Properties-scherm. Het staat waarschijnlijk rechtsonder.. Met dit scherm kun je allerlei lay-out eigenschappen instellen van je Form, zoals kleur en grootte. Alle eigenschappen (Properties) staan alfabetisch gerangschikt en kunnen we aanpassen. De meesten gebruiken we hier niet. Zoek de Property Text. Deze is te vinden onder de categorie Appearance. Text heeft de waarde Form1. Verander deze tekst in Mijn eigen browser. Zie dat de titel van je Form meteen wordt aangepast.

Zoek ook de hoogte en de breedte van je Form op en pas deze aan: Size:Width 640 Size:Height 480In een browser moet je een Internetadres (URL) kunnen invoeren en dan een pagina kunnen weergeven. We hebben daarom 3 componenten uit de Toolbox nodig. Om het adres in te voeren kunnen we een TextBox gebruiken. Om dit adres door te geven hebben we een Button nodig en er bestaat ook een component Webbrowser die we kunnen gebruiken om de pagina weer te geven.Dus:1. Pak nu de Webbrowser en zet deze ook op het Form. Bekijk de Properties van deze geselecteerde component.1. Pak een TextBox uit de Toolbox en zet deze op je browservenster. Zie dat de Properties van je TextBox zichtbaar zijn omdat deze geselecteerd is.1. Zet er ook nog een button in. De property's van button zijn zichtbaar omdat de button nu geselecteerd is.Als voorbeeld hieronder onze lay-out. We hebben een tekst op de knop gezet en de achtergrondkleur van het Form blauw gemaakt. Dit kan eenvoudig door de Properties aan te passen van de betreffende component.

Realiseer je dat we OO-programma aan het maken zijn. We werken met objecten!!Button is een object, Textbox is een object, Form is een object en Webbrowser is een object. In dit geval zijn het allemaal grafische objecten. De gebruiker kan dit soort objecten zien, ze geven informatie aan de gebruiker en de gebruiker kan ze acties laten uitvoeren.Nu nog de objectnamen aanpassen van deze objecten. Denk er aan dat je de objecten eerst selecteert zodat je het juiste Propertyvenster te zien krijgt. De objectnaam moet aangepast worden bij categorie Design en dan bij Property (Name). Verander de naam (Name) van het TextBox van textBox1 in tbURL. Verander de naam(Name) van het Button van button1 in btnGo Verander de naam(Name) van het WebBrowser van webBrowser1 in myBrowser.Een goede naamgeving van verschillende objecten is belangrijk. Als je tientallen of een honderdtal objecten hebt moet je ze goed op naam kunnen onderscheiden.We hebben nu dus 3 objecten toegevoegd aan het Form. Een Button met de naam btnGo, een TextBox met de naam tbURL en een WebBrowserobject met de naam myBrowser.Deze 3 objecten kunnen een gebruiker laten surfen op het Internet. Laat de applicatie runnen ofwel druk op F5.Helaas. Als we een URL intypen gebeurt er niets .Net als bij de oefening moet er iets gebeuren als we op de knop drukken. Wat dan?Het adres moet uit het TextBox worden gehaald en aan het WebBrowser-object worden gegeven.Hoe doe je dat?

Let op nu wordt het echt moeilijk

Dubbelklik weer op de Button zodat je net als in de oefening in de code terecht komt.Tussen de accoladen moet je weer de juiste opdracht zetten. Haal het URL uit de TextBox en geef het aan de Browser. Maar C# snapt alleen de taal C#. Type in: myBrowser en je ziet dat Microsoft Visual Studio je al helpt met het juiste object te zoeken. Deze hulp heet Intellisense. Je hebt nu het WebBrowser-object. Zet nu een punt: .direct achter myBrowser en dan zie je dat Intellisense een lijstje geeft. Dat zijn dingen die het object myBrowser allemaal kan uitvoeren. Dat is behoorlijk veel maar wij willen alleen maar surfen of wel navigeren over het Web. Hiervoor kunnen we de methode Navigate gebruiken. Type: NavigateOok Navigate komt automatisch te voorschijn. Type nu een haakje open: (Weer krijg je informatie van Intellisense. Nu geeft Intellisense aan wat Navigate nodig heeft om te kunnen navigeren.Dat weten we, dat is de URL. Hoe komen we aan de URL? Die typt de gebruiker in in de TextBox, toch?Dus die tekst (het URL) moeten we uit TextBox met de naam tbURL halen (ofwel vragen aan het object tbURL) en aan Navigate geven, zodat de WebBrowser weet welke pagina je wilt hebben.Een tekst uit een TextBox halen gaat met de property Text. Dus de ingetypte URL in tbURL krijg je door Type in: tbURL.Text Nu ook nog een sluitingshaakje ) en ; erachter zetten. Zo, dan is het hele resultaat tussen de accoladen: myBrowser.Navigate(tbURL.Text); Druk op F5 en typ maar een adres in, bijvoorbeeld: http://tweakers.net of nog beter de website van onze school: http://www.fhict.nl

Probeer nu je browser uit en pas de lay-out aan, aan je eigen voorkeur. Bij een browser krijg je normaal met het opstarten een startpagina te zien. Dat moet met jouw browser ook kunnen. Hoe doen we dat? Zet je code die je net gemaakt hebt ook onder de aanroep InitializeComponent(); Die code wordt namelijk uitgevoerd als je op F5 drukt. Zorg wel voor het juiste adres! myBrowser.Navigate("http://www.fontys.nl"); Zorg ervoor dat als je een andere pagina oproept door op de Button GoKnop te klikken dat de vorige pagina zichtbaar blijft in een kleiner venster. Je kunt de URL vragen aan het WebBrowser-object. Roep de begeleider/docent en laat een demo zien, en lever het in via Canvas.Als je je eigen programma wilt bewaren kun je het project als geheel zippen en inleveren via Canvas. Vraag de begeleider/docent eventueel om hulp.

Nog een stap verderIn de opdrachten hiervoor hebben we je tutorialgewijs een browser in C# laten bouwen. Het leuke en interessante van software engineering is juist zelf oplossingen zoeken op vragen en problemen.Daar is wel wat ervaring en oefening voor nodig. Maar door het maken van de vorige opdrachten ben je al in staat om een eenvoudig interactief programma te maken.In deze opdracht leggen we dus niet meer stap voor stap uit wat je moet doen, maar moet je de kennis die je hebt op gedaan in de vorige opdrachten gebruiken. Je kan natuurlijk wel even terugkijken .Knoppen en zo Maak een nieuw project aan. Geef het een goede naam: bijvoorbeeld SEoefening2. Zorg ervoor dat de koptekst van het formulier EersteWeekICT wordt. Plaats een knop (button) op het formulier en noem die btnBoodschap; zorg ervoor dat de tekst op de knop Start wordt. Schrijf programmacode bij deze knop die ervoor zorgt dat bij klikken op de knop een meldingsvenster verschijnt met de koptekst (Caption) Boodschap en met inhoudtekst "Nu gaat het echt beginnen!"(gebruik hiervoor een MessageBox en let bij het intikken op de hints die er verschijnen m.b.t. de verschillende mogelijkheden die er zijn)

Test en save de applicatie.Tekstvelden en zo Plaats twee tekstvelden (TextBox) op het formulier naast elkaar en noem de linker tbWoord1 en noem de rechter tbWoord2. Plaats hieronder een derde tekstveld en noem die tbWoorden. Plaats nog een Button op het formulier en noem die btnPlakken; zorg ervoor dat de tekst op de knop Plakken wordt. Schrijf programmacode bij de knop btnPlakken die ervoor zorgt dat bij klikken op de Button de achter elkaar geplakte woorden van Textbox tbWoord1 en van TextBox tbWoord2 in TextBox tbWoorden verschijnt. Het achter elkaar plakken van de inhoud van tekstvelden kan m.b.v. een + de code is dan: tbWoorden.Text = tbWoord1.Text + tbWoord2.Text;

Een spatie tussen de woorden voegen kan d.m.v. het tussenvoegen van + " " + ; probeer dit eens uit. We willen nu code die ervoor zorgt dat de tekstvelden tbWoord1 en tbWoord2 na het achter elkaar plakken weer leeg worden gemaakt. Hoe doen we dat? Spatie erin zetten! Elke opdracht in de programmacode moet op een nieuwe regel komen met aan het einde van de regel een puntkomma (dus een ;). Er moeten dus 2 regels programmacode (twee keer het leegmaken van een TextBox) worden toegevoegd (bij de programmacode van knop tbPlakken). De code voor leegmaken van het tekstveld van tbBox1 (d.i. een willekeurige naam!) is:

tbBox1.Text = "";

Test en save de applicatie en sluit de applicatie m.b.v. Close uit het File menu.Tenslotte rekenen...Start, indien nodig, Microsoft Visual Studio en open een nieuw project, noem dit SEoefening3. Zorg ervoor dat de koptekst van het Form EersteWeekICT wordt. Plaats drie TextBoxobjecten op het formulier naast elkaar en noem de linker tbGetal1, noem de middelste tbGetal2 en noem de rechter TextBox tbSom. Plaats verder een Label op het Form en noem die lblPlus. Schuif deze label tussen TextBox tbGetal1 en tbGetal2 en zorg ervoor dat de tekst ervan een plusje (dus een +) wordt. Plaats hierna een Button op het Form en noem die btnOptellen. Schuif deze Button tussen tekstveld tbGetal2 en tbSom en zorg ervoor dat de tekst op de knop een is-teken (dus een =) wordt. Schrijf programmacode bij de knop btnOptellen die ervoor zorgt dat bij klikken op de knop de achter elkaar geplakte inhoud van tekstvelden tbGetal1 en tbGetal2 in tekstveld tbSom verschijnt (dit lijkt dus veel op een vorige oefening). Test (en save) de applicatie en vul in tbGetal1 en tbGetal2 bijvoorbeeld 2 en 3 in.Een resultaat kan dan zijn:

Je wilt natuurlijk een echte optelling hebben met als resultaat (bijvoorbeeld):2 + 3 = 5 Als je in een TextBox een getal intypt (bv. 2) dan wordt de inhoud van dit TextBox echter als tekst (dus als het symbool 2) opgevat en niet als een getal m.a.w. je kunt er niet mee rekenen! En symbolen achter elkaar plakken is natuurlijk heel iets anders dan getallen optellen. Het optellen is echter wel te realiseren maar dan moeten de symbolen eerst omgezet (geconverteerd) worden in getallen en dat kan m.b.v. Convert.ToInt32(tbGetal1.Text) En datzelfde moet je ook doen voor tbGetal2.Text en vervolgens tel je dat samen op (met + ). Het resultaat van de optelling is dan een (nieuw) getal en dat wil je dan in tekstveld tbSom zetten. Maar tbSom is een TextBox en dus moet je er eerst voor zorgen dat je resultaat van de optelling weer terug gezet (geconverteerd) wordt in een tekst. Dat terugzetten kan met Convert.ToString() en je regel code moet dan worden:tbSom.Text = Convert.ToString((Convert.ToInt32(tbGetal1.Text) + Convert.ToInt32(tbGetal2.Text)));Probeer maar eens!

Test (en save) de applicatie en vul in tbGetal1 en tbGetal2 bijvoorbeeld 2 en 3 in.

Een resultaat kan dan zijn:

UitbreidingenNiveau Omschrijving uitbreiding

Kun je de applicatie uitbreiden voor aftrekken, vermenigvuldigen en delen van twee getallen m.b.v. een combobox? Dus op de plaats van het label zet je een combobox waarmee je een operator +,-,* of / kunt selecteren. De berekening wordt dan correct uitgevoerd door op de knop = te drukken.

UitwerkingenSEoefening1Code onder de button:private void button1_Click(object sender, EventArgs e){ MessageBox.Show("Mijn eerste C# applicatie");}WebbrowserBij de InitializaComponent:public Form1(){ InitializeComponent(); myBrowser.Navigate("www.fontys.nl");}

De gemaakte code onder de Go-knopprivate void btnGo_Click(object sender, EventArgs e){ myBrowser.Navigate(tbURL.Text);}SEoefening2Code onder button1:private void button1_Click(object sender, EventArgs e){ MessageBox.Show("Nu gaat het echt beginnen!");}Code onder btnPlakken:private void btnPlakken_Click(object sender, EventArgs e){ tbWoorden.Text = tbWoord1.Text + " " + tbWoord2.Text; tbWoord1.Text = ""; tbWoord2.Text = "";}SEoefening3private void btnOptellen_Click(object sender, EventArgs e){tbSom.Text = Convert.ToString(Convert.ToInt32(tbGetal1.Text) + Convert.ToInt32(tbGetal2.Text));

}Gevorderdenprivate void btnOptellen_Click(object sender, EventArgs e){ if (cbRekenMethode.Text == "+") { tbSom.Text = Convert.ToString(Convert.ToInt32(tbGetal1.Text) + Convert.ToInt32(tbGetal2.Text)); } else if (cbRekenMethode.Text == "-") { tbSom.Text = Convert.ToString(Convert.ToInt32(tbGetal1.Text) - Convert.ToInt32(tbGetal2.Text)); } else if (cbRekenMethode.Text == "*") { tbSom.Text = Convert.ToString(Convert.ToInt32(tbGetal1.Text) * Convert.ToInt32(tbGetal2.Text)); } else if (cbRekenMethode.Text == "/") { tbSom.Text = Convert.ToString(Convert.ToInt32(tbGetal1.Text) / Convert.ToInt32(tbGetal2.Text)); }}

Versie25-1-2015 Marcel Veldhuijzen (Canvas + minor fixes)25-6-2014 Marcel Veldhuijzen (spelling en lay-out)1-9-2014 Lindy Hutz (VS 2013 + Template)10-9-2013 Inge van Engeland (revisie VS2010)

1