Kendo UI

Get Your Hands Dirty with the Kendo UI Scratchpad

Earlier today, Brandon Satrom announced the Q1 2014 Beta release of Kendo UI. It's definitely worth checking out.

Something you may have missed is a feature we've added to the Kendo UI site called the Kendo UI Scratchpad. It's a JSFiddle-esce environment for getting your hands dirty with Kendo UI:

 The (new) Kendo UI Scratchpad!

The (new) Kendo UI Scratchpad!

It's especially worth noting that we've also provided the ability to edit every example we have for our Kendo UI demos:

 Note: "Edit this example" is new here.

Note: "Edit this example" is new here.

See the "Edit this example" button (above)? Click that and you'll be taken to the Kendo UI Scratchpad to fiddle around with the demo.

Nice, eh? Go check it out for yourself.

Beautiful Data with Kendo UI DataViz: Vegetables: What's in Season?

veggies-what-in-season.png

Another day, another visualization.

Previously, I had spent some time charting out the growing size of an average webpage on the Internet. This time around, I wanted to turn my attention to something a little more positive; food.

A few months back, I was going through a number of posts made to the /r/DataIsBeautiful subreddit and I stumbled upon the following graphic:

 Vegetables: When are they in season?

Vegetables: When are they in season?

My first thought was to try and reproduce this graphic with Kendo UI DataViz. Why? Because then it could be interactive. :)

Here's my attempt:

 Vegetables: What's in season?

Vegetables: What's in season?

For this visualization, I leveraged the donut chart, which worked quite well. I had a little bit of trouble getting the areas to line up perfectly since I didn't have any data, just the graphic (above).

Beautiful Data with Kendo UI DataViz: Webpage Obesity

Webpage Obesity.png

Humans are remarkably attuned to pattern matching. It's the result of thousands of years in evolution. I see this on a daily basis with my children as they play with their toys. They're constantly finding new ways to place blocks in a location that's nearly impossible for me to reach. But, I digress.

They say that a picture is worth a thousand words. This is especially true when it comes to data. When faced with rows upon rows of seemingly meaningless data, we often turn to visualizations like charts and graphs to help make sense of it.

For years, I've been fascinated with data visualization – especially beautiful ones. Chances are, if you've picked up a newspaper or visited a news site like the New York Times, you've found yourself staring at one. They're everywhere these days. And for good reason too! Good data visualization allow us to interpret data is new and powerful ways. This opens up the world around us to a wealth of knowledge that went unseen in the past.

These days, with more and more data becoming increasingly available, Kendo UI DataViz has quickly become my virtual doodle pad with which to "draw". Kendo UI DataViz is one of three collections in Kendo UI, an HTML5/JavaScript framework for building modern web and mobile apps. Kendo UI DataViz consists of a series of widgets that enable you to create beautiful charts and graphs.

Armed with Kendo UI DataViz, I felt compelled to share information with folks in the developer community about a growing concern of mine; the weight of web pages or, what I like to call "webpage obesity".

In terms of bytes-on-the-wire, the Internet is getting fat. Quite fat, in fact. For example, did you know that an average webpage is around 1.4 MB? Not surprised? You should be. "But, why should I care?" you may ask. The reason is simple: performance.

Recently, I posted a copy of a fantastic infographic by Strangeloop Networks, which cites a number of statistics concerning website performance and the impact it has on a company's bottom line. Basically, it boiled down to this: if your website is slow, your customers won't want to come back.

Anyway, getting back to my love affair with data visualization.

The HTTP Archive is a fantastic resource for web developers wanting to discover how sites tick. Every two weeks, it crawls over 290,000 URLs, collecting information on each one. It provides a historical log of this information for developers to sift through. Its mission is articulated as such:

In addition to the content of web pages, it's important to record how this digitized content is constructed and served. The HTTP Archive provides this record. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

The HTTP Archive provides some nice charts and graphs, but each time I visited the site, I always felt like I wanted more insight into the data. And thus, my side project entitled, Webpage Obesity was born.

 Webpage Obesity

Webpage Obesity

Webpage Obesity is my attempt to provide a snapshot of the HTTP Archive in one go. A "here's the state of the Internet, people!" kind of image that would leave people with the shock value of stepping on the scale after Christmas holidays.

Side note: a massive tip of the hat must go to Steve Souders for making the data of the HTTP Archive publicly available. For a good overview of how to get and analyze the data yourself, make sure to check out Stoyan Stefanov's excellent post entitled Digging into the HTTP Archive. It's definitely worth the read.

For my Webpage Obesity project, I decided to leverage the stacked area chart that's provided in Kendo UI DataViz. This would allow me to show everything at once and over a period of time. At the bottom, you'll also notice four (4) sparkline charts. These show a combination of the data in-question (i.e. HTML) along with the average number of requests for that data.

Tales of Kendo UI Awesomeness: AdvancedREI

Watching your customers being successful with your framework is tremendously gratifying. That's one of the perks of my role as a Developer Evangelist for Kendo UI; working closely with customers, I have a unique view of the amazing solutions that are being built by developers targeting Kendo UI. In this blog post, I wanted to share one such example, AdvancedREI.

Transient

Dubbed as a solution for "the next generation of commercial real estate", AdvancedREI (@AdvancedREI) is an Anaheim-based and BizSpark-supported startup founded by Jeff Yrueta and Robert McLaws that launched earlier this month. It provides a solution that's designed to help real estate professionals to market, share, and analyze commercial property investment opportunities. Here's how Robert described it:

AdvancedREI helps investors to see the value of their own properties without having to share them with others. Instead of being like other sites, we let you create different financial scenarios, and then using a proprietary algorithm, establish 10-year projections that provides an accurate model of what your cash flow is likely to be. It does this by taking into account the lease cycles on a unit-by-unit basis. It also allows you to see the data change in real-time, and share these scenarios with others, so that everyone involved in the transaction can see the source data.

AdvancedREI is currently accepting beta account registrations at advancedrei.com.

Behind the Music with AdvancedREI and Kendo UI

Our story begins earlier this year when I received a message from Robert McLaws who was experiencing some rendering issues with the Grid of Kendo UI Web. After some back-and-forth over email, I decided to connect with Robert on Skype for some pair debugging. (I often employ a Morpheus-like "show me" approach when troubleshooting issues with our customers.) After a 2-hour code review, which included the use the 3D view of page inspector in Firefox to troubleshoot a funky CSS z-indexing issue, we had a good workaround. At the time, I didn't realize what Robert had built. However, after a few emails and Skype calls relating to Kendo UI, I started to see a pretty awesome-looking application taking shape.

 Details Pane of AdvancedREI

Details Pane of AdvancedREI

Transient

Looking at its technical underpinnings, AdvancedREI uses a combination of Windows Azure, ASP.NET 4.5, Kendo UI Web, and Bootstrap from Twitter. As you can see in these screenshots, AdvancedREI takes advantage of various widgets in Kendo UI Web to deliver a compelling solution to its users. These widgets include the Calendar, DropDownList, Grid, Splitter, TabStrip, and Window. Furthermore, it utilizes the DataSource throughout the entire site to facilitate two-way data binding between the browser and the web server. The data comes from a set of JSON-based endpoints that route to action methods in ASP.NET MVC.

Let's take a closer look at how AdvancedREI uses Kendo UI Web:

 AdvancedREI with Kendo UI Grid and inline editing (Calendar)

AdvancedREI with Kendo UI Grid and inline editing (Calendar)

This view provided a detailed listing of all the financials relating to the property. This financial data bound through a DataSource component to the Grid of Kendo UI Web. The Grid is configured to support paging, sorting, and filtering. Users can perform inline edits to residential units for columns that contain dates. For these updates, the Grid provides a Calendar for selecting when a lease has started and when a tenant has vacated a property.

 AdvancedREI with Kendo UI Grid and inline editing (DropDownList)

AdvancedREI with Kendo UI Grid and inline editing (DropDownList)

