Clickable label?

Vaadin 6 / 7 / 8 Framework UI
1

What is the preferred way for making a label clickable?

I don’t want a button, and I’m aware I can request that a button be styled like a link.

I am essentially looking for the equivalent of a href=“/”, wrapping a label-and-icon pair. For example, if you look at this forum page, the vaadin logo in the upper left hand corner is such a link.

However, I actually want to fire a Vaadin event when a click happens, so, to my newbie eyes, a Link is not the appropriate vehicle here.

Is this where the kind of cool but also kludgy-smelling “clickable layout” comes in?

Lastly, it appears–again to my newbie eyes–that all components have the ability of registering any old event type they want by means of addListener(Class, Object, Method). Would doing something like:


label.addListener(MouseEvents.MouseClickEvent.class, myHandler, hisClickHandlingMethod);

…work?

Thanks,
Laird

2

Hi Laird,

Could you explain what your reasons for not wanting a Button are?

I’d personally most definitely use a Button styled with CSS to look like a label, since the Button already supports click listeners, icons and everything that is needed. Note that the Link component is different from the Button styled as a link.

/Jonatan

3

Another approach is to add a listener to the layout that contains the Label. The LayoutClickListener will provide information about what child component was clicked (provided that the child component does not cancel the event but Label should not do that).

4

Hello! I want to ask here, not to create a new topic.
I have an annoying problem with LayoutClickListener.
If the user clicks the mouse too often, it is not possible to clear the buffer of events.
And if each click is processed long enough (more than 100 milliseconds), the whole process begins to slow down.

You can also try it here by often clicking the mouse on the top panel:
http://demo.vaadin.com/sampler#ClickableLayoutBasic

Thanks for any help.

5

That is a fair question. I have several answers. I don’t claim they’re correct or comprehensive.

The first is just semantics: this isn’t a button. This is an area you click on and then something happens. It’s a region that brings you back to the home page (a common feature on most websites). So a button seemed like a very odd thing to use here, and “hiding” the fact that it’s a button with CSS styling seemed like kind of a hack.

The second answer is that in pretty much every other way this clickable area should behave like a normal HTML link (which I understand is what a Vaadin Link is for–I think (and hope!) I understand what the difference is between a Button and a Link). It might, today, contain text and an icon, but tomorrow it might consist of a group of images and several lines of text, all of which should be conceptually wrapped in an tag. A button seems wrong for this sort of thing. A link seems perfect. But I want the link to interact with Vaadin, not simply tell the browser to reload the app. (Specifically for what it’s worth I want a click on this label/text/button/region to select a particular tab in a tabbed pane–the home tab.)

The third answer is that I’m a hopeless bozo when it comes to CSS styling. :slight_smile: If I were to use a button, I suppose I would have to setStyleName(someStyleName) on it and then in my styles.css somehow clear out the existing button styling? I realize this is not a CSS forum; I’ll have to go explore how to do that. Or should I do addStyleName(myStyleName), in which case: how do I ensure that settings for .myStyleName trump the default (Runo) button styles?

So, anyhow, that’s why I was looking for a different solution. Please do tell me either why this is against the spirit of Vaadin, or how I might do this sort of thing better–I’m still new to this excellent framework.

Best,
Laird
6

Just out of curiosity: how would a child component cancel an event? I don’t see anything in, for example, MouseEvents.ClickEvent such as, say, cancel().

Thanks,
Laird

7

Oh, and my fourth reason was that this: http://vaadin.com/download/release/6.1/6.1.0/release-notes.html#button

…implies that restyling a button is neither simple nor to be undertaken lightly. :slight_smile:

Best,
Laird

8

That would be a built in feature in the client side widget, for instance a Button inside a layout won’t trigger a layoutClick when the Button is clicked.

9

Yes, that’s true for the Button component, but the NativeButton component is much easier to style (unless you’re after all the fancy states the normal Button provides and want to make them work in all browsers). They’re equal on the server side and functionality, only the presentation is different.

