Wanneer ik s ochtends mijn

3-6-2005

11:07

Pagina 68

CD DE -RO

M

Visual Basic 2005

OP

404 VB 2005B.qxd

Visual Basic 2005 Op de cd-rom staat een bètaversie van Visual Basic 2005

Zelf een ochtendkrant op maat bouwen

CD-Snelmenu: 2 André Obelink

Visual Basic 2005 is de opvolger van Visual Basic .NET 2003. Microsoft heeft veel tijd gestopt in met name het gebruikersgemak van deze ontwikkelomgeving. Dit heeft geresulteerd in een uitgebreide, maar zeer doeltreffende IDE. In dit artikel laten we u aan de hand van een praktijkvoorbeeld kennismaken met deze tool.

W

anneer ik ‘s ochtends mijn notebook heb aangezet, volgt eigenlijk altijd hetzelfde ritueel: ik bekijk eerst het laatste nieuws op nu.nl, daarna bezoek ik de website van UserFriendly.org om de ‘daily cartoon’ te bekijken en vervolgens surf ik door naar Postbank.nl. Hier bekijk ik de laatste koersinformatie. Afhankelijk van de dag van de week, hoeveelheid werk of het aantal telefoontjes bezoek ik eventueel ook nog diverse andere websites. Het zou echter mooi zijn als alleen de informatie van al die websites, die voor mij relevant is, geconcentreerd zou worden op één pagina. Een uitdaging waaraan we in dit artikel gestalte gaan geven. Ook ú kunt proberen deze applicatie te bouwen met Visual Basic 2005. Deze tool staat op de meegeleverde cd-rom. Laten we eens een opsomming maken van de specificaties van ons programma. De applicatie moet een html-pagina kunnen tonen. Daarnaast zouden we op eventuele links moeten kunnen klikken en de pagina onder de link moeten kunnen bekijken. We moeten ook terug of juist verder kunnen bladeren in de navigatiehistorie. Het zou prettig zijn wanneer de controls automatisch ‘resizen’. Als laatste is het natuurlijk ook belangrijk dat we het programma netjes kunnen afsluiten.

Interface Het programma moet een menu ‘Bestand’ hebben met één item, namelijk ‘Afsluiten’. Daaronder moet een knoppenbalk komen met de volgende drie knoppen: ‘Vorige’, ‘Volgende’ en ‘Vernieuwen’. Onder de knoppenbalk moet, net als in Internet Explorer,

68

PC-ACTIVE 07/08–2005

het gedeelte komen waarin de html-pagina wordt getoond. Om het geheel af te maken moet onder in het scherm een statusbalk komen waarin we geïnformeerd worden over de huidige activiteit van het programma. We gaan starten met het bouwen van deze interface. Na het starten van Visual Basic 2005 ziet u de ‘Start Page’. Aan de linkerzijde treft u een lijst aan van laatst geopende projecten. Vanuit dit kader kunt u tevens een project openen of nieuwe projecten aanmaken. We kiezen voor de optie: ‘Create Project’. In het dialoogkader dat verschijnt, kunt u verschillende type projecten kiezen. U kiest voor een ‘Visual Basic – Windows Application’. Standaard krijgt een project van dit type de naam: ‘WindowsApplication1’. Dit wijzigt u in ‘MijnOchtendkrant’. Druk op de ‘OK’-button en het project wordt aangemaakt. Na enkele seconden ziet u een maagdelijk leeg scherm: Form1. Dit formulier wordt gebruikt om de schermonderdelen op te plaatsten en de broncode aan toe te voegen.

maar ook vanuit code, als de applicatie eenmaal gestart is. Wijzig de waarden van de volgende properties – Zie afbeelding 1 –:

Text = PC-Active OchtendKrant Name = frmMain Het is een goede gewoonte om de verschillende scherm- of besturingselementen of variabelen te voorzien van een drieletterige prefix. Voor een Form gebruikt men meestal ‘frm’. Hierdoor wordt de code begrijpelijker. Hoewel we nu de Name property hebben aangepast, is nog niet de bestandsnaam gewijzigd. Wijzigt u in de Solution Explorer Form1.vb naar frmMain.vb.