This view allows the user to manage listing attributes. These are the characteristics and/or features that make up a property. In this view, you can see the effective use of a Grid to display a grouped list of attributes. Inline editing is also enabled on this Grid, which enables user to perform actions such as selecting attribute types (i.e. Elevator Type). These types are provided through a DropDownList that's bound via a DataSource component. Just like the previous view, users may also sort via column headings.

Here are some highlights that Robert shared with me in an email:

  • Combining Kendo UI Web and Bootstrap lets us support all kinds of devices and resolutions
  • The outer tabs of each view feature the TabStrip of Kendo UI Web but inner "pills" are Bootstrap
  • Each Grid was initially used without the ASP.NET MVC server wrappers, but we've already begun the transition to the server wrappers, which are currently used when adding a new Property and on the Details tab
  • The new "RequestEnd" event in the latest Q2 release will allow us to only refresh the Reports Tab only when we know data has been pushed back to the server, which will greatly reduce unnecessary requests
  • Uses Bootstrap Popovers attached to Grid labels to inform the user about the purpose of the column
  • Clicking the green "Scenario" button automatically refreshes the Grid in the current tab with information from the Scenario you selected
  • We use a combination of HTML5 data attributes and an "Edit" mode Grid function (plus server-side checks, of course) to immediately cancel out of Grid editing if you are looking at a financial scenario that was shared with you (read-only mode)
  • We will switch to using a WebAPI back-end and the ODataMediaFormatter in combination with the ASP.NET MVC server wrappers to power each Grid
  • We use the Editor of Kendo UI Web to edit our email templates that then run through the Razor parser for our data-driven emails; these are combined with our Bootstrap for email CSS and then pre-processed with PreMailer before being sent through SendGrid
  • As you can see, we're still in the process of tweaking our Bootstrap for Kendo UI template, but it is coming along nicely
  • Our next major release will include several graphs powered by Kendo UI DataViz, which will go on the Property Details page and the Reports and Statistics sections
  • Bootstrap for ASP.NET Razor - which we built - will be released shortly and will also be pushed to NuGet

One of the things that caught my attention with AdvancedREI was its combined use of Bootstrap and Kendo UI Web in the site's design. Here, you can see how Popovers are used to provide more contextual information for columns in the Grid of Kendo UI Web:

 AdvancedREI with Bootstrap Popovers

AdvancedREI with Bootstrap Popovers

Another example is the use of Navs to pivot on the financial data that's bound to the Grid:

 AdvancedREI with Bootstrap Navs

AdvancedREI with Bootstrap Navs

Bootstrap is a popular front-end framework for web developers. As a consequence of people liking the look of Bootstrap, web developers have started producing Bootstrap themes for frameworks. As a result of the work accomplished, the AdvancedREI development team has produced a Bootstrap theme for Kendo UI. You can check out the source up on their GitHub repository, BootstrapForKendoUI. It's definitely worth checking out if you're considering a design that combines the styling of Bootstrap with the power of Kendo UI.

So, there you have it; another example of developer awesomeness with Kendo UI. Please do check outAdvancedREI and sign up for a beta account to kick the tires for yourself. And if you have a story of being awesome with Kendo UI that you'd like to share with us, please let us know!

Kendo UI Q2 2012 Release Keynote on YouTube

In case you missed it: A few hours ago, we shipped the Q2 2012 release of Kendo UI. This is a significant release for our team and it’s one that we’re tremendously excited about. Here’s the rundown:

For a deeper runthrough of what’s new, please make sure to read Brandon Satrom’s blog post entiled, What’s New in Kendo UI Q2. If you’re looking for a walkthrough of what’s new in this release, you can watch the webinar recording earlier this morning on YouTube:

HTML5 Forms Support in Kendo UI Mobile

HTML forms are used to collect data from the user through a series of input and selection elements. Prior to HTML5, the elements and input types defined for user input facilite general purpose scenarios. However, a number of challenges remain - specifically as it relates to the form and function of the elements when rendered to the user agent. Often, developers will have to use a combination of JavaScript and styling via CSS to achieve the desired result, which included the validation of data. The HTML5 specification helps to eliminate some of this work by defining new input types: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, and color.

