Developing Contextsensitive Help for Web Applications

1
Developing Context-sensitive Help for Web
Applications
Scott DeLoach
2
Session Overview
We will discuss how to open and display
context-sensitive Help using

• a separate Help window
• an embedded Help window
• a popup window
• DHTML layers
• and how to store Help topics in a Help database.

3
Sample Application
4
Opening the Help
When the user

• Presses F1
• Clicks a page-level Help link
• Clicks a field-level Help link
• Highlights a term and presses F1

5
Opening Help with F1 (IE Only)

• ltbody onHelp"openHelp()return false"gt

ltbody onHelp"openHelp()return false"gt
ltbody onHelp"openHelp()return false"gt
6
Opening Page-level Help with a Link
lta href"" onClick"openHelp()"gtHelplt/agt
lta href"" onClick"openHelp()"gtHelplt/agt
7
Opening Field-level Help with a Link
lta href"" onClick"openHelp('ProjectNumber')"gt lt
img src"fieldhelp.gif" width"18" height"18"
border"0gt lt/agt
lta href"" onClick"openHelp('ProjectNumber')"gt lt
img src"fieldhelp.gif" width"18" height"18"
border"0gt lt/agt
8
Opening Help Based on a Highlighted Term

• Add to the beginning of openHelp()
• // Netscape
• if (document.getSelection) highID
  (document.getSelection)
• // IE
• else if (document.selection document.selection.
  createRange)
• var range document.selection.createRange()
• highID range.text

9
Opening the Help

• F1 key
• Page-level Help link
• Field-level Help link
• Highlighted term
• Mouseover

10
Displaying the Help

• Separate Help window
• Popup window
• Embedded Help window
• DHTML popup layer

11
Separate Help Window
12
Opening a Separate Help Window
function openHelp(id) // id from field-level
links and highID from highlighted text helpurl
location.href begin(helpurl.lastIndexOf('/')
1) end(helpurl.lastIndexOf('m') 1) if
(id) helpurl "h_"id"_"helpurl.substring(begin
, end) else if (highID) helpurl "h_" highID
"_" helpurl.substring(begin, end) else
helpurl "h_" helpurl.substring(begin,
end) helpWin window.open(helpurl,'CShelpwin','
toolbar0, ? location0,directories0,status0,men
ubar0, ? scrollbars1,resizable1,width500,heigh
t600') setTimeout('helpWin.focus()',250)
function openHelp(id) // id from field-level
links and highID from highlighted text helpurl
location.href begin(helpurl.lastIndexOf('/')
1) end(helpurl.lastIndexOf('m') 1) if
(id) helpurl "h_"id"_"helpurl.substring(begin
, end) else if (highID) helpurl "h_" highID
"_" helpurl.substring(begin, end) else
helpurl "h_" helpurl.substring(begin,
end) helpWin window.open(helpurl,'CShelpwin','
toolbar0, ? location0,directories0,status0,men
ubar0, ? scrollbars1,resizable1,width500,heigh
t600') setTimeout('helpWin.focus()',250)
function openHelp(id) // id from field-level
links and highID from highlighted text helpurl
location.href begin(helpurl.lastIndexOf('/')
1) end(helpurl.lastIndexOf('m') 1) if
(id) helpurl "h_"id"_"helpurl.substring(begin
, end) else if (highID) helpurl "h_" highID
"_" helpurl.substring(begin, end) else
helpurl "h_" helpurl.substring(begin,
end) helpWin window.open(helpurl,'CShelpwin','
toolbar0, ? location0,directories0,status0,men
ubar0, ? scrollbars1,resizable1,width500,heigh
t600') setTimeout('helpWin.focus()',250)
13
Popup Window
14
Opening a Popup Window

• ltscriptgt
• var xy0
• function getPos(e)
• if (e ! '')
• x e.screenX
• y e.screenY

15
Opening a Popup Window (cont)

• function help(helpurl) w screen.availWidth h
  screen.availHeight
• if (w'1024') w970 h775
• wintop y15 winleft x-15
• // next line adjusts if window is off the screen
• if (w - (x550) lt 0) winleft w-525window.open
  (helpurl,"helpwin",'toolbar0,location0, ?
  directories0,status0,menubar0,scrollbars1, ?
  resizable1,width550,height80,screenX'
  wintop ? ',screen' winleft ',top'
  wintop ',left' ? winleft)

function help(helpurl) w screen.availWidth h
screen.availHeight if (w'1024') w970
h775 wintop y15 winleft x-15 //
next line adjusts if window is off the screen if
(w - (x550) lt 0) winleft w-525window.open(he
lpurl,"helpwin",'toolbar0,location0, ?
directories0,status0,menubar0,scrollbars1, ?
resizable1,width550,height80,screenX'
wintop ? ',screen' winleft ',top'
wintop ',left' ? winleft)
16
Embedded Help Window
17
Opening an Embedded Help Window
Create a Top level frameset ltframeset
cols"100," rows"" frameborder"NO"
name"myframes"gt ltframe srcyourapplication.htm"
name"app"gt ltframe src"helpblank.htm"
name"help"gt lt/framesetgt Resize the frameset and
open the Help ltscriptgt function openHelp()
parent.myframes.cols"70,30" parent.help.loca
tion "helppage.htm" lt/scriptgt
Create a Top level frameset ltframeset
cols"100," rows"" frameborder"NO"
name"myframes"gt ltframe srcyourapplication.htm"
name"app"gt ltframe src"helpblank.htm"
name"help"gt lt/framesetgt Resize the frameset and
open the Help ltscriptgt function openHelp()
parent.myframes.cols"70,30" parent.help.loca
tion "helppage.htm" lt/scriptgt
18
DHTML Help Layer
19
Opening a DHTML Help Layer on mouseover
ltspan id"description" onMouseOver"helpSHOW(this.
id)" onMouseOut"helpHIDE(this.id)"gtDescriptionlt/s
pangt ltscriptgt function helpSHOW(fieldID)
fieldID "help" fieldID if (document.all)
document.all(fieldID).style.visibility
"visible" else document.layersfieldID.visibilit
y "show" function helpHIDE(fieldID)
fieldID "help" fieldID if (document.all)
document.all(fieldID).style.visibility
"hidden" else document.layersfieldID.visibility
"hide" lt/scriptgt
ltspan id"description" onMouseOver"helpSHOW(this.
id)" onMouseOut"helpHIDE(this.id)"gtDescriptionlt/s
pangt ltscriptgt function helpSHOW(fieldID)
fieldID "help" fieldID if (document.all)
document.all(fieldID).style.visibility
"visible" else document.layersfieldID.visibilit
y "show" function helpHIDE(fieldID)
fieldID "help" fieldID if (document.all)
document.all(fieldID).style.visibility
"hidden" else document.layersfieldID.visibility
"hide" lt/scriptgt

• ltspan id"description" onMouseOver"helpSHOW(this.
  id)" onMouseOut"helpHIDE(this.id)"gtDescriptionlt/s
  pangt
