Telerik blogs

The moment you longed-for, fellow JavaScript developers, has finally come! The next important milestone in Kendo UI's progress towards an all-in-one HTML5/JS framework for cross-platform and cross-device development has arrived! The fresh Q1'12 bits are now available for immediate download, marking the first official release of the Kendo UI Mobile and Kendo UI DataViz suites, and thus giving you all the tools essential for client-side desktop and mobile development.

KendoUI_Q1_12

In case you missed the betas, Kendo UI Mobile widgets automatically adapt to the look and feel of mobile platforms - iOS, Android or BlackBerry - where your apps run, guaranteeing a native experience for end users. You do not have to worry whether your mobile app will look iOS-ish on iOS device or Android-ish on Android, this will happen instantly when using Kendo UI Mobile without any extra code required! Nifty, ah? This is out-of-the-box gem that no other current mobile framework provides, so grab it and take advantage of it now!

In case I haven't managed to whet your appetite enough to download today's release, here is a quick recap of the new stuff across the entire Kendo UI spectrum you'll find in this release.

Kendo UI Mobile

With Q1 2012, our mobile package is ready for prime time! Following the first and second Beta releases in the previous months that helped us refine the functionality you need to build cross-platform mobile apps (thanks to your feedback!), we are proud to deliver the first official version of Kendo UI Mobile. There are two fundamental pillars that make our mobile suite stand out from the rest of the mobile solutions offered today:

  1. Complete Framework: Kendo UI Mobile is more than just UI. As part of the complete Kendo UI framework, Kendo UI Mobile gives you everything you need to build powerful mobile apps with HTML and JavaScript.
  2. Adaptive UI: Kendo UI Mobile widgets automatically adapt to the platform on which mobile apps are deployed. You write your code once and your mobile application is automatically imbued with native look-and-feel for iOS, Android and BlackBerry devices (if you are curious about WP7 support, read this blog).

All this fine-tuned with pixel-perfect rendering and high-optimized performance.

Furthermore, Kendo UI Mobile is compatible with PhoneGap, allowing you to compile applications built with Kendo UI Mobile and deploy them to device app stores! PhoneGap deployment gives you access to device APIs, like the camera, accelerometer, and more. Ultimately, it is up to you to choose whether you want your mobile apps to be accessible via a browser, through an app store, or both. No matter your choice, Kendo UI Mobile is ready to help.

How easy is it to create my first Kendo UI Mobile application, you may ask? Here is a very simplistic solution that outlines all you have to do to put together your Hello World application:

<head> <title></title> <script src="source/kendo.all.js"></script>
    <link href="styles/kendo.common.css" rel="stylesheet" />
<link href="styles/kendo.default.css" rel="stylesheet" />
</head>
<body>
    <div id="music" data-role="view" data-title="My Music">
<h2>Welcome to "My Music" App</h2>
    <p>A native-looking web based mobile application.</p>
<ul data-role="listview" data-style="inset" data-type="group">
 <li>I want to:
<ul>
<li data-icon="play"><a href="some_href">Play Music</a></li>
<li data-icon="cart"><a href="some_href">Buy Music</a></li>
</ul>
 </li>
</ul>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script> 

The important steps are:

  1. Register the scripts and styles in the head
  2. Set appropriate data-role for the html elements
  3. Execute the line specified in the script tag at the bottom. This will auto-magically transform your plain html into Kendo UI Mobile web app.

As easy as that! You can check my colleague Burke's blog post for more detailed guidelines.  And this is how your future mobile apps will look like on different smartphones:

devices 

Kendo UI Mobile comes with core mobile framework infrastructure such as:

  • Mobile application elements
  • Views
  • Layouts
  • etc.

as well as a set of eight UI widgets, including buttons, listview, scrollers, navigation widgets, and more. This gives you the needed underpinning to build diverse mobile apps that "look right" on the three most popular mobile platforms. And as I know that no words can replace the actual thrill when exploring and playing with demos online, I give you the:

Kendo UI Mobile demos

Note that each demo has QR code set so that you can easily scan it and view the demos immediately on your mobile device. We are so trendy...

Kendo UI DataViz

Kendo UI Mobile is big, but there is a lot more happening in Q1 2012.

In Kendo UI DataViz, we've added the new Area Chart type, multiple value axis support, radial gauges and linear gauges. These tools help you easily create interactive dashboard-like interfaces on desktop and mobile devices. Equipped with stunning animations, they are pure (nutritious) eye candy.

KendoUI_RadialGauge  KendoUI_LinearGauge

See Demos

KendoUI_StockDashboard

The charts/gauges take full advantage of the hardware acceleration (when available) and strive to deliver maximum performance, while ensuring the broadest reach possible by utilizing HTML5 and SVG/VML graphics. And the configuration once again can be done in a breeze, as my colleague Brandon described in his recent blog post.

Kendo UI Web

Let's not forget the "original" Kendo UI Web, as it also has a lot to offer with this new release! Two new major widgets join the suite (HTML Editor with iOS 5.0+ support, and ListView) which extend significantly your dev arsenal to create feature-rich and responsive web solutions. The Grid also receives more love in this release and gets a variety of edit modes (inline, popup, etc.), an enhanced editing experience via custom editors, as well as built-in footer and group aggregates.

KendoUI_Web_ListView

See Demos

KendoUI_Web_Editor

See Demos

KendoUI_Grid_InlineEditing

See Demos

Moreover, to make the touch-enabled apps built with Kendo UI Web even more "scroll-friendly" on mobile, we supercharged all widgets which support scrolling with out-of-the-box kinetic scrolling "borrowed" from the Kendo UI Mobile core.

Another important additional is the new MVVM (Model-View-ViewModel) framework extension, which will certainly be greeted by the fans of the MVVM design pattern. It allows for easy differentiation between the conceptual app views (containing the Kendo UI widgets) and the data model, while at the same time keeping both in sync to reflect any changes in the UI or the underlying model. Performance and intuitiveness are the two major concepts that drove the development of the MVVM framework extension, and I believe you will be happy with the end results. I encourage you to review this article to get started and dig deeper into the Kendo UI MVVM.

To recap, here are the mandatory quick links which direct you to:

Download | Online Demos | Docs

Release Notes > Web | DataViz | Mobile

Last but not least, we revamped the navigation for the Kendo UI online demos and improved the design, content and experience on kendoui.com with one single purpose - to make the flow as easy and transparent as possible for you, when transitioning between the site pages, demos, docs, etc. Let us know whether you find those improvements useful and intuitive.
 

These are the major things I selected to share with you in my Q1'12 Kendo UI release post, but I only scratched the surface! For anything else that I might have inadvertently skipped, refer to the full-blown release notes and the demos/docs. The rest I am leaving to your creativity and passion to create unmatched web experiences with Kendo UI!

And if you are reading this before 11.00AM EDT (US Eastern) today, there's still time to join us for the big release keynote. Register right now and join us in a few hours for a fun overview of the latest release...as well as a few more special announcements!

Stefan Rahnev

About the author
is the Unit Manager of the Kendo UI Telerik Division. He has been working for the company since 2005, when he started out as a regular support officer. His next steps at Telerik took him through the positions of Technical Support Director, co-team leader in one of the ASP.NET AJAX teams and unit manager of the ASP.NET AJAX and MVC divisions. Stefan’s main interests are web development, agile processes planning and management, client services and psychology.

Are you into HTML5/JavaScript development for desktop and mobile? Download our Kendo UI framework now to cut back development time and boost your productivity!


Comments

Comments are disabled in preview mode.