Tutorial - Como usar el Framework7

Tutorial básico para crear una aplicación usando el Framework7.

Es un framework excelente para iniciarse en el mundo de crear aplicaciones para móviles. Las aplicaciones realizadas con framework7 son de tipo híbridas y multi-plataforma (IOS, Android, Wpone).

Se programa usando las tecnologías web modernas (HTML5,CSS y Javascript), si vienes del mundo de creación de páginas web, te acostumbrarás rápidamente a la estructura del framework y por supuesto es compatible con Phonegap y Phonegap Build.

El Framework7 pone a disposición diferentes componentes web, que las puedes usar en tus aplicaciones, algunos componentes de framework7 son:

diálogos de información.
diálogos de petición de datos.
dialogo selector de fecha.
Popups con opciones.
Popups personalizados.
Selectores deslizables, anidados.
Deslizar y actualizar lista.
Mensajes de notificación toast.

Framework7 ofrece la opción de usar dos temas para nuestras aplicaciones.

Tema plantilla IOS, la app usará como piel similar a la apariencia de una aplicación nativa de IOS 9.
Tema plantilla Material Design, la app se visualizará como una aplicación nativa de Android Lollipop, siguiendo las directivas Material Design de Google.

Instalación del framework

Descargar la última versión del framework7 desde su repositorio oficial iDangero.us

Descomprimir el paquete zip, solo nos interesa la carpeta dist donde se encuentra el core de Framework7, podemos usar el archivo index.html como base de nuestra aplicación o bien eliminar todos los archivos y solo dejar las carpetas CSS y JS

Dentro de la carpeta CSS se puede eliminar las hojas de estilo que no se cargan en el proyecto, dependiendo del tema a usar podremos eliminar unos o otros, o bien mantener solo los minificados.

Ejemplo de aplicación con el Framework7

Es típico en el mundo de la programación de que la primera aplicación sea un "hola mundo" pero Vladimir Kharlampidi el autor del Framework7, ha preparado un ejemplo con paneles laterales y varias paginas para navegar entre ellas

Descargar el código fuente del ejemplo en GitHub