As we have seen in the earlier recipes, a mobile application consists of a single HTML page with one or more mobile views in it. A Kendo Mobile View represents the screen in a Kendo Mobile application and it is a widget with the data-role attribute set to view. There are various types of views that can be added to the document, such as listView, modalView, scrollView, and others. The next few recipes focus on adding these views to the document.
A large application contains several views and specifying all of them in a single page would increase the size of the document.
Specify these views in separate pages (HTML pages) and specify the location of the HTML page in the
hrefattribute of the anchor element.The following is sample code that defines two buttons that are placed in the index page of the application:
<div data-role="view" data-title="Index View"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <div data-role="view"> <a href="#localview" class="button" data-role="button"> Local View </a> <a href="./remoteview.html" class="button" data-role="button"> Remote View </a> </div> </div>
The previous code snippet defines an Index view, which includes a header containing a Navbar widget. Inside the Navbar widget, there is a span element with its data-role attribute set to view-title. This allows different views to define their choice of title to be shown in the Navbar widget. Notice that the container view defines the data-title attribute. The value of this attribute will be shown when the mobile application is initialized.
There are two buttons on the page, one to show a local view and another to show a remote view. Now let's define a widget that will be shown when you click on the localview button.
<div data-role="view" id="localview" data-layout="mobile-view" data-title="Local view"> From Local view </div>
The previous div element is added to the same document and it has an id attribute that is, localview. The previous view widget also specifies the data-layout attribute. Now let's define a layout for this view as follows:
<div data-role="layout"
data-id="mobile-view">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button"
data-align="left"
data-role="backbutton">
Back
</a>
<span data-role="view-title"></span>
</div>
</header>
</div>The previous layout defines the header with a Navbar and it is very similar to the viewthat we defined earlier, except that this layout defines a widget backbutton (data-role='backbutton'). This widget is used to navigate to the previous page in the browser's history.
Now, when you tap on the Local view button, you will see that the application is navigated to the local view, the Navbar shows the title as Local view, and the body of the page will show the text From local view. Also, on tapping the back button defined in the header, you will be taken to the index page. We have already defined an anchor element in the document with it's href attribute set to remoteview.html. Now let's create a new page, remoteview.html, and define a view in it as follows:
<div data-role="view" data-layout="mobile-view" data-title="Remote view"> This page is from Remote view </div>
This widget is similar to the widget that we defined while creating a local view, except that it is defined in a different document, that is, remoteview.html. Also notice that it makes a reference to the layout widget that we defined in the index document. Now, when you tap on the remote view button, the view defined in the remoteview.html page will be shown.
Note
Please note that the CSS and JavaScript files required for the remote document (remoteview.html) should be specified in the index document. This is because these files will not be evaluated when they are specified in the remote document.
When you tap on the Local view button, the view defined in the same document is shown; when you tap on the Remote View button, the view defined in remote.html is shown.
Here we will see how you can define transition effects while navigating from one view to the other.
While transitioning from one view to the other, you can specify the transition effect that needs to be applied, using the data-transition attribute. The following values can be set as value to the data-transition attribute:
slide: This transition effect slides the old view content to the left and the new view content slides in its place. You can specify the direction using the slide (direction). By default, the direction is left; the other option is right.
zoom: Here, the new view content zooms from the center of the old view. The old view content will fade out and the new view content will be shown.
fade: The new content fades in on top of the old view. The old view content will fade out, showing the content from the new view.
overlay: The overlay effect is similar to the slide effect, except that the previous view remains under the new one. The transition direction can be specified using overlay (direction). By default, the direction is left; other supported directions include right, up, and down.
In all of the transition effects mentioned, the content along with its header and footer are shown.
It is also possible to specify the transition effect for the entire application instead of specifying the data-transition attribute for each view widget in the document. When initializing the application using the Application object, specify the transition property with the desired effect as its value.
var app = new kendo.mobile.Application(document.body, {
transition: "zoom"
});This allows the transition effect to be applied to the entire application.