Currently, these new input types are broadly supported across the major browsers available today. This includes browsers available on mobile platforms like iOS and Android.

Recently, I attended Web Directions Code in Melbourne. At this event, Tammy Butow (@TammyButow) delivered a presentation entitled, “Fantastic Forms for Mobile Web” where she provided an overview of the form input types introduced in HTML5. It was encouraging to hear her evangelise their use in mobile web applications. And I was even more encouraged when I had a chance to show her the work we had conducted around these new elements with Kendo UI Mobile.

In the Q1 2012 release of Kendo UI Mobile, we introduced support for many of the new HTML5 input types, including text, password, search, url, email, number, tel, file (not in iOS), date, time, month, and datetime. With Kendo UI Mobile, we provide a consistent, native-like experience across the platforms we support:

HTML5 Forms Support in Kendo UI Mobile
HTML5 Forms Support in Kendo UI Mobile

Using these HTML5 form elements and input types is fairly trivial with Kendo UI Mobile:

In this example, you can see that we’re leveraging some of the new input field types introduced in HTML5. These fields are defined with a View structure with a nested ListView for displaying each element.

Some notes worth mentioning:

  • The input elements with a picker use the native one from the current platform if it is supported.
  • HTML5 form elements are fully functional only on the following platforms: iOS 5.x+, Android 4.x+, BlackBerry 6.x+, BlackBerry Playbook 1.x+.
  • The styling will still work on older platforms, but the functionality will be limited to text input only.

TeamPulse and Kendo UI

Given the nature of our business, we believe strongly in dogfooding our own software at Telerik. Not only does it allows us to build better products, it allows us to experience how customers interact with our technology on a day-to-day basis. In this blog post, I wanted to show you how the TeamPulse development team was able to successfully leverage Kendo UI Web and Kendo UI DataViz to build new capabilities for its latest releases. If you wish to “follow along at home”, please feel free to check out the online demo of TeamPulse xView™:

DEMO - Cross-project Dashboard TeamPulse xView

A Quick Introduction to TeamPulse

TeamPulse is project management software based on Agile best practices. It features many capabilities to support team members on a project, including iteration tracking, requirements gathering, feedback capturing, and much more. Earlier this year, the team released TeamPulse xView, a cross-project dashboard extension for TeamPulse:

When considering extensions for TeamPulse, the development team wanted to address the concerns of customers who wanted to use TeamPulse on mobile devices. At the time when planning was occuring for xView, the TeamPulse team had targeted Silverlight as its runtime environment for its front-end interface. Going forward, they wanted to take a bet on HTML5 because of its strengths for a broad delivery model. Also, the team knew about the work being done by our team and wanted to take a dependency on Kendo UI. The end result was a product that exceeded everyone’s expectations:

Fortunately for the TeamPulse team, the controls were more then up to the task. After only a few days, our developers were commenting on just how easy the controls were to use. As with any product that’s early in it’s development cycle, we discovered a few minor issues with the controls. But as is expected with Telerik, their support was first class. We were provided with internal builds that address our issues, usually within a day or two.

The xView features were rolled out in February 2012. The entire development was completed in less than 10 weeks and consumed less than ½ of our development effort over that time, making this one of our most cost effective new feature sets. The feature has been very well received by our user community and we’re planning on adding new features in the upcoming months, all built with the Kendo controls and making use of some of the new features in their latest March 2012 release.

Let’s explore how the TeamPulse team was able to target Kendo UI for its front-end user experience…

TeamPulse xView - My Perspective View

My Perspective view is ideal for tracking your own work across all the projects you are on:

My Perspective View
My Perspective View

This view uses a couple of DropDownList widgets to filter the PanelBar by project and its assigned work. The PanelBar contains a TreeView that is used to display each work item and allows users to enter data through a Window that’s triggerred through mouse or touch input:

My Perspective - Edit Window
My Perspective - Edit Window

The My Perspective view provides a good example of how to integrate Kendo UI widgets and framework abstractions into your designs. As you can see, they are complementary to the overall user experience.

