Need to create a Transparent Window

[sandip.sahoo]

Hi,

Using GWT 2.4 & SmartGWT 3.0. My requirement is to create a transparent Window. I tried with setting Opacity to 0 and it works fine in FF and Chrome. However it does not work on IE 9, even after setting setUseOpacityFilter, it just shows up a window with a white background.

Can you advise on how to create a transparent window that works on all 3 browsers.

Thanks,
Sandip.

[Isomorphic]

What specifically are you looking for - a window that is translucent throughout, or just around the edges?

Full translucency is not possible without introducing other issues, such as burnthrough from iframes or applets elsewhere in the page.

[sandip.sahoo]

I am looking for complete transparency of the window. How can i achieve that on IE and what issues are we talking about. I don't have any applets or additional iframes(than the standard gwt iframe).

I took a look at the Transcluceny application from showcase which makes an image transparent. I tried using the same technique (i.e. setUseOpacityFilter(true)) with a window but that just results in a window with a white background, while on FF and chrome it gives me the desired effect i.e. a transparent window.

[sandip.sahoo]

Hi Isomorphic,

Can you provide the details i am requesting. This will help me decide whether i can go ahead with this approach or look for a different one.

[Isomorphic]

We have made a change to support this in the 8.3d branch (change went in last night, and is present in the Jun 1 nightly build) and are in the process of porting across to 8.2p, so this will be present in the next nightly build on that branch.

The specifics you need to know are:
- by default full window opacity will be supported in IE9
- support for full window opacity will be available in earlier versions of IE but in order to get this, you will need to explicitly set the property "useBackMask" to false. This is a newly exposed API. The backmask is a workaround for a native browser behavior whereby certain HTML elements can fail to respect browser z-index. From the docs:

In earlier versions of Internet Explorer (pre IE9), a native limitation exists whereby if HTML elements are overlapping on the page, certain elements can appear to "burn through" elements in the same position with a higher z-index. Specific cases in which this have been observed include Applets, <IFRAME> elements, and for older versions of IE, native <SELECT> items.

The backMask is a workaround for this issue. If useBackMask is set to true, the component will render an empty <IFRAME> element behind the canvas, which prevents this effect in all known cases.

The backmask is incompatible with opacity and is enabled by default for Windows so you would have to explicitly disable this property.

Also note that if the flag to 'neverUseFilters' is set you will need to explicitly set 'useOpacityFilter' to true in all versions of IE other than IE9 running with HTML5 doctype specified (where opacity is achieved without the use of filters).

Regards
Isomorphic Software

[sandip.sahoo]

Thanks for the reply.

I am using SmartGWTEE 3.0. What would be the best way to try out this change. Some way of porting it? Will this fix be available in any of the SGWT nightly builds which i can check?

[Isomorphic]

See smartclient.com/builds for information on patch and development builds.

[sandip.sahoo]

You mentioned this change has been made in Smartclient 8.3d and 8.2p branches. I wanted to check whether this change will be available in SmartGwt 3.0p/3.1d branches as well ? So accordingly i'll try with these.

[Isomorphic]

SmartGWT 3.0p incorporates the SmartClient 8.2p codebase and SmartGWT 3.1d incorporates the SmartClient 8.3d codebase, so yes, the changes should be available for you.

[sandip.sahoo]

Hi Isomorphic,

I tried the following piece of code on 3.0 nightly build dated 5th June,

Dialog dialog = new Dialog();
dialog.setUseBackMask(false);				
dialog.setOpacity(0);
dialog.setShowHeader(false);  
dialog.setShowEdges(false);
dialog.setWidth(800);
dialog.setHeight(600);  
dialog.setShowToolbar(false);
dialog.setShowResizer(false);
dialog.setShowStatusBar(false);
dialog.show();

This on IE9, got rid of the white background which was otherwise visible. However it does not completely make things transparent. It still show a thin blue border on all 4 side(see attachment - marked in red).

My original requirement was to overlay a transparent window/pane onto an existing widget, which will allow viewing of the widget but avoid editing it. The above code work and gives me the expected results in FF and Chrome. However with IE i, can click on the underlying widget, shouldn't the transparent window be the topmost element (like the way it works on FF and Chrome).

Really getting frustrated with this one. Please advice.

Thanks.

[Isomorphic]

Wait, the actual use case is making an item non-interactive? Please tell us this information *in your first post*. There is no reason to do this via a Window so all of this back and forth has been a waste, especially the deep dive we did into whether backmasking was still necessary..

If you physically block the widget by putting something on top, it will be visible but users will not be able to copy and paste information. So it's better to set it disabled, or for a form, setCanEdit(false).

If for some reason you want to physically block a widget by putting another widget on top, use a Canvas, not a Window. However, IE will not consider a transparent widget as eligible for events. A workaround is it to set opacity to 1, which is generally invisible to the user.

[sandip.sahoo]

My bad. Should have added the actual usecase as well.

The reason i am not using individual item disabled/setCanEdit(false). Is the base widget is a custom widget and has many links, images and textboxes. This will result in disabling all these field independtly which might just be too many. So instead i thought let me overlay a transparent window over this custom widget which will allow the details of the base widget to be seen but not edited.

With a transparent window i was able to achieve this desired effect on FF and Chrome, however it failed on IE9.

As suggested, instead of a Window i tried using a VLayout(i.e. canvas), just set the height, width and opacity to 1. This again works well on FF and Chrome but fails with the same problem on IE9, it does create a transparent canvas, but does not block the base widget, i am still able to edit the base widget.

Am i missing anything?

[Isomorphic]

We're not sure how there could be "too many" items. It should be just a few lines of code to write a loop to disable all items, and this is the better approach.

Opacity filtering is disabled by default in IE due to severe bugs in this browser - see the IEFilters topic in JavaDoc for details.

[sandip.sahoo]

In my case the base widget has many embedded canvases and they in turn have more so at which point the actual leaf element(image/label/text box/etc) is, is not known. A recursive loop would do it eventually and i had that approach as a backup. However a transparent overlay was an easier and quicker options so i ventured there.

Anyway, since it's not possible to achieve a transparent pane behavior on IE which behaves similar to FF or Chrome, i'll fall back on the approach of individually disabling each item.

Thanks for all your help so far.

[Isomorphic]

Just to reiterate: making the fields not editable is better UI (allows copy and paste). If you have nested forms, simple recursion may be necessary, but not anything complex.

And again, you can do a transparent overlay in IE, you just need to enable transparency on that element (discussed more in the IEFilters doc we referred you to).