Framework7 v2 – Componente de Rutas

La semana pasada publicaba Framework7 v2 Primeras impresiones, y esta vez traigo algo muy importante sobre esta nueva versión que ha cambiado mucho, el componente de rutas, el encargado de la navegación a través de la aplicación.

En primer lugar, el sistema de rutas ha cambiado, el creador de Framework7 lo ha explicado en el blog oficial, ya lo dijo en el primer post sobre esta versión que necesitaría un post solo para explicar como funciona el nuevo sistema y así ha sido.

Vamos a resumirlo….

En el objeto new Framework7() admite el nuevo parámetro routes, este puede contener varios valores, por ejemplo path,url, template, component, componentUrl, templeteUrl, content, options, etc.

El parámetro options admite, animate, history, pushState, reloadCurrent, reloadPrevious, reloadAll, pageEvents, context.

animate: Si la página de esta ruta debe estar animada o no, esta configuración sobrescribe la configuración inicial.

history: Si la página debe guardarse en el historial

pushState: Si la página debe guardarse en el estado del explorador, sobrescribe la configuración inicial.

reloadCurrent: Sustituye la página actual por la nueva

reloadPrevious: Sustituye la página anterior en el historial por la nueva.

reloadAll: cargar nueva página y eliminar todas las páginas anteriores de la historia y del DOM.

pageEvents: Un objeto con callbacks de los eventos de la página.

context: Contexto peronalizado para la página Template7 (usando parámetros template o templateUrl) .

Seguimos…

Aunque en los siguientes posts entraremos más en programación y empezaremos a construir algo funcional, ahora me encuentro en el momento de pruebas con esta nueva versión, por lo que no quiero arriesgarme a dar código que luego por falta de pruebas no funcione correctamente y/o encuentre otro modo más fácil de hacer lo mismo. 🙂

Este sistema es mucho más estable que el de la versión 1, admite más ajustes y todo está más ordenado.

Ya que crearíamos un archivo routes.js que contendría la variable que definiríamos como routes en el objeto Framework7().

Podría tener esta estructura

var routes = [
  // Index
  {
    path: '/',
    url: './index.html',
  },
  // Contacto
  {
    path: '/contacto/',
    componentUrl: './pages/contacto.html',
      //Subpaginas de Contacto
      routes: [
        {
          path: 'formulario/',
          url: './pages/formulario.html',
        },
        {
          path: 'llamada/',
          url: './pages/llamar.html',
        },
      ],
  }
];

Como vemos en el ejemplo anterior existirían cuatro páginas dentro de nuestra aplicación, una index, que sería la principal, otra contacto y dentro de contacto dos subpáginas una con un formulario y otra por ejemplo para llamar.

Las rutas serían las siguientes

/ – Index

/contacto/ – Contacto

/contacto/formulario/ – Formulario

/contacto/llamar/ – Llamar

En los enlaces href de los tags <a> podemos usar estas urls para ir directamente a la página.

Pestañas

Ahora las pestañas pueden ser enrutables, lo que significa que se pueden navegar por pestañas como urls y estas serán accesibles también desde el historial de la app, para crear pestañas es muy sencillo al elemento de la pestaña se agregaría el parámetro id, el cual se necesitará para llamar a esa ruta, no son necesarias las clases tab-link-active o tab-active ya que el propio componente controla esto.

Se ha agregado data-route-tab-id para navegar a través de las pestañas

Un ejemplo de una página con pestañas sería el siguiente.

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Contacto</div>
    </div>
  </div>
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="./contacto/" class="tab-link" data-route-tab-id="contacto">Nosotros</a>
      <a href="./formulario/" class="tab-link" data-route-tab-id="formulario">Formulario</a>
      <a href="./llamar/" class="tab-link" data-route-tab-id="llamar">Llamar</a>
    </div>
  </div>
  <div class="tabs">
    <div class="tab page-content" id="contacto"></div>
    <div class="tab page-content" id="llamar"></div>
    <div class="tab page-content" id="formulario"></div>
  </div>
</div>

Este aunque use los mismos nombres no sería igual que el ejemplo de antes de las páginas y subpáginas del archivo routes.js, sería este.

routes = [
  {
    path: '/contacto/',
    url: './pages/contacto/contacto.html',
    tabs: [
      // Primera pestaña
      {
        path: '/',
        id: 'contacto',
        // Así agregamos el contenido a la pestaña directamente desde el archivo rotues.js
        content: `
          <div class="block">
            <h3>Contacta con nostros</h3>
            <p>...</p>
          </div>
        `
      },
      // Segunda Pestaña
      {
        path: '/fomulario/',
        id: 'fomulario',
        // Así agregamos el contenido desde un archivo externo por Ajax.
        url: './pages/contacto/fomulario.html',
      },
      // Third tab
      {
        path: '/llamar/',
        id: 'llamar',
        // Cargamos el contenido del componente por Ajax
        componentUrl: './pages/contacto/llamar.html',
      },
    ],
  }
]

Y bueno hasta aquí vamos a ver por hoy, ampliaré más información en los siguientes post, me he dejado algunas cosas en el aire sobre el componente de rutas pero lo veremos más adelante.

Saludos

Happy Code!