We will create a web client using a JSP in order to give the user a friendly interface that allows for the selection of Parameters in our report. We will configure this JSP so that it contains the necessary code to achieve our goal. We will then open a web browser to see what the final presentation of our application looks like.
index.jsp
and click on Finish.<!--
and -->
) since they will help us understand the code within our JSP.The logic, that is, the thing that will provide our web page with dynamism, is written using JavaScript (JS), the ultimate programming language for the manipulation of web interfaces. JavaScript allows us to access and modify the Document Object Model (DOM), which is an object representation of the page being shown in the browser.
We will paste the following code inside the JSP editor:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PRD 5 Book - Chapter 14</title> <!-- The config() function is the one which will contain all of the logic. It is executed when the "body" element is done loading, "<body onload="config()">", in this way we will have access to every element in the DOM. --> <script type="text/javascript"> function config() { var errMsg = document.getElementById("errorMsg"); if ("${errorMsg}".length == 0) errMsg.setAttribute('class', 'hide'), var button = document.getElementById("btnRunReport"); button.addEventListener("click", function(event) { var year = document.getElementById("year").value; var cboMonth = document.getElementById("month"); var month = cboMonth.options[cboMonth.selectedIndex].id; var cboOType = document.getElementById("outputType"); var outputType = cboOType.options[cboOType.selectedIndex].id; window.location = "runReport?year=" + year + "&month=" + month + "&outputType=" + outputType; event.preventDefault(); }, true); } </script> <!-- Next on is the code referring to the style section. --> <style type="text/css"> .common { border-radius: 3px; -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari y Chrome */ border: 1px solid #333; width: 250px; padding: 10px; text-align: center; } .form { background: #eee; height: 160px; } .errorMsg { background: red; color: white;; } .hide { display: none; } </style> </head> <body onload="config()"> <h2>PRD 5 Book - Chapter 14</h2> <h3>Run report using API</h3> <div class="common form"> <b>Report Filter Parameter</b> <hr /> <!-- The "id" of every Selector and that of the button, will be used to obtain the values of said elements as well as to assign event listeners using Javascript. --> <!-- year Selector --> <label for="year">Year: </label> <input type="number" min="2005" max="2006" step="1" value="2005" autofocus placeholder="year" id="year" maxlength="4" size="6"> <br /> <!-- month Selector --> <label for="month">Month: </label> <select id="month"> <option id="1">January</option> <option id="2">February</option> <option id="3">March</option> <option id="4">April</option> <option id="5">May</option> <option id="6" selected>June</option> <option id="7">July</option> <option id="8">August</option> <option id="9">September</option> <option id="10">October</option> <option id="11">November</option> <option id="12">December</option> </select> <br /> <br /> <!-- outputType Selector --> <label for="outputType">Output Type: </label> <select id="outputType"> <option id="html" selected>HTML</option> <option id="pdf">PDF</option> </select> <br /> <!-- report execution Button --> <button id="btnRunReport">Run Report</button> </div> <br /> <div id="errorMsg" class="common errorMsg">${errorMsg}</div> </body> </html>
Then we will save the changes.
http://localhost:8080/prdweb
to see what our little UI, created via a JSP, looks like.The page will look like the following screenshot:
We created a web client so that the user has a friendly interface at his/her disposal when its time to select report Parameters. To do so, we created a JSP, gave it the name of index.jsp
, and configured its code. Later on through the URL http://localhost:8080/prdweb
, we accessed our application and were able to utilize the configured UI.