Search This Blog

Wednesday, March 8, 2017

Preview of toast notifications using a platform-agnostic method in XAF v16.2.5 - YOUR FEEDBACK IS NEEDED!!!

I am still forcing myself to go to sleep after watching an unreal football drama in Barcelona, so I am writing this short blog post at night.
Besides Visual Studio 2017 official support, XAF v16.2.5 delivers a small gem, which I cannot hide from you too long. Remember that this is an early preview of the functionality we hope to officially release by v17.1 and which is have polished in the coming 2-3 months. So, your feedback is welcome, as always!

Typical usage

Let's modify the platform-agnostic Controller from our demo (C:\Users\Public\Documents\DevExpress Demos 16.2\Components\eXpressApp Framework\SimpleProjectManager\CS\SimpleProjectManager.Module\Controllers\ProjectTaskController.cs) by adding the Application.ShowViewStrategy.ShowMessage call at the end of the Execute event handler:
...
            markCompletedAction.Execute += (s, e) => {
                IObjectSpace viewDataContext = View.ObjectSpace;
                foreach(ProjectTask task in e.SelectedObjects) {
                    task.EndDate = DateTime.Now;
                    task.Status = ProjectTaskStatus.Completed;
                    viewDataContext.SetModified(task); // Mark the changed object as 'dirty' (only required if data properties do not provide change notifications).
                }
                viewDataContext.CommitChanges();
                //viewDataContext.Refresh(); // Optionally update the UI in accordance with the latest data changes.
                Application.ShowViewStrategy.ShowMessage(string.Format("{0} task(s) have been completed!", e.SelectedObjects.Count), InformationType.Success, 4000, InformationPosition.Top);
            };
...
Now, let's start the Windows and Web apps, select a few uncompleted tasks in the ProjectTask ListView and execute the Done! command from the menu.

Result in the UI for various platforms

Web
A nice notification window is managed using the dxToast widget (invoked via the  DevExpress.ui.notify method) from our DevExtreme HTML5/JavaScript library:





Windows < 8
A Microsoft Outlook-styled notification window managed with the AlertControl component from our XtraBars library:


Windows 8, 8.1, 10
A Windows 10-styled notification window managed by the Toast Notification Manager component from our XtraBars library:







Customization and configuration
You can control the notification appearance and position using the InformationType and InformationPosition enumerations, which are quite self explanatory:

    public enum InformationType {
        Info = 0,
        Warning = 1,
        Error = 2,
        Success = 3
    }
    public enum InformationPosition {
        Top = 0,
        Right = 1,
        Bottom = 2,
        Left = 3
    }

For instance, check out what Information, Warning and Error types look like on the Web:



The duration of the message can be set in milliseconds.

In WinForms, you can handle the CustomGetImage event of the DevExpress.ExpressApp.Win > WinShowViewStrategyBase class to provide a custom image for a notification.The same class provides two virtual methods you can override in a custom strategy, if required: 

protected virtual AlertControl ShowMessageWithAlertControl(string message, int displayInterval, InformationType type) { ... }

protected virtual ToastNotification ShowMessageWithToastNotificationManager(string message, int displayInterval, InformationType type) {...}


On the Web, you can additionally customize the style of messages using the DevExpress.Web > ASPxWebClientUIControl > GlobalColorScheme property (see the Public Fields section here to learn more about which values to pass there). If this is insufficient for your needs, then we recommend you implement a platform-dependent solution manually:

WebWindow.CurrentRequestWindow.RegisterStartupScript("infoMessage", string.Format("DevExpress.ui.notify({{message: '{0}',type: '{1}', displayTime: {2}, position: {{my:'{3}', at: '{3}'}} }});", message, type.ToString().ToLower(), displayInterval, position.ToString().ToLower()));


The string is formed is according to the DevExtreme documentation for the Toast object.

Limitations
1. In WinForms, the InformationPosition parameter is not taken into account.
2. In WinForms, it is not possible to specify the exact display internally for the toast notification. If the duration parameter is set to int.MaxValue, then 'long' mode is used, otherwise 'default'.
3. In ASP.NET WebForms, the ShowMessage method can be used on XafCallbackManager callbacks initiated by the RaiseXafCallback script. It cannot be used on callbacks of controls (e.g., grid sorting).

Your feedback is welcome!
I hope this information will help you get started with this feature. My team and I are looking forward to hearing from you on how you would leverage this in your XAF project. We will also be ready to answer any questions in the Support Center, as always.

