How to a open a new (native) browser tab

Hello,

I would like to open a new (native) browser tab in vaadin 7. This is a solution with a Html Link inside a Vaadin 7 Label:


	public static Label newTabLinkLabel(String caption, URL url) {
		final Label result = new Label("<a href=\"" + url + "\" target=\"_blank\" style=\"target-new: tab ! important;\">" + 
				caption + "</a>", ContentMode.HTML);
		return result;
	}

It uses the CSS3 attribute ‘target-new’ to ensure that a tab (and not a new window) is opened. (It falls back to a new window if the browser don’t understand the target-new stuff.)

However, I would prefer to not show a link but open the tab as result of a user interaction (let’s say a button click). There is Page.open(…) in Vaadin 7, but this will always open a new window. But the discussion at
open-url-in-new-tab-using-javascript
suggest that it also can be done with JavaScript on the browser side.

Can it be done in Vaadin 7, too?

Thomas

Vaadin 7’s BrowserWindowOpener extension should by default open pages as tabs or windows depending on browser preferences. It also resolves the problem that popup blockers usually block windows that are not opened via direct user action (for instance, a click event.)

The CSS target-new property is not supported by any browser and probably never will - such things do not belong in CSS - and was simply a random idea in a six-year-old draft paper. It should be strictly up to users to decide whether they want to open pages as windows or tabs. Vaadin 6’s Window.open() actually - unintentionally - caused browsers to open new windows instead of tabs even in cases they should not; this behaviour was inherited by Vaadin 7 Page.open(), fixed in 6.8 after that, and should be fixed in 7 as well before the final.

In any case, using Page.open() to open new windows/tabs is pretty much deprecated; BrowserWindowOpener is the correct tool for that.

@Johannes Dahlström
I used
BrowserWindowOpener
tool to open a new tab, but failed. I tried it in every browser it never opens in a new tab.
From this example
, I tried all target name _new, _blank, _top, etc… and tried in different browsers also, but could not open it in a new tab. It could open a new window but not a new tab. Can you post a working demo code here?

Here is the code that I tried

BrowserWindowOpener opener = new BrowserWindowOpener(MyPopupUI.class);// “http://google.com
opener.setFeatures(“height=200,width=300,resizable”);
opener.setWindowName(“_blank”);// _new, _blank, _top, etc.

    // Attach it to a button
    Button button = new Button("Pop It Up");
    opener.extend(button);
    layout.addComponent(button);

updated :
It didn’t work in firefox27.0.0, IE8.0.7600.16385, safari5.1.7

BrowserWindowOpener uses the user’s preference afak ( ie if you configured chrome/safari/firefox to open a new window in a tab ).

Since Firefox 26 though this seems to be broken. Chrome, IE and Safari still works.

If you specify some of the window features, like width and height in this case, I think it always means it will try to open it as a new window. Leave out those, and the browser should probably open a tab instead.

Did not even notice that the OP used size and resizable features. With those set the browser has no choice but to open in a window…

Hi Team,
When we set the below
opener.setWindowName(“_blank”);
it works in Mozilla, Google Chrome [Opens in a new tab]


But when I open in IE10, it is always opening in new Window.

Kindly provide some solution for this issue

Is there something that can be done with CSS.
Any support to help us solve this issue?

Same same here. Have you found any solution for this yet?

It’s probably a browser setting whether to open in a new tab or window.

That’s true. Thanks for that.

Internet Options → Tabs → Always open pop-ups in a new tab.

Hi Team,

I am getting an issue with com.vaadin.ui.Window which is happenning with vaadin-server-7.3.3.jar and not happenning with vaadin-server-7.1.7.jar


Problem:

I have a 3 consequent / continuous vaadin textfield with QueryFocusListener( Implementing com.vaadin.event.FieldEvents.FocusListener) inside a vaadin table.
QueryFocusListener in turn open a Vaadin Window.

When I click on textfield, the window opens
When I click

tab

the focus goes to the second textfield, the first textfield window closed and second textfield window opens and focus returns back to first textfield.
I want the cursor focus to stay in second textfield when I click tab.

As mentioned earlier, the issue is happenning with version vaadin-server-7.3.3.jar.
With version vaadin-server-7.1.7.jar the problem is not happenning.

Can anyone please help me regarding the same.

Please let me know if I have to create this post seperately.

Hi Team,

Now I faced new Issue. I wanted to replicate if the issue is same with the latest version of JAR 7.5.8. But new issue is appearing

Now the issue is solved between 2 selectbox (2 Textfield having focus Listener to open a window)
But now same issue is appearing between a SelectTextField and a normal TextField.
We need to give tab twice to navigate.

Kindly help me regarding the same.

Thanks & Regards,
Varun A

Hi Team,

Is there anyone who can answer this please.
VAADIN is getting complex and not flexible like any other Javascript technologies.
Kindly atleast inform me if this is not possible.

Start → TextField → FocusListener → Opens a Window → Close of Window → Cursor focus falls in TextField → Start

This is becoming infinite loop, The window options is very bad with respect to our development.

Hi,

This work perfect for me - IE11, Chrome, FF 43

Button socialFacebook = new Button(“Facebook”);

BrowserWindowOpener opener = new BrowserWindowOpener(new ExternalResource(“https://www.facebook.com”));
opener.setFeatures(“”);
opener.extend(socialFacebook);

I did a short blog post about it:

http://blog.techutils.space/2016/05/link-opening-new-tab-with-vaadin.html

Ui.getcurrent.open(
new

external resources
(
https://www.youtube.com/
),"
_blank
",
false
)

Unfortunately, the domain provided by Bruno Medeiros doesn’t work anymore only 9 months after its reply. Here’s a Google cached version of his post about opening a link in a new browser tab just in case anyone was wondering:


http://webcache.googleusercontent.com/search?q=cache:http://blog.techutils.space/2016/05/link-opening-new-tab-with-vaadin.html

It depends on what you want to achieve.

Solution 1

If you want you button to open a new tab the BrowserWindowOpener might be the right solution.

Button viewBtn = new Button("Click me");
BrowserWindowOpener opener = new BrowserWindowOpener(new ExternalResource("http://www.example.com"));
opener.setWindowName("_blank");
opener.extend(viewBtn);

Solution 2

Your button should open in new tab only when Ctrl (Alt, Shift, …) key on the keyboard is hold. If not, open in existing tab.
In this case you can try open new tab using Page#open() method. Be aware that browsers will probably try to block you action and will warn user that they have blocked the pop-up window (even though it is not pop-up but new tab). Page.getCurrent().open(…, …, false).

Button viewBtn = new Button("Click me", VaadinIcons.EYE);
viewBtn.addClickListener(ev -> {
  if (ev.isCtrlKey()) {
      Page.getCurrent().open("http://www.example.com", "_blank", false);
  } else {
      Page.getCurrent().setLocation("http://www.example.com");
  }
});

Solution 3

If you want the common behavior when the left mouse click opens in the existing tab and the middle mouse button click in the new tab, use link instead of button. In this case browsers probably let you open the new tab.

Link link = new Link(null, new ExternalResource(UriUtil.createAdUri(ad)));
link.setIcon(VaadinIcons.EYE);