AdaptiveMenu items

[claudiobosticco]

Hello, I've recently started using the AdaptiveMenu (which is a cool component BTW), and I just realized the menuItem.click handler is actually different in its arguments when an item is actually a menuItem vs when it's rendered as a ToolStripButton.

Is it actually intended to work this way?
So that, if I need a reference to the menu object, I must write code like this:

click: function(target, item, menu) {
    let theMenu = menu ? menu.creator : this.getParentCanvas();
    isc.logEcho(theMenu);
}

[claudiobosticco]

and obviously the same question applies to other handlers (dynamicIcon/Title, enableIf).

Instead, I don't expect differences for visible/enableWhen, right?

[claudiobosticco]

and obviously the same question applies to other handlers (dynamicIcon/Title, enableIf).

actually those won't be called when the item is a ToolStripButton.

But if I add a getTitle to the AdaptiveMenu item it won't be called neither. Here is a test case:

// variable-length name label and button control
isc.Label.create({
    ID: "nameLabel",
    width: 1,
    wrap: false,
    refreshTitle : function (longName) {
        var name = longName ? "Alejandro O'Reilly" : "Lucy Lu";
        this.setContents("<b>Candidate: " + name + "</b>");
    }
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    defaultLayoutAlign: "center",
    height:30,
    items: [
        {title: "Contact", click: "isc.say(this.title)",
                dynamicTitle: function (target, menu, item) {
                    return "dynamic title";
                },
                getTitle: function (target, menu, item) {
                    return "get title";
                }
        },
        {title: "Hire Now", click: "isc.say(this.title)"},
        {title: "View Résumé", click: "isc.say(this.title)"},
        {
            title: "Edit",
            showRollOver: false,
            embeddedComponent: isc.HStack.create({
                snapTo: "TR",
                height: "100%",
                width: 190,
                membersMargin: 3,
                layoutMarginBottom: 5,
                defaultLayoutAlign: "center",
                members: [
                    isc.IButton.create({title: "Cut", autoFit:true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Copy", autoFit:true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Paste", autoFit:true, click: "isc.say(this.title)"})
                ]
            }),
            embeddedComponentFields: ["key"]
        }
    ],
    menuProperties: {
        width: 350
    }
});

isc.Button.create({
    top: 50,
    refreshTitle : function (longName) {
        nameLabel.refreshTitle(longName);
        this.setTitle(longName ? "Shorter Name" : "Longer Name");
    },
    click : function () {
        this.longTitle = !this.longTitle;
        this.refreshTitle(this.longTitle);
    },
    initWidget : function () {
        this.Super("initWidget", arguments);
        this.refreshTitle();
    }
});

// parent Layouts
isc.ToolStrip.create({
    width: 375,
    membersMargin: 5,
    layoutLeftMargin: 10,
    ID: "toolStrip",
    showResizeBar: true,height:40,
    members: [nameLabel, "separator", adaptiveMenu]
});

isc.HLayout.create({
    height:40,
    width: "100%",
    hPolicy: "none",
    members: [toolStrip]
});

[claudiobosticco]

Instead, I don't expect differences for visible/enableWhen, right?

unfortunately, those works only when the items are actually rendered as menuItems, not when they are ToolStripButtons

[claudiobosticco]

Hello, just chiming in to ask if you see those problems, in particular the dynamicTitle/Icon issue, and the visible/enableWhen if rendered as ToolStripButtons, as they're pretty important for me.

[Isomorphic]

Hi Claudio, you're right, the AdaptiveMenu component doesn't fully handle the situation that an adaptiveMenu.item may be rendered as either a Button or as a true MenuItem.

We're looking into this, but the approach we're probably going to take is to create an AdaptiveMenItem sub-type of MenuItem, in which we point out that some APIs from MenuItem do not apply, but provide other means -most likely by making enableWhen / visibleWhen work, and then providing alternate means to access the AdaptiveMenu from an item.

In the meantime, as a temporary hack, it should work to use the AutoChild system and directly call things like show/hide etc on the items when they are buttons.

[claudiobosticco]

