How to make an url inside a string clickable in gwt

Question

If I have a string like:

String textWithUrl = "I am a string and http://www.google.com is the url to google";

Then I put it in a HTML Element:

HTML html = new HTML(textWithUrl);

But the link is not clickable. Usually I make it clickable with (never tested it with a Label):

private String makeUrlInTextClickable(String text) {

    if (text == null) return "";

    String[] words = text.split(" ");
    String textWithUrl = text;

    for (String word : words) {
      // Maybe more checks are needed to prevent typos like abcdhttp://
      // Mostly the texts come from a source, in which the urls are likely to be valid
      if (word.toLowerCase().contains("http://")) textWithUrl = textWithUrl.replace(word, "<a target=\"_blank\" href=\"" + word + "\">" + word + "</a>");
    }

    return textWithUrl;
}

The textWithUrl could be of any length with many urls inside.

Is there a better way to do this?

Edit:

Example usage:

public class Test implements EntryPoint {

    @Override
    public void onModuleLoad() {

        String textWithUrl = "I am a string and http://www.google.com is the url to google";
        RootPanel.get().add(new HTML(makeUrlInTextClickable(textWithUrl)), 0, 0);
    }
}

Output would be then just one HTML Widget with the clickable google url

I stick with mine. I do not like the anchor/label thing, because I have to extract every url first. Think about a string with hundreds of urls. You would have HTML + Anchor/Label + HTML + Anchor/Label + ... This kills Vincent's answer as well as RAS's. Gerald Kamper answer is the same as Vincent's. Linkify and Anchorme does nearly the same as my makeUrlInTextClickable() method, but with more possibilities. For example file, email etc. As long as I do not need to cover those, I take mine. But I recommended your answer to a colleague and he is using Linkify. — aProgger, Feb 12 '16 at 13:13

score 1 · Answer 1 · answered Jan 19 '16 at 15:08

The triditional "link" style you're probably thinking about is an anchor. It will be the blue (or browsers link color) and underlined. The click handler will fire to the url you provided.

Anchor link = new Anchor("www.linktositehere.com");

As far as implementing it with a label you would simply create a label and add a custom click handler to it. In your uibinder (or in java code) you can style the label to look like anything you'd like.

    Label labelLink = new Label("www.linktositehere.com");

    labelLink.addClickHandler(new ClickHandler()
    {

        @Override
        public void onClick(ClickEvent event)
        {
            Window.Location.assign("www.linktositehere.com");
        }
    });

Maybe I got you wrong but this is not what I want. I know I can add a ClickHandler to a Label but then I have to extract every link out of the string, put it in one or more Labels and surround it by parts of the string in a HTML widget?! So I get this than: HTML + Label + HTML + Label + HTML + Label + ... I hardly doubt this is better than my solution. — aProgger, Jan 20 '16 at 08:43

score 1 · Answer 2 · answered Jan 26 '16 at 09:16

I usually use one of the following two solutions:

1) If something should happen within the application, I set a ClickHandler on an Anchor:

Anchor link = new Anchor("text");
link.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(ClickEvent clickEvent) {
  ...        
  }
});

2) For external links, that open a new browser window, I usually just use the following HTML:

HTML link = new HTML("<a href=\"" + link + "/\" target=\"_blank\">" + text + "</a>");

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

This isn't GWT specific, but there are loads of JavaScript libraries out there that will do what you want. As you can simply include and call JS from GWT, this should be a feasible solution for you.

There is a SO answer on this topic here:

How to replace plain URLs with links?

But for completeness, these are the recommended libraries:

Both have a live demo feature where you can test it out yourself. Obviously, none of them will cover your edge cases, but it may still be worth a look.

edited May 23 '17 at 10:30

Community

1
1

answered Feb 09 '16 at 14:26

Baz

36,440
11
68
94

I decided to upvote and mark it as answer because of the use this answer had for a colleague of mine. He also gave it to some one else who can use it as well. – aProgger Feb 12 '16 at 17:13
@aProgger Cheers mate. Glad it was useful to someone. – Baz Feb 12 '16 at 18:00

score 0 · Answer 4 · answered Jan 19 '16 at 10:32

0

If you want to show a link, you have to use an anchor tag.

If you want to use HTML widget, there are 2 options:

Make a string of HTML code and attach that string to HTML widget as you have already done in your code.
Use any HTML element provided by GWT (i.e. AnchorElement) and wrap it under the HTML widget using wrap() method in the HTML widget.

Hope this helps.

answered Jan 19 '16 at 10:32

RAS

8,100
16
64
86

But for the 2nd option I have to know the link right? As I must do in S. Vincent's answer. So if I just get a String, I have to find the links first. Again I would have to go trough every word and search. – aProgger Jan 20 '16 at 09:10
@aProgger Yes. If you're assuming, since it's an HTML widget it will understand the link automatically.. No. You're wrong. Since it's an HTML widget it will understand all the html tags automatically. You still have to write html code as a string. – RAS Jan 20 '16 at 09:52
Yes and because of this, I wrote myself the makeUrlInTextClickable method, which adds the tags around every link. I just hoped, there would be a better method somewhere. Maybe from apache or an gwt widget what does this automatically. – aProgger Jan 20 '16 at 09:58
@aProgger What would be the advantage of a widget that did it for you? It would still have to parse the whole text and add the anchor tags. Just wrap your code in a separate widget and reuse this where required. – Baz Jan 26 '16 at 14:34
@Baz Of course the widget or function has to go trough every word. No doubt in that. Maybe a regex would be faster. But an inbuild way would give me the security that everything will be fine and I do not have to take care of many possibilities. My function for example does not cover strings like 'abcdhttp://www...' or 'www.google.de'. Of course I could even cover those. – aProgger Jan 27 '16 at 08:08
1

@aProgger I highly doubt there's a widget that already does it. especially the case with the missing space in front of the URL. – Baz Jan 27 '16 at 08:14

How to make an url inside a string clickable in gwt

Edit:

4 Answers4