Hello we are currently running on Vaadin 6.8.10 and need to do some fancy tooltip overlay as shown in the attached PNG. I did some checking into the PopupView and Overlay plugin but neither seemed like the perfect solution as we need to support IE 7. Do you have some tips on how to accomplish this? Would you be able to do this with a custom layout or is there an easier solution?
Also was wondering if we can add validation error underneath the fields as shown in the attached PNG.
I know enough CSS to be dangerous but by no means any kind of expert. For both of these tasks would like a reusable solution so we don’t get bogged down writing a bunch of custom stuff for each form that needs this type of look & feel.
Seems to be your lucky day! WIth the addon
ContextHelp you get popup’s just like that, complete with the arrow pointing on the field. With a little theming, you can make it yellow as well, if that is what you fancy.
For the error validation fields - turning it red can be done by giving it a stylename and theming it with css. For the label under, I don’t have anything readymade for you. What you can do is make a composite component - for example TextFieldWithMessage which has a CssLayout as base and within it the textfield along with a label where you can put the text. You might be able to use CustomField to make your wrapper look like a field, and then delegate all field calls directly to the textfield within it. That is if you require it to be a field.
Other option is of course to just add the label separately below the field and theme it to look that it belongs along with the textfield.
Can ContextHelp position be controlled? In my example it is on the left instead of the right.
Also what did you mean by “That is if you require it to be a field.”. How else would you implement a form with a field if it wasn’t a textfield? Using a composite component makes sense but I don’t understand what you meant here.
p.s. I’ve done one custom GWT component so I have a pretty good idea how widgets are put together under the covers.
Check out the
ContextHelp Demo . Go to the tab "Placement, focus the field while “Make the help bubble follow focus” is on or press F1. There you’ll see the context menu placed top, right, left and bottom in relation to fields.
I was not sure if you need to put the fields into a Form, or if you just have a layout with fields and you use setValue() and getValue() manually. As you need Form support, the easiest way to go about is to implement the composite as a
CustomField . That should do the trick.
By the way, Vaadin 7 would be great for you here. Vaadin 7 has FieldGroup, which drives the same purpose as Form, but is much more awesome and flexible. Basically you just bind fields to an item on the server side while not having any presentation for it (you do not do layout.addComponent(fieldGroup)). Then you can use what ever layout you want and place the fields where ever you fancy and they still work together with the server side binding. CustomField is also a part of Vaadin 7 core.
Thanks again. Yes would love to port our codebase to Vaadin 7 but don’t have the time at the moment. Unfortunately our codebase is infected with groovy hacks which make it more difficult to migrate for us than it should be.
