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();

I don't understand your problem. The modality is optional. Can you post some sample code, or even better, a screenshot ? — Jean-Michel Garcia, Jun 04 '12 at 14:15
@Jean-Michel Garcia : I have edited my question with the Screen shot added. I want only the YELLOW CANVAS show normally i.e. without mask when the ListGrid is displayed remaining thinks needs to be kept masked — sbhatt, Jun 05 '12 at 06:48
we cannot here at StackOverflow do the job at your place. You need to post some *relevant* code, not all of it. Your post like this, will be for sure ignored by the community. I've posted some clues on how you could accomplish that. — Jean-Michel Garcia, Jul 23 '12 at 07:31
@Jean-Michel Garcia : I added my code as in the previous code you were not able to analyse so to give you a clear idea about it and I also did'nt expected to do the whole job at my place anyways thanks for the help till now and Its a long question for you but for others it may be useful — sbhatt, Jul 24 '12 at 18:34

Jean-Michel Garcia · Accepted Answer · 2012-06-05T09:26:37.290

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();

edited Jun 05 '12 at 09:26

answered Jun 05 '12 at 08:24

Jean-Michel Garcia

2,359
2
23
44

Thanks for the response. I tried using bringToFront() on Canvas .But it did'nt work. can you suggest any other way ? – sbhatt Jun 05 '12 at 08:36
one last thing, how your Canvas is draw ? Is it being added as though addMember of some layout, or is it just being draw ? I'm editing my answer – Jean-Michel Garcia Jun 05 '12 at 08:39
Its being added as a addMember on HLayout – sbhatt Jun 05 '12 at 08:42
I will try this but as I have many such screens. So, is there any way where we can bind the code in the canvas component created. I am attaching the code of the component in my question. If you can suggest some easier way – sbhatt Jun 05 '12 at 09:08
I really appreciate your help but I am still not able to achieve it I have added the code of the Constructor of my component that extends Canvas – sbhatt Jun 05 '12 at 09:47
Still waiting for a solution on this issue can any one please help on this – sbhatt Jul 19 '12 at 21:05
1

@Shraddha bhatt I provided you everything to achieve this. Please update your question with your actual code – Jean-Michel Garcia Jul 20 '12 at 07:15

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

1 Answers1