Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

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

    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).

    Code:
    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

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

    Comment


      #3
      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

      Comment


        #4
        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.
        Last edited by Isomorphic; 17 Sep 2018, 00:07.

        Comment


          #5
          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

          Comment


            #6
            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.

            Comment


              #7
              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

              Comment


                #8
                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.
                Last edited by Isomorphic; 17 Sep 2018, 00:55.

                Comment


                  #9
                  Hi Isomorphic,

                  this is working, but does not display the modal mask:
                  Code:
                  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

                  Comment


                    #10
                    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.

                    Comment


                      #11
                      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.

                      Comment


                        #12
                        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.

                        Code:
                        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

                        Comment


                          #13
                          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.
                          Last edited by Isomorphic; 18 Sep 2018, 03:33.

                          Comment


                            #14
                            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.
                            Code:
                            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

                            Comment


                              #15
                              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:

                              Code:
                                  ...
                                  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");
                                          }
                                      })
                                  ]
                              Last edited by Isomorphic; 18 Sep 2018, 06:15.

                              Comment

                              Working...
                              X