Framework7 | Tutorial Español | Parte 1

 

 

 

 

 

Hola a todos, los frameworks cada vez se utilizan más para proyectos que requieren de un desarrollo más rápido, ya sabemos todos lo que es hacer una app a codigo sin utilizar ningún framework lleva mucho tiempo hacerla para que quede perfecta, pero y si utilizamos un framework que nos de las opciones más básicas (y las no tan basicas) para construir nuestra app.

Siguientes Partes de este tutorial

Pues ahí es donde entra Framework7, uno de muchos, pero bajo mi punto de vista uno de los mejores que hay es muy fácil implementar y los resultados son muy buenos Este Framework nos provee de las utilidades básicas de la aplicación, Notificaciones, chat, animaciones, sliders, menús, etc.

En esta primera parte voy a explicar como empezar y como realizar una estructura básica para empezar a trabajar sobre ella, muchos de vosotros me preguntáis como se prepara un proyecto para Framework7 ya que puede generar dolores de cabeza sobre todo la primera vez.

En primer lugar descargamos de la web oficial el zip que contiene tanto las librerías necesarias como ejemplos, pero en este caso vamos a generar un ejemplo propio, este tutorial quiero seguirlo para repasar todos los componentes disponibles en Framework7.

Go!

Puedes descargar el zip desde esta dirección, al hacer este post la versión actual es la 1.5.2

Una vez que tenemos el contenido descargado y descomprimido vamos a crear un proyecto Phonegap

phonegap create framework com.myapp.app Framework

Ahora entramos en nuestro directorio de proyecto y nos dirigimos a la carpeta js copiamos la librería framework7.min.js situada en el zip que descargamos anteriormente en la carpeta dist/js/ lo copiamos y lo pegamos en nuestra carpeta js.

Haremos lo mismo con las hojas de estilo, tenemos dos opciones, utilizar Material de Android o Diseño de iOS, yo suelo trabajar con el material de Android para las dos plataformas ya que da más color y queda mucho mejor que el diseño de iOS, que ya sabemos todos como es.

Para la hojas de estilos copiaremos de la carpeta dist/css los archivos framework7.material.min.css y framework7.material.colors.min.css, a la carpeta css de nuestro proyecto.

Ya tenemos lo necesario para empezar a trabajar en nuestra aplicación, pero falta lo más importante, agregar al index.html las referencias de css y js que anteriormente hemos copiado, así.

<link rel="stylesheet" href="css/framework7.material.min.css">
<link rel="stylesheet" href="css/framework7.material.colors.min.css">

Ahora el js

<script type="text/javascript" src="js/framework7.min.js"></script>

Yeah! Ya podemos empezar a codear…

La estructura básica de Framework7 la podemos encontrar aquí aunque os dejo el index.html como quedaría

<!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>
<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>

Ya tenemos la estructura básica, lo siguiente es borrar el contenido del index.css que tenemos ya que tiene estilos de la app hello-world de Phonegap que no necesitaremos. Luego podremos añadir estilos para modificar los de Framework7

Esto lo editaremos más adelante. Ahora lo que tenemos que modificar es el archivo index.js que eliminaremos algunas cosas que no necesitaremos ya que vienen al igual que el archivo css de la aplicación hello-world. Debería quedar así.

//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
});
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
        
    }
};

Nuestra App está lista, mostrará la estructura básica, un header con el nombre de nuestra aplicación, por defecto el color de la aplicación es azul, podemos cambiar el tema añadiendo una clase a la etiqueta body, class=»theme-COLOR» los colores disponibles los encontramos en esta dirección (red, green, orange, black, white, etc.).

En la siguiente parte agregaremos un menú lateral con apertura con haciendo slide y agregaremos páginas hijas a nuestra aplicación, espero que se entienda todo, podéis utilizar los comentarios para cualquier duda, recordad que estoy en Twitter seguidme para futuras actualizaciones de este tutorial o nuevos post relacionados.

Saludos y Happy Code!

 

Amante de todo lo que tenga que ver con internet, la programación mi pasión, crear nuevas formas y nuevos sistemas que den vida a nuevos proyectos que faciliten la vida a muchas personas,