Inicializar Parámetros Tutorial Framework7 Español [Versión 3] 2018

Ha llegado el momento de inicializar Framework7 en la versión 3, es muy parecida a las demás versiones pero con algunos parámetros más, vamos a empezar por donde lo dejamos.

Teníamos esta estructura del archivo index.js

var $$ = Dom7;

var app = new Framework7({
  // Elemento padre de la app
  root: '#app',
  // Nombre de la App
  name: 'My App',
  // Id de la App
  id: 'com.myapp.test'
});

var mainView = app.views.create('.view-main');

var core = {
    init: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        console.log("Dispositivo Preparado");
    }
};

Exactamente igual como lo teníamos antes, ahora vamos a ver los parámetros que podemos añadir a nuestro objeto Framework7.

Parámetros Básicos

root: Es el elemento como su nombre indica, raíz, es el div que contendrá nuestra aplicación, esto se puede omitir si el elemento que está justo debajo de la etiqueta body es el elemento raiz.

id: El id de la aplicación o bundle.

name: Este será el nombre de la aplicación, es usado para los cuadros de dialogo y otros componentes de Framework7

version: Importante, para tener accesible el código de versión desde cualquier lugar de la aplicación, por ejemplo para enviarlo a nuestra API y dependiendo de la versión lanzar un resultado u otro.

theme: También importante será como se muestra nuestra aplicación si usáis tanto el diseño material design (md) o ios y lo vais a usar dependiendo de la plataforma podéis omitirlo ya que por defecto es «auto» depende de la plataforma mostrará md o ios.

language: El idioma de la aplicación, usado por algunos componentes de Framework7, por defecto toma el lenguaje del navegador.

routes: Es un array con las urls internas de la aplicación, esto quiere decir que cada pantalla o vista de la aplicación tendrá una url asociada como por ejemplo /ayuda/ o /producto/. Veremos como funciona en otro momento ya que requiere de más explicación.

data: El compañero de juegos de la aplicación, ya que podrás (Bueno como cualquier variable global) los datos de la aplicación, modificarlos, etc. Por ejemplo para guardar la sesión del usuario, id de usuario y demás.

Parámetros de Eventos

methods: Son funciones globales las cuales servirán para usarlos en cualquier parte de la aplicación.

on: Eventos! Como por ejemplo acciones que se deben ejecutar en ciertos momentos, por ejemplo cuando Framework7 está preparado o una página de la app se inicia.

var app = new Framework({
  on: {
    init: function () {
      console.log('Aplicación Iniciada'),
    },
    pageInit: function () {
      console.log('Página Iniciada'),
    },
  }
})

init: Por defecto Framework7 se inicia cuando se llama al objeto Framework7() pero si necesitas ejecutarlo en un determinado momento, puedes llamar a app.init().

initOnDeviceReady: Por defecto está activado si no queremos que se inicie Framework7 hasta que llamar a app.init() usamos este parámetro como false

Parámetros Extras

clicks: Módulo Click tiene un parámetro hijo, externalLinks acompañado de una clase ‘.external’, usamos esta clase para abrir de forma externa un enlace ya que los enlaces <a> en Framework7 se ejecutan sobre la propia aplicación, usando esta clase nos permitirá abrir enlaces fuera de Framework7, por defecto es ‘.external’ podemos cambiar esta clase para usar una personalizada.

var app = new Framework7({
  clicks: {
    externalLinks: '.external',
  }
})

touch: Módulo Touch, tiene varios parámetros hijos, los más importantes son, fastClick, por defecto está activo, se encarca de eliminar esos 300 ms de retraso en navegadores móviles, desde esta opción puedes deshabilitarlo.

touch – tapHold: Por defecto deshabilitado, es el evento que se dispara cuando dejas pulsado un elemento de la aplicación por ejemplo una imagen para mostrar las opciones de Guardar, Editar, etc.

Otras opciones del parámetro touch están disponibles en la documentación oficial

panel: Los paneles laterales también tiene su parámetro, un ejemplo.

var app = new Framework7({
  panel: {
    swipe: 'left',
    leftBreakpoint: 768,
    rightBreakpoint: 1024,
  }
});

Y esto es más o menos todo, aunque hay algunos parámetros más pero pertenecen a componentes que veremos más adelante, si tienes alguna duda sobre algún parámetro deja tu comentario.

Hasta pronto!

Happy Code