Designing the UI

The User Interface, or UI, is the single most important part of your Document. It's the only portion the user will see, and it says a lot about the quality of your work. A poor user interface can make or break an application, and the same is true for ActiveX Documents. You've used programs in the past that had a poor layout, and it in turn made it hard to get work done, so you tried something new. You're web site can suffer the same fate if your Document isn't well thought out, and breaks from the standard that your users are used to. So, just like with a VB Application, you should have an idea of how you're Document is going to look prior to starting VB. There are a few different ways that any application should be laid out, but there are a few simple rules you can follow.

1. Try to make your Document look like everything else. While the point of programming is the be unique, a design that users are used to will speed along their work, and they are more likely to use your future products because they know they can depend on you.

2. Try to 'bundle' everything. While it's simple to use the LoadPicture function to make an animated graphic, it's better to use the ImageList control to store your pictures. While it will add size to you're final product, you won't have to ship the graphics along with your program, lessening the chance that the program can fail because a needed file isn't present.

Those two rules will help you to make a robust program that people will enjoy using.

The first step in designing your user interface. It should be noted that you'll need VB 5/6 Pro or Enterprise to make ActiveX Documents. Open VB and select ActiveX Document (DLL) as the project. First thing you'll notice is that it doesn't look much different than a normal VB project, except that the OLE container can't be placed on the UserDocument. First thing you should do is name and save your project. So name the project, but keep it simple. I used UDTut as the project name, and UDoc as the UserDocument name. Next change the ScaleMode of the UserDocument to 3 (pixel). I personally find this easier to use since any graphics I place, I can open in a Paint program and get the size in Pixels of (if I don't already know it). Now you're ready to design the Interface itself. I'll not go step by step of what I did, rather give you some examples of what can be done.

First you have to decide how you want the interface to be laid out. You really only have two choices, either Horizontal or Vertical. Either way, remember that a UserDocument is best viewed in a framed window, with the HTML documents loaded to the Right or top. Either way, try not to take up more than 20% of the Height/Width depending on your layout, so there is enough room for the HTML documents to be viewed.

After you've decided how you want the document laid out, you'll have to place the controls you'll need. It's best to try and stick with only the basic VB controls, as the more controls you use, the longer it's going to take for users to download the needed files for your document if they don't already have them.

You'll may have noticed that there are some properties that User Documents have, that normal forms don't. The most important of these is the Hyperlink Object. To access the Hyperlink. Object you have to access the Control it's part of, or the UserDocument. Unlike forms, you don't access the User Document by it's name, rather by Using UserDocument. So to call the Hyperlink. Object it would look like:

UserDocument.Hyperlink.

Hyperlink. has three methods available to it: GoForward, GoBack, and NavigateTo.
Go Forward Tells the Document to move forward in the history list (just like the Forward button in your browser). GoBack as serves as a way to move thru the history list. The browser will handle most errors if a page doesn't exist, but using GoBack and GoForward, if there is no document in the list, the browser won't handle it, and you must do your own error checking. So before you use GoForward or GoBack, so a possible GoForward statement may look like this:

On Error GoTo NoDocument
UserDocument.Hyperlink.GoForward
Exit Sub

NoDocument:
Resume Next

That will ensure that your users don't get any errors.

The NavigateTo method is used to move to a new document, similar to the HREF property in HTML. There are three variables that can be passed to the method, however the second two are optional. Target is the file or document you want to load. It must be in HTML format, and follows the same rules as the HREF property. Location is a specific location in the document, as set by the Name tag in HTML. If no such location is found, The document is loaded at the top. Last there is Frame, this tells the browser which frame to load the document into. An example of NavigateTo might look like:

UserDocument.Hyperlink.NavigateTo "http://www.microsoft.com",,"New_Frame"

You'll notice that there was no error checking for NavigateTo, it doesn't need it as the browser will handle any errors you get in navigation.

The Document I designed for this tutorial doesn't contain any elements that couldn't be done with HTML, but I kept it simple enough for you to see how the code interacts with the browser, rather than give a piece of eye candy, with so much code it's hard to understand. If you look at the source files for this project, you'll see that I commented very well (a rarity in most programming source files) so you shouldn't have any problems following how I've designed the program.

Once you get the interface designed for your Document, the next step is to code any visual items, such as the 'links' I used, which are labels that change color when the mouse is moved over them. After the Interface is completely designed, you might want to run your document, and see if everything is fine. First off, run the program (F5) then minimize VB. Open up Internet Explorer, and in the address box, type in the path of your copy of VB. (example: mine is C:Program FilesDevStudioVB), and the name of your document, (not the project, but the UserDocument) followed by .vbd. If you've never run an ActiveX document before, a download box will open, ask what you want to do with the file, select run from current location. This only needs to be done once. If you get a warning saying that your settings won't let you view the file, Select Tools | Internet Options form the menu bar. Select the Security Tab, and click the custom level button. Under the ActiveX controls and plug-ins heading, set the first three options to Prompt, and the last two to Enable. This will allow you to download and view ActiveX controls, while still informing you if the control might be unsafe.

Once you've viewed your control, and you happy with how it looks, it's time to code. Coding is no more difficult, or easy as it is with VB, so not to worry if you've had trouble with Coding JAVA applets in the past.