[OPEN] [#495] Feature request - delayed event mask showing for unexpectedly longer running tasks

[anup]

Hi,

As per your notes on this page, you already support an eventMask minDelay:
https://examples2.ext.net/#/Events/D...hods/Overview/

As described: "The minimum amount of time to display the mask (defaults to 0). Setting the minDelay provides and minimum amount of time to display a message to the user before removing mask and executing success, failure and/or callback functions."

In other words, this actually delays when the request will start.

My feature request is slightly different. I often have situations where I want to start my AJAX request immediately and normally expect a quick response. But at times of course the server may take a bit longer to respond. So, in those cases, would prefer to have no event mask message by default, because I expect a quick response, but to perhaps configure what message to show the user if it is taking longer than a configured amount of time. And possibly an array/object hash of messages. For example, something like this:

eventMask: {
    durationMessages: {
        500: 'Hm... taking a bit longer than expected...',
        1000: 'Well, this is a bit unexpected... almost there now...',
        2000: 'Woah, this is embarrassing. The server is taking really long. Sorry about this... still waiting...'
    }
}

In the above, each item in the object is a different amount of milliseconds to wait.

I would assume the other properties, such as msgClass, customTarget etc all apply to these too, without needing their own config. The only conflict possibly is that if you set this then having showMask: true and minDelay may not make sense? (The durationMessages implies showMask will be true after that period of time, and minDelay would just delay it even further which kind of defeats the point!)

I sometimes do this myself with timeouts etc, but it could be useful to encapsulate and centralize with simple configuration like this perhaps?

If you agree this is useful, I don't mind whether it is better for you to configure this as an object or as an array of simple objects. Or even another way altogether...

Would also be nice to see it in 1.x as well to make upgrading a bit more seamless, but I do not think it is absolutely necessary (as my existing timeouts approach would still work, I guess, anyway).

Priority wise, I would not say it is urgent (for me) but just something I've been thinking about for a while and keep forgetting to raise it!

[geoffrey.mcgill]

Hi Anup,

Thanks for the awesome suggestion.

I have added your feature request to the agenda of our Monday developer team meeting.

[geoffrey.mcgill]

Our plan is to implement this new feature in Ext.NET 3.0.

A ticket has been created to track the implementation progress:

https://github.com/extnet/Ext.NET/issues/495

[anup]

That sounds great. Many thanks!

[anup]

Hi,

I was just thinking about this further today. I suppose (at least in my scenarios) I would want this to be the default event mask behaviour for all AJAX requests I am making (or at least all DirectMethods and DirectEvents).

I imagine most of my AJAX requests are (hopefully) so quick that no mask is needed, but as it starts to get slower, to show these default global messages.

Of course, to complicate things, I may want to customize the various messages for different time slots on a case by case basis, so I can override some (not necessarily all) of the messages.

It may be that if the event mask duration is available as a global I can then Ext.apply it or make a clone and remove the ones I don't need, update the text for the times I want to customize, add my own times, etc etc. But being a global it is then available everywhere by default.

Or there may be an easier way to provide such permutations. For example,

• Maybe event masks can have a boolean (true by default) to use this new duration messages thing, and then the user doesn't need to do anything further.
• If they want to turn it off, they can just set that boolean on their direct method call (or somehow globally turn it off?).
• If they want to customize the duration they can perhaps send just the object they want and you can internally Ext.apply it to the global version?

And of course, if we can override the global version that would be good too. For example, my example in my original post might be too laid back and even I may want something different in my real apps - and the example may of course not be right for your defaults either!

Or maybe for backward compatibility you have to have these global defaults turned off by default (which would be a shame in a way as I think it is a great usability enhancement, though understandable if existing apps suddenly find unexpected messages? Or maybe it is okay for Ext.NET 3 if mentioned in the changelog?)

Just thinking aloud... :)

[Daniil]

Hi Anup,

Thank you for sharing the thoughts! I think it is a very worth addition. Hopefully, we will be able to implement it eventually.

[Daniil]

Done in the revision #6203.

Added the following example in the WebForms Examples Explorer: Events => DirectEvents => Duration_Messages.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    protected void DoSomething(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(8000);
    }

    [DirectMethod]
    public void SomeDirectMethod()
    {
        System.Threading.Thread.Sleep(8000);
    }
</script>