Controls De controls of besturingselementen bevinden zich in de Toolbox. Dit gedeelte van het scherm zit verborgen onder het tabblad, links boven in het scherm. Het schuift automatisch open wanneer u het aanwijst met

Properties Het formulier heet ‘Form1’ en heeft als tekst in de titelbalk ook ‘Form1’. Voor ons programma moeten die waarden worden aangepast. Het werkt nu eenmaal niet prettig om in de broncode Form1, Form2 of Form5 te moeten gebruiken. We moeten dus een aantal ‘properties’ of eigenschappen aanpassen. Met behulp van properties kunt u naast het uiterlijk, van in dit geval een Form, ook de werking beïnvloeden. Bijna elk control- of besturingselement dat we op een Form kunnen plaatsen, heeft zijn eigen set properties. Properties kunt u instellen met behulp van de Property-window,

Afbeelding 1: Property window

404 VB 2005B.qxd

3-6-2005

11:08

Pagina 69

Visual Basic 2005 Software

de muis. We hadden besloten dat bovenin het formulier een menubalk moest komen. U kunt een menubalk toevoegen aan frmMain door uit de Toolbox een ‘MenuStrip’ te selecteren en deze op een willekeurige plaats op het Form te tekenen. Naast de menubalk die nu bovenin het Form zichtbaar is geworden, bevindt zich in de ‘ComponentTray’ onderin het scherm ook een item, namelijk: MenuStrip1. Selecteer dit component en wijzig de waarde van de volgende property:

Name = mnuMenuBar Het menu bevat nog geen enkele item, maar heeft wel al een invoervak waarin u snel en eenvoudig items kunt aanmaken. Type in dit kader ‘&Bestand’, klik in het invoervak eronder en type hier: ‘&Afsluiten’. Met behulp van het ampersand-teken (&) kunt u bepaalde letters van een menu-item onderstrepen, waardoor ze tijdens het draaien van de applicatie benaderbaar zijn met een sneltoetscombinatie, bijvoorbeeld Alt+B. Het toevoegen van menu-items werkt uitermate intuïtief. Op dit moment zijn alleen de Text-properties van beide items ingesteld. Selecteer de items afzonderlijk en stel de Name property in.

Bestand Name = mnuFile Afsluiten Name = mnuFileExit Analoog aan het toevoegen van de MenuStrip voegen we een ToolStrip toe. Dit is de toolbar of knoppenbalk van de applicatie. Wijzig de volgende property:

Name = tbrToolBar Ook het toevoegen van knoppen is eenvoudig. In de knoppenbalk bevindt zich een keuzelijst waarin u diverse buttons, labels

De gebruikersinterface is nu klaar en we kunnen starten met het schrijven van de logica. Allereerst slaan we ons project op en drukken we op F5. Hiermee wordt de applicatie gecompiled in debugmode en we zien voor de eerste keer ons programma in werking. U kunt klikken op de knoppen in de knoppenbalk, een menu-item kiezen of het scherm vergroten. ToolStripButton1 De informatie die we gaan verzameName = tsbGoBack len moet in onze eigen html-pagina Text = Vorige worden getoond. Het is dus van Image = GoBackIcon.ico (Import local resource) belang dat we de minimale opbouw DisplayStyle = ImageAndText van zo’n pagina weten. Gelukkig TooltipText = Blader terug hoeft een html-pagina niet ingewikkeld te zijn. Het werkt met begin- en ToolStripButton2 eindtags, waarbij u de eindtags kunt Name = tsbGoForward herkennen aan het slash-teken (/). Text = Volgende Hieronder ziet u een voorbeeld. Image = GoForwardIcon.ico (Import local

resource) DisplayStyle = ImageAndText TooltipText = Blader vooruit



