TeamThing: A HTML5 Mobile App Demo

As some of you may recall, during Kendo UI’s huge Q1 release online keynote, I briefly showed a demo mobile app called “TeamThing.” The app is something I worked-on to show the capabilities of Kendo UI Mobile for the release, but it was always my goal to put some more polish on the app so I could share it with everyone. After weeks of traveling to speak at HTML5 events and attend meetings around the globe, I’m finally able to provide an update!

As of today, the complete TeamThing demo source is available on GitHub.

I didn’t stop there, though. A live running version of the TeamThing app is also available so you can test Kendo UI Mobile on your mobile device and experience first-hand Kendo UI Mobile’s incredible automatically adapting UI. If you visit the app from an Android, iOS, or Blackberry device, you’ll get an experience that looks native.

To try the live demo, simply point your mobile browser to http://teamthing.apphb.com/mobile/index.html. The current demo does not let you create new user accounts (that’s coming), so you can use these credentials:

Email: demo@demo.com
Pass: 1234

Super secure.

I know most of you have probably already popped the demo open in a new tab, so take a look, and then let me tell you a little more about this app.

App Concept & Workflow

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.

Workflow

In the current demo, TeamThing starts with a log-in screen. If you authenticate properly and you’re a member of multiple teams, you must choose a team to view (otherwise, TeamThing will default to your one and only team). Finally, you’ll be shown a view of your current “Things” (conceptually similar to tasks, but less restrictive).

From the “Things” view, you can:

• Add new Things (via the Add button)
• View Thing details
• Change Thing status (InProgress/Completed/Delayed/Deleted)

There is more, of course, but that’s the core of the TeamThing demo we’ll focus on for now.

Kendo UI Mobile In Action

The main show with TeamThing, of course, is Kendo UI Mobile. Much, but not all, of Kendo UI Mobile is used in this app, along with pieces from Kendo UI Web (I’ll add DataViz later). In particular, you’ll see:

• Application: The Kendo UI Mobile Application provides the entire structure for the mobile app. It is initialized in “index.html” and then handles all of the async view loading, view transitions, and much more for me.
• View: There are more than 10 views in the current demo, some very simple, some more complex. For those of you familiar with ASP.NET, you can think of these Views as “ContentPages.”
• Layout: A few different layouts are used in TeamThing depending on the view’s purpose. Again, borrowing the ASP.NET analogy, Layouts are like “MasterPages.” My views will be rendered in layouts on the client.
• Buttons: Used all over the place, complete with customized styling to show-off how easy it is to tweak the visual appearance of widgets in Kendo UI Mobile.
• ListView: ListViews are like the Grids of mobile apps, both in terms of complexity and common usage. Kendo UI Mobile’s ListView is the backbone of the “Things” view in TeamThing.
• NavBar: NavBar (think of this as the title bar area) is one of the more dramatically adapting UI widgets in Kendo UI Mobile. It shows-up on the top of iOS apps and on the bottom of Android apps. It is used in all TeamThing layouts.
• ScrollView: Providing simple “swipe” through a list of items, the ScrollView is used in the “Team” view to swipe through different team members (pictured via their Gravatars).
• Switch: Used right-up front in the TeamThing login screen. The Kendo UI Mobile Switch not only adapts to platforms, but platform versions, too (more on this in a moment).
• TabStrip: This is the primary form of navigation between major sections of TeamThing. Like the NavBar, this UI widget changes position depending on the platform (iOS/Blackberry or Android).

That’s a long way of making a simple point: if you want to see the pieces of Kendo UI Mobile used together, TeamThing is your ticket.

I will talk more about the architecture of TeamThing in future posts, but for now, if you do start looking at the code, be sure to read the GitHub project’s ReadMe. It contains extra discussion of the project structure and code.

Adapting UI In Action

One of the hallmarks of Kendo UI Mobile is its automatically adapting UI. The goal is to let developers focus on the functionality an app and less on trying to customize/maintain multiple versions of the app for different mobile platforms.