<html>
<head runat="server">
    <title>DirectEvent Duration Messages - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form runat="server">
        <h1>DirectEvent Duration Messages</h1>

        <p>More information about this functionality you can find in <a href="http://forums.ext.net/showthread.php?35661" target="_blank">this Ext.NET forum thread</a>.</p>

        <ext:ResourceManager runat="server">
            <DirectEventDurationMessages>
                <ext:DurationMessage Duration="1000" Message="Global duration message for 1000 milliseconds" />
                <ext:DurationMessage Duration="3500" Message="Global duration message for 3500 milliseconds" />
                <ext:DurationMessage Duration="5000" Message="Global duration message for 5000 milliseconds" />
            </DirectEventDurationMessages>
            <Listeners>
                <AjaxRequestComplete Handler="Ext.Msg.alert('Done', 'The operation has been completed.')" />
            </Listeners>
        </ext:ResourceManager>

        <ext:Container runat="server" Layout="VBoxLayout">
            <Defaults>
                <ext:Parameter Name="margin" Value="0 0 7 0" Mode="Value"></ext:Parameter>
            </Defaults>
            <Items>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:Button runat="server" Text="Run" Width="75">
                            <DirectEvents>
                                <Click OnEvent="DoSomething">
                                    <EventMask>
                                        <DurationMessages>
                                            <ext:DurationMessage Duration="1000" Message="Hm... taking a bit longer than expected..." />
                                            <ext:DurationMessage Duration="3500" Message="Well, this is a bit unexpected... almost there now..." />
                                            <ext:DurationMessage Duration="5000" Message="Woah, this is embarrassing. The server is taking really long. Sorry about this... still waiting..." />
                                        </DurationMessages>
                                    </EventMask>
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Label runat="server" Text="&nbsp;- Run a long running DirectEvent with specific duration messages" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:Button runat="server" Text="Run" OnDirectClick="DoSomething" Width="75" />
                        <ext:Label runat="server" Text="&nbsp;- Run a long running DirectEvent with global duration messages" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:Button runat="server" Text="Run" Width="75">
                            <DirectEvents>
                                <Click OnEvent="DoSomething">
                                    <EventMask ShowMask="true" ShowDurationMessages="false" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                        <ext:Label runat="server" Text="&nbsp;- Run a long running DirectEvent without any duration messages, but with a regular mask" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:Button runat="server" Text="Run" Width="75">
                            <Listeners>
                                <Click Handler="App.direct.SomeDirectMethod({
                                                    eventMask: {
                                                        durationMessages: [{
                                                            duration: 1000,
                                                            message: 'DirectMethod duration message for 1000 milleseconds'
                                                        }, {
                                                            duration: 3000,
                                                            message: 'DirectMethod duration message for 3000 milleseconds'
                                                        }]
                                                    }
                                                });" />
                            </Listeners>
                        </ext:Button>
                        <ext:Label runat="server" Text="&nbsp;- Run a long DirectMethod with specific duration messages" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:Button runat="server" Text="Forbid" Width="75">
                            <Listeners>
                                <Click Handler="Ext.net.DirectEvent.forbidDurationMessages = !Ext.net.DirectEvent.forbidDurationMessages;
                                                var text = Ext.net.DirectEvent.forbidDurationMessages ? 'Allow' : 'Forbid';
                                                this.setText(text);
                                                App.Label1.setText('&nbsp;- ' + text + ' duration messages');" />
                            </Listeners>
                        </ext:Button>
                        <ext:Label ID="Label1" runat="server" Text="&nbsp;- Forbid duration messages" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Container>
    </form>
</body>
</html>

A small overview.

Duration messages are shown by default if defined. You can set up duration messages via an EventMask's DurationMessages property or ResourceManager's DirectEventDurationMessages globally or by this JavaScript code:

Ext.net.DirectEvent.delayMessages = [{
    delay: 1000,
    message: 'Hm... taking a bit longer than expected...'
}, {
    delay: 3500,
    message: 'Well, this is a bit unexpected... almost there now...'
}, {
    delay: 7000,
    message: 'Woah, this is embarrassing. The server is taking really long. Sorry about this... still waiting...'
}];

Setting the ResourceManager's DurationMessages property via Session and Application is supported, but it is not supported to set it via Web.config.

If you don't want duration messages to be shown by default, please set the ResourceManager's DirectEventShowDurationMessages to false or run this JavaScript code.

Ext.net.DirectEvent.showDurationMessages = false;

In this case duration messages will be shown only if a specific EventMask config has a ShowDurationMessages="true" option.

To forbid duration messages regardless a specfic EventMask config, please use the ResourceManager's DirectEventForbidDurationMessages or run this JavaScript code.

Ext.net.DirectEvent.forbidDurationMessages = true;

Please note that the ResourceManager's DirectEventShowDurationMessages and DirectEventForbidDurationMessages settings might be set via Session, Application and Web.config.

Thank you for the suggestion!

I am closing the thread. Though, any feedback is appreciated. If you see that something is wrong and/or has to be changed, you are welcome to post a follow-up.

As for Ext.NET v1, I am afraid we won't add it to there:(

[anup]

Hi.

This is great. I am eager to try it out, but I don't see revision 6203 - I only see 6199, last updated December 13.

Has the location of the 2.x code base moved? I am currently pointing SVN to http://svn.ext.net/premium/trunk

In tortoise SVN I went to the relocate option but that URL is the only one I see in the dropdown. Is there another location I should put there manually?

Thanks!

P.S. Yeah, perfectly fine not to have this in 1.x :)

[geoffrey.mcgill]

Hi Anup,

The new feature has only been added to the Ext.NET 3 code base, which is currently available from http://svn.ext.net/premium/branches/3/.

The Ext.NET 3 branch will be moved to the /trunk/ very soon, although our plan is to add all new Ext.NET features to Ext.NET 3 only.

[anup]

Ah, that explains it then :) I looked further up the message thread and I do see it said it would be in 3.x only, which is fair enough :)

Thanks!