Telerik blogs

Kendo UI Spring 2013 Release Today!

brandon-satrom by Brandon Satrom
March 20, 2013 Release 0 Comments


It’s Kendo UI launch day, and I hope you’re as excited to get your hands on the new Kendo UI bits as we are to share them with you! We’ve been hard at work since the Q3 2012 release to bring you the most jam-packed release since our initial launch over a year ago! Here’s just a taste of the goodies that we’ve squeezed into this release:

  • The official release of server wrappers for Java JSP and PHP
  • The most new Web & DataViz widgets since our initial release
  • The addition of some great interactive features in Kendo UI DataViz
  • Windows Phone 8 support in Kendo UI Mobile
  • The creation of the Kendo UI Labs, a home for community-supported extensions and integrations.
  • and more!

To introduce some of these new features, I thought I’d put together a whirlwind tour of some of my favorites. In this post, I’ll share the highlights, but I encourage you to check out the “What’s New” pages for Kendo UI Web, DataViz and Mobile, the Demos for each (Web, DataViz, and Mobile) and the docs.

New wrappers for JSP and PHP

Let’s start with our new wrappers. Our Java JSP wrappers, which we released in Beta form with the Winter 2012 bits, have been officially-released today, along with a set of wrappers for PHP. Much like like our existing Wrappers for ASP.NET MVC, Kendo UI Complete for PHP & Kendo UI Complete for JSP enable developers comfortable with server-side programming to easily adopt and get rolling with Kendo UI. Here’s an example of our new PHP wrappers in action:

<?php
  $countries = array('Belgium',  'Bulgaria', 'Denmark', 'Sweden', 'Switzerland');

  $dataSource = new \Kendo\Data\DataSource();
  $dataSource->data($countries);

  $autoComplete = new \Kendo\UI\AutoComplete('country');

  $autoComplete->dataSource($dataSource)
               ->filter('startswith')
               ->placeholder('Select country...')
               ->separator(', ');

  echo $autoComplete->render();
?>

Even if you’re not familiar with PHP, it’s probably obvious what’s going on here. I’m creating an array of countries, and then creating a Kendo UI DataSource to hold that data. Next, I create a Kendo UI AutoComplete and set its properties before rendering the control to the screen. Just as with our other wrappers, at runtime, the PHP code above emits the appropriate JavaScript and markup, which it sends to the client. As a result, you get the Kendo functionality you want with the languages you love to use!

To learn more about our new wrappers, you can head to the individual pages for PHP and JSP, where you’ll find more information, links to relevant posts, and some getting-started videos created by our crack Developer Relations team.

New Framework Features

Next, let’s talk about some of the new framework features in Kendo UI, in particular RequireJS support and a new prototype SPA implementation for Kendo UI Web.

RequireJS

Script loaders have become quite popular over the last few years, and one of the most popular open-source script loading tools is RequireJS. I’m happy to share that, with today’s release, our production, minified builds are designed to work with RequireJS, out of the box. That means that if you only need to use a few components of Kendo UI, instead of having to load the full kendo.all.js file or configuring a custom build, you can simply declare the components you want and RequireJS will load those dependencies for you, at runtime.

To use RequireJS and Kendo UI, simply add Require to your app, with a data-main attribute pointing either to jQuery, or your main JS file (if you’re using require-jquery): 

<script data-main="js/lib/jquery.min.js" 
        src="js/lib/require.min.js"></script>

Then, in your main JS file, you can specify which Kendo UI widgets and features you wish to use, and Require will load those (and their dependencies) automatically:

require([ "kendo.autocomplete.min", 
          "kendo.listview.min", 
          "kendo.datepicker.min"], function() {
        // Do Awesome work here!
    });

To learn more about using Kendo UI and RequireJS, check out the Kendo UI Docs.

Single-Page Applications

Single-Page Apps, or SPAs, are certainly a hot topic on the web. They have been for a while, but interest in this app architecture style doesn’t seem to be slowing down, one bit. The increased popularity of libraries like Backbone, Knockout, Angular and others is proof that the “SPA style” is a big, big deal.

While there’s nothing stopping developers from building SPAs today with Kendo UI, either with a popular library like Backbone or just using Kendo UI in a standalone fashion, many of you have asked us to provide better “first class” support for building SPAs using Kendo UI. I’m happy to share that today’s release includes support for building SPAs with Kendo UI using three new classes, the Router, the View and the Layout. Combined with existing support for Models and the Kendo UI DataSource, Kendo UI Web now has everything you need to build interactive Single-Page apps.

Getting started with Kendo UI SPA is easy. Let’s say I want to build an app with three views, all of which are swapped in and out of the same container element when the user interacts with the app. I’ll start by defining a Layout, which controls showing views in that container:

var layout = new kendo.Layout($('#projectLayout').html());
layout.render(projectsContainer);

Next, I’ll create my views, each of which represents a ` template in my markup that contains Kendo UI widgets and other visual elements:

var projectsList = new kendo.View("projectsListView");
var newProjects = new kendo.View("newProjectView");
var reports = new kendo.View("reportsView");

Finally, I’ll glue everything together with a router, on which I’ll define some views, before kicking things off:

var router = new kendo.Router();

router.route("/", function() {
  layout.showIn('#display', projectsList);
});
router.route("/new", function() {
  layout.showIn('#display', newProjects);
});
router.route("/reports", function() {
  layout.showIn('#display', reports);
});

router.start();

Each route tells the router to watch for a certain URL fragment and, when matched, take action. In this case, navigation results in my layout showing a different view, based on the requested url.

To learn more, and to get started building SPAs with Kendo UI today, head on over to the SPA section of the Kendo UI Docs, and be sure to check out our “updated for SPA” Kendo UI Sushi and Aeroviewr demos.

What’s new in Kendo UI Web

Now, let’s talk widgets. Today’s release includes three great new widgets in Kendo UI Web, a MultiSelect, ColorPicker and Tooltip. As with our existing widgets, these are simple to get started with, and highly configurable. Let’s take a look at how easy it is to create a simple ColorPicker and MultiSelect, and add these to a “New Project” form on a page. Here’s my markup:

<form name="myForm" class="well">
  <div>
    <label>Project Name</label>
    <input type="text" name="name">      
  </div>
  <div>
    <label>Category</label>
    <select id="categories" 
            multiple="multiple"
            data-placeholder="Select categories...">
    </select> 
  </div>
  <div>
    <label>Priority</label>
    <input id="priority" type="color" value="#ff0000"></div> 
  </div>
  <div>
    <label>Due Date</label>
    <input type="date" data-role="datepicker" >
  </div>
  <br>
  <a href="#/" class="cancel btn">Cancel</a>
  <a href="#/save" class="save btn btn-primary">Save</a>
</form>

And the JavaScript needed to initialize these (note that, like all Kendo UI Web widgets, these can also be created using Kendo’s declarative initialization):

var categories = [
  { value: "1", text: "Fun"},
  { value: "2", text: "Work"},
  { value: "3", text: "Team-Building"},
  { value: "4", text: "Personal"},
  { value: "5", text: "Play"}
];

$('#categories').kendoMultiSelect({
  dataTextField: "text",
  dataValueField: "value",
  dataSource: categories
});

$("#priority").kendoColorPicker({
  palette: "ff0000,ffff00,00ff00,0000f9"
});

Here’s a screenshot of the result:

This example only scratches the surface of what’s possible with these new widgets (especially the ColorPicker, which has a very powerful API!), so to learn more about these new widgets, check out the demos (MultiSelect, ColorPicker, Tooltip) as well as the Kendo UI Docs (MultiSelect, ColorPicker, Tooltip).

What’s new in Kendo UI DataViz

Next up, let’s talk about Kendo UI DataViz, where we’ve added some new Chart types, and have invested a lot of time adding highly-interactive features to our existing charts.

Sparklines are an exciting new addition, that would surely make Edward Tufte himself proud. Sparklines are simple, word-sized graphics that are meant to be embedded alongside text, in tables or headlines. Creating a Sparkline is simple, and you can use most of the existing chart types (line, bar, column, etc) for the underlying display:

$("#pressure").kendoSparkline(pressureData);

$("#temp").kendoSparkline({
  type: "column",
  data: tempData,
  tooltip: {
    format: "{0} &deg;C"
  }
});

$("#humidity").kendoSparkline({
  type: "area",
  data: humidityData,
  tooltip: {
    format: "{0} %"
  }
});

And here’s the fancy-looking result:

We’ve also added Bullet Charts in Q1. A Bullet Chart is a type of bar chart that shows data as it relates to a goal or some target metric. Here’s an example of two Bullet Charts for an issue tracker application:

var goalCompleted = [ 25, 15 ];
var goalCreated = [ 7, 56 ];

$("#goal-completed").kendoChart({
  series: [{
    type: "bullet",
    data: [30, 60]
  }],
  valueAxis: [{
    plotBands: [{
      from: 0, to: 30, color: "red", opacity: 0.3
    }, {
      from: 30, to: 60, color: "yellow", opacity: 0.3
    }, {
      from: 60, to: 150, color: "green", opacity: 0.5
    }],
    majorGridLines: {
      visible: false
    },
    min: 0,
    max: 150
  }]
});

$("#goal-new").kendoChart({
  series: [{
    type: "bullet",
    data: [30, 20]
  }],
  valueAxis: [{
    plotBands: [{
      from: 0, to: 20, color: "green", opacity: 0.5
    }, {
      from: 20, to: 30, color: "yellow", opacity: 0.3
    }, {
      from: 30, to: 50, color: "red", opacity: 0.3
    }],
    majorGridLines: {
      visible: false
    },
    min: 0,
    max: 50
  }]
});

You’ll notice that the Bullet Chart is just a new type on the kendoChart object. My data array consists of two values. One is the current value of the chart, and the other is the goal or target value. As with other chart types, I can also specify plotBands, which I’ve done here to signify when items are above or below their target.

In addition to new Charts in Kendo UI DataViz, we’ve also been hard at work improving the interactivity of our existing charts. For example, we’ve added:

All in all, it’s a jam-packed release for Kendo UI DataViz!

What’s new in Kendo UI Mobile

Now, let’s talk mobile. Here, there’s no question that the big ticket feature in the Spring release is something you’ve all be clamoring for… Windows Phone 8 support. That’s right, the Windows Phone browser now has everything Kendo UI Mobile needs to deliver a great experience, so we’ve wasted no time giving you yet another native-looking mobile theme that will automatically render a Windows Phone look and feel on Windows Phone 8 devices.

To learn more about our new Windows Phone 8 theme, check out this blog post and then visit the Kendo UI Mobile Demos to see the new theme in action! [Note: the WP8 simulator is best viewed in IE10]

Of course, WP8 Support wasn’t the only thing we added to Kendo UI Mobile in Q1. Another notable feature is ListView filtering, which allows you to add a search filter to the top of the Mobile ListView widget, and filter the list results based on search terms from a user. Setting it up is as easy as configuring a filterable DataSource, and then setting the filterable property to true on the kendoMobileListView:

var dataSource = new kendo.data.DataSource({
  pageSize: 12,
  serverPaging: true,
  serverFiltering: true,
  transport: {
    read: {
      url: "http://search.twitter.com/search.json", 
      dataType: "jsonp"
    },
    parameterMap: function(options) {
      var filter = options.filter ? options.filter.filters[0].value : "#kendoui";
      var parameters = {
        q: filter, 
        rpp: options.pageSize,
        page: options.page 
      }
      return parameters;
    }
  },
  schema: {
    data: "results" 
  }
});

$("#listView").kendoMobileListView({
    dataSource: dataSource,
    template: $("#itemTemplate").text(),
    filterable: true,
    endlessScroll: true,
    scrollTreshold: 30 
});

Here’s what the result looks like on an iOS device:

Introducing the Kendo UI Labs!

Whew! I know that this has been a whirlwind of content, but there’s one more, very exciting new thing I wanted to share with you before I wrap up: The Kendo UI Labs.

We know that you love Kendo UI, and even though you use Kendo UI for your apps, we recognize that it might not be the ONLY thing you use in those apps. It may be that you prefer to use Kendo UI with Knockout, AngularJS, Backbone, Breeze.js, or some other set of libraries. No matter the library, we know you expect for Kendo UI to play nice with these libraries, and vice-versa, and we’ve gotten a log of requests to make integrations with some of these 3rd party libraries part of the official Kendo UI project.

While we’re not planning to add integrations and support for these libraries as officially-supported parts of Kendo UI, we thought we could do better than just turning down these requests. To that end, we’ve created the Kendo UI Labs, a place where we, the Kendo UI team and you, the developer community, can work to create these types of integrations, together.

Today, we’re launching the Kendo UI Labs with nine projects, including starter integrations with Kendo UI for AngularJS, Backbone and Breeze, with more to come in the future. This is all open-source here, so if you’re interested in these projects, and want to help out, head on over to labs.kendoui.com and get involved!

Download the Spring 2013 Release Now!

We just covered a lot of territory in a short time, but thanks for sticking with me in this high-level overview of some of what’s new in the Kendo UI Spring 2013 release. I hope I’ve been able to whet your appetite to try the new bits out. If so, go check it out for yourself now.

As always, its up to you to tell us what features you need and want from Kendo UI. I’ll be working with the team over the next several weeks to plan out our next release, so if you have a burning need, please visit us at our UserVoice portal today and give us your feedback!

Kendo UI
brandon-satrom
About the Author

Brandon Satrom

Brandon is the founder of Carrot Pants Press, a maker education and publishing company, the founder and CEO of Tangible Labs and an avid tinkerer.

Comments

Comments are disabled in preview mode.