Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Instant Kendo UI Mobile

You're reading from   Instant Kendo UI Mobile Practical recipes to learn the Kendo UI Mobile library and its various components for building mobile applications effectively

Arrow left icon
Product type Paperback
Published in Jul 2013
Publisher Packt
ISBN-13 9781849699112
Length 60 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Sagar Ganatra Sagar Ganatra
Author Profile Icon Sagar Ganatra
Sagar Ganatra
Arrow right icon
View More author details
Toc

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.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime