Monday, June 11, 2007

A simple context-sensitive help system using Wicket

I had the need to create a simple context-sensitive help system. I chose to put all the content in one help page, with an anchor for each topic, although this technique could easily be used for one help page per topic.

On each web page there is a Help button that shows a popup window with the content scrolled to that topic. The anchor name is the class name for the WebPage, e.g. com.my.MyPageOne.

The one help page, help.html, goes in a directory called "doc" at the context root, i.e. a sibling to WEB-INF. You could of course put it anywhere you like.

Help.html


<html>
<head>
<title>MyCompany Help System</title>
</head>
<body>
<a name="com.my.PageOne">
<h2>Page One</h2>
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam dui ligula, condimentum vel, tempor sit amet, vulputate eget, tortor.
Proin dignissim pede non nisl.</p>
<a name="com.my.PageTwo">
<h2>Page Two</h2>
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nunc elementum, mauris ac accumsan euismod, eros nulla adipiscing risus, eget molestie elit lectus consequat neque.
Aenean malesuada, tellus ac cursus placerat, odio nisi placerat orci, eu posuere lorem magna a sapien. Vestibulum vitae pede.
Sed mollis suscipit orci.
Proin id purus non turpis feugiat mollis.
</p>
</body>
</html>


The Java code for the class that does the heavy lifting follows (although it's easy).

HelpLink.java


package com.my;

import wicket.markup.html.link.ExternalLink;
import wicket.markup.html.link.PopupSettings;
import wicket.protocol.http.WebApplication;

/** Assumes the wicket:id of the link is "help" */
public class HelpLink extends ExternalLink
{
private static final String HELP_LOCATION = "doc";

public HelpLink(Class helpPageClass)
{
super("help", getHelpUrl(helpPageClass));

PopupSettings p = new PopupSettings(PopupSettings.RESIZABLE | PopupSettings.SCROLLBARS);
p.setWidth(400).setHeight(400).setTop(23);
setPopupSettings(p);
}

private static String getHelpUrl(Class helpPageClass)
{
String helpPageClassName = helpPageClass.getName();
String contextName = ((WebApplication) Application.get())
.getWicketServlet().getServletName();
StringBuffer buf = new StringBuffer();
buf.append('/').append(contextName).append('/').append(HELP_LOCATION)
.append("/help.html#").append(helpPageClassName);

return buf.toString();
}
}


Now how to use it:

PageOne.java


package com.my;
...
add(new HelpLink(PageOne.class));
...

PageOne.html


...
<a wicket:id="help">
<img src="images/help_btn.gif" border="0" />
</a>
...

To change to one web page per topic, with each page named according to the WebPage, you could do this:

HelpLink.java



...
String helpPageClassName = helpPageClass.getName();
String helpPageFileName = helpPageClassName.substring(helpPageClassName.lastIndexOf('.')+1);
buf.append('/').append(contextName).append('/').append(HELP_LOCATION)
.append('/').append(helpPageFileName).append(".html");
...

2 comments:

swapnil said...

can you give more precise full example for this.
i am trying this but getting pbms like ((WebApplication) Application.get()) .getWicketServlet().getServletName()
is not present at 1.3 and if i click on link a blank page is dislayed.

kopiluwak nya said...

http://tasya.marinirseo.web.id/?p=1
http://caca.marinirseo.web.id/?p=1
http://anne.marinirseo.web.id/?p=1
http://jeannet.marinirseo.web.id/?p=1
http://jelita.marinirseo.web.id/?p=1
http://brenda.marinirseo.web.id/?p=1
http://ruth.marinirseo.web.id/?p=1
http://tasya1.marinirseo.web.id/?p=1
http://caca1.marinirseo.web.id/?p=1
http://anne1.marinirseo.web.id/?p=1
http://jeannet1.marinirseo.web.id/?p=1
http://jelita1.marinirseo.web.id/?p=1
http://brenda1.marinirseo.web.id/?p=1
http://ruth1.marinirseo.web.id/?p=1
http://tasya2.marinirseo.web.id/?p=1
http://caca2.marinirseo.web.id/?p=1
http://anne2.marinirseo.web.id/?p=1
http://jeannet2.marinirseo.web.id/?p=1
http://jelita2.marinirseo.web.id/?p=1
http://brenda2.marinirseo.web.id/?p=1
http://ruth2.marinirseo.web.id/?p=1
http://ruth3.marinirseo.web.id/?p=1
http://jelita3.marinirseo.web.id/?p=1
http://brenda3.marinirseo.web.id/?p=1
http://jeannet3.marinirseo.web.id/?p=1
http://anne3.marinirseo.web.id/?p=1
http://caca3.marinirseo.web.id/?p=1
http://tasya3.marinirseo.web.id/?p=1
http://tasya4.marinirseo.web.id/?p=1
http://caca4.marinirseo.web.id/?p=1
anne4.marinirseo.web.id/?p=1
jeannet4.marinirseo.web.id/?p=1
http://jelita4.marinirseo.web.id/?p=1
http://brenda4.marinirseo.web.id/?p=1
ruth4.marinirseo.web.id/?p=1
http://tasya5.marinirseo.web.id/?p=1
http://caca5.marinirseo.web.id/?p=1
anne5.marinirseo.web.id/?p=1
http://jelita5.marinirseo.web.id/?p=1
http://ruth5.marinirseo.web.id/?p=1