I am trying to make a web application using these two technologies, although in some points I can not understand it.
The application presents an initial login page, which makes a query to an API and if the user is authenticated, you pass to a new html in which there will be different options.
Here is a view of index.html :
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Required meta tags-->
<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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" href="lib/framework7/css/framework7.material.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7-icons.css">
<!-- Path to Framework7 color related styles, Material Theme -->
<link rel="stylesheet" href="lib/framework7/css/framework7.material.colors.min.css">
<script type="text/javascript" src='js/funciones.js'></script>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<!-- Views -->
<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"><img src="lib/framework7/img/logo-f.png" width="60%;"></div>
</div>
</div>
<!--El contenido de la página-->
<div class="page-content">
<!-- FORMULARIO LOGIN -->
<form>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class = "icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" name="name" placeholder="DNI" id="textDNI">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class = "icon icon-form-password"></i></div>
<div class="item-inner">
<div class="item-input">
<input type="password" name="pass" placeholder="Password" id="passWeb">
</div>
</div>
</div>
</li>
<li>
<div class="item-content" style="padding-top: 3px;">
<div class="item-inner">
<div class="item-input">
<a href="#" class="button button-raised button-fill color-green" id="btnLogin" onclick="IniSesion();">Iniciar Sesión</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
<!-- -->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script>
app.initialize();
</script>
</body>
</html>
Next, the file my-app.js, where I check if the APP has an Internet connection:
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
swipePanel: 'left' //Activamos la acción slide para el menú
});
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true,
domCache: true //Activamos el DOM cache, para pages inline
});
var app = {
initialize: function() {
document.addEventListener("deviceready", this.init, false);
document.addEventListener("offline", connectionOff, false);
function connectionOff() {
alert('No dispone de conexión a Internet. Si ella no podra hacer uso de la APP');
}
},
init: function() {
}
};
And in this js I have a function that connects to the API and redirects to another page:
function IniSesion(){
if($('#textDNI').val() == ''){
alert('Debe ingresar su DNI');
return false;
}
if($('#passWeb').val() == ''){
alert('Debe ingresar su contraseña');
return false;
}else{
usuario = $('#textDNI').val();
clave = $('#passWeb').val();
var urlEnvio = ""
/*Envio de peticion*/
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", urlEnvio, false);
xmlhttp.setRequestHeader("accept" ,"application/json");
xmlhttp.setRequestHeader("content-type" ,"application/json");
xmlhttp.send(urlEnvio);
var resultado = xmlhttp.response;
var long = resultado.length;
var elementos =JSON.parse(resultado);
if(elementos.count == '0'){
myApp.addNotification({
message: 'Usuario o contraseña incorrecta',
});
}else{
window.location.href = 'panelUsuario.html';
}
}
}
So far it seems that everything works correctly, but I want to set a calendar in the new html and the official documentation of Framework7 tells me that I must create an instance of the calendar first.
I do not know if this should be done in the file my-app.js or create a new one or if it is created in a different place.