Primeros pasos con Framework7 versión 3

Tutorial Framework7 Español [Versión 3] Primeros Pasos 2018

29 agosto, 2018

La primera entrega está aquí, los primeros pasos de como empezar a integrar Framework7 Versión 3 en una Aplicación Phonegap.

Para integrar Framework7 en un proyecto Phonegap podemos usar GitHub, descargando el la versión y copiando los siguientes archivos.

En la carpeta packages copiaremos los siguientes archivos al proyecto Phonegap.

  • css
    • framework7.ios.min.css
  • js
    • framework7.min.js

Empieza a usar Framework7

Con estos dos archivos tenemos ya todo lo necesario para empezar a trabajar en nuestra aplicación. Estos archivos hay que copiarlos a las carpetas del proyecto phonegap y luego hacer referencia desde index.html a estos archivos, usando las tags “link” y “script”.

Una vez referenciados los archivos podemos empezar a crear la estructura básica de la aplicación, es importante tener una idea general de que secciones tendrá nuestra aplicación así como es recomendable tener un boceto de lo que será la aplicación por lo que podremos ir aplicando estilos y dando forma a nuestro proyecto.

Vamos con la estructura de nuestro archivo index.html

Como veis he dejado algunos comentarios sobre el código y que hace cada linea, esta es una estructura básica ya que a partir de aquí iremos agregando contenidos, menús, enlaces, etc.

Al final hemos lanzado una llamada a la función core.init(), esta se encargará una vez que estén todos los archivos cargados de iniciar la aplicación y desde ahí vamos a continuar.

Si emuláis esta aplicación no veréis nada, ya que hay que inicializar Framework7 desde nuestro Javascript (index.js) de esta forma.

Ahora si veréis algo funcionando, he omitido parámetros de Framework7 ya que los veremos más adelante, aunque aquí tenéis un listado completo de todos los parámetros que soporta.

Cuando emuláis la aplicación debe mostrar en consola “Dispositivo Preparado” esto es lo que le hemos dicho a nuestra aplicación que debe decir cuando el eventos deviceready se dispara.

Bien, hasta aquí por hoy, en el próximo veremos todos los parámetros de inicialización de Framework7 y para que sirven.

Nos vemos muy pronto 🙂

Happy Code!