How to mask / unmask a page

[ql20080101]

Hi,

In gwtext, I can use

ExtElement element = getEl();
element.mask("abc");
element.unmask();

to mask/unmask current page, how can i realize this in smartgwt?

thanks.

[mike.art1]

Show a modal window.

[ql20080101]

To keep the same style as gwtext, how can I set the modal window looks like a label?

thanks.

[NestorDRod]

Show a modal window.

You're kidding, right? That's like saying the way to brake in a car is to put the gear shift into "Park." O_o

Is that really the only way to mask a page?

[Isomorphic]

No one said it was the only way, it's just the nearest equivalent to that gwt-ext API. Two other ways are the prompt (see rpcRequest.showPrompt) and clickmasking (canvas.showClickMask()).

[mcaron]

Is it possible to mask (e.g. display modal look and feel, opacity, etc) to a specific canvas element?

I am trying to achieve the same effect as a Window that is
setIsModal(true);
setShowModalMask(true);

However this makes the entire page modal. I would like to apply this only to a Canvas within the screen. is it possible?

[svjard]

This could be helpful to you at the end, it is very possible http://forums.smartclient.com/showthread.php?t=7344

[mcaron]

Thanks.

I did this and it works great with SGWT 2.2 however there might be a bug in 2.4 and IE setOpacity(). The opacity setting is not working in IE7.

As an experiment I tried using setStyleName("myOverlaymask");
The following style defined produced some strange behavior with the IButton "Down" state. Its as if the filter style is being applied to all elements on the screen. See attached image.

<!--[if lte IE 7]>
    <style type="text/css">
        .myOverlayMask {
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        }
    </style>
<![endif]-->

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class MY_OverlayMask extends VLayout implements EntryPoint {

    private VLayout container;
    private Canvas mask;

    public void onModuleLoad() {
    	
    	container = new VLayout();
        container.setWidth(100);
        container.setHeight(100);
        container.setBorder("1px solid #000000");
        container.addMember(new Label("Notice the opacity."));

        IButton btnAddMask = new IButton();
        btnAddMask.setTitle("Add Mask");
        btnAddMask.addClickHandler(new ClickHandler() {
        	public void onClick(ClickEvent event) {
        	    container.disable();
        	    mask = new Canvas();
        	    mask.setBackgroundColor("#cccccc");
        	    mask.setWidth(100);
        	    mask.setHeight(100);
        	    mask.setOpacity(50);
		    mask.bringToFront();
    		    mask.setBorder("4px solid blue");
    		    mask.setStyleName("myOverlayMask");

        	    container.addChild(mask);
             }
        });
        
        IButton btnRemoveMask = new IButton();
        btnRemoveMask.setTitle("Remove Mask");
        btnRemoveMask.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				if(mask != null) {
					mask.destroy();
					container.enable();
				}
			}
		});
        
        addMember(container);
        addMember(btnAddMask);
        addMember(btnRemoveMask);
        setMembersMargin(10);
        draw();

    }
}

Using GWT 2.1.1 and tested it also with GWT 2.0.0

Any advice on how this can be resolved? Thanks

[smartgwt.dev]

Try adding mask.setUseOpacityFilter(true);

This is now required when using IE.

[levi]

Try adding mask.setUseOpacityFilter(true);

This is now required when using IE.

I just noticed this issue too, thanks for the solution.


Is there a guide for upgrading an existing app to SmartGWT 2.4 which covers settings like this one?




Oh BTW: the above setting didn't revert to the same situation before 2.4. Leaving everything as-is and setting Canvas.setNeverUseFilters(false) onModuleLoad() did.

[smartgwt.dev]

levi,
Please read the IEFilters docs. This change should have been mentioned in the 2.4 release notes but was omitted by oversight.

Enabling IE filters globally by calling Canvas.setNeverUseFilters(false) will revert the behavior to pre-2.4 however it will also re-introduce the IE related inefficiencies related to the use of filters. IE filters have a significant effect on performance and also disables Cleartype font rendering. Compare the Smart GWT 2.4 Showcase with the previous one in IE and you'll see the difference.

Notice that because of the 2.4 IE related optimizations, the translucency sample has the new code : eyesImg.setUseOpacityFilter(true);

So please read the above IEFilters doc and try to obtain the desired opacity behavior without using Canvas.setNeverUseFilters(false). If you're unable to do so you could post your code and we'll try to help.

[levi]

Ok, thanks for the docs.

My initial try made every canvas look transparent instead of only the 1 canvas I set the setUseOpacityFilter(true) on. I'll see if I can post a standalone case.

[marks7]

I'm having the same problem as Levi: every canvas is having the opacity filter applied to it, not just the one that I setUseOpacityFilter(true) on.

I'm using SmartGWT 2.4 and IE7.

I have read the IEFilters doc and think I'm following it correctly. Here is a standalone test case that demonstrates the problem. I expect only the red canvas to be translucent but both the red and blue canvases have the filter applied to them. This looks like a bug since the docs seem to imply that only the redCanvas should be impacted.

public void onModuleLoad() {
	Canvas.setNeverUseFilters(true);
        Canvas.setAllowExternalFilters(false);
	  
	Canvas redCanvas = new Canvas();
	redCanvas.setSize("100px", "100px");
	redCanvas.setBackgroundColor("red");
	redCanvas.setTop(20);
	redCanvas.setLeft(20);
	redCanvas.setUseOpacityFilter(true);
	redCanvas.setOpacity(30);
		
	Canvas blueCanvas = new Canvas();
	blueCanvas.setSize("100px", "100px");
	blueCanvas.setBackgroundColor("blue");
	blueCanvas.setTop(20);
	blueCanvas.setLeft(140);
	blueCanvas.setUseOpacityFilter(false); // shouldn't be needed but doesn't help
		           
	Canvas canvas = new Canvas();  
	canvas.addChild(redCanvas);  
	canvas.addChild(blueCanvas);
	    
	canvas.draw();  
}

Any help would be appreciated.

[Isomorphic]

Thanks for the test case. This was actually resolved yesterday and the fix is in today's nightly.