A Web Browser Project In Visual Basic.

Microsoft's Visual Studio has some powerful components, and here I use one in a simple HTML editor. It is meant as a VB project for a beginner, or someone learning raw HTML. We can type raw HTML code into the editor, and the equivalent HTML view is shown instantly in another window, with its fonts, layouts etc. Here is a screenshot:

Using a button for each function is unusual - I'm doing this so that you can see every function, and to simplify the creation of an initial version. This is easy to change later, if you wish.

It is intended as a little project for beginners to work on, and enhance. (Yes it does work, and I used it to create this page!). Below, there is a link to my VB code in a txt file. There is no instant gratification of an exe file - sorry!

The main steps are: Create the form, add code to the buttonclick events, add code to the textChanged event..

Create the Form

• Download Visual Studio if you need to, and create a VB solution, Then look at the above screenshot.
• The leftmost area is a Rich Text Box, so drag one onto your form and resize it.
• The right area is a WebBrowser component - where the magic happens. Drag one onto your form,and resize it.

Add Code

• Download my code from here , around 150 lines. Put a button on the form, and alter its caption to H1. Double-click the button to go to its 'click' event sub, and paste in my H1 code (one line), I like to rename my controls, but you can do this later. As proof of concept, just do the one H1 button for now.
• Events: when you double-click a button in the designer, VB creates a sub for your click event. Of the several possible events (e.g. hover etc) the click is the default one for a button. But we also need to detect any change in the RichText, and update the WebBrowser. This is a different event. So, from the top menus, choose View | Properties window, Click in the RichTextBox, and choose 'Events' in its properties, and then its event list (the lightning flash). Double-click on TextChanged. A sub will be created - paste in the single line from my TextChanged sub, which is:

   WebBrowser1.DocumentText = RichTextBox1.Text
  

  This causes an update for every character typed, every cut/paste, etc.
• Done - so run the code, type any text in the left area, and select a word. Click H1, note the updated right area.

In the same way that you did H1, add whichever buttons you need. The Load/save routines are a bit crude, but work. Ensure you save any text before quitting.

To enhance, you might want to:

• put all the button code in a drop-down menu
• add an image link button, similar to my link code
• Create a sub for the form-closed event, and add code to do an automatic save.
• investigate scrolling the web-browser to match the rich text box.