Improving interface design by using IE's WebBrowser control in VB

Source: Internet
Author: User
Web|webbrowser Control | Design WebBrowser control using IE in VB

Improved interface design





In the programming, how to design a beautiful, practical, personalized interface is the goal that each program designer pursues in the interface design. With the introduction of Windows XP, a variety of different ornate interfaces are increasingly recognized by programmers and users of software.

With WebBrowser controls in Windows, you can apply gorgeous web design techniques to interface design, such as Microsoft's famous MSN browser's many interfaces are actually a Web page, the Help Center in Windows XP, Microsoft Some interfaces in many software, such as the Encarta (Microsoft Encyclopedia), are also web pages that are displayed using the WebBrowser control.

Using the WebBrowser control to display a Web page, making a simple browser has been introduced many articles, implementation is not complicated, but how to implement the program and Web page interaction is to apply it to the interface design of the key.



Use of ActiveX controls and WebBrowser controls

The first step in creating an application in Visual Basic is to create an interface. The control is the basic module that creates the interface, and is the object that is included in the Form object. Each type of control has its own properties, methods, and events, the properties generally control the appearance of the control, the size of the property, the method is the ability or function of the control, the event represents the interaction with the user, such as the mouse mobile clicks, keyboard input, etc. will trigger the corresponding event.

The WebBrowser control is a programmable ActiveX control provided with the above version of IE 3.0, which enables you to display, control, and analyze Web pages with the help of the WebBrowser control, in addition to the Ie,chm format for browsing, It is also widely used in many browsers and other programs with IE as its core.

The use of WebBrowser controls in VB is simple. Start VB, create a Standard EXE project, select Engineering-Parts, open the Parts dialog box, locate the Microsoft Internet Controls, click Apply after selecting, and then close the dialog box (below) to see that the WebBrowser control has been added to the toolbar.


Drag the WebBrowser control to the form, resize it to the appropriate size, open the Code window, and type the following code in the Form_Load procedure:



Private Sub Form_Load ()

WebBrowser1.Navigate "Http://www.sohu.com"

End Sub



Run the program, you can see Sohu's homepage is displayed in the corresponding dialog box. If it is a local Web page, simply replace the http://www.sohu.com with the full path of the local file (directory + filename).



Controlling WebBrowser controls

Using the WebBrowser control's GoBack (back), GoForward (forward), GoHome (Home page), Navigate (positioning), refresh (refresh), Stop (stop), and so on, you can implement the general operation of the browser. For example, to implement an action in the Address bar, you can add a text box and a button to the form and add the following code to the button's Click event:



Private Sub Command1_Click ()

WebBrowser1.Navigate Text1.Text

End Sub



This way, you can enter an address into a text box and click the button to access a different site. WebBrowser controls are similar to other methods of operation, and readers can refer to the MSDN introduction.



Implementing Web pages interacting with programs

The key to implementing a Web page's interaction with a program is to overwrite the BeforeNavigate2 event of the WebBrowser control, intercept the action that needs to interact with the program, and then do the appropriate action. For example, we create a new simple Web page test.htm in the program directory, which reads as follows:



<HTML>

<HEAD>

<TITLE> Test </TITLE>

</HEAD>

<BODY>

<a href= "test1.htm" >test1</A><br>

<a href= "test1.htm" >test2</A>

</BODY>

</HTML>



In the Form_Load procedure, type the following code:



Private Sub Form_Load ()

WebBrowser1.Navigate App.Path & "\test.htm"

End Sub



Run the program, click Test1 or Test2 to open the corresponding test1.htm (if test1.htm exists), or the display file cannot find the error. So how to intercept the user clicks Test1 This hyperlink, we in the BeforeNavigate2 this event to type the following code:



If Right (URL, 9) = "Test1.htm" Then

MsgBox "Test1 clicked"

Cancel = True ' causes the WebBrowser control to stop the corresponding event

ElseIf Right (URL, 9) = "Test2.htm" Then

MsgBox "Test2 clicked"

Cancel = True

End If



Running the program, you can see that the program has intercepted the user clicks the corresponding hyperlink event (note: The right function is used to extract only the last part of the URL, because the URL also includes information such as network protocol and directory). In this way, we can use the Web page in the program interface to implement the user interface, and by intercepting the corresponding click events, by judging the corresponding URL, know the user's operation, so that the program to do different operations.



The realization of skin change (Skin)

Using the above program design ideas, we have to achieve the skin of the program. Because the action of the program concentrates on the handling of this event for the WebBrowser control BeforeNavigate2, only the value of the URL, it has nothing to do with the content and design of the Web page, so not only can the design of the interface and program be separated, And it's easy to do such things like skin-changing.

The specific implementation approach can be described briefly as follows:

1. Make several different web pages, but ensure the corresponding hyperlinks (URLs) consistent;

2. Design a skin-changing operation in the program to toggle the Web page displayed by the current WebBrowser;

3. Handle all the actions in the BeforeNavigate2.

The following is the design of a simple example of the running screen. If you set the form to have no title bar, no border, the effect will be better.






The code for All programs is as follows, and the implementation is very simple.



Option Explicit



Private Sub Form_Load ()

WebBrowser1.Navigate App.Path & "\1.htm"

End Sub



Private Sub Option1_click ()

WebBrowser1.Navigate App.Path & "\1.htm"

End Sub



Private Sub Option2_click ()

WebBrowser1.Navigate App.Path & "\2.htm"

End Sub



Private Sub Webbrowser1_beforenavigate2 (ByVal pdisp as Object, URL as Variant, Flags as Variant, targetframename as Varian T, PostData As Variant, Headers as Variant, Cancel as Boolean)



If Right (URL, 3) = "Then"

MsgBox "clicked!"

Cancel = True

ElseIf Right (URL, 3) = "222" Then

MsgBox "222 clicked!"

Cancel = True

End If



End Sub



Conclusion

VB in the implementation of a distinctive, personalized interface of the program is generally the use of various interface controls, or by calling WINAPI to achieve, but generally many beautiful controls are required to pay for the purchase, and through the programming is more complex, and the modification of the program, maintenance will be very complex.

The WebBrowser control can be used to separate the interface design from the programming, and for simpler programs, simple programming is needed to implement some of the more difficult features, such as Picture buttons, irregular buttons, Animation icons, such as the use of Web pages can be easily implemented features and skin change, such as general program design more difficult to achieve the function. Using the method provided in this paper, the interface design can be widely used in the interface design of various multimedia programs, as well as the design of task panes similar to Office XP and Windows XP in the program.

For interactions with relatively complex tasks such as input and output, there are several ways to do this:

1. Centralize complex operations and interactions and implement them directly using other methods without using a Web page.

2. The input of the program: in the form design of the Web page, set the method of the commit operation to get, the user input appears in the URL, the user input can be obtained by resolving the URL, and the corresponding action is made.

3. The output of the program: implemented by overwriting the displayed Web page. Design a template, read this file, and apply the Replace function to quickly replace the contents of the program template with the results of the program operation.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.