Tutorial Framework7 Español [Versión 3] Primeros Pasos 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
<!DOCTYPE html>
<html>
<head>
<!-- Elementos meta requeridos -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color de la barra de estado -->
<meta name="theme-color" content="#2196f3">
<title>Mi App</title>
<!-- Referencia a los estilos de framework7 -->
<link rel="stylesheet" href="css/f7/framework7.ios.min.css">
<!-- Referencia a los estilos propios-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<!-- Barra de navegación -->
<div class="navbar">
<div class="navbar-inner">
<div class="title">Mi App</div>
</div>
</div>
<!-- Contenido -->
<div class="page-content">
<p>Contenido de la pantalla</p>
</div>
</div>
</div>
</div>
<!-- Referencia al archivo framework7.min.js-->
<script type="text/javascript" src="js/f7/framework7.min.js"></script>
<!-- Referencia al archivo index.js-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
core.init();
</script>
</body>
</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.
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");
}
};
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!