TeamPulse xView - Project Status View

The Project Status screen is a real-time heat map that gives users a complete view into the progress and health of all their projects:

Project Status View
Project Status View

This view is one of my favorites because it uses many aspects of the Kendo UI Framework as well as a number of widgets from Kendo UI Web and Kendo UI DataViz. These include:

  • kendo APIs: used for toString and parseDate utility functions
  • kendo.culture: used to display localized strings
  • kendo.format: used to formatted dates and strings
  • kendo.ui.progress: used to display an animated GIF to inform the user that the view is fetching remote data
  • DataSource: used to retrieve remote JSON-formatted data from TeamPulse backend
  • Grid: used to display the list of projects or iterations
  • Templates: used in the Grid for each item

Here, the TeamPulse development team did something really clever: they uses the Chart widget to generate sparkline-like burn down charts:

Burn Down Sparklines (featuring the Chart widget of Kendo UI DataViz)
Burn Down Sparklines (featuring the Chart widget of Kendo UI DataViz)

A burn down chart is used to show the amount of outstanding work over time.

The reason why I like this use of the Chart widget here is because of its effective use of the space; it provides users with a quick, at-a-glance estimate of when all of the work will be complete. In fact, creating them turns out to be fairly simple. The trick is to constrict the dimensions of the Chart through CSS rules on the containing element:

In this example, the class, burndown-wrap is applied to a containing td element that contains the Chart. When the Chart is created, the surrounding dimensions are applied to the SVG that ultimately generated.

Each row of the Grid may be expanded to reveal a detail template:

Project Status View (Expanded)
Project Status View (Expanded)

This expanded view provides the user with more information retailing to the project or iteration, including blocking bugs, late items, and unplanned stories. This information is displayed within seperate Grid widgets and are contained inside TabStrip. It’s worth noting that each Grid employs a row template:

Project Details (featuring the TabStrip widget of Kendo UI Web)
Project Details (featuring the TabStrip widget of Kendo UI Web)

Also, a larger version of the burn down chart is provided, along with a DropDownList that can be used to pivot on this data:

Burndown Chart (featuring the DropDownList widget of Kendo UI Web and the Chart widget of Kendo UI DataViz)
Burndown Chart (featuring the DropDownList widget of Kendo UI Web and the Chart widget of Kendo UI DataViz)

Because this is a Chart widget, mouse and touch interactions are supported. When the user hovers over a particular data point, notice how the Chart displays its value. This level of interactivity provides better useability for users when they wish to obtain more information about the data visualization being shown.

TeamPulse xView - People Status View

The People Status view shows the progress, activity and workload of individual team members across all the projects they are working on. As is with the Project Status view (above), the People Status view includes a sparkline-like chart that shows a quick, at-a-glance view of the work completed by an individual over the past seven (7) days:

People Status View
People Status View

This sparkline-like chart is a custom control that was built by the TeamPulse development team:

Sparkline-like Chart
Sparkline-like Chart

Who says you need Kendo UI for everything? ;)

For reference, the bars with a light blue background indicate weekend days and the bars with a light red background indicates days with no work completed. What’s more, when you interact with this chart, you can get a quick snapshot of the completed work for the day.

TeamPulse Time Tracking

The R3 2012 release of TeamPulse includes new functionality in the form of TeamPulse Time Tracking, which provides a time management capability to project members. Specifically, TeamPulse Time Tracking provides two views for team members to track time:

  • Time Entries View
  • Timesheet View

The Time Entries view displays all individual time entries made by team members across all your projects:

TeamPulse Time Tracking - Time Entries View
TeamPulse Time Tracking - Time Entries View

The Time Entries view features two Calendar widgets associated with a Grid to display a list of time entries made by a team member.

The Timesheet view uses a number of controls from Kendo UI Web. Its purpose is to display all of the work items for a given period of time plus the time spent on each one task per day:

TeamPulse Time Tracking - Timesheet View
TeamPulse Time Tracking - Timesheet View

