Rendering with native look and feel using adaptive rendering technique (Simple)

Today, developers are challenged to build applications that are not only rich in functionality but also render on different devices with native look and feel. Maintaining a different code base for different devices can slow down the developer productivity and will require more time and effort to get the right output.

The Kendo UI Mobile framework is designed to solve the mentioned problems. It allows developers to build great experiences for the mobile applications using HTML5 and JavaScript. The framework itself takes care of rendering the application on different devices and provides native look and feel on different platforms. This allows developers to focus on building the functionality and letting the framework handle the differences between different platforms.

In most of the recipes mentioned in the book, you would have seen the output that resembles the native look and feel of an iOS device. When you view the same application on an Android or Blackberry device, you will see that the application renders differently on these devices. The framework takes care of rendering the application on different mobile platforms in a way that gives a native look and feel to your application. The framework supports adaptive rendering on iOS, Android, and Blackberry platforms.

How to do it...

1. Let's take a look at the applications we have built in the previous recipes and see how they render on different devices. Applications containing Navbar and TabStrip will be displayed as shown in the following screenshot:

   

2. Notice how the application changes the layout on the Android device to show the TabStrip widget at the top and also the look and feel of the ListView widget. Another thing to notice here is that Navbar is not visible on the Android device. To force the application to the show the Navbar widget on an Android device, you can add the following CSS code snippet:

   .km-android .km-navbar .km-view-title
   {
     visibility: visible;
   }

   This forces the application to the show Navbar and it is rendered at the bottom of the screen:

   

The adaptive rendering capability of the Kendo Mobile framework certainly allows you to build applications rapidly without being concerned about its rendering on different platforms. However, in some scenarios, you would like to render the same look and feel across all platforms. For example, you would like the iOS look and feel to be applied across all platforms. The framework can be configured to force the look and feel of a particular platform. To do that, specify the platform property with the platform name as its value when initializing the application.

var app = new kendo.mobile.Application(document.body, {
  platform: "ios"    
  });

The previous code snippet will force the application to render the iOS look and feel on all platforms.