Time for action – creating a web client

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.

  1. To finish the application, we will create a web client that will allow the final user to interact with the service we created in a friendly and visual way. Our client will be implemented using a JSP, given that this is the component that is better suited to create user views.
  2. We will now create a JSP. We will then head to the Project Explorer panel and select the node named prd5Ch14; then we will go to WebContent, right-click on it, and then go to New | Other....
  3. In the following window, we will select the item labeled JSP File, which is found in the Web category, and click on Next >.
  4. We will configure its File Name with the value index.jsp and click on Finish.
  5. Once the JSP is created, we will automatically be presented with the JSP editor. We will delete the current code and replace it with the one we will present shortly. We should pay special attention to the comments (pieces of text between <!-- 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.

    Note

    We can visit Wikipedia to obtain further information about JS and DOM:

    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.

  6. We will now open a web browser and direct it to the URL http://localhost:8080/prdweb to see what our little UI, created via a JSP, looks like.

    The page will look like the following screenshot:

    Time for action – creating a web client

What just happened?

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset