Introducing the ActionSheet for Kendo UI Mobile

Highlights

• New! ActionSheet introduced in the Q1 2012 SP of Kendo UI Mobile (v2012.1.515)
• ActionSheet displays a set of choices related to a task the user initiates
• Super-easy to add the ActionSheet to your apps built on Kendo UI Mobile
• Easy to add ActionSheet to existing Kendo UI Mobile applications (i.e. TeamThing)

Introduction

In case you missed it, we shipped a service pack for the Q1 2012 release of Kendo UI last week. This service pack includes many updates, fixes, and enhancements to all three collections of Kendo UI (Web, DataViz, Mobile). For the release, I wrote a blog post that provided a high-level overview of what’s new. Unfortunately, I neglected to highlight the ActionSheet that we introduced in Kendo UI Mobile.

In my defense, it’s always a challenge to cover everything for our releases!

Introducing the ActionSheet

The purpose of the ActionSheet is to display a list of actions based on user interaction. The ActionSheet provides a native-like menu across all platforms supported by Kendo UI Mobile. In every case, a cancellation button is provided for the user to revoke the action. Additionally, it provides a title bar on Android and BlackBerry devices.

Here’s an example of an ActionSheet that could be displayed when a user selects an email:

ActionSheet of Kendo UI Mobile

The ActionSheet is useful in situations when you want to provide a user with a quick, contextual menu to perform a task. It may also be used to confirm a user’s choice before conducting an action with potentially significant consequences (i.e. deleting an email).

Getting Started

An ActionSheet is displayed when a user interacts with navigational widgets such as a ListView. Adding an ActionSheet to your Kendo UI Mobile is pretty simple. Let’s assume the following example:

An ActionSheet is a ul element with a role data- attribute set to actionsheet. (Alternatively, the ActionSheet can be initialized via a jQuery selector.) It’s a widget that you’ll define within the context of a View like so:

In the example (above), each action is represented by a li element with a nested anchor that contains an action data- attribute. The purpose of the action data- attribute is to specify a callback method to be executed when the user clicks/touches it. For example, when the user clicks/touches the Reply option, the reply callback is triggered.

The callback receives a object with two fields: target and (optional) context as a parameter. The target field provide a reference to the DOM element responsible for displaying the ActionScript. The context field provides access to the actionsheet-context data- attribute of the opening element:

The context field provides allows you to quickly reference the item that the user selected.

Adding the ActionSheet to TeamThing

TeamThing on the iPhone

Earlier this month, Todd Anglin published a sample application entitled, TeamThing. Its purpose is simple to highlight the building blocks of Kendo UI Mobile. From Todd’s blog post on TeamThing:

While the purpose of the app is to showcase Kendo UI Mobile, let’s make sure you understand the basic app concepts. In essence, TeamThing is like a task list app for teams. The idea is that distributed team members can use TeamThing to effortlessly share what they’re working on so that all other team members and observers (like bosses) can easily answer the question, “What are you working on?” at any time.

At the time that TeamThing was built, Kendo UI Mobile didn’t have the ActionSheet. When task was selected by a user, the application simply navigated to a new View:

ThingDetail View of TeamThing

This isn’t an ideal user experience because the transition to a new view didn’t feel natural to the user experience metaphors of the device experience. I wanted to see if I could swap out this View with a more intuitive ActionSheet. I also wanted to see just how easy this was.

As it turns out, it was really easy.

The first step involved building an ActionSheet for TeamThing:

Here’s the resulting output for this markup:

ActionSheet for TeamThing

Notice that I themed the Delete option appropriately. This was done through a simple set of style applied through the CSS classes, km-button and delete:

The next step was to route user interactions for each item to this newly-created ActionSheet. Because the original list utilized databinding and templates, accomplishing this task was easy:

In the markup (above), the template outputs code to inform the Kendo UI Mobile framework to route interactions to the ActionSheet. To make matters simplier for me when modified items, I utilized the actionsheet-context data- attribute to pass information to each of my callbacks that I had created for each action defined.

Final Thoughts

So, there you have it. The ActionSheet is a new widget that will provide you with a quick, contextual menu for performing actions against a collection of items you have in your Kendo UI Mobile applications. We added it to the service pack for Kendo UI Q1 2012 so make sure to sync up your script and style references. And, as always, please continue to send us your awesome feedback!

Kendo UI Q1 2012 Commercial Service Pack Available Now

I’m happy to report that our team has shipped a service pack for Kendo UI Q1 2012 release (version 2012.1.515). In this blog post, I’ll highlight a few of the noteworthy enhancements we’ve implemented for this release. However, as always, I would encourage you to review the change logs:

• What’s New in Kendo UI Web
• What’s New in Kendo UI DataViz
• What’s New in Kendo UI Mobile

The Kendo UI Q1 2012 service pack provides a number of updates, fixes, and enhancements to the version of Kendo UI we shipped earlier this year. From a high-level perspective, we accomplished a great deal of work for this latest milestone:

• 112 bugs fixed
• 17 enhancements added
• 85 issues resolved for Kendo UI Web
• 18 issues resolved for Kendo UI DataViz
• 20 issues resolved for Kendo UI Mobile
• and much more!

Here are just a few of the cooler fixes and enhancements we’ve implemented in this service pack:

New! Method Chaining Support in Kendo UI Web, DataViz, and Mobile
Prior to this service pack, whenever a developer wished to interface with a Kendo UI widget, he/she needed to invoke .data() in order to obtain a reference to the object. For example:

$("#grid").kendoGrid();
$("#grid").data("kendoGrid").refresh();

All of this ceremony caused frustration and so we decided to eliminate it by supporting method chaining. With this latest service pack, you’ll be able to write JavaScript that’s more readable:

$("grid").kendoGrid("refresh");

This enhancement has been implemented across all three collections of Kendo UI; Kendo UI Web, Kendo UI DataViz, and Kendo UI Mobile.

New! Column Reordering and Resizing in the Grid of Kendo UI Web
Fans of our ASP.NET MVC controls will know just how valueable it can be to have a grid that can be modified by users. In this service pack, we’re providing the ability toresize and reorder the columns of the Grid widget in Kendo UI Web.

• Check out a demo of column resizing of the Grid widget in Kendo UI Web
• Check out a demo of column reordering of the Grid widget in Kendo UI Web

Although it’s a minor enhancement, it’s one that got a lot of votes on our UserVoice site. In other words, you asked, so we delivered!

Fixed! kendo.web.js and kendo.dataviz.js can be Included Simultaneously
In certain, edge-case type scenarios, customers would experience runtime errors when attemting to load the JavaScript resources for Kendo UI Web and Kendo UI DataViz on the same page. This behaviour has been resolved in this service pack.

Fixed! Case-Sensitive Filtering and Searching in Kendo UI Web
A few of the widgets of Kendo UI Web - noteably, the AutoComplete, ComboBox, and DatePicker - support the filtering and/or searching of values. In this service pack, we have included support for case sensitivity when conducting these operations against data-bound collections.

New! Dynamic Content in the ScrollView of Kendo UI Mobile
The ScrollView widget provides a finger-friendly control for scrolling through content like images. Through a swipe gesture, you can navigate between a list of local and remote resources. Until this latest release, it was difficult (but not impossible) for developers to dynamically update the content of ScrollView panes. Now, we’re providing a new method - .content() - which will provide this facility.

These are just a few of the updates, fixes, and enhancements that you’ll find in the service pack for the Kendo UI Q1 2012 release. Many of the bugs and feature requests we implemented came directly from you; our customers. We spend a great deal of time tracking your feedback on our forums, our UserVoice site, Stack Overflow, Twitter (@KendoUI) and elsewhere online. As always, we welcome all feedback. Please continue to submit your requests. We’ll continue to make Kendo UI more awesome.

"Another Day, Another Beautiful Sunrise"

Shot taken from Berwick, Victoria, Australia.

Connecting the Kendo UI DataSource to Remote Data

Over the past number of months, I’ve fielded an enormous number of questions about Kendo UI. In this post, I’d like to answer a question I’ve received about the DataSource component. This question speaks more to the architectural concerns of your application as opposed to the technical aspects of Kendo UI. Nevertheless, it’s a question that warrants some examination.

I am considering moving to Kendo UI but I am discouraged by the examples that I see for connecting to the DataSource component. How can I use existing data from a database in a Kendo UI application?