Hi Isomorphic , let me start by saying that even though I had seen the AdaptiveMenu in examples a long time ago, I had never tried it seriously until now.
I regret not doing so earlier because I find it to be a truly useful component.
Also, especially with Shiva, I like having a ToolStrip with one or two IButtons always visible and prominent, while the less prominent adapt to the available space.

It seems logical to have a subclass of MenuItem since now one might assume that everything in MenuItem should work.

Regarding the current implementation:

• The code in post #1 seems to work for me, so for the click handler, I can manage with it for now.
• enableIf is not important as long as enableWhen works.
• dynamicTitle/Icon are not essential for me if visibleWhen works.
• enableWhen and visibleWhen are essential.

On the last point, without an ETA from you, I started implementing a workaround and would like your opinion on it:

        inlineMenuItemProperties: {
            initWidget: function () {
                let menuItem = this.creator.items.find("title", this.title);
                let whenRulesCanvasHelper = isc.Canvas.create({
                    parentCanvas: this.creator,
                    left: -200,
                    top: -200,
                    enableWhen: menuItem.enableWhen ? isc.clone(menuItem.enableWhen) : null,
                    visibleWhen: menuItem.visibleWhen ? isc.clone(menuItem.visibleWhen) : null
                });
                this.Super("initWidget", arguments);
                this.observe(whenRulesCanvasHelper, "visibilityChanged", "if (observed.isVisible()) {observer.show();} else {observer.hide();}");
                this.observe(whenRulesCanvasHelper, "setDisabled", "observer.setDisabled(observed.isDisabled());");
            }
        }

Actually it seems to work.

But unfortunately, it seems that the enableWhen on the menuItems isn't always working. This happens also without my hack in place; it just made it more obvious while testing. Sometimes, randomly, when I have some menuItems enabled and some disabled, if I reduce the space so that some disabled buttons become menus, sometimes the menuItems that should be disabled will become enabled. This doesn't seem to happen if they're already menuItems at draw.

[claudiobosticco]

But unfortunately, it seems that the enableWhen on the menuItems isn't always working.

I've reproduced it in the latest 13.1 showcase with this test case:

// variable-length name label and button control
isc.Label.create({
    ID: "nameLabel",
    width: 1,
    wrap: false,
    refreshTitle: function (longName) {
        var name = longName ? "Alejandro O'Reilly" : "Lucy Lu";
        this.setContents("<b>Candidate: " + name + "</b>");
    }
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    defaultLayoutAlign: "center",
    height: 30,
    items: [
        {title: "Contact", click: "isc.say(this.title)"},
        {
            title: "Hire Now", click: "isc.say(this.title)",
            enableWhen: {
                _constructor: "AdvancedCriteria", operator: "and", criteria: [
                    {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
                ]
            }
        },
        {title: "View Résumé", click: "isc.say(this.title)"},
        {
            title: "Edit",
            showRollOver: false,
            embeddedComponent: isc.HStack.create({
                snapTo: "TR",
                height: "100%",
                width: 190,
                membersMargin: 3,
                layoutMarginBottom: 5,
                defaultLayoutAlign: "center",
                members: [
                    isc.IButton.create({title: "Cut", autoFit: true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Copy", autoFit: true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Paste", autoFit: true, click: "isc.say(this.title)"})
                ]
            }),
            embeddedComponentFields: ["key"]
        }
    ],
    menuProperties: {
        width: 350
    }
});


// parent Layouts
isc.ToolStrip.create({
    width: 375,
    membersMargin: 5,
    layoutLeftMargin: 10,
    ID: "toolStrip",
    showResizeBar: true, height: 40,
    members: [nameLabel, "separator", adaptiveMenu]
});

isc.HLayout.create({
    height: 40,
    width: "100%",
    hPolicy: "none",
    members: [toolStrip]
});

isc.DynamicForm.create({
    ID: "exampleForm",
    top: 50,
    width: 300,
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        }
    ]
});

as I said it doesn't happen every time, it took me quite an amount of "try it" and switching back to the js tab, say 20 tries.

I didn't see warnings in the dev console (let me know what log category could eventually help debugging) and it doesn't seem to depend on precisely where I release the resize bar, anyway this was happening with spacious density:

[claudiobosticco]