It’s the closest you’ll get to “write once, run everywhere” that doesn’t become “write once, suck everywhere.” Rather than pushing a “one size fits all” UI metaphor on all devices, Kendo UI Mobile helps you look and feel “right” (aka Native) on all of the major mobile devices.

Let’s look at some examples of how TeamThing adapts to different platforms with the help of Kendo UI Mobile:

Login Screen (iOS, Android, Blackberry)

iOS (4.x)	Android (2.x)	Blackberry

As you can see, each device shows buttons, toggles, and input styles all accurate for a native look-and-feel. This is all being done by Kendo UI Mobile as it detects each device. In fact, the adapting even extends to major UI differences between OS versions. Here’s what the log-in screen looks like on iOS5 (pay attention to the Switch, which goes from square to round):

Things List

iOS	Android	Blackberry

In this view, you can see one of the more major layout transformations Kendo UI Mobile can handle. In iOS, you see the NavBar on top, TabStrip on the bottom, and all of the iOS specific styling (note: the icons are provided by Kendo UI Mobile, too). In Android, you see the positions for these elements swap to achieve a native look on Android!

You also see that I’ve added text to the “Add” button for Android. This is accomplished using a neat “escape hatch” in the Kendo UI Mobile auto adapting system that lets you define device specific layouts.

<div data-role="layout" data-id="foo" data-platform="android">
  <div data-role="header">...</div>
</div>

It’s another way we help you avoid “write once, suck everywhere.”

ProTip: Testing Kendo UI Mobile Adapting UI with Chrome

Nothing replaces actual testing on devices when it comes to mobile apps, but that’s not always practical for day-to-day development. If you just want to see how your app built with Kendo UI Mobile will adapt to different devices, you can use Google Chrome (or any Webkit-based browser) and simply adjust the browser’s User Agent.

In Chrome, this is easy:

1. Simply open the Chrome Developer Tools (F12)
2. Click on the “Gear” icon in the lower right corner
3. And check the box to “Override User Agent.”

From here, Chrome gives you built-in options for iPhone (4/5), Android, Blackberry, and even Meego User Agents. Changing this value and refreshing your Kendo UI Mobile app will help you preview the automatically adapting UI behavior.

Installed Experience

By default, Kendo UI Mobile will to try to hide the address bar in a mobile browser so the app looks as native as possible (as you can see in the iOS screenshots above). Kendo UI Mobile also automatically renders the essential mobile meta tags for you so you don’t have to add them manually. Here’s what Kendo UI Mobile adds to TeamThing when the Application is initialized:

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">

Nice.

On iOS, we can make our HTML5 mobile app look even more native if we “install” it to the homescreen. For example:

First, click the "Share” button in Mobile Safari to open the action sheet (TeamThing will prompt you to do this by using AddToHomescreen.js, pictured below left).

After you click “Add to Home Screen,” you’re shown the app’s icon and name. These are both configured within the Kendo UI Mobile application. Name uses the HTML page’s <title> value, and Kendo UI Mobile creates the meta tag for the icon when properly configured:

var app = new kendo.mobile.Application($(document.body), {
    icon: 'apple-touch-icon.png',
    ...
});

And just like that, the app is installed on the homescreen, nearly indistinguishable from other native apps. When you load it from the homescreen, you get a “chromeless” experience (no browser UI), making the app built with Kendo UI Mobile look really native.

What’s Next?

There are TONS of concepts and details contained in TeamThing that I’ll be covering over time in these blogs. For now, check-out the app, look at the source, and use TeamThing to help improve your understanding of Kendo UI Mobile.

Then help make it better!

Since TeamThing is on GitHub, I’ll take pull requests and bug reports/enhancement requests. There are already some known issues listed in TeamThing’s GitHub Issues tracker, but I’d love to get more feedback so we can make TeamThing an even more helpful demo.

What do you think? Any burning questions after your first review? I hope you find it helpful and see it as a extra proof that Kendo UI Mobile is the fastest way to build cross-platform mobile apps!