The answer to this question is somewhat nuanced due to the implications it can have on your application’s architecture. Consider for a moment the operating requirements of Kendo UI itself. Kendo UI is a framework that operates entirely within the confines of the browser since it’s built in HTML5, JavaScript, and CSS. Knowing this, one can see the implications of connecting to the data in your underlying database.

The DataSource component is an abstraction in JavaScript that manages in-memory and remote data sources. Its purpose is to simplify the process of propagating updates to and from these data sources. In the case of data that’s stored in a remote database (SQL Server, Oracle, MySQL, CouchDB, etc.), there’s an assumption on our part that the data is accessible to query via HTTP. This is necessary since we are talking about JavaScript running in the context of the browser. So, at a basic level, this is what is required for us to integrate your data with our framework. In terms of the actual data coming across the wire, this can be represented in a number of different ways. Out-of-the-box, we support XML, OData, and JSON.

Coming back to the question posed earlier, if you want to “use existing data from a database in a Kendo UI application” then you need to expose it via HTTP. There are a lot of different ways to do this; your options really do vary wildly, database to database. That stated, I’m a fan of implementing a service layer that can be exposed and consumed by frameworks like Kendo UI. For example, if you’re a .NET developer then you can take advantage of ASP.NET Web API. Many other solutions exist for Java, PHP, and others. The point is that you can have a great deal of control over how your data is provided to consuming clients. Of course, how you chose to implement these endpoints is another topic entirely. For now, know that for Kendo UI, we need some mechanism of accessing your data. Because we’re on the web, that means HTTP.

webDU 2012

I was in Sydney earlier this week to speak at webDU. This year marked the 10th anniversary of this conference and I admit that I walked away impressed by the quality of the presentations that were delivered along with the professionalism of the organising staff.

Initially, I had planned to deliver a talk on responsive design. However, I was asked to cover for a missing speaker due to illness. My first talk entitled, “Make Awesome Web” covered a top 25 list of sites and tools I had curated on Make Awesome Web.

• Kendo UI
• Raphaël
• HTML5 Please
• CSS3 Please
• CSS3 Test
• 39 Ridiculous Things To Do With CSS3 Box Shadows
• Bootstrap, from Twitter
• HTML5 Boilerplate
• httpstat.us
• FitText
• OMG Text!
• Pretty Loaded
• BuiltWith
• HTML5 Progress Polyfill
• Bacon Ipsum
• PeopleMov.in
• NewZealand.com
• JS Bin
• Paper.js
• MicroJS
• PhoneGap
• CreateJS
• jsFiddle
• HTTP Archive
• The Noun Project
• Wheels of Steel
• Anatomy of a Mashup
• Mother-effing Text-Shadow
• Mother-effing HSL
• Mother-effing Animated GIF
• FOUT-B-Gone

This talk went very well. In retrospect, I probably should have given the presentation a better title. Something like “Johnny’s Crazy-Ass Brain-Dump of Awesome Sites and Tools” would have been much more appropriate.

Later in the night, I was a panelist in a BOF entitled, Building Native Apps with Web Frameworks, which featured a lively discussion about building applications for mobile devices with web development technologies. Of course, I spoke at-length about how we (at Telerik) approach this problem with Kendo UI. Our view is that many developers and companies want to build applications that look and feel native without having to resort to differing frameworks and unfamiliar languages. During our discussion, I made the point that of all the viable mobile platforms in existence (and soon-to-be-in existence), the Metro UX metaphor presented by Microsoft is the one that certainly disrupts the in-and-out push-button experience you see across iOS, Android, and Blackberry today. This certainly got a few questions raised. Of course, the reality is somewhat interesting this days with Apple and Google owning a great deal of developer and consumer mindshare in this space. Nevertheless, it’s one that a lot of folks are watching with great interest.

As I stated earlier, I had planned to deliver a talk on responsive design on the following day of the conference. Unfortunately, my son back in Melbourne was very sick and I received word from my wife that I needed to come home immediately. I was (therefore) unable to deliver my talk but I suppose that’s life as a parent.

On a side note, I was great to meet a number of the speakers and attendees at webDU. I was quite impressed by the level of expertise and experience at this conference. I truly hope to be invited back to speak next year and I look forward to seeing the list of talks on-offer at that time.