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:
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.
In this tutorial, I'll explore how to use this new widget to spruce up the information we can offer users.
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:
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.
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:
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:
Via the instance, it's a simple method call to display a simple notification in the bottom-left corner of the browser viewport:
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.
]]>
W3C has published the April 2014 edition of Standards for Web Applications on Mobile, an overview of the various technologies developed in W3C that increase the capabilities of Web applications, and how they apply more specifically to the mobile context.