The Timesheet view features a TreeView that contains a number of entries for particular projects or iterations. For each entry, a combination of templates and widgets are used to render out a entry form that’s intuitive for end users.

Well, there you have it. As we’ve seen, the TeamPulse development team has been incredibly successful integrating Kendo UI into products like xView and the new Time Tracking capability that was introduced in the R3 2012 release. I hope this blog post helps inspire you to build amazing sites and applications with Kendo UI. If you’ve built something already, we’d love to see it. Drop us a line and let us know where we can see your Next Big Thing.

HTML Helper Basics of Kendo UI for ASP.NET MVC Beta

HTML Helper Basics - Kendo UI for ASP.NET MVC Beta

Last week, we shipped the Beta release of Kendo UI for ASP.NET MVC. If you haven’t already done so, I’d encourage you to check it out, especially if you’re building websites with Kendo UI on ASP.NET MVC. In this blog post, we’ll explore three basic concepts of using the HTML helpers of Kendo UI for ASP.NET MVC Beta; declarations, events, and configuration.

Download, Install, Integrate

To begin, the first thing we’ll need to do is to download and install the MSI package for Kendo UI for ASP.NET MVC Beta (7.8 MB).

Download Kendo UI for ASP.NET MVC Beta

The installer will deploy a number of files to the destination folder, including the .NET assembly for Kendo UI for ASP.NET MVC, its associated JavaScript and stylesheet dependencies, documentation, and a set of examples highlighting the HTML helpers of Kendo UI for ASP.NET MVC Beta (more on this later). Important! The examples will NOT be installed unless ASP.NET MVC 3 is present.

Once the installer finishes, the next step is to integrate Kendo UI for ASP.NET MVC into your new/existing project(s). The steps to do this relatively simple. In fact, we’ve published a step-by-step guide to show you how to do this. It should only take a few minutes.

HTML Helpers

Now that everything is ready to go, the next step is to start using the HTML helpers that encapsulate the widgets for Kendo UI Web and Kendo UI DataViz.

HTML helpers are lightweight objects responsible for generating markup within a view. Kendo UI for ASP.NET Beta renders Web and DataViz widgets through as a set of custom HTML helpers defined in the Kendo.Mvc.UI namespace:

Web HTML Helpers

DataViz HTML Helpers

Declarations

Let’s start with a simple HTML helper that allows us to examine how they operate. In this case, let’s assume the Calendar HTML helper:

When the view is rendered, a Calendar widget is displayed in the browser:

Calendar Widget

Viewing the source, we see that the Calendar HTML helper is emiting the necessary markup and script to render the Calendar widget on the page:

Events

As you can see, the ID of the target div element (above) matches the Name of the Calendar HTML helper. This is intentional as well as mandatory; the ID provides a means of the auto-wiring of client-side events when configuring the Calendar HTML helper:

In the code snippet(s) above, the Calendar HTML helper has been configured to have the resulting Calendar widget that’s generated to invoke change when triggered by a user’s interaction. Viewing the source, we see that the change event is appropriately configured:

As an aside, if you’re targeting the Razor view engine, you can also utilize a templated Razor delegate to handle change events:

Configuration

Now, there’s a good chance that we’ll want to configure the Calendar HTML helper to modify its output and/or behavior. The APIs of the HTML helpers allow us to accomplish this task easily:

When the view is rendered, the Calendar widget is displayed in the browser with its selected value set to today’s date:

Calendar Widget with Value Configuration

It’s worth noting how readable the code becomes through the fluent interface that’s provided through method chaining. This style lends itself well to developers who have experience with Kendo UI already; it’s similar to the one used to configure widgets for Kendo UI Web, Kendo UI DataViz, and Kendo UI Mobile. In the code snippet(s) above, the Value of the Calendar HTML helper is set to today’s date, which generates the following output to the client:

So, there you have it. In this blog post, we covered three basic concepts of using the HTML helpers of Kendo UI for ASP.NET MVC; declarations, events, and configuration. In future blog posts, we’ll explore more advanced topics like databinding, migration, templates, and much more! In the meantime, please take the time to download the Beta and give it a try for yourself. Also, please send us your feedback! We really appreciate it.

