DHTML Application

DHTML (Dynamic HTML) is a new concept introduced by Microsoft, where developers can dynamically change style and attributes of elements in HTML page after the page is loaded. Dynamic HTML allows you to break HTML page into various elements and program individual elements. That means you can treat a line of text as an element and change its attributes such as foreground color, background color etc, at run time using the code. You can also write code for events of elements.

DHTML is a new way of creating a Web page and it is made available to Visual Basic 6.0 programmer through DHTML application.

Note: To run DHTML application, you must have Internet Explorer 4.x or higher.


What is a DHTML application?
A DHTML application is a collection of HTML pages and Visual Basic code. DHTML application resides on the client machine and runs in Web Browser (Internet Explorer). The code written in Visual Basic responds to event such as user clicking on a button, mouse moving over an element etc.

Structure of DHTML application
A DHTML application is consisting of the following pieces:

• One or more HTML pages
• Visual Basic code to handle events that occurs in browser when user is viewing HTML pages.

Form-based application vs. DHTML application
Unlike a normal Visual Basic application, in DHTML application, the user interface consists of a collection of HTML pages. When user runs the application in Web browser, the user interacts with HTML pages and not Forms.

An HTML page can contain control just like a form. HTML page is stored with extension .htm, which is similar to .frm of a Form.

The following table will highlight the differences between form-based application and DHTML application.

Item Form-based Application DHTML application
User Interface Forms HTML pages
User interface elements such as buttons, text boxes. Controls Elements
File format .frm .htm
Creator Developer Developer or Web Designer.
Run time Visual Basic run time DLL, msvbvm60.dll Web browser control with msvbvm60.dll.
Table 31.1: Comparing Form-based application with DHTML application.




Features of Dynamic HTML
Dynamic HTML is relatively new concept. It takes some time for it to settle down. The following are the key features of Dynamic HTML. For detailed information regarding each of these features, please see on-line documentation.

• Allows you to create more interactive user interface through dynamic styles and dynamic content. Dynamic styles allow you to change the style of element at run time. Dynamic content allows you to customize (adding new elements, removing existing elements and modifying elements) the web page without browser submitting the request to server. This reduces time taken for customization.
• Allows you to place any element at the required position by using x and y coordinates.
• When an event occurs on a child object, the event can travel up the chain of hierarchy within the page until it encounters an event handler to process the event. This process is called event bubbling.

Developing a DHTML Application
Developing a DHTML application is not much different from a form-based application. The following are the steps involved in the process:

• Start a new project and select DHTML Application as the project type.
• From the Project Explorer window, open DHTML page designer by double clicking on the page.
• If you are designing your user interface from scratch, add HTML elements and ActiveX controls to your page and arrange them as desired.
• If you want to edit an existing page, use the Properties dialog box to refer an external HTML file, then make any necessary changes to the page's contents and appearance.
• Add code for any elements on the page for which you want to handle user actions.
• If necessary, add other pages to the project, add elements to them, and write code.
• Test and debug the application by running the project and viewing the document in Internet Explorer 4.01 or later.
• Compile the project.
• Deploy the application using the Package and Deployment Wizard.

Saving a DHTML page
You can save DHTML page in either of two ways:

Save it within designer file - saves the page as part of your application. No external .htm file is created. The .dsr file contains the page. This method is good when you want to move your application from one machine to another. But it doesn’t allow you to edit .htm file using external editor.

Save the page to a location on your computer - the page is saved to an external file, whose absolute path is given using Sourcefile property. This allows you to use external editor to edit .htm file. But it becomes difficult to move all external files when you move your application.


Writing code for Dynamic HTML
When you are working with DHTML application in Visual Basic, you use Dynamic HTML object model to access and manipulate HTML element on the page. You can modify appearance and behavior using properties and method of the elements.

Dynamic HTML object model
The following are the main objects in object model.

Basewindow - is a reference to the browser that displays the page. This is the topmost object in the hierarchy of Dynamic HTML object model.

Document – represents HTML page that you view in browser.

Events in Dynamic HTML
Most of the events of Dynamic HTML are same as events in Visual Basic. However the names of the event slightly differ. For example, Click event in Visual Basic programming model will be OnClick in Dynamic HTML object model.

Note: All events in Dynamic HTML are preceded by word “on”.

Also note that there are certain new event in Dynamic HTML that are not available in Visual Basic and some of the Visual Basic events are not available in Dynamic HTML.

Visual Basic events vs. Dynamic HTML events
The following tables list events in Visual Basic and corresponding events in Dynamic HTML in various categories.

Keyboard Events
Keyboard events in Dynamic HTML correspond very closely to keyboard events in Visual Basic. The following table lists the common Visual Basic keyboard events and their Dynamic HTML counterparts:

Visual Basic Event DHTML Event Comments
keydown onkeydown Fires when a key is pressed.
keypress onkeypress Fires when a user's keyboard input is translated to a character.
keyup onkeyup Fires when a user releases a key.
Table 31.2: Comparing Visual Basic form events with DHTML events.

When a keyboard event occurs, the keycode property of Dynamic HTML's event object contains the Unicode keycode of the corresponding key. The altKey, ctrlKey, and shiftKey properties specify the state of the ALT, CTRL, and SHIFT keys.

You can change which key is associated with the event by either changing the value of the keycode property or returning an integer value.

Note: You can cancel the event by returning zero or false.
Mouse Events
Mouse events in Dynamic HTML correspond closely to mouse events in Visual Basic. The following table lists the common Visual Basic mouse events and their Dynamic HTML counterparts:

Visual Basic Event DHTML Equivalent Comments
click onclick In addition to occurring when a user clicks on an element, this event also fires when the user presses ENTER on an element that can receive focus, such as a button.
doubleclick ondblclick This event works similarly to its Visual Basic counterpart.
mousedown, mouseup, mousemove onmouseout, onmousedown, onmouseup, onmousemove, onmouseover When moving between elements, the onmouseout event fires first to indicate that the mouse has left the original element. Next the onmousemove event fires, indicating that the mouse has moved. Finally, onmouseover fires to indicate that the mouse has entered the new element.
Table 31.3: Comparing Visual Basic Events with DHTML events.

When a mouse event occurs, the button property of the event object identifies which mouse button (if any) is down. The x and y properties specify the location of the mouse at the time of the event. For onmouseover and onmouseout events, the toElement and fromElement properties specify the elements the mouse is moving to and from.

Focus and Selection Events
Focus and selection events in Dynamic HTML differ slightly from their Visual Basic counterparts. In particular, focus events are called only from certain elements, and selection and dragging are handled differently.

The following table lists the common Visual Basic focus and selection events and their Dynamic HTML counterparts:

Visual Basic Event DHTML Equivalent Comments
gotfocus onfocus Fires when the user moves to an element capable of receiving input, such as a button or form element.
lostfocus onblur Fires when you move out of an element that is capable of receiving input.
selchange onselectstart
onselect The onselectstart event fires when a selection is first initiated — for example, when the user clicks a character or object in the document. Onselect fires when the user changes the selection — for example, by moving the mouse over a portion of the document while holding down the mouse button.
dragdrop, dragover ondragstart Fires when the user first begins to drag the selection. The default action is to prepare the selection to be copied to another element.
Table 31.4: Focus events comparison.

Note: Onblur and onfocus fire whether you move between elements in the page, between frames, or even between applications on the desktop. For example, if a page element has focus and the user switches to another application, the onblur event fires for that element. When the user switches back, onfocus fires.

Other Events
The following are the events that do not belong to any of the categories discussed so far.

Visual Basic Event DHTML Equivalent Comments
change onchange Onchange fires when the user tabs off or presses ENTER on an element, moving out of it. In Visual Basic, the change event fires as soon as the user performs any action within the control.
close Not Available No direct equivalent exists for this event.
error Onerror Fires when an error occurs loading an image or other element, or when a scripting error occurs.
initialize Onready
statechange Fires when the page changes from initializing to interactive, and from interactive to loaded. A page is interactive as soon as the user can interact with it by scrolling or clicking on anchors or elements. A page is loaded when all the content has been downloaded.
load Onload Fires after the document is loaded and all the elements on the page have been completely downloaded.
paint Not Available No direct equivalent exists for this event.
resize onresize This Dynamic HTML event functions similarly to its Visual Basic counterpart; however, you do not need to write code to handle resizing of an HTML page as you do a Visual Basic form. Resize in HTML happens automatically.
scroll onscroll Fires whenever the scroll box for the page or any element within it is repositioned.
terminate Not Available No direct equivalent exists for this event. You can perform terminate-type actions in the onunload event. A terminate event does exist for the DHTMLPage object. This object is not part of the DHTML object model, and is unique to Visual Basic.
unload onunload Fires immediately prior to the document being unloaded (when navigating to another document).
Table 31.5 : Comparing miscellaneous events.

Events Unique to Dynamic HTML
In addition, there are some events in Dynamic HTML that do not have equivalents in Visual Basic. A few of the more interesting of these are shown in the following table:
DHTML Event
Usage
Onabort Fires when the user aborts the download of an image or page element by pressing the Stop button.
Onreset Fires when the user selects a Reset button on a form.
Onsubmit Fires when the user selects a Submit button on a form. Can be used to perform validation of data on the client before sending it to the server.

