How To: Showing two modal windows "on the same level"

[Blama]

Hi Isomorphic,

is it somehow possible to show a 2nd window from a modal window? The main GUI should be blocked and both windows should be accessible.
I tried this here (v11.1p_2018-09-14).

isc.Window.create({
    title: "1st window",
    // isModal: true,
    width: 200,
    height: 200,
    items: [
        isc.IButton.create({
            ID: "createWindowButton",
            title: "Create Window",
            click: function () {
                isc.Window.create({
                    title: "2nd window",
                    // isModal: true,
                    width: 200,
                    height: 200,
                    left: 325,
                    canDragReposition: true,
                    canDragResize: true,
                    items: [
                        isc.IButton.create({
                            title: "Some Button"
                        })
                    ]
                });
            }
        })
    ]
});

As you can see, if you comment in the 1st isModal: true, it does not look like a window. IMHO this is a bug.

I'd expect something like this:

• 1st Window modal:true -> main GUI blocked.
• Open 2nd non-modal Window from 1st window -> both windows usable, main GUI still blocked.

Best regards
Blama

[claudiobosticco]

Hello Blama, did you try the aCanvas.showClickMask method?

[Blama]

Hi claudiobosticco,

not yet. I assume this is how the Window class does this behind the scenes.
But as I also want to be able to move the Window, have the close button etc. I think I really need Window.

Right now I can show those two Window mutually exclusive from the application - but a customer wants to display one of the Windows from the other.

Best regards
Blama

[Isomorphic]

claudiobosticco - yes, that would be the way to do this - if you want to show more than one "popup"/non modal window, you'll need to remember the list of windows, and pass it in your call to showClickMask(), or the previous "popup" will slip behind the clickMask when a new "popup" is opened.

For the initial issue of the modal window not looking like a window, that appears to be a Showcase-only issue, which we'll look into.

[Blama]

Hi Isomorphic,

OK, this means even after the showcase-fix the approach of showing the 1st Window with isModal:true and the 2nd Window with isModal:false won't work?

Best regards
Blama

[Isomorphic]

If you just run your sample outside of the Showcase, it will do what you expect now - the first modal window will shell a non-modal window above it's own clickMask - but if you click your button a second time, the first non-modal window will slip behind the clickMask.

[Blama]

Hi Isomorphic,

OK, I'll wait for the showcase fix and then decide if I can work with this in my application or if I need to go down the path claudiobosticco mentioned.

Best regards
Blama

[Isomorphic]

In fact you can test the behavior now - just mark your outer window autoDraw: false and then call draw() on it after creation - you should see things working as you expect at that time.

Note that we won't now need to make a change to the Showcase - the problem was just that the Showcase has internal structure that differs from a normal environment, and the window in your test-case was being added as a child of the example pane.

[Blama]

Hi Isomorphic,

this is working, but does not display the modal mask:

isc.Window.create({
    ID: "myWindow",
    autoDraw: false,
    title: "1st window",
    modalMaskOpacity: 60,
    isModal: true,
    showModalMask: true,
    width: 200,
    height: 200,
    items: [
        isc.IButton.create({
            ID: "createWindowButton",
            title: "Create Window",
            click: function () {
                isc.Window.create({
                    title: "2nd window",
                    // isModal: true,
                    width: 200,
                    height: 200,
                    left: 325,
                    canDragReposition: true,
                    canDragResize: true,
                    items: [
                        isc.IButton.create({
                            title: "Some Button"
                        })
                    ]
                });
            }
        })
    ]
});
myWindow.draw();
myWindow.centerInPage();

Best regards
Blama

[Isomorphic]

That's also a side-effect of running this code in the Showcase - if you drop that sample code into a package build, it should work as you expect.

[Isomorphic]

Once again, there's a fix for the test-case that will let you run it properly in the Showcase - just make sure all the widgets, both windows and contents, are autoDraw: false.

[Blama]

Hi Isomorphic,

not sure if I need to do something here or will roll a changed showcase.
With this code (includes 2x autoDraw: false) in v11.1p_2018-09-14 I do not see a modalMask.

isc.Window.create({
    ID: "myWindow",
    autoDraw: false,
    title: "1st window",
    modalMaskOpacity: 60,
    isModal: true,
    showModalMask: true,
    width: 200,
    height: 200,
    items: [
        isc.IButton.create({
            ID: "createWindowButton",
            autoDraw: false,
            title: "Create Window",
            click: function () {
                isc.Window.create({
                    title: "2nd window",
                    // isModal: true,
                    width: 200,
                    height: 200,
                    left: 325,
                    canDragReposition: true,
                    canDragResize: true,
                    items: [
                        isc.IButton.create({
                            title: "Some Button"
                        })
                    ]
                });
            }
        })
    ]
});
myWindow.draw();
myWindow.centerInPage();
createWindowButton.draw();

Best regards
Blama

[Isomorphic]

Sorry, we neglected to mention a step we added in testing, to prevent the window from being fully initialized as part of showcase-specific sample initialization - have your sample create a button that runs the sample you just posted.

Or, rename your window to "modalWindow" and drop it into /showcase/?id=windowsModality, replacing the modal window defined there.

In either case, you'll need to set autoCenter rather than calling centerInPage(), and the button doesn't need to be specifically drawn.

[Blama]

Hi Isomorphic,

thanks. Using following code here I can see the clickmask and also the problem you talk about in #6. This is most likely why claudiobosticco mentioned Canvas.showClickMask() in #2.

isc.Window.create({
    ID: "myWindow",
    autoDraw: false,
    title: "1st window",
    modalMaskOpacity: 60,
    isModal: true,
    showModalMask: true,
    width: 200,
    height: 200,
    autoCenter: true,
    items: [
        isc.IButton.create({
            ID: "createWindowButton",
            title: "Create Window",
            click: function () {
                isc.Window.create({
                    title: "2nd window",
                    // isModal: true,
                    width: 200,
                    height: 200,
                    left: 325,
                    canDragReposition: true,
                    canDragResize: true,
                    items: [
                        isc.IButton.create({
                            title: "Some Button"
                        })
                    ]
                });
            }
        })
    ]
});

isc.IButton.create({
    ID: "start",
    title: "Create Window",
    click: function () {
        myWindow.draw();
    }
});

How would I proceed from here if I want to share both Windows the same clickmask?

Best regards
Blama

[Isomorphic]

In theory, you'd just need to keep a list of the non-modals you open and pass them in a call to showClickMask() as unmaskedTargets - however, a quick test shows this process might have an issue in this scenario (the initial modal window is below the mask, even if included in the unmaskedTarget list) - we'll have a look into that.

In the meantime, you can just keep a list of the non-modal windows you shell and each time you shell a new one, just call show() on each of them - so:

    ...
    items: [
        isc.IButton.create({
            ID: "createWindowButton",
            title: "Create Window",
            click: function () {
                // maintain an array of windows that get shelled
                winList.add(
                    isc.Window.create({
                        title: "2nd window",
                        autoDraw: false,
                        ...
                    })
                );
                // re-show the list of windows that should be above the clickMask
                winList.callMethod("show");
            }
        })
    ]