Monday, November 12, 2012

Kendo UI Winter Release

Welcome to launch day for the Kendo UI Q3 Winter release. We've been hard at work since the Q2 release packing in an exhaustive set of features, fixes and sparkling new bits that we are very excited to be able to deliver to you today.
This last quarter was a daunting one for Kendo UI. We took on several major initiatives in addition to the expansion of the features and tools that are already packed into Kendo. Among all of the things packed into this Q3 release you will find...

  • a11y Accessbility Support
  • New DataViz Charts/Features
  • DataViz ThemeBuilder
  • Java Server Wrappers (Beta)
  • Image File Browser (Editor)
  • New Themes

This is just a small sampling of all of the great newness in the release. Since I can't possibly cover it all in one blog post, I'm going to hit the highlights, and I urge you to check out the release pages (they're nicely formatted and easy to read!) for Web, DataViz and Mobile.

Kendo MVC Music Store

We have heard loud and clear that you want to see an end-to-end solution built with Kendo UI. We're very happy to be able to deliver to you our take on the famous and ubiqutous MVC Music Store - Kendo UI Style.

We've taken all of the goodness that you've come to know from the open source MVC Music Store project and thrown down on it HTML5 style including as much of Kendo UI as we could so you can see it in action from end to end.

It's officially and aptly named, "The Awesome Sauce Music Store".

You can launch the music store by visiting http://www.kendouimusicstore.com

mvc_music_store_1

You can see that I've got the AutoComplete open on the right-hand side, as well as a Kendo UI Menu gracing the top of the application.

music_store_2

If you scroll down below the banner, you will see a Kendo UI ListView with paging.

music_store_3

MVVM Makes Life Easy

So many things in this application are dependent on the same data. As you buy albums and add them to your cart, the cart drop down updates and these items are all bound to the same data source. It's a fantastic way to see how you can keep your UI in sync when multiple peices all depend on the same logic.

Visualizing The Music

We also included some sample sales data in a dashboard that you can see if you login. For the online demo, you can login the following credentials:

Username: owner

Password: ??????

Once logged in, you will find a grid with advanced actions like sorting and filtering as well as CRUD operations.

Now the online version won't allow you to update the backend systems for obvious reasons, but it's super easy to grab this from the GitHub repo and get rolling with it on your own system.

Step 1 - Visit GitHub

Point your browser to https://github.com/telerik/kendo-music-store.

Step 2 - Click "Clone In Windows"

git_clone

If you don't have the GitHub For Windows, this won't do anything so download that first. If you have no interest in getting to know GitHub at all, simple click on the Zip button next to the Clone In Windows button to get the project in a zip file. Once in the zip file, you can open the .csproj file.

Step 3 - Know All The Things

Just make sure that NuGet support is enabled and you're good to go! Full source code for the "Awesome Sauce Music Store" Kendo UI Application.

Accessiblity - a11y

To say that being able to offer accessibility support in this release is exciting for us is a major understatement. We know well that many of you are building sites and applications where accessibility is a MUST. In fact, one of the major features in HTML5 (semantic tags) is all about accessibility. A UI framework shouldn't hamper your ability to provide accessible content to all users.

The release marks Kendo UI's adherence to those accessibility standards set forth by WCAG 2.0, Section 508 and WAI-ARIA.

This new functionality comes in several flavors that you need to be aware of, so lets take a look at a few of those now.

ARIA

Aria support is a big one. Especially for applications with rich JavaScript/AJAX based UI's. The WAI spec was created by the W3C specifically for these sorts of apps.

The official description is:

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

Source: http://www.w3.org/WAI/intro/aria

So how exactly does ARIA work in this context and what does it do? Well it's largely to explain complex AJAX UI's to accessible screen readers through the use of additional meta data in the markup. Let's look at a quick example.

If you inspect some of the widgets in Kendo UI, you will see new markup. Specifically, you will see things like role and "aria" prefixed attributes.

Here is the numeric stepper. Notice now that there are some new attributes.

aria_metadata

  1. role="spinbutton"
  2. aria-valuemin="0"
  3. aria-valuemax="100"
  4. aria-valuenow="30"

This is Kendo UI providing the necessary information in accordance with ARIA for accessible screen readers to be able to report that this is a spin button, as well as what it's min/max and current values are.

The best thing about the new WAI-ARIA support is that it comes out of the box now on all widgets. There is nothing you have to do to enable it. It's automatically there by default. That means that if you have an existing Kendo UI app needing ARIA support, all you have to do to get it is use the new release. No additional code is required on your end.

Keyboard Support

We've also added full keyboard navigation to all of the web widgets, including the ability to specify access keys and then preserving those access keys when new widgets are created.

Access keys are a feature where it's possible to specify a key which when combined with another key (conditional depending on the operating system) will activate the element.

This is something that exists for standard DOM elements as part of the browser. As a for instance, assume you had a form with several input's on it. You could assign each input an access key and then navigate directly to those inputs using that key.

Right now, you can navigate that form with the trusty "tab" key, but you can't go specifically to one of those inputs. However, if you add an "accesskey" attribute, you can. In this example, I have put the access key next to each field so you know what it is. Try pressing the n or b keys to see that field activated. If you are on a Mac, you will need to press "option" + the access key. If on Windows, press "alt" + access key.

Notice that this works on both the regular input and the Kendo UI DatePicker. Now the Kendo UI controls have been extended to use keyboard navigation. Set the focus to the DatePicker and press alt + ↓. This opens the DatePicker. You can also navigate inside of the widget by pressing and . Pressing ctrl + → will navigate you to the next month. We have a complete list of all keyboard shortcuts for navigation on the demo page for that widget.

datepicker_keyboard_nav

Access Keys are a great way to increase the usability of your site and forms. Now with full Keyboard support for ALL Kendo UI Web Widgets, you can deliver not just an accessible UI, but also a UI for power users who spend the majority of their time on the keyboard.

High Contrast Theme

This is a crucial item for users with impaired or low vision. You can now provide a theme which exceeds the recommended contrast settings for the vision impaired by including a style sheet in your application.

Use High Contrast Theme

<link href="css/kendo.highcontrast.min.css">

That's all you have to do! Although it's recommended that you include the k-content class on a top level element to give you entire page the high contrast theme, not just a part of it. This puts your application above the standards set by WCAG 2.0 AAA Compliance.


Here is the example from above with the high contrast theme added to it. I also added the editor control so you can see more of the high contrast in action.


Speaking of the editor, lets talk about something else that's very exciting and new in this release as it pertains to accessibility.


RTL Support


That's right! All widgets will now feature RTL support out of the box. All you have to do to turn it on is include the rtl stylesheet and provide the "k-rtl" class on a parent element. You can now fully support the localization of your application by allowing users to swap between modes, or detect their local and provide it automatically. Here is an example of our form now RTL.


You can see that everything is moved over to the right. Try typing in the textboxes to see the new support for RTL languages. Admittedly, it looks a bit funny with English! :)