Making Elements programmable
You can programmatically handle elements on HTML page in DHTML application. That means you can write code for events of the elements and the code is executed whenever the event occurs on the element. You can also change property of the elements dynamically.

To make an element programmable, the element must be assigned an ID. Some elements are by default assigned and ID. Whereas for some other elements you have to provide ID.

To makes an element programmable:

1. Select element in Designer.
2. Invoke properties for the element
3. Change ID property to a unique ID.
4. Refer to the element in the program using ID that you assigned in previous step.

Note: All IDs on a page must be unique. If you have a duplicate ID then at the end of ID Visual Basic adds a number to make it unique.

Enabling the default action
Many event of elements have default action. For example, when you click on a Hyperlink to invoke the specified page, the click event by default will take you to the required page. But if programmer writes code then programmer has to let the default action take place.

To let default action take place, return True from the event and returning False (default) doesn’t perform the default action.

Common Styles for HTML Elements
The style properties you use to set the physical appearance of an HTML element are named differently than their corresponding properties in Visual Basic.

The following table lists a few of the more frequently used styles and explains their use.

DHTML Style
Purpose
backgroundcolor Setting the background color of all elements except the Document object, which represents the body of the page. For the page itself, the property is called bgcolor.
border Setting a border around any element. All elements on an HTML page can have a border, including paragraphs of text.
color Setting the foreground color for all elements except the Document object, which represents the body of the page. For the page itself, the property is called fgcolor.
Font Setting the font for the element. A series of related properties (fontfamily, fontsize, fontstyle, etc.) are used to fine-tune the appearance of the font.
Margin Controlling the distance between the border of the element and the edge of the page. This property can be set to control all of the element's margins, or you can set the top, bottom, left, and right margins independently through a series of related properties.
padding Controlling the distance between the inner text of the element and its border. This property can be set to control the padding space on all sides of the elements, or you can set the padding of the top, bottom, left, and right sides independently through a series of related properties.
textdecoration Formatting text within an element. You use this property to make the text blink, or to display it with a strikethrough, underline, or overline.
Table 31.6: Common style of DHTML elements.

Creating sample DHTML application
We have seen a lot of DHMTL theory. Now let us put that to practice by developing a simple application. The application is creation of three web pages that contain the information regarding P.Srikanth (author). The application contains three pages - Home page, Experience page and Courses offered page. The first page is called as home page and contains links to other pages. Experience page displays the experience in various divisions. And last page is the most interesting of all. It takes the details of courses offered by Srikanth from a database and displays details based on the course selected by user.

I should admit, through this sample application, I can cover only a part of DHTML application’s ability. If you are interested in developing more application using DHTML applications, then I strongly suggest you read everything about Dynamic HTML in on-line documentation.

To create sample application:

1. Start a new project and select DHTML application as the type of the project.
2. Visual Basic creates a new project with two components – code module, modDHTML, and DHTML page, DHTMLPage1.

Double click on DHTMLPage1 to invoke designer and to load DHTML page into it.

Understanding TreeView pane and Detail pane
In DHTML page designer we have two portions. Left side pane is called as Treeview and right side pane is called as Detail pane.

Treeview Pane
TreeView pane displays hierarchical representation of the element within HTML page. Some of the element contains ID by default. And for elements that do not have id by default you can assign Id using Id property.

All elements in the treeview are children of the Body element and the Document object

Note: When you are working with DHTML page designer you get a different tool box containing element related to DHTML page.

The treeview provides three valuable shortcuts:

• When you select an item in the treeview, Visual Basic highlights the appropriate item in the detail panel and in the Properties window. This can help you determine at a glance the correspondence between elements in the treeview and on the page. Note that this works in reverse as well: When you select an element on the detail panel or in the Properties window, Visual Basic highlights the corresponding element in the treeview and scrolls the treeview accordingly.
• You can double-click an element in the treeview to open the Code Editor window for that element. The system selects the default event for the element.
• For ActiveX controls that do not have a visible user interface at run time (such as the common dialog control), the treeview is the only way you can select and manipulate these elements after adding them to your page.

Detail Pane

Presents a drawing surface on which you can create a new page or edit the contents of an existing page. You can add HTML elements to the page, position elements, and set properties that control their physical appearance.

Creating first HTML page
Now let us concentrate on creating first page. This page contains two hyperlinks to the other two pages of this application. This page also contains some text and an image.

Let us understand how to create all these elements.