On the last point, without an ETA from you, I started implementing a workaround and would like your opinion on it:

[cut]

Actually it seems to work.

Actually I just noticed that, with my hack, sometimes at the first draw the ToolStripButtons are clipped and the menu is not present, it starts working only after a resize :confused:

[claudiobosticco]

Actually I just noticed that, with my hack, sometimes at the first draw the ToolStripButtons are clipped and the menu is not present, it starts working only after a resize :confused:

and this seems reproducible every time with this test case:

// variable-length name label and button control
isc.Label.create({
    ID: "nameLabel",
    width: 1,
    wrap: false,
    refreshTitle: function (longName) {
        var name = longName ? "Alejandro O'Reilly" : "Lucy Lu";
        this.setContents("<b>Candidate: " + name + "</b>");
    }
});

isc.AdaptiveMenu.create({
    ID: "adaptiveMenu",
    inlineMenuItemProperties: {
        initWidget: function () {
            let menuItem = this.creator.items.find("title", this.title);
            let whenRulesCanvasHelper = isc.Canvas.create({
                parentCanvas: this.creator,
                left: -200,
                top: -200,
                enableWhen: menuItem.enableWhen ? isc.clone(menuItem.enableWhen) : null,
                visibleWhen: menuItem.visibleWhen ? isc.clone(menuItem.visibleWhen) : null
            });
            this.Super("initWidget", arguments);
            this.observe(whenRulesCanvasHelper, "visibilityChanged", "if (observed.isVisible()) {observer.show();} else {observer.hide();}");
            this.observe(whenRulesCanvasHelper, "setDisabled", "observer.setDisabled(observed.isDisabled());");
        }
    },
    defaultLayoutAlign: "center",
    height: 30,
    items: [
        {title: "Contact", click: "isc.say(this.title)"},
        {
            title: "Hire Now", click: "isc.say(this.title)",
            enableWhen: {
                _constructor: "AdvancedCriteria", operator: "and", criteria: [
                    {fieldName: "exampleForm.values.username", operator: "notEqual", value: "bob"}
                ]
            }
        },
        {title: "View Résumé", click: "isc.say(this.title)"},
        {
            title: "Edit",
            showRollOver: false,
            embeddedComponent: isc.HStack.create({
                snapTo: "TR",
                height: "100%",
                width: 190,
                membersMargin: 3,
                layoutMarginBottom: 5,
                defaultLayoutAlign: "center",
                members: [
                    isc.IButton.create({title: "Cut", autoFit: true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Copy", autoFit: true, click: "isc.say(this.title)"}),
                    isc.IButton.create({title: "Paste", autoFit: true, click: "isc.say(this.title)"})
                ]
            }),
            embeddedComponentFields: ["key"]
        }
    ],
    menuProperties: {
        width: 350
    }
});


// parent Layouts
isc.ToolStrip.create({
    width: 250,
    membersMargin: 5,
    layoutLeftMargin: 10,
    ID: "toolStrip",
    showResizeBar: true, height: 40,
    members: [nameLabel, "separator", adaptiveMenu]
});

isc.HLayout.create({
    height: 40,
    width: "100%",
    hPolicy: "none",
    members: [toolStrip]
});

isc.DynamicForm.create({
    ID: "exampleForm",
    top: 50,
    width: 300,
    fields: [
        {
            name: "username",
            title: "Username",
            type: "text",
            width: "*",
            required: true,
            defaultValue: "bob"
        }
    ]
});

the result is:

[claudiobosticco]

Hello, may I ask if you have a feedback on these issues? Maybe a suggestion regarding my tentative hack? Or may I expect to have visible/enableWhen feature working in a reasonable timeframe?

[Isomorphic]

Sorry for the delay on this one, and sorry that the hack we advised did not turn out to work. There are some tricky details here that we are working through, but we do intend to have it fixed up this week.

[claudiobosticco]

Hello, any news about this issue?

[Isomorphic]

Apologies for the silence - we're on it this week and will update here when everything's addressed.

[claudiobosticco]

Hello, any news on this issue?

BTW, I just discovered that our support was elapsed :( ...isn't it possible to add a flag in the forum's user profile ?