Framework7 | Tutorial Español | Parte 2
Bienvenidos a la segunda entrega de este tutorial de Framework7, si has llegado aquí direct@ y no has leído la primera parte de este tutorial, aquí la tienes :).
Como comentamos en primer capítulo, vamos a agregar un menú lateral a nuestra aplicación, este con apertura cuando el usuario arrastra la parte izquierda de la pantalla hacia el centro, además agregaremos unas páginas hijas con sus propios contenidos.
Siguientes Partes de este tutorial
Bien, empecemos por el menú lateral, su estructura es muy básica, simplemente debemos agregar la estructura a nuestro index.html ya que los estilos y demás están definidos en Framework7, partimos de la base del capitulo anterior.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/framework7.material.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<!--panel-overlay forma parte del menú, es la parte oscura que queda debajo-->
<div class="panel-overlay"></div>
<!--Este es el menú-->
<div class="panel panel-left">
<p>Este es mi menú lateral</p>
</div>
<!--Creamos el contenedor de vistas-->
<div class="views">
<!--Creamos el View principal-->
<div class="view view-main">
<div class="pages navbar-fixed">
<!--Añadimos la primera página-->
<div data-page="index" class="page">
<!--Esto es barra superior, menu, logo, etc-->
<div class="navbar">
<div class="navbar-inner">
<div class="center">Mi App con Framework7</div>
</div>
</div>
<!--El contenido de la página-->
<div class="page-content">
Este es mi contenido de la app, aquí será la primera pantalla que muestre la aplicación
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
app.initialize();
</script>
</body>
</html>
Como ves hemos agregado la estructura necesaria para mostrar un menú lateral, en este caso se compone de dos partes, un div con la clase panel-overlay que es el encargado de cuando se abre el menú aparece para proteger el contenido para evitar los scroll además también tiene la acción de cierre del menú.
Después tenemos otro div pero este si es ya el Menú, un menú lateral izquierdo (Se puede utilizar derecho).
Lo tenemos en la estructura pero el menú aún no se muestra, nos falta hacer dos cosas, una agregar Framework7() la opción de la acción slide agregamos algo a nuestro index.js, nos basamos como antes en el código de la parte 1 de este tutorial
//Variable global para el control con Framework7 (Puede ser cualquier nombre, en este caso utilizamos "myApp")
//Los valores que se pueden agregar al objeto Framework7 son varios, puedes verlos en http://framework7.io/docs/init-app.html
var $$ = Dom7; //$$ para manipulación del DOM no es necesario jQuery pero si se utiliza no tendremos conflictos
myApp = new Framework7({
material: true, //Activamos Material
swipePanel: 'left' //Activamos la acción slide para el menú
});
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true,
domCache: true //Activamos el DOM cache, para pages inline
});
var app = {
/*
Esta función initialize la llamamos desde index.html al final del documento,
cuando esto se ejecute lanzará deviceready y su correspondiente función "init".
*/
initialize: function() {
document.addEventListener("deviceready", this.init, false);
},
init: function() {
//Aquí el dispositivo está preparado
}
};
Esta opción es swipePanel: ‘left’ que hará que cuando deslicemos el dedo desde el borde izquierdo de la pantalla hacia el centro muestre el menú lateral.
Ya tenemos nuestro menú!
Ya podemos hacer un slide lateral para abrir nuestro nuevo menú, ¿Agregamos páginas a nuestro menú? Claro, vamos!
Para agregar páginas hijas a nuestra aplicación es muy facil, abrimos un nuevo archivo HTML le ponemos un nombre cualquiera y lo guardamos en la carpeta www de nuestra aplicación con el siguiente contenido
<div class="page" data-page="contacto">
//Aquí podemos agregar la barra superior
<div class="navbar">
<div class="navbar-inner">
<div class="left">Volver</div>
<div class="center">Mi primera página con F7</div>
<div class="right">Otra</div>
</div>
</div>
<div class="page-content">
Contenido de la página
</div>
</div>
Entre el contenedor con la clase page será nuestra página nueva, para mostrar otro contenido, cualquiera como formularios, galerías, información, etc.
Es un ejemplo simple de como mostrar una nueva página, os cuento cuales son sus elementos
En primer lugar tenemos un div con la clase page, este tendrá todo el contenido de la nueva página, en ella podemos agregar cualquier elemento, por ejemplo una barra superior para colocar un nuevo nombre al página.
Pero como funciona el control de páginas, es muy fácil, en los elementos <a> en el atributo href colocamos el nombre del archivo como si llamaras a un HTML externo, pero en el caso de Framework7 este no funciona así, y lo que hace es montar dentro de nuestro index en el view principal una nueva página por lo que no necesitamos agregar las referencias a los js´s ni tampoco css´s ya que lo contiene el archivo principal index.html.
En definitiva si nuestro nuevo archivo de página se llama contacto.html creamos un elemento href=»contacto.html» y cuando pulsemos abrirá la nueva página.
No acabamos aquí, si lo que queremos es abrirla a través de javascript, utilizando las maravillas de Framework7 usamos lo siguiente.
mainView.router.loadPage('contacto.html');
Utiliza la variable mainView ubicada en index.js en la linea 7, esta la agregamos en la primera parte del tutorial
Esto abrirá la nueva página como si pulsáramos en un enlace.
Y si quiero realizar un acción cuando esta página se abra?
Muy fácil! Framework7 posee una función que se ejecuta cuando se abre una página la función es onPageInit y se implementa de la siguiente forma.
myApp.onPageInit("contacto", function(){
console.log("La página contacto está abierta!");
});
El primer parametro «contacto» es el nombre de la página, este se encuentra en el archivo contacto.html en el div con clase page en el atributo data-page.
Además Framework7 también tiene otra función para ejecutarse cuando cualquier página se abre
$$(document).on('page:init', function (e) {
console.log("Una página está abierta");
})
El $$ lo definimos en index.js en la linea 3.
Esta función se ejecutará cuando cualquier página se inicie, el parámetro de la función callback contiene varios parámetros que nos pueden servir para distintos proyectos, encontramos un listado completo aquí.
Además no solo podemos controlar cuando se abre si no otras muchas acciones sobre páginas que las podéis encontrar aquí
Creo que no me dejo nada, cualquier duda usad los comentarios y recordad que estoy en Twitter!
En la siguiente parte del tutorial empezaremos a agregar componentes a nuestra aplicación, no olvides compartir este contenido!
Saludos y Happy Code!
