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.
See project explorer in figure 31.1.
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 as
shown in figure .31.2
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 of the page (see figure 31.2).
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. See
figure 31.3 .
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 as shown in figure
31.4. 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 as show in
figure .31.5
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.
No comments:
Post a Comment