For the clickable label, I’d go with the ClickableLayout, and use CssLayout since it has the least overhead.

10

I just working the project using vaadin. I plan to use the TextField and PasswodField that user could change the text label by themselves by using right mouse click to that label against the particular field and I shall popup some dialog to allow to change this text. It quit difficult if we have no mouse event listener to do this. The layout listener may be able to to this but It does not work if we using multiple levels of layout to decorate our form. Both open source thinwire and open source Swing have the mouse event listener for all the components but your user interface is much better. I still plan to go ahead with vaadin. If you could incorporate the well designed structure of event listener of thinwire or Swing it should be great.
Any suggest that I could implement this label changeable feature is appreciated.
Thanks

11

Or Vaadin could just make it possible to get MouseEvent.* off of any component the way swing does so that we can respond to users however we want wherever we want without having to hunt for tricks on the forum or abuse poor little buttons by trying to morph them into all kinds of unnatural things :).

Save the buttons!

12

With Vaadin 7 it should be trivial to create an extension that listens to click events and forwards them to the server. See e.g. FileDownloader for an example. You can then attach the extension to any component to get click events (for the whole component).

13

You can make a label clickable by wrapping it in a layout, and getting click events from the layout.

something like this:


HorizontalLayout myHorizontalLayout = new HorizontalLayout();
myHorizontalLayout.addComponent(myLabel);
myHorizontalLayout.addListener((LayoutClickListener) listener);

The LayoutEvents.LayoutClickEvent has a member method, getClickedComponent(), which you can use to decide if the label was clicked.

14

Check https://vaadin.com/directory#addon/clickablelabel

15

Hi Laird,

Here is something I use in my application but i hope find better…

  1. create this java class in a file ClickLabel.java

package com.mydomain.mymodule.mydirectory;


import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Label;

import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
public class ClickLabel extends VerticalLayout {
	
	public ClickLabel(String value) {

		Label label = new Label (value, ContentMode.HTML);
		addComponent(label);	
	}
}
  1. use the class in your code

ClickLabel apropos = new ClickLabel("<span style='cursor:pointer;'>A propos</span>");                                 
addComponent(apropos);	        		               		
apropos.addLayoutClickListener(new LayoutClickListener() {			
          @Override
           public void layoutClick(LayoutClickEvent event) {
                	
                	Notification.show("a propos");		
            }
});

if you want you can change the style


ClickLabel publi = new ClickLabel("<span style='cursor:pointer;'><a href='#' style='color:green'>Publicité</a></span>");

and for internationalization


ClickLabel apropos = new ClickLabel("<span style='cursor:pointer;'>"+messageSource.getMessage("about", null, current.getLocalisation())+"</span>");

I can’t change the style when the cursor is hover the label…

16

If you want to get real fancy you could create your own Label with a ClickHandler as explained
here(Create simple Component)
 and
here(Client to Server RPC)
.

17

You can’t resize the hight of a button.

18

What?

19

CAn you help me?? sorry iam is newbie developer

I want make a button link to move to another page … but i so confuse
ex:

buttonNewUser.addClickListener(e -> click());

void click(){
 ArrayList<PageInfo> page = new ArrayList<>();
        page.add(new PageInfo(PAGE_CAT_EDIT, TITLE_EDIT_CAT));
	}

in here i will to move to another page with buttonNewUser but i can’t.

but i don’t know , how can i must do…

sorry i talk in English is poor…

20

Bagus Priyo Wibowo:
CAn you help me?? sorry iam is newbie developer

I want make a button link to move to another page … but i so confuse
ex:

buttonNewUser.addClickListener(e -> click());

void click(){
 ArrayList<PageInfo> page = new ArrayList<>();
        page.add(new PageInfo(PAGE_CAT_EDIT, TITLE_EDIT_CAT));
	}

in here i will to move to another page with buttonNewUser but i can’t.

but i don’t know , how can i must do…

sorry i talk in English is poor…