Smartclient: How to show a canvas on a modal mask?

Question

I have a ListGrid displayed on a Dashboard Layout. In few case I need to show Notes messages that we usually do using SC.say().

But I have designed my own Canvas to display all such messages and I have placed this on the Parent dashboard.

Now when need comes to display message when some action take place on Listgrid component. The window is set to modal so my Notes Canvas displays but is masked with the Dashboard Layout.

I want to display the Canvas without masking ?

How can I achieve this to show the Canvas without Mask and also the ListGrid showing ?

![enter image description here][1] This is what actually happening as the window is set to isModal(true) and setModalMask(true) and I know its an optional but is required in our project but now i need to just bring the YELLOW canvas message display as normal highlighted and not with the mask as it is showing just now

public class GetMessageDialogBox extends Canvas 
{
    private GetMessageDialogBox(String messageText)
{
    mainLayout = new GetHorizontalLayout("100%", "40", null, 0, 5, null);

    btnClose = new GetImgButton(16, 16, "Red_Square_Close.png");
    btnClose.setVisible(true);
    btnClose.setShowTitle(true);

    btnClose.addClickHandler(new ClickHandler() 
    {           
        @Override
        public void onClick(ClickEvent event) 
        {
            setAnimateTime(1000);
            animateMove(10 , Window.getClientHeight());
            isVisibleMessageStatus = false;
            setVisible(false);
        }
    }); 

    displayLabel = new GetLabel(messageText,"messageLabelDialogText");
    displayLabel.setBackgroundColor("yellow");
    displayLabel.setHeight100();
    displayLabel.setWidth100();
    displayLabel.setValign(VerticalAlignment.CENTER);
    mainLayout.addMember(new Canvas(){{
        setWidth("50%");
    }});
    mainLayout.addMember(displayLabel);
    mainLayout.addMember(new Canvas(){{  
        setWidth("20%");
    }});
    mainLayout.addMember(btnClose);

    setParentElement(StaticInfo.mainDashboardLayout);
    setVisible(true);
    setHeight(40);
    setBackgroundColor("yellow");
    setBorder("1px solid black");
    setLeft(10);  
    setTop(Window.getClientHeight()-40);
    setShowShadow(true);
    setShadowOffset(5);
    setShadowSoftness(5);
    setAnimateTime(100);
    timer.schedule(5000);
    addChild(mainLayout);
    customMask.show();
    bringToFront();
    show(); 
}
}

Now this Message component is called in a presenter file.

customMask.show();
winLoadList.bringToFront();
winLoadList.show();

The above code is used for List Grid as I need to show is unmask but now when I call the Message component as I also need the Message Component to be shown unmasked with the following code it but all three browsers gives different o/p.

customMask.show();
GetMessageDialogBox.getInstance(messages.LoadPresenter_NoRecordSelected()).bringToFront();
GetMessageDialogBox.getInstance(messages.LoadPresenter_NoRecordSelected()).show();

Answer 1

You have many ways of achieving that.

I think the most easy one is trying to call bringToFront() on your yellow canvas.

This small piece of code work, however, when you move the window, the Yellow canvas goes behind :

Window window = new Window();
window.setIsModal(true);
window.setWidth(800);
window.setHeight(500);
window.setAutoCenter(true);
window.setShowModalMask(true);

window.show();

final HLayout message = new HLayout();
message.setWidth(400);
message.setHeight(30);
message.addMember(new Label("hey you"));

message.setBackgroundColor("yellow");

message.bringToFront();
message.show();

Despite of using setModal(true), you do your own modal mask and so, you can handle everything (maybe there is some better solution).

Code :

public class BusyMask extends VLayout
{
    public BusyMask()
    {
    RootPanel.get().add(this);
    hide();
    setOpacity(50);
    setBackgroundColor("#000000");
    setPositionAndSizes();
    this.getParentElement().addResizedHandler(
        new ResizedHandler()
            {

                @Override
                public void onResized(ResizedEvent event)
                {
                    setPositionAndSizes();

                }
            });
    }

@Override
public void show()
{
    this.bringToFront();
    super.show();
}

@Override
public void hide()
{
    super.hide();
}

protected void setPositionAndSizes()
{
    setWidth100();
    setHeight100();

    setLeft(0);
    setTop(0);
}
}

You use that in your ListGrid show method, when displaying it :

busyMask.show();
bringToFront();
super.show();