Clickable Text object

[timefortea]

I've created a Text object and placed it in a LayoutContainer with a TableRowLayout. I want to be able to click on this text, so I tried adding a listener but it does not work:



Text logout = new Text("Logout");
logout.addListener(Events.Select, new Listener<ComponentEvent>( ){
public void handleEvent(ComponentEvent be) {
logout();
}
});


Can a listener be added to a Text object? Or should this be coded differently?

Thanks.

[darrellmeyer]

Take a look at this:


public void onModuleLoad() {
Text logout = new Text("Logout");
logout.sinkEvents(Event.ONCLICK);
logout.addListener(Event.ONCLICK, new Listener<ComponentEvent>( ){
public void handleEvent(ComponentEvent be) {
System.out.println("click");
}
});
RootPanel.get().add(logout);
}

[timefortea]

Thanks, that works... but it makes the entire table cell clickable. The "Logout" text is right-aligned in a cell that is 50% wide and clicking anywhere within that cell's area calls this handler.

Any other suggestions?

[darrellmeyer]

You can call event.cancelBubble() to stop the event from bubbling to parent elements.


public void onModuleLoad() {
Text logout = new Text("Logout");
logout.sinkEvents(Event.ONCLICK);
logout.addListener(Event.ONCLICK, new Listener<ComponentEvent>( ){
public void handleEvent(ComponentEvent be) {
be.cancelBubble();
System.out.println("click");
}
});
RootPanel.get().add(logout);
}

[timefortea]

I tried your example and it fires the listener when clicking anywhere on the same line as the text. For my specific use case, it still fires it when clicking anywhere within the bounds of the cell.

Perhaps I am tackling this the wrong way and there is a better way to solve it. For example could I use a Button and style it so that it appears like a text link? It seems as though this should be simpler to solve, so any guidance appreciated :)

[timefortea]

Anyone? How can I make a clickable text link, where only the text itself is clickable?

[Michi_de]

I was searchin for the same kind of thing... maybe someone can help me?
It should just look as a hyperlink would do. When cursor is over the text it should change its image (from arrow to hand - like its with hyperlinks or button widgets).

[takayser]

does anybody got a solution or workaround for that?

[timefortea]

Nope, I'm still waiting for someone to suggest something... :-?

[gtg489w]

Have you tried applying this to a Label object rather than text?

[sven]

public void onModuleLoad() {
Text logout = new Text("Logout");
logout.setTagName("span");
logout.sinkEvents(Event.ONCLICK);
logout.addListener(Event.ONCLICK, new Listener<ComponentEvent>( ){
public void handleEvent(ComponentEvent be) {
be.stopEvent();
System.out.println("click");
}
});
RootPanel.get().add(logout);
}


Untested but should work ;)

[timefortea]

Great, thanks sven, it works a treat!

[takayser]

Sven, you added

logout.setTagName("span");which solved timefortea's problem (it fires the listener when clicking anywhere on the same line as the text). Cool, thanks for that.

But do you got also a solution to what Michi_de said?

When cursor is over the text it should change its image (from arrow to hand - like its with hyperlinks or button widgets).@gtg489w, do you mean GXT LabelField or GWT Label?

[sven]

logout.setStyleAttribute("cursor","pointer");

[timefortea]

I added the following style to change the cursor:

{
cursor:pointer;
cursor:hand;
}

[takayser]

Cool, Sven and timefortea -> Thank you!!