Custom GWT component reference to other UI component

General
1

Hello,

I’m trying to write a custom GWT component that is a container that when moused over/out shows and hides another component. I have a basic component extending CssLayout that changes the css name applied to the container when the mouse moves in and out. What I want to do now is set the visible property of some other component. Suppose on the Vaadin app side I have a “Block” component and I instantiate it like so:

Label myLabel = new Label(“Hello”);
Block myBlock = new Block(myLabel);

On the GWT side I need to get a reference to the HTML representation of the myLabel component so I can set the DOM style property (visible) I am interested in. How can I do this? (The component, myLabel, is not necessarily a child of myBlock in the layout.)

Thanks.

/Daryl

2

As I see it you could do it in two ways, on the server side or on the client side.

I am assuming you are already changing the stylename on mouseover/mouseout on the server (Vaadin) side? If you aren’t then please note that the applied stylenames to the DOM only will be lost on browser refresh. So assuming you are getting the mouseover / mouseout events on the server side and your Block container is a component container (which CSSLayout is) then you could easily just iterate the contents with CSSLayout.getComponentIterator() and call setVisible(true/false) on the components.

If you absolutely want to do this on the client side then you can. There is a utility method provided by Vaadin on the client side which will resolve the component (Paintable) from an DOM element. Check out the class com.vaadin.terminal.gwt.client.Util and in it the method getPaintableFromElement(…). It should give you the component from an element.

3

No, this is a simple client-side action: rollover component A, change CSS on component B. Client-server communication would be too costly.

I’m not sure I’ve made my requirement clear. On the client side I need to find the element. I don’t know anything about it. I need to get some identifier from the server to the client. At the present my server component does this:


public void paintContent(PaintTarget target) throws PaintException {
      super.paintContent(target);
      target.addAttribute("componentId", this.component.getDebugId());
}

My client component does this:


public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
	super.updateFromUIDL(uidl, client);
	componentId = uidl.getStringAttribute("componentId");
}

I have previously generated my own ID for this.component.debugId on the server component. This does not seem like a proper production solution. Does Vaadin generate some sort of GUID that I can pass to the client as above in order to locate the target component with

DOM.getElementById(componentId);

?

/Daryl