DataViz Brings The Goods


This release includes a whole lot of updates to the DataViz package, including a new chart type - the StockChart. This is a new chart that allows you to stack charts on top of each other with a navigation pane down at the bottom to refine or expand the current view of the data.


stock_chart_1


In addition to using the standard chart types, DataViz now includes the candlestick and OHLC chart types allowing you to convey complex financial data with a quick glance.


DataViz also rounds our the ThemeBuilders suite with it's own ThemeBuilder in this release. This means you can now visually theme your charts and get fine grained control over how your data is visually presented.


kendo_dataviz_themebuilder


Just like the Web ThemeBuilder, this is a bookmarklet you can drag up to your bookmarks bar and then open directly on your own site so you can skin your widgets where they live - in your app!


Java Server Wrappers (Beta)


Moving on from the vast accessibility improvements, another huge and exciting feature is the Beta release of Kendo UI for Java!


These are JSP server wrappers that can be used with plain jane JSP pages, or your favorite JSP framework. In fact, we rolled all the demos for the Java Wrappers in the Spring MVC Framework.


To get started with these wrappers, all you need is an Eclipse install (EE edition recommended) and the 1.7 JDK which includes the 1.7 JRE.


eclipse_jar_installIn Eclipse, just fire up a new Dynamic Web Application and select the 1.7 JRE for your server. Then drag the Kendo UI Wrappers JAR file into the lib folder in your project.  Just add the kendo js, styles and of course jQuery files as normal for a Kendo UI application. Install complete!


 


