Google+

Shineyrock

web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Adding Application Notifications With Kendo UI Core
  • dislike -1 28

    Adding Application Notifications With Kendo UI Core

    1. May 2014
    2. Daily
    3. gelezen 852

    Ensuring that end-users have as much information as possible, is the goal of most developers. Over the years, we've constantly evolved the way we help users understand events that occur, these include:

    • Presenting a completely new page with bright red lettered messages
    • Popping up JavaScript-based alert dialogs
    • Adding inline error messages to form fields

    And so many other messaging experiences.

    Even at the operating system level, browsers like Chrome and Firefox now include notification services that can be tapped into and applications like Growl allow native applications to alert users via its SDK.

    The recent announcement of Kendo UI Core being open-sourced has opened up a wealth of new controls to the developer community that they can leverage to build some very cool experiences. One of the newest controls released with Kendo UI Core is the Notifications widget which offers a very flexible API and customizable UI options for providing notifications within your app.

    In this tutorial, I'll explore how to use this new widget to spruce up the information we can offer users.

    Getting Started

    To get started, you're going to need to download a copy of Kendo UI Core. There's a couple of ways to do this:

    The easiest and most optimal way to get started is to pull it in via the CDN so you can take advantage of primed caches: 

    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>    
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>

    This will give you access to all of Kendo UI Core and the default set of UI templates that it comes with. The reason that the jQuery JavaScript Library is included is because Kendo uses it for common DOM tasks, essentially avoiding reinventing the wheel for things that jQuery clearly excels at.

    Notifications, Notifications, Notifications

    The API for the Notification widget is incredibly easy to use and provides for very quickly wiring up the notification widget inside your application. As an example, I can add the following element as a container for my notification:

    <span id="popupNotification"></span>

    Then, using the very common selector and chaining syntax of jQuery, we get a reference to the element via its ID and associate it to an instance of the Kendo notification widget:

    var popupNotification = $("#popupNotification")
                          .kendoNotification()
                          .data("kendoNotification");

    Via the instance, it's a simple method call to display a simple notification in the bottom-left corner of the browser viewport:

    popupNotification.show("Hey there!", "info");

    You can see this in action via the following JSBin.

    The second parameter is one of four premade notification templates that can be immediately leveraged to display information. The four are:

    • "info"
    • "success"
    • "warning"
    • "error"

    ... with each offering a unique look to the notification. You're definitely not limited to these and we'll go over how to create customized notifications using user-defined templates shortly.

    Apart from appearance, there are a number of configuration options available that help with positioning, hiding and stacking the notifications. This is handled by passing a configuration object that outlines the configuration properties of your notification object. For example, I can update the code in my previous example to switch the position of the notification bubble to be 30px from the top of the viewport, 50px tall and that will disappear after three seconds. I'll also want to add the option to offer an "X", to allow the user to close the notification manually and make it so the notifications stack to the left instead of on top of each other. Here's what the code looks like:

    kendoNotification( { 
        position: {
            top: 30                                           
        },
        height: 50,
        autoHideAfter: 3000,
        stacking: "left",
        button: true
    })

    Here's an example so you can see it in action. I added a button to the bin, so you can click on it repeatedly and see the new stacking direction:

    <div id="container"></div>Taking the positioning one step further, you can statically position your notifications within a container element instead of having it display solely within the context of the viewport. This is done via appendTo which allows you to specify a target element that will contain your notifications. This is only a matter of having a container element like this:

    And adding the new property like this:

    kendoNotification( { 
    position: {
    top: 30                             
    },
        width: "120px",
        autoHideAfter: 3000,
        button: true,
        appendTo: "#container"
    })

    You're also going to want to make sure that you use the overflow: auto; for the container element to ensure that the notifications display within the context of the element and not bleed out.

    Here's another live example.

    Giving Notifications Your Own Flare

    As I mentioned previously, you can customize the look of your notifications by using Kendo's built-in templating system. This allows you to use standard markup in conjunction with parameter tokens to define how and what information will be rendered. There are two ways of doing this. The first is by including the template markup directly into the template property of the templates configuration property. Let's review the example below:

       templates: [{
       type: "myAlert",
       template: "
    Hey there, you #= myMessage #
    "
    }]

    The templates property takes an object of templates that can be used for a specific notification object. This allows you to define different notification styles, all callable via a semantic name specified in the type property. In this example, I've created a notification template that is callable as "myAlert" and will render the notification within a div element that has a class called alertStyle. Yes, since this is standard markup, your template is completely styleable via CSS. I've added the following styling to my notifications. 

    .alertStyle {
  border: 1px solid;
  height: 25px;
  width: 180px;
  background: #990066;
  color: #FFF;
  font-family: "Tahoma";
  font-size: 12px;
  padding: 10px;
}

    Continuing on, notice the token delimiters, "#=" and "#", around "myMessage". These hash symbols are used to identify areas in a template that should be replaced with data when the template is executed. So in this example, the expectation is that a value, referenced by "myMessage", will be passed to the template. This is done via the notification object's show() method which can accept a strong or an object as its first parameter, followed by a template type. 

    popupNotification.show({ myMessage: "ordered coffee!" }, "myAlert");

    Notice that the first parameter is an object with a property called myMessage followed by a second parameter that's the type of template. You can specify any number of properties to pass to the template thus giving you tremendous power to display useful information based on user interaction with your site.

    Let's take a look at this in action.

    The second way, which is arguably the most flexible and maintainable method, is to take advantage of Kendo's template syntax to create templates within your normal markup pages, like this:

    <script id="myAlertTemplate" type="text/x-kendo-template">
    <div class='alertStyle'>Wow, you #= myMessage #</div>
</script>

    This allows you to declare them in a substantially more readable manner than trying to include them into a JavaScript object. Because the script tag type is non-standard, it's ignored by the browser allowing the Kendo template system to parse the contents and execute the code at runtime.

    The other difference is in the way the template markup is passed to the template property. You'll now use jQuery's factory method, $(), to grab a reference to the template and return the markup inside of it:

     templates: [{
       type: "myAlert",
       template: $("#myAlertTemplate").html()
    }]

    Let's take a look at it.

    Clearly, defining the template markup in this manner is much more readable and maintainable.

    Extra! Read All About it!

    The Kendo UI Core Notification widget offers a lot of flexibility and customization, allowing you to keep your users in the loop and greatly enhancing the overall user experience. And for many, the familiar jQuery-like syntax should make it a breeze to pick up and run with.

    I don't think we can ever do enough to get as much information to our users as possible and being able to do it without using an external app or blocking the user experience is always a win in my book.

    Disclosure: I work for Telerik, the maker of Kendo UI Core.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    Plaats reactie...
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News