CODEWITHSUNDEEP
vaadin
steve
steve

Reputation: 1856

Vaadin - Wrap arbitrary Component with HTML

I wanted to wrap a Component in HTML, let's say an "a". Is there an easy way to do this? ps. I do not want to add a ClickListener.

Something like:

CssLayout layout = new CssLayout();
SomeHtmlElement html = new SomeHtmlElement("a");
html.addAttribute("href","http://stackoverflow.com");
html.addComponent(layout);

Upvotes: 0

Views: 134

Answers (1)

cfrick
cfrick

Reputation: 37008

You can use a CustomLayout to put components into arbitrary HTML surroundings (See also the Book of Vaadin)

Creating that HTML is not a direct part of Vaadin. So you have to pick some third party library for this. For the sake of example is used Jsoup, as this is included in the Vaadin server and it allows for DOM manipulations (which I don't use):

// run with `spring run --watch <file>.groovy`
@Grab('com.vaadin:vaadin-spring-boot-starter:2.0.1')

import com.vaadin.ui.*
import com.vaadin.ui.themes.*
import com.vaadin.shared.*

@com.vaadin.spring.annotation.SpringUI
@com.vaadin.annotations.Theme("valo")
class MyUI extends UI {
        protected void init(com.vaadin.server.VaadinRequest request) {
        // create some HTML and provide a "place-holder" via `data-location`
        def doc = org.jsoup.Jsoup.parse('<main><h1>Hello World</h1><p><span data-location="button"/></p></main>')
        def button = new Button("Hello World", { Notification.show("Hello World") } as Button.ClickListener)
        // read the CustomLayout from an InputStream
        def c = new CustomLayout(new ByteArrayInputStream(doc.toString().getBytes('UTF-8')))
        // place the button in the CustomLayout via its name chosen by `data-location`
        c.addComponent(button, 'button')
        content=c
    }
}

Upvotes: 1

Related Questions