Label and Button under the same <h1>

Hi all,

I’ve been fiddling with this stuff all day long, and still I didn’t manage to get any solution for it. Let’s see if somebody here can help! :slight_smile:

Before explaining my problem, I’d like to go to the basic case. I want to show labels and buttons (which look like links) mixed. In traditional HTML it would look like this:

<h1>Please click <a onclick=javascript(...)">HERE to run the program</a></h1>

But of course I want to run Vaadin functions, so I can’t use plain HTML.

If it weren’t a

I would do this:

HorizontalLayout hl = new HorizontalLayout();
Label l = new Label("Please click ");
Button b = new Button(" HERE to run the program");
b.setStyleName(BaseTheme.BUTTON_LINK);
b.addListener (.......) // You know the stuff

hl.addComponent(l);
hl.addComponent(b);

The thing is that now I want this on a h1 title. My approach would be this:

HorizontalLayout hl = new HorizontalLayout();
Label l = new Label("Please click ");
l.setStyleName("h1");
Button b = new Button(" HERE to run the program");
[b]
b.setStyleName(BaseTheme.BUTTON_LINK);
b.setStyleName("h1"); // But these two are mutually exclusive!
[/b]
b.addListener (.......) // You know the stuff

hl.addComponent(l);
hl.addComponent(b);

But the button’s setStyleName are mutually exclusive.

Is there any way to do this, or, at least, show the labels and buttons in a larger text so that they look like a uniform title?

By the way… is this the right way to append labels and links on the same sentence? Because it’s a bit cumbersome and the text lines don’t automatically split in multiple lines. Thus, some elements get hidden in the right part of the screen on very long lines

Thanks a lot!

Carlos

Maybe you can use “addStyleName” instead of “setStyleName”. You may also combine setStyleName to give the button an appearance of a link with “addStyleName” for the h1 style.

I’m afraid it doesn’t work, it keeps the “link” style and not the “h1”