A component providing Context Sensitive Help

Hi guys!

I hereby announce my small contribution to the growing list of Vaadin components: ContextHelp v0.0.1 :slight_smile:

ContextHelp makes it easy for the developer to provide context sensitive help for fields in a Vaadin application. For each field, or a Panel/Layout containing fields you can register instructions that are shown when the user presses the F1-key. The instructions can be formatted using HTML and inline CSS or CSS in your theme by specifying class-names for the elements.


Demo
(click the fields to focus them and press F1)

Source

The source contains a Vaadin 6.2 compatible JAR file, for easy drag & drop deployment in your projects.

This really is version 0.0.1 and might cause volcanoes to explode or your computer to spill water all over itself. However, it probably just is ugly.

Next up is to fix bugs that are found (please report them!) and make it prettier so that you don’t have to be ashamed when using ContextHelp :wink:

Hope someone finds this useful, even though it still isn’t polished at all!
/Jonatan

[edit: of course it’s 6.2 and not 6.0 compatible jar]

Great stuff, should be usable to almost all projects that have some fields in them.

And don’t be modest, it looks great as it is!

really cool !

I agree with previous posts. This looks really nice and usable. Great work!

// Jonas

A really polished component. This will definitively find its way to many projects… :slight_smile: Would it be possible (read: easy) to implement showing help from the server-side?

First and foremost: Thanks for all the kind words, guys!

That’s actually next on the list of things to do and I think it will be pretty straight forward to implement. Currently there is the restriction that only one help-item can be shown at a time, however. Will this be a problem for anyone?

Cheers!
/Jonatan

Hi guys,

I just updated the ContextHelp component and
example
with one new feature and a cosmetical tweak:

  1. You can now open “help bubbles” programmatically by calling ContextHelp.showHelpFor(Component);
  2. Tweaked the positioning of the “bubbles” when attached to complex components, such as panels

I also updated the example so that it is a little bit better at showing that the free floating bubble actually is bound to a panel and not just floating somewhere.

The source and ContextHelp-0.0.2.jar for Vaadin 6.2 is in the
SVN

Please give me a holler if you use this somewhere or find (more) bugs!
/Jonatan

I tried to use this in my project but I was unable to compile the widgetset. The error message was that it could not find the widgetset declaration file:

[ERROR]
 BUILD ERROR
[INFO]
 ------------------------------------------------------------------------
[INFO]
 GWT Module org.vaadin.jonatan.contexthelp.ContexthelpApplicationWidgetset not found in project sources or resources.

I am using Vaadin 6.4.1 and Maven 2.2.1 to build, but I also tried compiling the widgetset in Eclipse and it didn’t work there either. I’ve got the widgetsets for several other addons, such as animator, compiling and working so I don’t think its a problem with my environment.

Cheers,
Raman

Hi,

I’m very sorry for the extremely late answer. I’ve been on vacation and swamped at work after that (which is no excuse).

I took a look at what might be causing the problem and I saw that the add-on package that I created put the class-files in the wrong location, causing your reported error message. This is completely my fault and I’ll try to fix the packaging as soon as possible.

In the meanwhile if you want to fix it yourself just extract the .jar and move all files and folders under build/classes to the root of the archive.

Thanks for reporting this huge mistake on my part!

Sorry again,
/Jonatan

Hmm, I tried making the change you suggested but it still didn’t work – got the following error:

[INFO]
GWT Module org.vaadin.jonatan.contexthelp.ContexthelpApplicationWidgetset not found in project sources or resources.

So then I noticed that the MANIFEST Vaadin-Widgetsets entry was incorrect. It is org.vaadin.jonatan.contexthelp.ContexthelpApplicationWidgetset rather than org.vaadin.jonatan.contexthelp.widgetset.ContexthelpApplicationWidgetset.

So I changed that, and then the widgetset compiled successfully, but at runtime I still get the following error on screen:

Widgetset does not contain implementation for org.vaadin.jonatan.contexthelp.ContextHelp. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions.

The @com.vaadin.ui.ClientWidget annotation in the ContextHelp class seems to be correct. Now I am at a loss.

Cheers,
Raman

Hi,

I finally got around to this and released 0.0.4 with updated packaging. This should now work as expected.

There are a couple of really hard to smash bugs that I want to kill before moving up to a beta label for the ContextHelp add-on. Here’s to hoping that I get them.

/Jonatan

where can we find this 0.0.4 package?

Sorry for not saying, it’s uploaded to Vaadin Directory at
http://vaadin.com/directory#addon/contexthelp
.

/Jonatan

0.0.4 is still not working for me. The widgetset compiles fine, but when running the app vaadin still gives me the familiar:

The only difference I see between ContextHelp and all the other addons with widgetsets that I do have working is that the other addons don’t have a “widgetset” directory e.g. animator and imagestrip. I have no idea if that is relevant though.

Does anyone have this working?

Cheers,
Raman

Check that when compiling the widgetset that the component is really added into the compilation. You’ll see a list of found widgetsets taken into the compilation as a console dump while you compile.

Yes, I’ve checked that and all appears well:

[INFO]
[gwt:compile {execution: default}]

[INFO]
using GWT jars from project dependencies : 2.0.3
[INFO]
auto discovered modules [mypackage.ui.widgetset.MyWidgetset]