ToolStripButton3 Name = tsbRefresh Text = Vernieuwen Image = RefreshIcon.ico (Import local resource) DisplayStyle = ImageAndText TooltipText = Vernieuwen Het formulier begint al aardig vorm te krijgen. De volgende stap is het plaatsen van een WebBrowser-control. Ook dit control bevindt zich in de Toolbox. Doordat standaard de Dock-property is ingesteld op ‘Fill’, wordt het overgebleven deel van frmMain gelijk opgevuld met dit control. Het aardige is dat we hiermee direct de specificatie dat het scherm automatisch moet ‘resizen’ hebben geïmplementeerd. Tijdens het draaien van de applicatie blijft de WebBrowser het formulier opgevuld houden, ook als u het vergoot of verkleint. Wijzig de property:

Name = wbrWebBrowser Het laatste onderdeel van ons formulier is een statusbalk. U kunt het vinden in hetzelfde lijstje als de reeds eerder toegevoegde MenuStrip en ToolStrip. Voeg een StatusStrip toe op een willekeurige plek op het scherm. Voeg, analoog aan de Toolbar, een StatusLabel toe en stel de volgende properties in:

Afbeelding 2: toevoegen van toolbarbuttons

Text = ...

of andere controls kunt toevoegen. Voeg drie buttons toe. Het instellen van de properties kan via de standaard Property-window, maar het kan eenvoudiger. Klik met de rechtermuisknop op de ToolStrip, in ons geval tbrToolBar en kies voor ‘Edit Items...’. Het dialoogkader dat verschijnt, is speciaal ingericht om dit werkje snel te kunnen klaren. Op de cd-rom treft u de knopafbeeldingen aan. Wijzig de onderstaande properties.

StatusStrip1 Name = sbrStatusBar ToolStripStatusLabel1 Name = slbStatus

Tekst zichtbaar op pagina.

Klik in de Solution Explorer met de rechtermuisknop op frmMain.vb en kies ‘View Code’. Omdat we straks tussen de en -elementen onze informatie willen plaatsen, maken we een tweetal functies. De eerste geeft de tekst terug tot en met het -element, de andere vanaf het -element. Voeg de volgende code toe tussen ‘Public Class frmMain’ en ‘End Class’.

‘ Codevoorbeeld 1 Private Function GetNewsPaperHeader() _ As String Dim strTitle As String strTitle = “PC-Active OchtenKrant “ & _ “van “ & _ Date.Now.ToShortDateString() ‘ Geef het bovenste gedeelte terug Return “” End Function

PC-ACTIVE 07/08–2005

69

S

404 VB 2005B.qxd

S

3-6-2005

11:09

Pagina 70

Software Visual Basic 2005

Private Function GetNewsPaperFooter() _ As String ‘ Geef het onderste gedeelte terug Return “” End Function Wanneer u codevoorbeeld 1 goed bestudeert, zult u waarschijnlijk begrijpen wat het resultaat zal zijn. Het element binnen een html-pagina wordt door de browser normaal gesproken in de titelbalk gezet. Deze functionaliteit voegen wij straks ook toe. Binnen Visual Basic kunt u regels afbreken met een underscore (_). De functies zijn gedeclareerd ‘As String’. Dit houdt in dat de returnwaarde een alfanumerieke tekenreeks kan zijn: er kan dus een tekst geretourneerd worden. Er zijn echter veel meer datatypen. Enkele voorbeelden zijn een Integer voor numerieke waarden, Boolean voor Waar/Onwaar-waarde, een Date voor datum/tijd of een Decimal voor een numerieke waarde waarbij ook het deel achter de komma opgeslagen moet worden. Deze datatypen dient u altijd zorgvuldig te kiezen om niet voor vervelende verrassingen komen te staan. Stel, u kent een waarde van 20,4 toe aan een Integer en u gaat met die variabele berekeningen uitvoeren, dan wordt er gerekend met 20! De keuze van het datatype is overigens niet alleen van belang voor returnwaardes van functies, maar minstens zo belangrijk bij het declareren van variabelen. Standaard classes, controls of bijvoorbeeld functies bevinden zich altijd in een namespace. U kunt een namespace het beste vergelijken met een archiefkast met een of meerdere laden en in die laden weer een of meerdere hangmappen, enzovoorts. Om bepaalde functionaliteit binnen Visual Basic direct te kunnen gebruiken, dient u die laden en mappen als het ware ‘open’ te zetten. U doet dit met behulp van het Imports keyword. Onderstaande code zet van de kast System de laden IO, Net en Text open. Voegt u de volgende code toe boven de eerste regel ‘Public Class frmMain’:

‘ Codevoorbeeld 2 Imports System.IO Imports System.Net Imports System.Text Doordat we deze namespaces hebben geïmporteerd kunnen we direct de functionaliteit aanspreken die we in het vervolg van dit artikel nodig hebben. Als eerste gaan we een

70

PC-ACTIVE 07/08–2005

functie maken die een bepaalde pagina op internet opent en in zijn geheel inleest. Omdat we deze functie vaker willen gebruiken, moeten we de url van de desbetreffende pagina natuurlijk niet ‘hardcoded’ opnemen. We kunnen dit bereiken door de url als parameter, dus als een variabele mee te geven. In dit geval heet de parameter strUrl.

‘ Codevoorbeeld 3 Private Function GetHtml(ByVal strUrl _ As String) As String ‘ Gebruik WebClient en StreamReader ‘ om pagina te openen en in zijn ‘ geheel in te lezen Dim objWebClient As New WebClient Dim objReader As New StreamReader(_ objWebClient.OpenRead(strUrl), _ Encoding.UTF8) ‘ Lees data in Dim strHtml As String strHtml = objReader.ReadToEnd() ‘ Sluit Reader en ruim object op objReader.Close() objWebClient.Dispose()

‘ Geef de HTML terug Return strHtml End Function Het voert op dit moment te ver om alle objecten en onderdelen van deze functies of methods volledig uit te leggen. Het komt erop neer dat er met behulp van een WebClient-object connectie wordt gemaakt met een bepaalde locatie op internet en dat met een StreamReaderobject de data wordt ingelezen in een variabele. We kunnen nu de functie GetHtml gaan gebruiken om de data die we in onze krant willen tonen op te halen. Allereerst willen we de strip van de dag van www.userfriendly.org toevoegen. Omdat we ons programma voor eigen gebruik ontwikkelen en we het resultaat niet publiekelijk maken, schenden we in ieder geval geen auteursrechten. De uitdaging is om een manier te vinden hoe we alleen die stripafbeelding eruit kunnen knippen. Hiervoor zou men meerdere algoritmes kunnen bedenken. Direct boven de strip staat de tekst ‘CARTOON FOR ...’ We hebben besloten om ons algoritme hierop te baseren. Wanneer u de bron van deze pagina zou bekijken, kunt u zien dat de strip de eerste afbeelding is na de tekst

‘CARTOON FOR’. De logica om alleen de afbeelding te bepalen is in de functie ExtractDailyCartoon geïmplementeerd. Het verwacht als parameter de gehele htmlpagina en retourneert alleen de afbeelding als html element . De beschreven logica en de commentaarregels binnen de code bieden u waarschijnlijk voldoende houvast de code te begrijpen.

‘ Codevoorbeeld 4 Private Function ExtractDailyCartoon( _ ByVal strHtml) As String ‘ Bepaal de positie van de tekst: ‘ ‘Cartoon for ‘ Dim intPosCartoonFor As Integer = _ strHtml.IndexOf(“CARTOON FOR “) ‘ Ga op zoek naar de eerste Image ‘ tag na ‘Cartoon for ‘ Dim intPosImageStart As Integer = _ strHtml.IndexOf(“”, _ intPosImageStart + 1) ‘ Knip de Image tag eruit: ‘ Return strHtml.Substring(_ intPosImageStart, _ intPostImageEnd - _ intPosImageStart + 1) End Function We gaan de code die we nu hebben geschreven eerst eens testen. Voeg de code van de functie CreateNewsPaper() toe.

