Appendix B - a complete example with Google MD
In blue methods provided by main_page.jsp.
In orange the ones provided by Google Material Design library.
<html>
<head>
<!-- Google Material Design libraries -->
<link rel="stylesheet" href="./mdl/material.min.css">
<script src="./mdl/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="./mdl/datetimepicker/css/datepicker.css"> -->
<link rel="stylesheet" href="./mdl/datetimepicker/material-datetime-picker.css">
<link rel="stylesheet" href="./mdl/select/getmdl-select.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./mdl/ext/styles/dialog-polyfill.css">
<link rel="stylesheet" href="./mdl/ext/styles/material.indigo-pink.min.css">
<link rel="stylesheet" href="./mdl/ext/lib/mdl-ext-eqjs.min.css">
<link rel="stylesheet" href="./mdl/ext/styles/demo.css">
<link rel="stylesheet" href="./mdl/pagination/pagination.css">
<link rel="stylesheet" href="./scripts/utils.css">
<script language="Javascript">
function loadScript(url, callback){
// utility function always to include in any web page...
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
// 3. callback invoked after the initialization
var initCompleted = function() {
startApp();
}
// 1. load dynamically the infra js...
loadScript('../4ws/main_page.jsp?applicationId=TEST1',function() {
// 2 after loading the infra js, execute login on Platform: that will load web pages variables (username, etc.) and initialize translations
loadScript('./scripts/utils.js',function() {
try {
init(initCompleted);
}
catch(e) {
if (e.toString()=="Not authenticated") {
// show login dialog!
window.location="login3.html";
}
else {
alert(e);
}
}
});
});
// 4. login completed: start app
var startApp = function() {
}
</script>
</head>
<body>
<script language="Javascript">
function logoutFromApp() {
try {
new AsyncRequest().send(
"../logoutapp?applicationId=TEST1",
"GET",
null,
null,
function(jsonResponse) {
},
function() {}
);
} catch(e){}
window.location = '../index.html';
}
function showMyList() {
var abcStore = createComboStore(59);
var countriesStore = createComboStore(49);
var grid = createGrid({
panelId: 259,
functionId: “...”,
region: 'center',
listeners: {
rowclick: function(rowIndex,attributeName) {
var record = grid.store.list[rowIndex];
formPanel.store.baseParams.clientCode = record.clientCode;
formPanel.load();
}
}
});
var formPanel = createForm({
title: "Cliente",
region: 'south',
height: 280,
labelWidth: 150,
autoLoadData: false,
panelId: 269
});
var win = new AppWindow({
title: "My List",
items: [grid,formPanel]
});
}
</script>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent" style="min-height: 40px" >
<!--
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Track & Trace</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
</nav>
</div>
-->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">My Demo</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#"
onClick="executeFunction('showMyList')" >MyList</a>
<a class="mdl-navigation__link" href="#"
onClick="window.location = 'logoutFromApp()" >Quit</a>
</nav>
</div>
<main class="mdl-layout__content" id="mainContent" style="overflow-y: hidden;">
<div class="page-content" style="text-align:center;width:100%; height:100%">
<div class="mdl-spinner mdl-js-spinner" id="waitspinner"></div>
</div>
</main>
<footer class="mdl-mini-footer" style="padding: 5" >
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Dev</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Me</a></li>
</ul>
</div>
</footer>
</div>
<script language="Javascript">
// vertically center the wait spinner...
var y = document.body.clientHeight/2;
var s = document.getElementById("waitspinner");
s.style.top = y-s.clientHeight; // is-active
</script>
<!-- date time picker -->
<script src="./mdl/datetimepicker/polyfill.js"></script>
<script src="./mdl/datetimepicker/moment.js"></script>
<script src="./mdl/datetimepicker/it.js"></script>
<script src="./mdl/datetimepicker/rome.standalone.js"></script>
<script src="./mdl/datetimepicker/material-datetime-picker.js"></script>
<!-- selector -->
<script src="./mdl/select/getmdl-select.min.js"></script>
<!-- Application functionalities -->
<!--<script src="./scripts/xyz.js"></script>-->
<script language="Javascript">
// keep alive...
var keepAliveThread = function() {
setTimeout(function() {
new AsyncRequest().send(
contextPath+"/keepAlive?user="+username,
"GET",
null,
null,
function(jsonResponse) {
keepAliveThread();
},
function() {}
);
},60000*5);
};
keepAliveThread();
// listen for browser's window resizing...
window.onresize = function(event) {
resizeAllComponents();
};
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=XXX" type="text/javascript"></script>-->
<script src="./mdl/ext/scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>
<script src="./mdl/ext/scripts/eq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./mdl/ext/lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>In case of unauthorized access because the user is not authenticated yet, the init method would fire an exception which leads to readirect to the login3.html page, where a login dialog is prompted, in order to authenticate into Platform.
index3.html
Last updated
Was this helpful?