Now you can begin to use the Kendo tags in a JSP page by referencing the tag library at the top.



 


Include Kendo Tag Library

    <%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags" %>

To create a new Kendo UI widget, simply open a tag and begin typing "kendo". Eclipse will begin to suggest possibilities for you.


eclipse_intellisense_on_tag


You can alternately do ctrl + space to get hints on attributes for a specific tag. For example, the DataSource for the AutoComplete can be specified inline as an attribute...


eclipse_attribute_hint


...Or as a configuration inside the AutoComplete tags. For instance, here is a fully configured AutoComplete:



Include Kendo Tag Library

<kendo:autoComplete name="autoComplete" dataTextField="Name" 
placeholder="Enter A Customer Name...">
<kendo:dataSource>
<kendo:dataSource>
<kendo:dataSource-transport-read url="/customers"/>
</kendo:dataSource>
</kendo:dataSource>
</kendo:autoComplete>

The Kendo UI Java Wrappers take care of inserting all of the correct JavaScript to make this AutoComplete work. You also have the added benefit of Eclipse checking your markup so you can be sure that all the tags are well-formed. And as always, you can mix JavaScript in with your kendo tags to get the maximum amount of control in granularity.


Whew! That's some really nice stuff for Java Developers and we're really excited for you to be able to download it today be among the first to kick the tires.


Image Upload For Editor


One thing that you have asked for loud and clear is the ability to upload an image from the Editor control instead of having to specify a URL.


We're pleased to present the Image Upload feature that has been added to the Editor in this release.


image_editor_upload


Now clicking the image icon can display a Kendo Window allowing users to select from an existing image on the server, upload a new one, or specify a URL. And it's all configurable to show the options that you want to show. You can disallow certain file extensions, get rid of the upload piece altogether, even specify how to handle an existing file conflict.


This allows you to have a full fledged image manager for your Editor on any server. For instance, Web API is fantastic for Async I/O tasks like this. Check out the excellent example that is provided on Codeplex for handling your image uploads with WebAPI.


http://aspnet.codeplex.com/SourceControl/changeset/view/7032a5db4d6a#Samples/Net45/CS/WebApi/FileUploadSample/Controllers/FileUploadController.cs


Of course you can handle the upload with PHP, Java, Rails, Node or whatever makes you happy. Even classic ASP if that's what you're into!


Handling image communication between the client and the server is sticky at best with straight HTML, but the Editor control is making it much easier with the new Image Browser feature.


New Themes


We've got some really exciting new themes in this release. Besides the High Contrast theme that was mentioned previously in regards to accessibility, we also have the new Metro Black theme which looks great with the DataViz and building dashboards.


metroblack


We've also made some major tweaks to the existing Metro theme to make it more, well, Metro!


As always, you can use the Theme Builder to customize these themes to your heart's desire right on your own site with the Theme Builder bookmarklet.


So. Much. Kendo.


There is so much in this release and we've just hit some of the high points here. Make sure you download the new bits and checkout all the great new stuff we've got for you. Stay tuned for the post after the keynote where we provide all the resources from the demos as well as a recording of the live keynote in case you happened to miss it.


We’re on a journey to create the best web and mobile application development framework and today marks yet another huge step in that direction.  We look forward to seeing the things that you will build with the new features announced today.  We love to create new features, but it’s what YOU do with it that really blows us away.