login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > C#.NET

Gegevens:
Geschreven door:
 Abbas
Moeilijkheidsgraad:
 Normaal
Hits:
 18413
Punten:
Aantal punten:
  (5)
Aantal stemmen:
 4
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (10)
 

Tutorial:

[C#] Zelf een WebBrowser maken

1. Inleiding
2. Form - design
3. Code (knoppen)
4. Code (menu)
5. Vorige/volgende
6. Titel / StatusBar / URL-veld
7. ProgressBar updaten
8. Slot

1. Inleiding

Deze tutorial is er eentje op aanvraag. Het is een andere versie van een tutorial (gemaakt door sliphead) die hier al op sitemasters staat, het enige verschil is dat deze op mijn manier is gemaakt en ik gebruik C# in plaats van VB.NET! :) Als je toch de VB.NET-versie wil volgen is die hier te vinden! Het idee is dus om op een eenvoudige manier onze eigen webbrowser te maken. De belangrijkste Control voor de browser is dan ook de WebBrowser-Control. Genoeg inleiding, aan de slag nu.

pijl top

2. Form - design

Maak een nieuwe WindowsApplication en noem het project 'CustomBrowser' of iets dergelijks. Eerst even nog de Name - property van onze Form wijzigen in 'frmMain'. Hierna moeten we nog een aantal Controls toevoegen aan de Form om er een Browser van te maken.

Sleep de volgende Controls op je Form, tussen de haakjes staat de gebruikte Name - property.
  • MenuStrip (mainMenu)
  • ToolStrip (buttonMenu)
  • WebBrowser (browseWindow)
  • StatusStrip (statusBar)
Zorg dat de MenuStrip en de ToolStrip helemaal bovenaan staan en de StatusStrip helemaal onderaan. Je WebBrowser maak je zo groot als de resterende ruimte binnen de Form.

De enige eigenschap die je van de WebBrowser 'moet' wijzigen is de Url-eigenschap, dit is de URL naar waar de Browser standaard zal gaan.
In de MenuStrip maak je één item en dit noem je 'Bestand'. In dit menu maak je drie items:
  • Open URL
  • Open bestand
  • Afsluiten
De ToolStrip zal een aantal knoppen bevatten en een TextBox die dient als adresbalk. Als je op de TooStrip klikt zie je dat je een aantal Controls hierop kan toevoegen. Voeg vijf knoppen, een TextBox en nog een knop toe. Dit zijn de namen van de Controls:
  • btnVorige
  • btnVolgende
  • btnZoek
  • btnHome
  • btnRefresh
  • txtUrl
  • btnGo
Geef aan de knoppen ook de juiste Text - properties mee natuurlijk. Als laatste in de StatusStrip voeg je een StatusLabel (lblStatus) en een ProgresBar (statusProgress) toe.
Dit alles is wel wat werk, maar het is altijd handig om iets of wat duidelijke namen aan je Controls te geven zodat deze handiger te gebruiken zijn in je code.

pijl top

3. Code (knoppen)

Dubbelklik op de knop 'btnVorige' in Design - mode, een event wordt automatisch aangemaakt. Hierin zet je de volgende code:

Code browseWindow.GoBack();

Hetzelfde doe je voor 'btnVolgende', maar dan met deze regel code:

Code browseWindow.GoForward();

Voor de andere drie knoppen is het eigenlijk ook hetzelfde, dubbelklikken en één regeltje code plaatsen:
  • btnZoek: browseWindow.GoSearch(); //Naar de default zoekpagina gaan
  • btnHome: browseWindow.GoHome(); //Naar de hoofdpagina van de huidige gebruiker gaan
  • btnRefresh: browseWindow.Refresh(WebBrowserRefreshOption.Normal); //pagina herladen
Je kan in plaats van Normal, ook kiezen voor 'Completely'. Dit is hetzelfde als een hard - refresh (CTRL + F5).

Nu is het enkel nog voor btnGo de code instellen, dit event zorgt ervoor dat de ingevoerde URL wordt geladen:

Code NavigateToUrl();

Dit is een eigen functie om naar een URL te gaan. Waarom een eigen functie? Omdat er meerdere events zijn waar dit zal aangeroepen worden. Hier is de code van de functie NavigateToUrl:

Code private void NavigateToUrl()
{
   strUrl = txtUrl.Text.Trim().ToLower();
   if (IsValidUrl(strUrl))
       browseWindow.Navigate(strUrl);
}

Zorg dat je een private string 'strUrl' declareert helemaal bovenaan je codefile. Deze wordt gebruikt in deze functie. Je ziet ook de aanroep van een functie IsValidUrl(), deze zit niet in het .NET Framework maar heb ik zelf geschreven. Hieronder is de code van de functie, deze plaats je gewoon onder het event van de 'btnGo'-knop.

Code private bool IsValidUrl(string input)
{
   Regex RgxUrl = new Regex("^(((h|H?)(t|T?)(t|T?)(p|P?)(s|S?))\://)?(www.|[a-zA-Z0-9].)[a-zA-Z0-9\-\.]+\.[a-zA-Z]*$");
   if (String.IsNullOrEmpty(input))
       return false;
   if (RgxUrl.IsMatch(input))
       return true;
   else
       return false;
}

Deze functie kijkt na of de invoer niet leeg is. Zo niet, wordt er gekeken met een reguliere expressie of de ingevoerde tekst wel een geldige URL is.

pijl top

4. Code (menu)

Klik in Design - mode één keer op 'Bestand' op je Form en dan twee keer op het eerste item (Open Url). Er zal automatisch een event worden aangemaakt, hierin zet je de volgende code:

Code txtUrl.Focus();

Hiermee zetten we de Focus op onze adresbalk. Je zou zelf nog een kleine uitbreiding kunnen maken door met een kadertje te werken dat opent waarin je dan een URL kan ingeven en dat die geladen wordt. Hier doen we dat niet. Nu gaan we zorgen dat we een lokaal bestand ook kunnen openen. Sleep vanuit de ToolBox een OpenFileDialog - Control naar je Form en geef deze als Name 'openHtmlFile'. Zorg ervoor dat je zoals hiervoor een event krijgt voor de knop met 'Open bestand' hierin zet je de volgende code:

Code if (openHtmlFile.ShowDialog() == DialogResult.OK)
   browseWindow.Navigate(openHtmlFile.FileName);

Voor het item 'Afsluiten' is maar een klein regeltje nodig:

Code Application.Exit();

pijl top

5. Vorige/volgende

De knoppen 'Vorige' en 'Volgende' mogen alleen klikbaar zijn wanneer er daadwerkelijk naar een vorige of volgende pagina kan gegaan worden. Dit moet dus nagekeken worden, hiervoor hebben we twee Events: CanGoBackChanged en CanGoForwardChanged. Je kan deze blijkbaar niet instellen in Design - mode van je Form dus doen we het even via code, voeg de volgende twee regels toe aan je Form_Load event:

Code browseWindow.CanGoBackChanged += new EventHandler(browseWindow_CanGoBackChanged);
browseWindow.CanGoForwardChanged += new EventHandler(browseWindow_CanGoForwardChanged);


Onder het Form_Load event plaats je dan de volgende code:

Code private void browseWindow_CanGoForwardChanged(object sender, EventArgs e)
{
   btnVolgende.Enabled = browseWindow.CanGoForward;
}

private void browseWindow_CanGoBackChanged(object sender, EventArgs e)
{
   btnVorige.Enabled = browseWindow.CanGoBack;
}


Als er verder of teruggegaan kan worden zetten we afhankelijk daarvan de juiste knop op Enabled (true/false). De functie die sliphead hiervoor geschreven had via een if - statement is evengoed correct, maar dit is toch iets korter.

pijl top

6. Titel / StatusBar / URL-veld

Om ervoor te zorgen dat de Title - eigenschap van onze CustomBrowser mee verandert met de pagina hebben we hiervoor ook een event voorzien, hetzelfde geldt voor de statusbar onderaan de browser. Voeg volgende twee regels code toe aan je Form_Load event, onder de twee vorige:

Code browseWindow.DocumentTitleChanged += new EventHandler(browseWindow_DocumentTitleChanged);
browseWindow.StatusTextChanged += new EventHandler(browseWindow_StatusTextChanged);

Onder je Form_Load event plaats je dan volgende code:

Code private void browseWindow_StatusTextChanged(object sender, EventArgs e)
{
   lblStatus.Text = browseWindow.StatusText;
}

private void browseWindow_DocumentTitleChanged(object sender, EventArgs e)
{
   Text = "CustomBrowser - " + browseWindow.DocumentTitle;
}

Deze code spreekt voor zich, de status wordt opgehaald en in het Label weergegeven. Bij het andere wordt de titel van het geladen document opgehaald en in de Text - eigenschap van de Form gezet.

Als laatste van dit stuk, is ervoor zorgen dat het URL - veld up to date blijft. Ga in Design - mode naar de Event - properties van je WebBrowser Control. Bij 'Navigated' typ je in het vak 'navigatedReady', het event wordt nu aangemaakt, zorg dat het er zo uitziet:

Code private void navigatedReady(object sender, WebBrowserNavigatedEventArgs e)
{
   txtUrl.Text = browseWindow.Url.ToString();
}


pijl top

7. ProgressBar updaten

Een klein extraatje is om een ProgressBar te hebben die meegaat naargelang het laden van de pagina. Ga terug naar je Design - mode naar de Events en daar typ je bij ProgressChanged dit: 'updateProgress', duw op enter en het event wordt aangemaakt en hierin plaats je volgende code:

Code int percentage = Convert.ToInt32(Math.Floor(Convert.ToDouble((e.CurrentProgress / e.MaximumProgress) * 100)));
statusProgress.Value = percentage;

Via een kleine formule wordt er berekend hoeveel er al van het totaal aantal kilobytes geladen is en dit wordt dan de waarde in de ProgressBar, waardoor deze mooi meevolgt. Daarna plaats je nog deze code onder het event:

Code private void browseWindow_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
   statusProgress.Value = statusProgress.Minimum;
}

Dit zorgt ervoor dat de ProgressBar terug leeg wordt gemaakt als de pagina volledig geladen is. Als je alles goed hebt meegevolgd kan je je CustomBrowser testen door op de 'Play'-knop te klikken of door op F5 te duwen. De browser die ik heb gemaakt ziet er zo uit:

CustomBrowser

Je ziet dat ik afbeeldingen heb gebruikt in de knoppen in plaats van tekts. Je kan in Design - mode gewoon met de linkermuisknop op die knop klikken en dan 'Set Image' doen. Je Import dan een kleine afbeelding die je wilt gebruiken en je krijgt hetzelfde resultaat.

pijl top

8. Slot

Zo, hierbij zijn we aan het einde van deze tutorial die een groot stuk gebaseerd was op die van sliphead, met als enige grote verschil dat deze voor C# is. Met de WebBrowser - Control is het heel gemakkelijk om een eigen browser te maken, want alles daarrond is basis .NET-kennis. Als er vragen en of opmerkingen zijn, stel ze gerust in een reactie of een PM!

pijl top




« Vorige tutorial : Console background & Tekst color

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.013s