Using the initial configuration option, we can set the initial view to be displayed after the app is initialized:

new kendo.mobile.Application($(document.body), {
  initial: "intialViewID"
});

Using the loading configuration we can set the text shown when the loading animation is displayed. If this value is set to false, loading animation will not be displayed. The text needs to be wrapped in <h1> </h1> tags:

new kendo.mobile.Application($(document.body), {
  loading: "<h1>Loading...</h1>"
});

As we know, Kendo renders platform-specific UI. However, it provides the option to force a particular platform's look and feel on all the platforms using the platform configuration option:

<script>
  new kendo.mobile.Application($(document.body), {
    platform: "android"
  });
</script>

Even though this option is available, using a Flat UI theme is the recommended way of building apps with a consistent look and feel across platforms.

The Application object helps to show and hide loading animation programmatically. The showLoading() method of the Application object displays the built-in loading animation of your Kendo Mobile app:

var application = new kendo.mobile.Application();
application.showLoading();

Using the hideLoading() method of the Application object, we can hide the loading animation.

var application = new kendo.mobile.Application();
application.hideLoading();

When we develop a fully functional application, typically we will encounter a scenario where we need to get a reference of the currently displayed view in our JavaScript code.

The view() method of the Application object provides the reference of the currently displayed view object:

var application = new kendo.mobile.Application();
//writes title of the displayed view to the console.console.log(application.view().title);

In the previous examples we saw how we can navigate to other views declaratively. But what if you want to navigate to a screen using JavaScript? There is a solution for that too. The Application object that we created in our first example has a navigate() method, which can be used to perform navigation between views using JavaScript code. The method takes two parameters: URL to navigate, and transition effect (optional).

This is how we initialized our Kendo UI Mobile application:

var app = new kendo.mobile.Application();

Now we can make use of this object app to invoke the navigate(url, transition) method to navigate to another screen:

app.navigate("Trailers.html")

You can even use:

app.navigate("#mt-about-view", "slide")