getHoverComponent

[aminaD]

I started extending smartGWT ImgButton and overriding the getHoverComponent method to style it, but I am facing an issue on how to set the arrow scenarios since we can not control the position of the top and left of the hovered component, because the canvas that returned from the getHoverComponent method automatically set the left and the top of it depending on the mouse left and top also to to the browser width and height, I tried to use setLeft and setTop of the canvas but without any results.

How can i change and control position of hover component??

[harsha.galla]

Isomorphic,

I'm looking for something similar with FormItem (find in attached image). I'm trying to use FormItemHoverFormatter. I dont see a way how we can position the hover component. Any inputs on this. I need to show a validation error message on hover as per the attached image. The bubble containing the message is constructed with plain html and css. I have a problem positioning it beside the textitem.

Another option is to create a separate component of the error message. Create/destroy error component on item hover by checking if the form has error for that field.
Also, need to reuse this validation styling with multiple formitems of different forms.


Thanks.

[Isomorphic]

If you are unhappy with the default positioning for some reason and can't tweak it via CSS, yes you need to create a separate component and position it yourself.

[harsha.galla]

Thanks for the response.

Can you guide me with creating dissimilar edges like shown in the image for error message.
Is EdgedCanvas the way to go?

[Isomorphic]

It's a big topic, with tradeoffs between appearance and performance for different browsers. You seem to have a just-CSS approach - if you are happy with the appearance of that, stick with it.

[harsha.galla]

Isomorphic,

We have hardcoded div's with inner table, td's , tr's etc with css styling for respective images etc. We use setErrorHTML to render this. So wanted to know if its worth while to create it purely based on smartgwt code given the trade-offs in performance. However smartgwt component would give me the flexibility to have auto sizing, positioning etc.

Thanks.

[Isomorphic]

Again, really too deep of a topic for the forums.. there are many, many ways to do this, and several possible meanings to "create it purely based on smartgwt code" because there are multiple approaches.

If you want to dig deeply into this, we would recommend a long session of Googling to find out about CSS3-based approaches which could eliminate some or all images, with drawbacks on various browsers. If you aren't up for that level of learning for this feature, go with what you have.

[harsha.galla]

Isomorphic,

I think I will be using HTMLPane to embed the html based error bubble as attached in previous posts. Now I'm trying to position the html pane appropriately next to the textitem. I have set the textItem width as "*". Now when I invoke getWidth I get the following error in hosted mode.

Caused by: com.google.gwt.dev.shell.HostedModeException: invoke arguments: JS value of type string, expected int

How do I get the currentwidth of the textItem for which I have defined it as "*".

Thanks.

[harsha.galla]

Isomorphic,

Another problem here. I don't see a event to fire when formitem loses hover.
The below thread though old confirms this too:

http://forums.smartclient.com/showthread.php?t=15246

I'm surprised something so basic is missing.

So how do i go about implementing the show error on hover in this case.
As per the above thread it says to use mouse out handlers on form, but I dont think that will work as I need to show similar validation error behavior to many of formitems (not just one) in the form.

I have reached a dead-end. Need your inputs.

Requirement: A form has multiple formItems which need to be validated where the error needs to be shown only when there is a hover on the highlighted field.
My aprroach so far was to create a ItemHoverHandler. I create a htmlpane with the html content and position it beside the form item.
Now I need to destroy the html pane on formItem losing hover.

Thanks.

[Isomorphic]

No dead end - the instructions in that other thread are the ones to use, and they are not limited to one FormItem in any way.

[harsha.galla]

Isomorphic,

I checked available mouse event handlers for the form, I don't see a way to identify if the mouse has moved out of a formitem.

Thanks.

[Isomorphic]

See FormItem.getRect() / getPageRect().

[harsha.galla]

Isomorphic,

So do I need to implement the MouseMoveHandler on the form, getEventInfo to find out the formitem and then use the formitem co-ordinates to figure out if the current mouse position is out of the formitem and then destroy the error message. Let me know if this is the approach i need to take.


Thanks.

[Isomorphic]

getEventItem / getEventItemInfo is already going to tell you what item or what part of an item you're over, so you don't need coordinate checks to determine that. You just need the coordinates to place your hover in whatever custom position you have in mind. Note you can also get the rectangle of an icon (getIconPageRect()), including the picker icon.

[harsha.galla]

Isomorphic,

I think there is a confusion here. I don't need to place hover in any custom position.

When a form is validated, the textItem is styled with colored border to show the error. When user hovers over the textbox (entry box only, not the title etc) a custom error is show just beside the textbox.
I cannot use the existing error display mechanism available by default as it has some limitations like:

1) it interferes with the sizing of the textbox itself when error is shown. i.e when error message is displayed the textbox size gets reduced to accomodate the error
2) The error is show by default. But as per my company UI standards it need to appear only on Hover over the error textbox.

So I'm trying to implement a custom error display mechanism.

I can display the error message by creating a ItemHoverHandler on TextItem and checking if there are any errors on the formitem and then position the error(A htmlPane with embedded html to achieve the styling in the image attached in my earlier post) message beside it. But my problem is to destroy that error message (htmlpane here) when mouse moves out of the formitem having error.

As a side note, you already have showHoverComponents etc implemented. I would love to see a method to customize the position of the hoverComponent.
Also, in the current hover message implementation, you already determine a mouse out on the formitem and hide the hover message, so providing that event in the formitem directly would have been helpful.

Thanks.