Framework7 - Medio ambiente
En este capítulo, analizaremos cómo instalar y configurar Framework7.
Puede descargar Framework7 de dos formas:
Descarga desde el repositorio Framework7 Github
Puede instalar Framework7, usando Bower como se muestra a continuación:
bower install framework7Después de la instalación exitosa de Framework7, debe seguir los pasos que se indican a continuación para hacer uso de Framework7 en su aplicación:
Step 1 - Necesitas instalar gulp-cli para construir versiones de desarrollo y dist de Framework7 usando el siguiente comando.
npm install gulp-cliEl cli son las siglas de Command Line Utility para Gulp.
Step 2 - El Gulp debe instalarse globalmente usando el siguiente comando.
npm install --global gulpStep 3- A continuación, instale el administrador de paquetes NodeJS, que instala los programas de nodo que hace que sea más fácil especificar y vincular dependencias. El siguiente comando se usa para instalar npm.
npm installStep 4 - La versión de desarrollo de Framework7 se puede construir usando el siguiente comando.
npm buildStep 5- Una vez que construya la versión de desarrollo de Framework7, comience a construir la aplicación desde la carpeta dist / usando el siguiente comando.
npm distStep 6 - Mantenga la carpeta de su aplicación en el servidor y ejecute el siguiente comando para navegar entre las páginas de su aplicación.
gulp serverDescargar la biblioteca Framework7 desde CDN
Una CDN o Content Delivery Network es una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si un visitante de su página web ya ha descargado una copia de Framework7 desde el mismo CDN, no tendrá que volver a descargarla. Puede incluir los siguientes archivos CDN en el documento HTML.
Las siguientes CDN se utilizan en una iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Se utiliza para incluir la biblioteca CSS de Framework7 iOS en su aplicación.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Se utiliza para incluir estilos de color relacionados con Framework7 iOS en su aplicación.
Las siguientes CDN se utilizan en Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Se utiliza para incluir la biblioteca JS Framework7 en su aplicación.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Se utiliza para incluir el estilo de Material Framework7 en su aplicación.
Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial. Usamos el servidor AMPPS (AMPPS es una pila WAMP, MAMP y LAMP de Apache, MySQL, MongoDB, PHP, Perl y Python) para ejecutar todos nuestros ejemplos.
Ejemplo
El siguiente ejemplo demuestra el uso de una aplicación simple en Framework7, que mostrará el cuadro de alerta con el mensaje personalizado cuando haga clic en la barra de navegación.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>A continuación, cree una página HTML más, es decir envirmnt_about.html como se muestra a continuación -
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML anterior como framework7_environment.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/framework7_environment.html y la salida se muestra como se muestra a continuación.
Al hacer clic en la barra de navegación, se mostrará el cuadro de alerta con el mensaje personalizado.