Button calling a new html page

[rhunter]

I have a new user question. I have a page with two buttons on it that will call two different html pages and show those pages in full (not in an htmlPane) How do I set the click attribute (in JS) to do that. Example a button to call www.google.com and on the same page it comes up. I'm using SC LGPL 8.2.


Thanks in advance.

[MarcusZ]

Hi,
it would be brilliant if there is a possibilty to do that.
Maybe it could be realized as an own button type, which just holds the url as an attribute.

We're trying to open some self generated html pages and we need a button to behave like a simple "href" in html.
We've already tried it with window.open("...."),
but most of the time the popup blockers prevented the opening of the page.
Our current sc version is "SNAPSHOT_v8.3d_2012-10-12/Pro Deployment"

Regards Marcus

[Isomorphic]

Outside of other components (see DynamicForm (LinkItem) or ListGrid (link type field)), we don't really provide any explicit utilities for this, but it is very easy to achieve.

If you just want to open a new, non SmartClient browser window in the page you have two options:
One is to use javascript in the click handler for the window (basically window.open()). As you say - pop up blockers may block this. We have no control over this. You could possibly look at the return value from that method and determine whether the window opened successfully and if not show a prompt to the user asking them to disable pop up blockers temporarily or something.
The other is to use a standard HTML link, embedded in some component. We will not interfere with the user interaction, so it'll behave exactly as you'd expect.

If you want to formalize this into a class - this would be easy to do - just create a subclass of Canvas or Label (say) which uses it's "url" attribute to write out an HTML link pointing at the URL in question, or similar.

Regards
Isomorphic Software

[MarcusZ]

We do know that we can put the link in a label or canvas with plain html,
but we also need a component, which is looking and acting like a button, although it is none.

If you have a look at the screenshot, you will see a toolstrip with two buttons.
Our intention is to have the "update" button like a normal button, which will execute some code by clicking.
The "print" button should open a certain link in a new window.

Regards Marcus

[Isomorphic]

Yes - so please re-read previous response, we indicated that you can use the standard technique of window.open() to open a new window from the button's click event.

[MarcusZ]

I did read your previous response, but we'd like to have a solution without deactivating the popup blocker.
So i'm afraid using "window.open" is not an option for us and we are still searching for another solution.
Which brings me back to my previous response. Is there a possibility
to realize something like that, without using window.open()?

It would be nice if you could provide a code example, of how to define such a component, which looks like a button but works like a link

[Isomorphic]

You already know how to put the link into a Label, so, you could style the Label to look like a button (using setBaseStyle()).

[MarcusZ]

Thanks for your advice, I did act on it.
Please see the result below.
It almost works as desired, but you have to click directly onto the link to open the new page.
My goal is that the new Page will open, regardless of where the user has to click onto the component.
Does not the button class already has the necessary functionalities to achieve the required behaviour?
Maybe it would be better to use a button instead of a label

isc.Label.create({
    height: 10,
    padding: 5,
    align: "center",
    valign: "center",
    baseStyle: "button",
    wrap: false,
    icon: "icons/16/approved.png",
    autoFit: true,
    contents: '<a href="http://www.google.de" target="_blank"  style="text-decoration: none; color: #000000">Print</a>'
})

[Isomorphic]

Again, the button's click handler will allow you to open a window via window.open(), but you appear not to want to do this.

If you want the entire styled area to act like an HTML link, then you need to make your widget based on Canvas, have a link (<a>) as the outer element, and then put a styled <div> inside the <a> and the link text inside of the styled <div>.

The inner link text no longer needs to be a link (<a> element) in this case.

[MarcusZ]

I did it almost as you suggested it.
I created a new subclass of button within which i've overwritten the getInnerHTML() method.
Here is the new code for the method

function () {
	return '<a href=' + this.link + ' target="_blank">' + this.Super("getInnerHTML", arguments) + '</a>';
    }

It worked, but i've received a javascript error, while interacting with the component.
Which means that i clicked on it or just moved the mouse over the component.
The error is "this.getHandle().firstChild.rows is undefined" in ISC_Foundation line 424.
I am using the sc version "v8.3d_2012-11-13/Pro Deployment "

[Isomorphic]

Again don't start from Button, start from Canvas with this approach.

You are returning your own HTML structure which is entirely different from what a Button normally generates, that's why you broke the event handling logic in Button.

[MarcusZ]

You were right, to start from canvas was the correct approach.

I've overwritten the getInnerHTML method from canvas, with the string, which was generated by the getInnerHTML method of a button.
I had to make a few changes so that i can customize the component.

It does work now in chrome and firefox, thanks to your help. But the IE9 does act in a really unexpected way.
The new page opens only if you click directly onto the button icon.
Here is the code i did have used to overwrite the getInnerHTML method

html += "<a href=" + this.link + " target='_blank' style=\"text-decoration: none\">";
		html += "<table cellspacing='0' cellpadding='0' width=" + this.width + " height=" + this.height + " style='table-layout:fixed;overflow:hidden;'>";
			html += "<tbody><tr>";
				html += "<td nowrap='true' class='buttonOver' style='padding-top:0px;padding-bottom:0px;' align='center' valign='center' tabindex='-1' onfocus='" + this.ID + ".$47'>";
					html += "<table cellspacing='0' cellpadding='0'>";
						html += "<tbody><tr>";
							html += "<td class='buttonOver'		style='margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;font-size:0px;padding-right:6px'>";
								html += "<img src='" + this.icon + "' width='16' height='16' align='absmiddle' name='isc_2" + this.ID + "$4u'  style='vertical-align:middle' eventpart='icon' border='0' suppress='TRUE'/>";
							html += "</td>";
							html += "<td class='buttonOver' style='margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;' nowrap='true'>";
								html += this.title;
							html += "</td>";
						html += "</tr></tbody>";
					html += "</table>";
				html += "</td>";
			html += "</tr></tbody>";
		html += "</table>";
	html += "</a>";

[Isomorphic]

Don't copy the HTML from the isc.Button class, it's full of internals you don't understand.

There are countless tutorials available on the web on how to put together buttons from basic HTML.

[ThomasH]

Hi Isomorphic,

we need a button, that is like a normal SmartClient button, and behaves like a normal SmartClient button but has a link to an arbitrary url instead of the click event.

window.open is not an alternative because of the popup blockers.

Unfortunately SmartClient has not such a component. As we are seeing, building this ourselves seems not to make sense. This needs experts like you.

We would consider a feature sponsorship for this. Is this possible?

Greetings Thomas

[Isomorphic]

We really wouldn't recommend taking this path. This doesn't require anything like "experts", this is basic stuff, and your developer seems to be right on the verge of succeeding.