1. Invoke properties by pressing F4 and select IDHTMLPageDesigner using dropdown listbox at the top and change Name and Id properties to homepage.
2. First go to the top of the page and type “Home Page of P.Srikanth” and change its format to heading1 using dropdown list box on the upper-left corner.
3. Place a HorizontalRule below the text so that it works as the divider.
4. Place two paras of text
5. Place first of two hyperlinks and change text on the hyperlink to “Experience”.
6. When the hyperlink element is selected press F4 to invoke properties and change the href property to skwebsite_experience.html. In hyperlink reference, skwebsite is the name of the application, and experience.html is the name of the html file that will be created for second HTML page.
7. Place second hyperlink and change text on the hyperlink to “Courses”
8. Change href property of second hyperlink to skwebsite_courses.html. When user clicks on this hyperlink, page containing course details is displayed.
9. Place an image on the right of title
10. Invoke properties of image element and change Image source property to the name of the file in which you have required image. In this example the complete path is C:/Books/VB60/programs/me.bmp.
With that designing part of first page is complete.

Note: In case you want to write code for any of the paras, change ID property and use the given id in your program to refer to the element.
Creating second page (Experience)
Second DHTML page contains the information regarding experience. This page is simplest of all three pages. Apply the following procedure to create and design second page.

1. Select Project -> Add DHTML page to add a new DHTML page to project.
Visual Basic displays a dialog box asking whether you want to save HTML of the page to be saved as part of project or it is to be saved in an external file. S
2. Leave it to default setting (saving as part of project) and click on Ok.
3. Invoke properties and change Id and Name properties of IDHTMLPageDesigner to Experience.
4. Enter text Placing the text on the page is done by straightaway getting to the required position and typing the text.

That’s all you have in experience page.

Now if you want to test how it works, run the project using F5. When VB prompts you to specify the first page, select homepage as the startup page. And accept homepage as the startup page. When you click on experience hyperlink, you should enter into experience page.
Creating Third page (courses)
This page has a lot of process. Because, this page takes the list of courses from database and displays the list in a list element to user. And when user selects a course from the list, it displays the details of the selected course. The total process is handled using ADO. The database is COURSE.MDB and the table is subjects.

This page contains a list element and a few textfields. List element is used to display the list of available subject (each subject is treated as a course). The list is populated using Load event of the page. And when user selects an option (course) in the list then we will display the details of the course. These details come from subjects table. For this we use OnClick event of the list element.

The following are the steps required to create third page.

1. Add a new DHTML page to project using Project -> Add DHTML Page
Select Save HTML with Visual Basic project options.
2. Invoke properties windows using F4 and change Name and Id properties of IDHTMLPageDesigner to courses.
3. Place elements
4. Change the Value property of all four textfields to empty string.
5. Change ReadOnly property of all four textfields to True. Because textfields are used to display the information only. User is not supposed to change the data.
6. For List element, by default one option is added. Invoke property page of list element and delete all the options in the list element using Delete button.
7. Change size to 5 lines.

As we are going to use ADO, load Microsoft ActiveX Data Objects 2.0 library using Project->References.

And finally write the following code.

General/Declarations

Dim rs As New ADODB.Recordset
Dim con As New ADODB.Connection

Private Sub DHTMLPage_Load()

Dim elmnt As HTMLOptionElement

' connect to database and get the details of the courses offered
con.Open "Provider=Microsoft.jet.oledb.3.51;data source=c:\books\vb60\programs\course.mdb"
rs.Open "select scode,sdesc from subjects", con

' load data into list box


Do Until rs.EOF ‘add one element at a time
Set elmnt = Document.createElement("OPTION")
With elmnt
.Text = rs("sdesc")
.Value = rs("Scode")
End With
List1.Options.Add elmnt
Set elmnt = Nothing
rs.MoveNext
Loop
rs.Close
Set rs = Nothing

End Sub

‘ Returns second value if first value is null
Public Function Nvl(av As Variant, rv As Variant) As Variant

If IsNull(av) Then
nvl = rv
Else
nvl = v
End If

End Function

Private Function List1_onclick() As Boolean
' get the details of the selected subject
Dim scode As String
Dim rs As New ADODB.Recordset

scode = List1.Value
qry = "select version, duration, prerequsite,coursefee from subjects where scode = '" & scode & "'"
rs.Open qry, con

txtduration.Value = nvl(rs("duration"), "")
txtprerequisite.Value = nvl(rs("prerequsite"), "")
txtversion.Value = nvl(rs("version"), "")
txtcoursefee.Value = nvl(rs("coursefee"), "")
rs.Close
Set rs = Nothing

End Function
Listing 31.1: Code for third DHTML page.
Test run
Run the application and check whether all features are working. Take the following steps.

1. Run the application using F5. Visual Basic displays home page.
2. Click on Experience hyperlink (it will be underlined)
Internet Explorer displays Experience page.
3. Click on Back icon in Internet Explorer.
4. Click on Courses hyperlink.
5. Select one of the subjects listed in the list element. The details of the selected page are displayed in text box elements.
6. Quit the application by terminating Internet Explorer.