‘ Codevoorbeeld 5 Private Function CreateNewsPaper() _ As String Dim strDCHtml As String Dim strDCImage As String strDCHtml = _ GetHtml(“http://www.userfriendly.org”) strDCImage = _ ExtractDailyCartoon(strDCHtml) Stop End Function Private Sub frmMain_Load(_ ByVal sender As Object, _

404 VB 2005B.qxd

3-6-2005

11:12

Pagina 71

Visual Basic 2005 Software

ByVal e As System.EventArgs) _ Handles Me.Load Call CreateNewsPaper() End Sub De CreateNewsPaper()-functie moet nog wel worden aangeroepen. Dit doen we in het Form_Load event van frmMain. Events zijn gebeurtenissen die componenten of controls als het ware kunnen overkomen. Voorbeelden van events zijn Click(), MouseMove() of KeyPress(). Met behulp van events kunt u reageren op de eindgebruiker die uw programma gebruikt. U kunt de events toevoegen met behulp van de twee comboboxen direct boven uw code-editor. In de linkercombobox kunt u een control selecteren en afhankelijk van deze selectie kunt u in de rechtercombobox een bepaald event selecteren. Kies in de linkercombobox voor (frmMain Events) en in de rechter voor Load. Voeg de aanroep van CreateNewsPaper toe zoals zichtbaar in codevoorbeeld 5. U ziet dat we in de besproken functie het keyword Stop gebruiken. Wanneer we de applicatie starten, zal de debugger op deze regel stoppen, zodat we de waarden van de variabelen kunnen controleren. Start het programma met F5 en het programma zal worden onderbroken op de Stop-regel. Wanneer u met de muis boven een variabele gaat hangen, ziet u de inhoud. Visual Basic 2005 heeft er een nieuwe feature bij gekregen waardoor u de inhoud van een variabele direct als html kan weergeven. Dit houdt voor ons in dat wanneer we dit kiezen direct de ‘Daily Cartoon’ kunnen bekijken. Echt heel gaaf!

‘ Codevoorbeeld 6 Private Function GetSubjectHeader( _ ByVal strSubject As String) _ As String Return “” & _ “

” & _ “” & _ strSubject & _ “

” End Function

Schrap de Stop-regel uit CreateNewsPaper() en voeg onderstaande code toe. Wijzig tevens de code in het frmMain_Load event, zodat het resultaat wordt toegewezen aan de DocumentText property van de WebBrowser control.

‘ Codevoorbeeld 7 – Vervang Stop Dim strNewsPaper As String = _ GetNewsPaperHeader() & _ GetSubjectHeader(“Strip van _ vandaag”) & _ strDailyCartoonImage & _ GetNewsPaperFooter()

‘ Codevoorbeeld 9 Private Function SaveNewsPaper( _ ByVal strFileName As String, _ ByVal strNewsPaper As String) _ As Boolean ‘ Open het bestand Dim objStreamWriter As _ New StreamWriter(strFileName) ‘ Schrijf de html pagina weg objStreamWriter.Write(strNewsPaper) ‘ Sluit het bestand objStreamWriter.Close() ‘ We zijn hier, alles okay Return True