[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
establishing classpath list (scope = compile)
[INFO]
Compiling module mypackage.ui.widgetset.MyWidgetset
[INFO]
Scanning for additional dependencies: jar:file:/home/raman/.m2/repository/com/vaadin/vaadin/6.4.1/vaadin-6.4.1.jar!/com/vaadin/terminal/gwt/client/WidgetSet.java
[INFO]
Computing all possible rebind results for ‘com.vaadin.terminal.gwt.client.WidgetMap’
[INFO]
Rebinding com.vaadin.terminal.gwt.client.WidgetMap
[INFO]
Invoking com.google.gwt.dev.javac.StandardGeneratorContext@166092f
[INFO]
Detecting Vaadin components in classpath to generate WidgetMapImpl.java …
[INFO]
Widget set will contain implementations for following components:
[INFO]
com.vaadin.ui.AbsoluteLayout
[INFO]
com.vaadin.ui.Accordion
[INFO]
com.vaadin.ui.Button
[INFO]
com.vaadin.ui.CheckBox
[INFO]
com.vaadin.ui.ComboBox
[INFO]
com.vaadin.ui.CssLayout
[INFO]
com.vaadin.ui.CustomComponent
[INFO]
com.vaadin.ui.CustomLayout
[INFO]
com.vaadin.ui.DateField
[INFO]
com.vaadin.ui.DragAndDropWrapper
[INFO]
com.vaadin.ui.Embedded
[INFO]
com.vaadin.ui.Form
[INFO]
com.vaadin.ui.FormLayout
[INFO]
com.vaadin.ui.GridLayout
[INFO]
com.vaadin.ui.HorizontalLayout
[INFO]
com.vaadin.ui.Label
[INFO]
com.vaadin.ui.Link
[INFO]
com.vaadin.ui.ListSelect
[INFO]
com.vaadin.ui.MenuBar
[INFO]
com.vaadin.ui.NativeButton
[INFO]
com.vaadin.ui.NativeSelect
[INFO]
com.vaadin.ui.OptionGroup
[INFO]
com.vaadin.ui.OrderedLayout
[INFO]
com.vaadin.ui.Panel
[INFO]
com.vaadin.ui.PopupView
[INFO]
com.vaadin.ui.ProgressIndicator
[INFO]
com.vaadin.ui.RichTextArea
[INFO]
com.vaadin.ui.Select
[INFO]
com.vaadin.ui.Slider
[INFO]
com.vaadin.ui.SplitPanel
[INFO]
com.vaadin.ui.TabSheet
[INFO]
com.vaadin.ui.Table
[INFO]
com.vaadin.ui.TextField
[INFO]
com.vaadin.ui.Tree
[INFO]
com.vaadin.ui.TwinColSelect
[INFO]
com.vaadin.ui.Upload
[INFO]
com.vaadin.ui.UriFragmentUtility
[INFO]
com.vaadin.ui.VerticalLayout
[INFO]
com.vaadin.ui.Window

[INFO]
org.vaadin.jonatan.contexthelp.ContextHelp

[INFO]
org.vaadin.jouni.animator.Animator
[INFO]
org.vaadin.overlay.CustomOverlay
[INFO]
org.vaadin.peter.imagestrip.ImageStrip
[INFO]
Done. (2seconds)
[INFO]
Scanning for additional dependencies: jar:file:/home/raman/.m2/repository/com/vaadin/vaadin/6.4.1/vaadin-6.4.1.jar!/com/vaadin/terminal/gwt/client/ui/dd/VAcceptCriteria.java
[INFO]
Computing all possible rebind results for ‘com.vaadin.terminal.gwt.client.ui.dd.VAcceptCriterionFactory’
[INFO]
Rebinding com.vaadin.terminal.gwt.client.ui.dd.VAcceptCriterionFactory
[INFO]
Invoking com.google.gwt.dev.javac.StandardGeneratorContext@166092f
[INFO]
Detecting available criteria …
[INFO]
creating mapping for com.vaadin.ui.Tree.TreeDropCriterion
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.And
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.SourceIs
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.ContainsDataFlavor
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.Not
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.AcceptAll
[INFO]
creating mapping for com.vaadin.ui.AbstractSelect.TargetItemIs
[INFO]
creating mapping for com.vaadin.ui.Tree.TargetInSubtree
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.TargetDetailIs
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.ServerSideCriterion
[INFO]
creating mapping for com.vaadin.ui.Table.TableDropCriterion
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.Or
[INFO]
creating mapping for com.vaadin.event.dd.acceptcriteria.SourceIsTarget
[INFO]
creating mapping for com.vaadin.ui.AbstractSelect.AcceptItem
[INFO]
Done. (0seconds)
[INFO]
Compiling 6 permutations
[INFO]
Compiling permutation 0…
[INFO]
Process output
[INFO]
Compiling permutation 2…
[INFO]
Process output
[INFO]
Compiling permutation 1…
[INFO]
Process output
[INFO]
Compiling permutation 3…
[INFO]
Compiling permutation 4…
[INFO]
Compiling permutation 5…
[INFO]
Compile of permutations succeeded
[INFO]
Linking into /home/raman/source/myapp/target/myapp-0.1/VAADIN/widgetsets/mypackage.ui.widgetset.MyWidgetset.
[INFO]
Link succeeded
[INFO]
Compilation succeeded – 52.240s

Still doesn’t work.

Cheers,
Raman

Some improvement suggestions:

  • Possibility to remap the F1 key to any key.
  • Possibility to have the popup open also to the left/top/bottom and adjusting its position with pixels, ie. top: -20px

Hi Raman,

Strange that it’s not working for you, it works perfectly in my test programs. Try to add the ?debug parameter to your URL and check that there is no warning about the server side and client side widget set versions, just in case the widgetset hasn’t been deployed correctly.

/Jonatan

I have an issue when using this add-on.
I have a button that shows help on another component when clicked (using the showHelpFor()-method).
This works great and after clicking the button, the help is shown on the other component as expected.
When clicking the help-bubble, the bubble disappears, as expected.
However, when, from somewhere else in the application, a requestrepaint() is performed on all components, including the ContextHelp, the bubble shows up again, which is…well…not expected…
How can i disable this or can you fix this in a next version?

Kind regards,
Jan

Yeah its weird… the widgetset and app versions seem to match. Here is the output from the debug window:

Cheers,
Raman