36 comments:

  1. In Windows 10 the Info-Center should be used for notifications.

    ReplyDelete
    Replies
    1. Thanks for your feedback, Robert. In our opinion, the Info Center is better to be used for messages, which do not need immediate reaction. Our feature is more for simple notifications, like in MS Outlook.

      Would you please clarify how your end-users are going to use these messages? If possible, please describe a few concrete use-case scenarios and exact messages you will show them. This essential information will help us understand the value of your suggestion better.

      Delete
  2. verry useful. Thx for adding this. It's a must have for background or long running tasks. I hope it willl work in old XAF Web also?

    ReplyDelete
    Replies
    1. Thanks for your feedback!
      Sure, it is also supported in Classic Web UI.

      Delete
    2. If I understand your scenario with long running tasks correctly, you wish to inform your end-users with a message at the end of the process, correct? If not, please post screenshots and example code showing your actual usage scenarios. Thanks in advance.

      Delete
  3. Cool one! Made almost the same thing when i wrote my blogpost about the WindowsIntegration Feature: http://blog.delegate.at/2013/12/23/devexpress-13-2-review-part3.html

    But it's cool to see something in the Framework itself. :)

    @Dennis: Why is the solution so XafApplication centric? Instead of baking everything into XafApplication, wouldn't it be better to take a more 'decentralized' approach like the MVVM Team with their Services and Behaviour classes?
    Like: Application.GetService().Notify("Message", duration: 10000, type: InformationType.Info);

    This would make UnitTesting so much easier.
    Currently we are moving away from almost all XAF standard ways (Controllers for example) cause lack of Testability. :/
    Would love to see a release focused on Testability (beside EasyTest).
    It's hard to iterate quickly, if you have to spawn the hole Application all the time.

    ReplyDelete
    Replies
    1. Thanks for looking into this, Manuel.
      This is mainly due to historical reasons. BTW, the current design also does not prevent you from fast unit testing as it is possible to use mocks, at least we successfully use them internally, e.g. TestApplication, TestShowViewStrategy, etc. (we even have mock classes for application model elements!). In cases where your Controllers do not access the XafApplication object directly, it is even sufficient to create a Frame, Controller and set a View for it. As for testing the ShowMessage method, I believe you can create a mock class and at least test the fact of calling this method using counters or similar methods.
       
      So, we will be more than happy to learn more (in the Support Center) about your specific issues with testing Controllers and be more than happy to share our experience with them.

      Delete
  4. I discovered a pattern that works very well with Xaf:
    Write a ListViewController for Class X
    handle the activated, deactivated and ViewControls-Created Events.
    Get the GridListEditor, try find the GridView and GridControl.

    Write a class called GridDragBehaviour, implement IDisposable.

    GridDragBehaviour takes the GridView in the ctor, attaches to the Grid events to make Drag possible, when disposed it cleans the handlers.

    in the controller you simple create the behaviour when the control is created, dispose the behavior when the controller is deactivated.
    Reuse of complex UI-Stuff without having to deal with complex controller inheritance.

    Need to write a blog about this, so the pattern gets clearer.

    ReplyDelete
    Replies
    1. Hi Manuel,

      Your pattern looks very exciting! I'm one of your followers on this pursuit. I hope I could be more refined on design patterns so I could somehow contribute--if there's any!

      Thanks and I'm looking forward to your blog!

      -Genesis

      Delete
    2. Thanks for promoting your idea, which indeed looks very interesting. We thought about this problem even in 2006 (https://community.devexpress.com/blogs/eaf/archive/2006/03/28/applying-styles-to-a-view.aspx) and it partially found its realization in ModelSynchronizers(https://documentation.devexpress.com/#eXpressAppFramework/DevExpressExpressAppModelModelSynchronizerMembersTopicAll), because it is often needed to preserve certain customizations. We have not propelled this much, though, probably because this is a bit advanced topic for the majority of XAF users. On the other hand, people who care about better maintenance, testability and similar things have full freedom due to the great XAF flexibility.
      Anyway, I believe other community members would be interested in seeing your blogs continued in this regard.

      Delete
  5. Hi Dennis,
    The big question is... can we put clickable links? When I implemented my XafWin toast notification, I added the BO type and Oid to the notification, this way the user can click and it will open the detail view. Does the out-of-the-box implementation do that?
    Thanks!
    Alex

    ReplyDelete
    Replies
    1. Thanks for describing your use-case scenario. Our team will take it into account.

      Delete
  6. How can you watch generic futbol while the Gagarin Cup is playing?!

    ReplyDelete
  7. Hello,
    a caption text and a click-handler is missing:
    "1 task has been completed.
    Click here to see details..."

    ReplyDelete
    Replies
    1. Thanks for describing your business requirements. We will take them into account for the future.

      Delete
  8. Very good news. This will be extremely useful for us. I will give some more thought to use cases and provide more feedback.
    Here's a start, primarily for web:
    -I can definitely see the value in having clickable links to relevant business objects/views.
    -ability to make it sticky? Visible until user clicks 'X'
    -ability to dock to top/bottom of viewport

    ReplyDelete
    Replies
    1. Thanks for testing, Eric (I already saw your SC ticket)! Currently, there are no such options, but we've informed corresponding teams of your requirements. Anyway, I must note that for Windows 8+ system functions are reused by Toast Notification Manager and there will likely be no capability for such docking. It seems that this WinForms feature can meet your needs: https://documentation.devexpress.com/#WindowsForms/CustomDocument114578

      Delete
  9. I'd love to see an option for the Flyout Panel, too! #WinForms

    ReplyDelete
    Replies
    1. Thanks for your suggestion! Would you like to display these messages for the whole screen or for a specific control container only?
      Will it be just a simple notification or end-users are supposed to interact with them (e.g., click links or buttons)? If possible, please attach screenshots showing desired result in the application UI for each real business use-case. Thanks in advance.


      In addition, would you please clarify how your end-users are going to use these messages? If possible, please describe a few concrete use-case scenarios and exact messages you will show them. This essential information will help us understand the value of your suggestion better.

      Delete
    2. On where to display? (WinForms primarily)
      A: For a specific container... with a specified interval to hide it.

      On Interaction Level...
      A: I prefer user interaction (click links or buttons). Either to hide or display a related view after-click.

      On Screenshot...
      A: Will try to create one

      On where to use:
      A: One is on custom validations. Second, on status change of a particular document (e.g. Rental Contract). Thirdly, on Email sending status (e.g. On success or fail). Lastly, when integrating with workflows--need to have a link to affected objects.

      Delete
  10. Guys, thanks for sharing your first thoughts on this. My team and I read all the comments and will definitely comment on each point as soon as we can. Please stay tuned.

    ReplyDelete
  11. It's nice functionality. And another nice functionality is badge. If Devexpress can provide this one to XAF framework, it's great

    ReplyDelete
    Replies
    1. Would you please submit a ticket using the https://www.devexpress.com/ask service and attach screenshots of the desired result in the UI along with a few use-case scenarios/example code (with exact messages, icons, etc.) showing how this is going to be used by you?

      Delete
    2. Thanks for creating the ticket!
      https://www.devexpress.com/Support/Center/Question/Details/T496091

      Delete
    3. Thanks for your support. I think the progressive spirit of Devexpress's Team will make your products having good quality. Another suggestion for your XAF framework is that your framework has some redundancies. These redundancies may exists in code, in requests to database... I know, to be more generic, to be more functionality, your framework will have these redundancies. But if XAF framework has been fine tuned, it's better. You know, like Facebook team, they optimize a little bit day by day their infrastructure. One request reduced, the more valuable their infrastructure is.
      https://code.facebook.com/posts/557147474482256/this-browser-tweak-saved-60-of-requests-to-facebook/

      Delete
  12. Hi Dennis
    it would be nice if the message can be center on the screen, because when something pups up on the side or the bottom I feel like that notification does not belong to the screen I’m positioned.

    Also in window, it would be nice to be able to change the color of the notification, for example in the error notification have the possibility to change the background color to red so it looks scary, that will clash with the icon but that is also my third suggestion.

    It would be nice being able to pick your own icon in an agnostic form just writing the icon name from the image folder

    ReplyDelete
    Replies
    1. Thanks for your feedback, Jose. We already provide an option for configuring a message position for a developer to choose from based on various business requirements.
       
      Thanks for your suggestions regarding the colors and icons. We will see whether underlying controls can be configured this way and thus, whether we can pull such parameters into the common interface.

      Delete
  13. Toast notifications are a great addition. Good work guys. +1 for clickable link in notification.

    I think you would probably want to expand ShowMessage to be able to use notification styles other than Toast in the future, so I'm not sure the namespace hierarchy is appropriate unless you can pass the UI type of Toast into the constructor.

    Application.ShowViewStrategy.ShowMessage

    ReplyDelete
    Replies
    1. Thanks for your feedback. Yes, we are preparing the extended version of this method and, hopefully, will demonstrate it soon.

      Delete
  14. I would like to see a little more flexibility in the positioning, such as bottom right and top right. Also height, width, fade in/out, and image settings. Another good feature is to hide onClick in addition to the timeout. That way a user can click hide something at their own pace.

    It is interesting to consider XAF abstracting developers away from the typical css design work to customize the look of elements like notification windows. I could see the possiblility of expanding the concept of templating beyond Windows to specialized functionality like Notifications wherein agnostic elements could be designed in a designer.

    ReplyDelete
    Replies
    1. Thanks for your feedback! By default we provide the most common options that should cover the majority of simple and popular cases + the capability to customize underlying controls/APIs to cover the rest cases. The upcoming v17.1 release should bring yet more flexibility, so we look forward to hearing from you once you can test the new release.

      Delete