Return strNewsPaper End Function ‘ Codevoorbeeld 8 Private Sub frmMain_Load(_ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load wbrWebBrowser.DocumentText = _ CreateNewsPaper() End Sub

Afbeelding 3: Debuggen

Boven elke item of onderwerp willen we een titel tonen. Doordat we het onderwerp (strSubject) variabel hebben gemaakt, kunnen we de functie voor elk nieuw item hergebruiken.

deze html-code toekennen aan de WebBrowser begint onze eigen ochtendkrant werkelijk tot leven te komen. We gebruiken op dit moment de DocumentText property van de WebBrowser om de pagina te tonen. Om de bladerknoppen volledig te kunnen implementeren, moeten we de pagina eerst als een html opslaan en deze vervolgens laten inlezen door de WebBrowser.

In codevoorbeeld 7 ziet u dat we nu een html-pagina opbouwen en deze als resultaat van de functie CreateNewsPaper() teruggeven. Als we tijdens het laden van het formulier

We passen wederom onze frmMain_Load aan om de data nu via een bestand te kunnen inlezen.

‘ Codevoorbeeld 10 Private Sub frmMain_Load( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load Dim strFileName As String = _ Application.StartupPath & _ “Ochtendkrant.html” Dim strNewsPaper As String = _ CreateNewsPaper() ‘ Sla de pagina op... bepaal of het ‘ goed gegaan is If SaveNewsPaper(strFileName, _ strNewsPaper) = True Then ‘ Maak URI —> ken toe aan WebBrowser wbrWebBrowser.Url = New _ Uri(strFileName, UriKind.Absolute) End If

Afbeelding 4: Het eerste resultaat

End Sub

PC-ACTIVE 07/08–2005

71

S

404 VB 2005B.qxd

S

3-6-2005

11:14

Pagina 72

Software Visual Basic 2005

De basis van ons programma is nu grotendeels klaar. Wanneer we een onderwerp aan onze pagina willen toevoegen, passen we dus CreateNewsPaper() aan en maken we ook een nieuwe ExtractNogWat-functie aan. In het voorbeeldproject dat u aantreft op de cd-rom is een extra onderwerp toegevoegd. Een overzicht van de laatste koersinformatie van Postbank.nl. De opzet is exact hetzelfde als die voor ‘Daily Cartoon’. Het kent alleen een uitbreiding om een probleem met het tonen van afbeeldingen te corrigeren. De afbeeldingen op de server van de Postbank hebben een relatieve verwijzing. Aangezien de afbeeldingen niet beschikbaar zijn op onze pc, moeten we de relatieve verwijzingen converteren naar absolute verwijzingen. Concreet komt het erop neer dat we het complete adres moeten gebruiken, in plaats van een verwijzing naar de submap ‘/ing/’.

‘ Codevoorbeeld 11 Private Function CorrectImageKoersenPostbank (ByVal strHtml As String) ‘ Vervang relatieve naar absolute pad Return strHtml.Replace(“/ing/”, _ “http://www.postbank.nl/ing/”) End Function Onze applicatie begint steeds meer te lijken op een Mini Explorer omdat door het klikken op een link de doelpagina automatisch wordt geopend. De statusbalk heeft als taak om ons te informeren over de pagina die op dat moment wordt geopend. Om dit voor elkaar te krijgen, kunnen we het WebBrowser_Navigating() event gebruiken. Dit event treedt op wanneer er een pagina wordt geopend. De parameter ‘e’ in een event bevat altijd informatie die specifiek van toepassing is binnen het desbetreffende event. In dit geval kan men de url property uitlezen en gebruiken om de statusbalk aan te passen.

‘ Codevoorbeeld 12 Private Sub wbrWebBrowser_Navigating( _ ByVal sender As Object, _ ByVal e As _ WebBrowserNavigatingEventArgs) _ Handles wbrWebBrowser.Navigating ‘ Pas statusbalk aan slbStatus.Text = “Bezig met openen “ & _ e.Url.ToString & “...” End Sub

72

PC-ACTIVE 07/08–2005

De knoppen in de knoppenbalk mogen alleen beschikbaar zijn als er ook daadwerkelijk vooruit of achteruit gebladerd kan worden. De WebBrowser control biedt ons uitstekend hulp door de CanGoBack en CanGoForward properties beschikbaar te stellen. Hierdoor kunnen we eenvoudig bepalen of een en ander mogelijk is. De code hiervoor schrijven we in het WebBrowser_Navigated() event, dat optreedt als de pagina volledig is geladen. We gebruiken dit event tevens om de uit het html-document te tonen in onze titelbalk. Zie ook codevoorbeeld 1. Omdat de pagina nu toch helemaal geladen is, wissen we meteen de statusbalk. Hier stond immers nog de url van de pagina die zojuist is geladen.

‘ Codevoorbeeld 13 Private Sub wbrWebBrowser_Navigated( _ ByVal sender As Object, _ ByVal e As _ WebBrowserNavigatedEventArgs) _ Handles wbrWebBrowser.Navigated ‘ Kan ik terug? If wbrWebBrowser.CanGoBack = True Then tsbGoBack.Enabled = True Else tsbGoBack.Enabled = False End If ‘ bovenstaande code kan korter! ;-) tsbGoForward.Enabled = _ wbrWebBrowser.CanGoForward ‘ Toon