Hola a todos, los layouts y las views son el primer componente con el que se tiene contacto cuando iniciamos a trabajar con Kendo UI Mobile, el primer componente es el layout, el cual no es de uso obligatorio y permite definir el header y footer para una o más vistas de la aplicación, su definición es bastante sencilla:


<div data-role="layout" data-id="mylayout">
    <header data-role="header">
        <div data-role="navbar">
            Hi Kendo UI Mobile
        </div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="home" href="#home">Home</a>
            <a data-icon="settings" href="#settings">Settings</a>
        </div>
    </footer>
</div>

Para definir el div que va a actuar como el layout, añadimos el atributo data-role=”layout” y le asignamos un id con el atributo data-id, luego simplemente se define el header y el footer de nuevo haciendo uso del atributo data-role con header/footer según sea en caso.

Una vez definido el layout, seguimos con las vistas (views), y acá es importante mencionar que Kendo UI Mobile maneja en concepto de multi-página, es decir, en un único archivo html es posible más de una vista, para hacerlo basta con definir un div, añadirle el atributo* data-role=”view”* para especificar que se trata de una vista y un id, así por ejemplo para el demo definimos las siguientes dos vistas:


<!--View Home-->
<div id="home" data-role="view">
    Home View
</div>
<!--End View Home-->

<!--View Settings-->
<div id="settings" data-role="view">
    Settings View
</div>
<!--End View Settings-->

Finalmente solo resta inicializar la aplicación, y aprovechamos la inicialización para definir el layout que usarán las vistas así como la vista inicial:


var app = new kendo.mobile.Application(document.body,{
    layout: "mylayout",
    initial: "home"
});

La página completa se ve como:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="Content/kendo.mobile.all.min.css" type="text/css" rel="stylesheet">
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script src="Scripts/kendo.mobile.min.js"></script>
    <title>Kendo UI Mobile</title>
</head>
<body>
    <!--Layout-->
    <div data-role="layout" data-id="mylayout">
        <header data-role="header">
            <div data-role="navbar">
                Hi Kendo UI Mobile
            </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-icon="home" href="#home">Home</a>
                <a data-icon="settings" href="#settings">Settings</a>
            </div>
        </footer>
    </div>
    <!--End Layout-->

    <!--View Home-->
    <div id="home" data-role="view">
        Home View
    </div>
    <!--End View Home-->

    <!--View Settings-->
    <div id="settings" data-role="view">
        Settings View
    </div>
    <!--End View Settings-->

    <script>
        var app = new kendo.mobile.Application(document.body,{
            layout: "mylayout",
            initial: "home"
        });
    </script>
</body>
</html>

Ahora si probamos la app:

kendouiviews

Poco a poco iremos viendo otras características de Kendo UI, saludos!