1 / 27

Developing Context-sensitive Help for Web Applications

Developing Context-sensitive Help for Web Applications . Scott DeLoach. 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.

dannon
Download Presentation

Developing Context-sensitive Help for Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Page-level Help Field-level Help Sample Application

  4. Opening the Help • Presses F1 • Clicks a page-level Help link • Clicks a field-level Help link • Highlights a term and presses F1 When the user…

  5. Opening Help with F1 (IE Only) <body onHelp="openHelp();return false"> <body onHelp="openHelp();return false"> <body onHelp="openHelp();return false">

  6. Opening Page-level Help with a Link <a href="#" onClick="openHelp()">Help</a> <a href="#" onClick="openHelp()">Help</a>

  7. Opening Field-level Help with a Link <a href="#" onClick="openHelp('ProjectNumber')"> <img src="fieldhelp.gif" width="18" height="18" border="0“> </a> <a href="#" onClick="openHelp('ProjectNumber')"> <img src="fieldhelp.gif" width="18" height="18" border="0“> </a>

  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','toolbar=0, location=0,directories=0,status=0,menubar=0, scrollbars=1,resizable=1,width=500,height=600'); 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','toolbar=0, location=0,directories=0,status=0,menubar=0, scrollbars=1,resizable=1,width=500,height=600'); 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','toolbar=0, location=0,directories=0,status=0,menubar=0, scrollbars=1,resizable=1,width=500,height=600'); setTimeout('helpWin.focus();',250); }

  13. Popup Window

  14. Opening a Popup Window <script> var x=y=0; 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') { w=970; h=775; } wintop = y+15; winleft = x-15; // next line adjusts if window is off the screen if (w - (x+550) < 0) winleft = w-525;window.open(helpurl,"helpwin",'toolbar=0,location=0, directories=0,status=0,menubar=0,scrollbars=1, resizable=1,width=550,height=80,screenX=' + wintop + ',screen=' + winleft + ',top=' + wintop + ',left=' +  winleft); } function help(helpurl) {w = screen.availWidth; h = screen.availHeight; if (w=='1024') { w=970; h=775; } wintop = y+15; winleft = x-15; // next line adjusts if window is off the screen if (w - (x+550) < 0) winleft = w-525;window.open(helpurl,"helpwin",'toolbar=0,location=0, directories=0,status=0,menubar=0,scrollbars=1, resizable=1,width=550,height=80,screenX=' + wintop + ',screen=' + winleft + ',top=' + wintop + ',left=' +  winleft); }

  16. Embedded Help Window

  17. Opening an Embedded Help Window Create a “Top” level frameset <frameset cols="100%,*" rows="*" frameborder="NO" name="myframes"> <frame src=“yourapplication.htm" name="app"> <frame src="helpblank.htm" name="help"> </frameset> Resize the frameset and open the Help <script> function openHelp() { parent.myframes.cols="70%,30%"; parent.help.location = "helppage.htm"; } </script> Create a “Top” level frameset <frameset cols="100%,*" rows="*" frameborder="NO" name="myframes"> <frame src=“yourapplication.htm" name="app"> <frame src="helpblank.htm" name="help"> </frameset> Resize the frameset and open the Help <script> function openHelp() { parent.myframes.cols="70%,30%"; parent.help.location = "helppage.htm"; } </script>

  18. DHTML Help Layer

  19. Opening a DHTML Help Layer on “mouseover” <span id="description" onMouseOver="helpSHOW(this.id)" onMouseOut="helpHIDE(this.id)">Description</span> <script> function helpSHOW(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "visible"; else document.layers[fieldID].visibility = "show"; } function helpHIDE(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "hidden"; else document.layers[fieldID].visibility = "hide"; } </script> <span id="description" onMouseOver="helpSHOW(this.id)" onMouseOut="helpHIDE(this.id)">Description</span> <script> function helpSHOW(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "visible"; else document.layers[fieldID].visibility = "show"; } function helpHIDE(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "hidden"; else document.layers[fieldID].visibility = "hide"; } </script> <span id="description" onMouseOver="helpSHOW(this.id)" onMouseOut="helpHIDE(this.id)">Description</span> <script> function helpSHOW(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "visible"; else document.layers[fieldID].visibility = "show"; } function helpHIDE(fieldID) { fieldID = "help" + fieldID; if (document.all) document.all(fieldID).style.visibility = "hidden"; else document.layers[fieldID].visibility = "hide"; } </script>

  20. Displaying the Help • Separate Help window • Popup window • Embedded Help window • DHTML “popup” layer

  21. Opening a Help Window using ASP <a href="#" onClick="openFieldHelp('ProjectNumber')"><img src="fieldhelp.gif" width="18" height="18" border="0"></a> <script> function openFieldHelp(topic) { window.open('fieldhelp.asp?' + topic,'helpwin','toolbar=0, location=0,directories=0,status=0,menubar=0, scrollbars=1,resizable=0,width=600, height=400'); } </script> <a href="#" onClick="openFieldHelp('ProjectNumber')"><img src="fieldhelp.gif" width="18" height="18" border="0"></a> <script> function openFieldHelp(topic) { window.open('fieldhelp.asp?' + topic,'helpwin','toolbar=0, location=0,directories=0,status=0,menubar=0, scrollbars=1,resizable=0,width=600, height=400'); } </script>

  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.Connection") objConn.Open "DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("\db\fieldhelp.mdb") Dim objRS Set objRS = Server.CreateObject("ADODB.Recordset") 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") <> "" Then Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom") Else Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & 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") <> "" Then Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom") Else Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & 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") <> "" Then Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpTextCustom") Else Response.Write "<b>"& objRS("FieldLabel") & "</b><br> " & objRS("HlpText") End If End If objRS.MoveNext Loop

  25. Recommended Books Designing with JavaScriptby 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@userfirst.net

More Related