• ltscriptgt
• function helpSHOW(fieldID)
• fieldID "help" fieldID
• if (document.all) document.all(fieldID).style.visi
  bility "visible"
• else document.layersfieldID.visibility
  "show"
• function helpHIDE(fieldID)
• fieldID "help" fieldID
• if (document.all) document.all(fieldID).style.visi
  bility "hidden"
• else document.layersfieldID.visibility
  "hide"
• lt/scriptgt

20
Displaying the Help

• Separate Help window
• Popup window
• Embedded Help window
• DHTML popup layer

21
Opening a Help Window using ASP
lta href"" onClick"openFieldHelp('ProjectNumber'
)"gtltimg src"fieldhelp.gif" width"18"
height"18" border"0"gtlt/agt ltscriptgt function
openFieldHelp(topic) window.open('fieldhelp.asp?
' topic,'helpwin','toolbar0, ?
location0,directories0,status0,menubar0, ?
scrollbars1,resizable0,width600,
height400') lt/scriptgt
lta href"" onClick"openFieldHelp('ProjectNumber'
)"gtltimg src"fieldhelp.gif" width"18"
height"18" border"0"gtlt/agt ltscriptgt function
openFieldHelp(topic) window.open('fieldhelp.asp?
' topic,'helpwin','toolbar0, ?
location0,directories0,status0,menubar0, ?
scrollbars1,resizable0,width600,
height400') lt/scriptgt
22
Storing Field-level Help in a Database

• "HlpText" is used to store defaults.
• "HlpTextCustom" is used to store modified Help
  topics.

23
Opening the Help Database
VBScript Code to Open the DatabaseDim
objConn Set objConn Server.CreateObject("ADODB.C
onnection") objConn.Open "DRIVERMicrosoft
Access Driver (.mdb) DBQ"
Server.MapPath("\db\fieldhelp.mdb") Dim
objRS Set objRS Server.CreateObject("ADODB.Recor
dset") objRS.Open "Tutorial", objConn, , ,
adCmdTable
24
Finding and Displaying Help from the Database
Code to Pull the Field Help from the
Database Do While Not objRS.EOF If
Request.QueryString objRS("FieldID") Then If
objRS("HlpTextCustom") ltgt "" Then
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpTextCustom") Else
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpText") End If End
If objRS.MoveNext Loop
Code to Pull the Field Help from the
Database Do While Not objRS.EOF If
Request.QueryString objRS("FieldID") Then If
objRS("HlpTextCustom") ltgt "" Then
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpTextCustom") Else
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpText") End If End
If objRS.MoveNext Loop
Code to Pull the Field Help from the
Database Do While Not objRS.EOF If
Request.QueryString objRS("FieldID") Then If
objRS("HlpTextCustom") ltgt "" Then
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpTextCustom") Else
Response.Write "ltbgt" objRS("FieldLabel")
"lt/bgtltbrgt " objRS("HlpText") End If End
If objRS.MoveNext Loop
25
Recommended Books

• Designing with JavaScript by Nick Heinle
• JavaScript Bibleby Danny Goodman
• Teach Yourself Active Server Pages in 21 Daysby
  Scott Mitchell and James Atkinson
• DHTML Reference and SDKfrom Microsoft Press

26
Downloading the Examples

• All scripts and examples can be downloaded at
• www.userfirst.net/demos

27
Questions?

• Feel free to e-mail me. Or, catch me later at the
  conference!
• Scott DeLoach
• Founding Partner, User First Services, Inc.
• Certified RoboHELP Instructor
• CIW Master Designer
• 404.520.0003
• scott_at_userfirst.net