PDA

View Full Version : Suggestions for implementing field help in FormPanel?



aconn7
8 Sep 2011, 11:53 AM
I would like to implement field help in FormPanel such that the user mouses over the field prompt label or an "i" info icon next to the field label. Ideally the help will display has a tooltip.

The labels do not support tooltips and FormPanel does not natively support an additional icon when adding a field. If the icon could easily be added, then I could accomplish what I am interested in through an icon button.

As an ultimate ideal, i would like to add a clickable link/button in the tooltip which would take the user to help editing facility. Can I add active components to ToolTip in manner similar to the HtmlContainer.add capability?

Your suggestions greatly appreciated!

sven
8 Sep 2011, 11:58 AM
If you want to have an extra icon next to the label you should create a custom FormLayout here. The label is not linked to the FormPanel, but to the contained FormLayout.

In the FormLayout you can change the markup to either use a QuickTip on the label, or you add an extra icon next to the label. Both can be done with changing the used template.

aconn7
8 Sep 2011, 12:51 PM
I experimented a little with this an got confused on a couple of points:

1) In the FormLayout, I did find the getTemplate() markup used to render the field label. Is it just a matter of adding attributes qtip and qtipTitle? or Do I have a to create a QuickTip instance? If so, what component do i pass the constructor?

2) If I use an icon, is it the same procedure: qtip and qtipTitle? And again, if a QuickTip constructor is called, what component to pass?

3) How can I attach GWT/GXT code to the icon if the user clicks it?

4) Is it possible to make active elements within the tooltip - such as an "edit this help" link?

Thanks!

Colin Alworth
10 Sep 2011, 8:33 AM
1) In the FormLayout, I did find the getTemplate() markup used to render the field label. Is it just a matter of adding attributes qtip and qtipTitle? or Do I have a to create a QuickTip instance? If so, what component do i pass the constructor?
A QuickTip must be created at some level above the element which is to have the tooltip. If you plan on the entire form having tool tips, you may consider creating the QuickTip with the form or its parent as the constructor. QuickTip will then, as the javadocs should indicate, allow any child element of that component with a qtip attribute to have a tooltip.


2) If I use an icon, is it the same procedure: qtip and qtipTitle? And again, if a QuickTip constructor is called, what component to pass?
Same as above - some component which has the element in question (label or icon could be a div, img, label, etc) as a child.


3) How can I attach GWT/GXT code to the icon if the user clicks it?
I have not tried this, but QuickTip is a Widget and so can events sunk to it. Building a single QuickTip for the form means that you will have one handler for the form, and you will need to find a way to discover the which field is being displayed. (Note also that you could created one QuickTip per Field object, and that way build a Field-specific handler per each tip, but that would create many more widgets and would make for more code to write, and more handlers to attach. Acceptable for small forms perhaps, but not ideal.)


4) Is it possible to make active elements within the tooltip - such as an "edit this help" link?
If by 'link' you mean an external link, sure, just a <a href="...">link</a> would work, probably with a target attribute to open a new window. This would need to be encoded to go in the qtip property correctly. If you want more than that, you are starting to get beyond what a 'quick' tip can do for you. This is not to say that it wouldn't be possible, will require some investigation on your part into how QuickTip replaces its content, and how you could further adjust that.