What is the Vaadin component, that corresponds to InlineLabel (<span>

Dear Vaadin users,

I am looking for Vaadin UI component, using which I would like to generate a element. I have found the corresponding GWT component (
com.google.gwt.user.client.ui.InlineLabel
), but it is not used in Vaadin.

The reason for that is the following:

  • I would like to define the custom CSS styles for each span individually
  • I would like to handle mouse events for each span

Perhaps I have taken a wrong approach (I am not sure that e.g.
com.vaadin.ui.Label
supports mouse click events), so if anybody has any experience with similar task – please, share.

Have anybody got any ideas about how to implement this in Vaadin?

The is no such component in Vaadin. What is the use case? You might want to take a look of CSSLayout for fully CSS based positioning. Also note that all components can have independent CSS class names with setStyleName().


Joonas
, thanks for reply.

I would describe the usecase in HTML terms. I want to generate the following data:

I would like
callback()
function to be called, when mouse is clicked on a certain portion of text to show a context menu (e.g. to implement a spellchecker correction function).

In the example above I can replace

with [i]

[/i], which is Vaadin Label + custom CSS. But can the label react on mouse click events?

You could use button with style BaseTheme.BUTTON_LINK

OK, but how do you suggest to render the text between links? Apply
display: inline
style?

A CustomLayout is very much suited for this, here is an example:


 CustomLayout layout = new CustomLayout(
                    new ByteArrayInputStream(
                            "Here is a <span location='link1'></span> and here is another <span location='link2'></span>"
                                    .getBytes()));

            Button link1 = new Button("link");
            link1.addStyleName(BaseTheme.BUTTON_LINK);
            layout.addComponent(link1, "link1");

            Button link2 = new Button("link");
            link2.addStyleName(BaseTheme.BUTTON_LINK);
            layout.addComponent(link2, "link2");

IMO the best way to go is to render the whole HTML part (with links an all) as HTML in one Label using HTML content mode. Links should point to #someaction. Actions should be handled using
UriFragmentUtility
.

You might also do this by using “display: inline-block”, but it is not properly supported in IE6 and IE7.

But do note that this will most likely totally mess up any browser history if you intend to use it for application navigation as well.


John
, thanks a lot for the example! After I have created HTML with 2000 link buttons, Vaadin was not able to render it in reasonable time. Firefox displayed a message, that the following script takes too long to complete:

http://localhost:8080/app/VAADIN/widgetsets/com.vaadin.terminal.gwt.DefaultWidgetSet/BB976CF79FCB18010E518716C70814FA.cache.html:1941

Is there any limitation on number of UI components for
CustomLayout
?

Yes. I use UriFragmentUtility for navigation in my app. Joonas’s suggestion would probably break that functionality in my case.

I find that there is no real easy way of displaying links embedded in some other text, and have them behave as a button. You could hack away with custom layouts and labels and such… But there should be an easier way. Maybe a plugin…

Re: Use case

I want customize caption in treetable, but space is span and Horizontallayout is div, so it wraps on new line

Custom layout is also wrapped in div. Hate vaadin.

You can always try specifying a DIV element as “inline” or “inline-block” using CSS, so it will behave as an inline element, and won’t wrap to a new line.

Thanks, I’m already get this works with css