ASP.NET Web Forms and HTML5, Part 1

HTML5 Development for ASP.NET Developers: ASP.NET Web Forms and HTML5

This is the fourth module in the ongoing course, HTML5 Development for ASP.NET Developers. In case you’re just joining us, here’s what we’ve covered so far:

  1. Hello jQuery
  2. Hello Services / WebAPI, REST, JSON and AJAX
  3. Hello HTML5

In this module, we’ll focus on ASP.NET Web Forms.

ASP.NET Web Forms has been around for a very long time. Over the years, it has evolved dynamically. Today, it provides a robust platform for building web applications, including those that target HTML5.

In the previous article of this series, Burke Holland (@BurkeHolland) provided an excellent overview of HTML5 and its support in Visual Studio. I would strongly urge you to review his blog post if you’re new to HTML5, as it provides a number of great tools and resources worth checking out.

In this blog post, I’ll be taking a different viewpoint on HTML5; developers targeting ASP.NET Web Forms and HTML5. In part 1, I’ll cover the high level aspects and a bit of the background. In part 2, I’ll go into much deeper detail about the technical aspects of ASP.NET Web Forms and HTML5.

Background

I remember my first experiences with ASP.NET Web Forms quite well. This was over a decade ago when ASP.NET was known as Active Server Pages+ (ASP+). I recommend reading Dave Sussman’s MSDN article on ASP+ if you’re interested in taking a trip down memory lane.

Back in 2000, ASP+ represented a complete departure from the way websites were traditionally built on the Microsoft stack. Prior to its introduction, developer cobbled together websites with a combination of VBScript, server-side includes, COM components, and a lot of coffee. The developer experience of ASP was incredibly frustrating to say the least.

When ASP+ introduced the concept of Web Forms, it took off like a rocket. For developers, it was a huge boost to productivity:

  • It supported an event model that enabled developers to build web applications in a similar manner as the rapid development environment of Visual Basic 6.
  • It provided a framework and runtime environment that elevated object-orientation to the forefront.
  • It enabled developers to build web applications in a much more productive manner than ASP through its rich object model.

While the branding for ASP+ eventually changed to ASP.NET, the ideas remained the same. And for the most part, not a great deal has changed. In fact, many of the original abstractions introduced in the first version of ASP.NET, such as Web Forms, remain in-place and are widely used today.

This, of course, begs the question: if a technology ASP.NET Web Forms is such a mature technology, can it be used to build applications in HTML5? I’m happy to state that the short answer is a resounding “yes”. However, the longer answer is somewhat nuanced. Depending on which version of ASP.NET you’re building against, your experience (and productivity) will vary. However, the good news is that much like wine, the story around HTML5 support in ASP.NET (and in ASP.NET Web Forms) is getting better as time goes on.

ASP.NET Web Forms and HTML5

There’s nothing preventing you from supporting HTML5 in ASP.NET Web Forms today. The reason for this is simple: HTML5 elements are defined as markup with a client-side event model. There’s no requirement on the server. Also, it’s worth noting that the HTML elements and attributes emitted by ASP.NET server controls are well formed and validate against the HTML5 specification. That stated, there are many developers who would like built-in server controls to leverage the new aspects of HTML5 like semantic elements. Until recently, this scenario was generally supported two ways: custom controls or content adapters.

Custom controls have been supported since the beginning of ASP.NET. Often, they are created as aggregates of other controls found in the framework. However, they are also created to new server controls that developers can use in-place of existing ones found in ASP.NET. Creating a custom control is fairly trivial and there a many articles online that show you how to do this. In the case where you’re looking to emit specific HTML5 elements, you can accomplish this through the Render method of the UserControl class.

Another mechanism of supporting HTML5 elements is through content adapters, which were introduced in ASP.NET 2.0. Content adapters are powerful because they allow you to specify how specific controls should emit markup – including build-in controls like the Calendar. Don’t like the default rendering of a particular control? Why not write a control adapter to modify its output to include HTML5 semantic elements? For more information about content adapters, make sure to check out Fritz Onion’s article on MSDN.

