Nicolas Frankel is an IT consultant with 10 years experience in Java / JEE environments. He likes his job so much he writes technical articles on his blog and reviews technical books in his spare time. He also tries to find other geeks like him in universities, as a part-time lecturer. Nicolas is a DZone MVB and is not an employee of DZone and has posted 224 posts at DZone. You can read more from them at their website. View Full User Profile

Integrating HTML and JavaScript into Vaadin 7 - Part 1

07.29.2012
| 5229 views |
  • submit to reddit

In Vaadin 6, extending existing components required creating subclasses and overriding the desired methods when possible. When not, this meant hacking protected methods and/or copying-pasting code. In this two-part serie, we'll have a look at how Vaadin 7 makes it easier for us to extend components through "composition" rather than inheritance:

  • This article will show us how to create an extension using HTML and the GWT API
  • In the follow-up, we will create an extension using purely JavaScript, without any GWT dependency!

Vaadin 7 introduces the concept of extension. Extensions are features that can be attached to existing components (or applications) and may have a GUI part.

In order to illustrate our point, we'll create hover tooltips on hyperlinks.

Among Vaadin class hierarchy, an extension simply implements Extension (which is a marker inteface), but Vaadin provides AbstractExtension to ease our work. We just have to specify which components are extendable by this extension:

public class TooltipExtension extends AbstractExtension {

    // Only Link are allowed tooltips
    public void extend(Link link) {

        super.extend(link);
    }
}

 

Like any Vaadin components, extensions must have an associated client connector, that has to be under the client subpackage for it to be compiled. Connectors do the real work but need some knowledge of native GWT. For this reason, we won't go into much detail; just extends AbstractExtensionConnector, the rest is up to you. The next snippet displays HTML code when the mouse hovers over the client widget (and hides it when it moves out).
Note the @Connect annotation, just like any other connector.

@Connect(TooltipExtension.class)
public class TooltipConnector extends AbstractExtensionConnector {

    @Override
    protected void extend(ServerConnector target) {

        final Widget hyperlink = ((ComponentConnector) target).getWidget();

        final VOverlay tooltip = new VOverlay();

        tooltip.add(new HTML("<div class='c-tooltip'>This is a static tooltip</div>"));

        hyperlink.addDomHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {

                tooltip.showRelativeTo(hyperlink);
            }

        }, MouseOverEvent.getType());

        hyperlink.addDomHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {

                tooltip.hide();
            }

        }, MouseOutEvent.getType());
    }
}

Finally, we have to connect our brand new extension to desired components:

Link morevaadin = new Link("More Vaadin", new ExternalResource("http://morevaadin.com/"));

new BasicTooltipExtension().extend(morevaadin);

While the second line may seem reversed, it let us restrict the type of component extends.

Our code has a big drawback: the text displayed in the tooltip is static. In order to provide a customizable tooltip, we just have to create a state, like for components.

public class TooltipState extends SharedState {

    private String display;

    public String getDisplay() {
    
        return display;
    }

    public void setDisplay(String display) {
    
        this.display = display;
    }
}

We also need to change our extension, to use the newly-created state:

@Connect(TooltipExtension.class)
public class TooltipConnector extends AbstractExtensionConnector {

    @Override
    protected void extend(ServerConnector target) {

        final Widget hyperlink = ((ComponentConnector) target).getWidget();

        final VOverlay tooltip = new VOverlay();

        String display = getState().getDisplay();
        
        tooltip.add(new HTML("<div class='c-tooltip'>" + display + "</div>"));

        hyperlink.addDomHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {

                tooltip.showRelativeTo(hyperlink);
            }

        }, MouseOverEvent.getType());

        hyperlink.addDomHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {

                tooltip.hide();
            }

        }, MouseOutEvent.getType());
    }

    @Override
    public TooltipState getState() {

        return (TooltipState) super.getState();
    }
}

Last but not least, we have to devise a way to get the tooltip text. Let's pretend we want to display the URL as a tooltip:

public class TooltipExtension extends AbstractExtension {

    public void extend(Link link) {

        Resource resource = link.getResource();
        
        String display = resource instanceof ExternalResource ? ((ExternalResource) resource).getURL().toString() : "???";
        
        getState().setDisplay(display);

        super.extend(link);
    }

    @Override
        public TooltipState getState() {

        return (TooltipState) super.getState();
    }
}

You can find sources for this article on Github.

In the next part of this serie, we'll look at how to integrate already existing JavaScript frameworks that provide tootlip features.

From http://morevaadin.com/content/integrating-html-and-javascript-part-1

Published at DZone with permission of Nicolas Frankel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)