Today and Tomorrow with ASP.NET Web Forms and HTML5

Web Standards Update

There have been a lot of improvements made to ASP.NET Web Forms over the past year. Developers targeting ASP.NET Web Forms and looking to support the latest trends in web development should be encouraged by recent announcements made by teams at Microsoft. However, that doesn’t mean you should wait until HTML5 is supporting entirely by ASP.NET and Visual Studio. The reality is that the specification continues to evolve. This means that has parts of HTML5 start to stablize, one should expect to see a gap in its support in Visual Studio and ASP.NET. However, as we demonstrated throughout this blog series, these gaps are easily bridged through other tools and framework that are available.

Preliminary support for HTML5 IntelliSense and validation was first introduced in Visual Studio 2010 SP1 in the beginning of 2011. However, it was somewhat limited in its effectiveness; integrating support for HTML5 IntelliSense and validation presented some serious challenges given the flux in the HTML5 specification at the time. In June 2011, the Web Platform and Tools team released the Web Standards Update, which added HTML5 and CSS3 support to Visual Studio 2010 SP1. If you haven’t taken the time to download and install this extension, I would strongly encourage you to do so. Essentially, it’s an extension that adds HTML5 and CSS3 IntelliSense and validation to Visual Studio.

I would recommend reading Scott Hanselman’s blog post that covers the Web Standards Update from a high level perspective. While I can appreciate all of the work that’s gone into supporting HTML5 and CSS3 through the Web Standards Update, some important parts – such as HTML5 form elements – are left unsupported. The good news is that support is coming in the next version of ASP.NET.

Looking Ahead to Visual Studio 2012 and ASP.NET 4.5

Visual Studio

There are many exciting improvements planned for Visual Studio 2012 and ASP.NET 4.5. For developers targeting HTML5 with ASP.NET Web Forms, there are a number of features worth noting in the next release. Here’s a table I stole repurposed from MSDN that highlights just of the few things to look forward to:

 

Feature

Description

Model binders

Web Forms now supports model binding, which lets you bind data controls directly to data-access methods. ASP.NET automatically converts data from form fields, query strings, cookies, session state, and view state into method parameters. You can use these parameters to select data from or make updates to the database. (This technique is similar to model binding in ASP.NET MVC.)

Strongly typed binding expressions in data controls

You can now write strongly typed, two-way data-binding expressions in Web Forms data controls, instead of using Bind or Eval expressions. This approach lets you access complex properties in data controls. These expressions can be used with the new model binding feature.

Unobtrusive JavaScript for client-side validation

Unobtrusive validation moves the code for client-side validation into a single external JavaScript file, which makes pages smaller and faster to load. It also provides better caching of script files.

HTML encoded data-binding expressions

New syntax lets you encode HTML output in page markup.

Fallback support for content distribution networks (CDNs) in the ScriptManager control

When you set the EnableCdn property of the ScriptManager control, the control tests whether the script was loaded successfully from the CDN. If not, the control falls back to loading the script from an alternate (local) location.

Support for HTML5 form types

You can use HTML5 elements like email, tel, url, and search in Web Forms pages.

Improved paging in the GridView control

The new AllowCustomPaging and VirtualItemCount properties of the GridView control let you customize paging functionality. These new properties remove the need for the control to retrieve all rows from the data source each time a new page is displayed.

Reference: ASP.NET Web Forms - ASP.NET 4.5 and Visual Studio for Web Release Candidate

Although it’s not specifically related to HTML5, I am also looking forward to leveraging the new bundling and minification support that’s being introduced to ASP.NET 4.5. Effectively, this will allow you to structure your server-side markup to point to a script or style directory, and have the ASP.NET runtime automatically bundle and minify all of its resources:

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/Scripts/js")

Awesome stuff!

Related Links and Resources

There are many sites worth checking out if you’re interested about learning more about HTML5 in ASP.NET Web Forms. Here are just a few:

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!