Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Finally! A Web App (Part 5)

DZone's Guide to

Finally! A Web App (Part 5)

As we get ready to finalize our Java web app, learn how to implement read operations and a ''delete all'' function while preparing for the final cleanup.

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

Introduction

Hopefully, you have been following along in this series of articles, and we are in the final stages of this iteration of a web-enabled Shape Calculator app. We have been pretending to enhance some in-house code that started out in your development team. I chose the Shape Calculator, but it could be anything.

Our first two rounds of the application were both command-line-interface and menu-driven.

You would need to refer back to those articles to be up to speed, and they also cover incorporating the backend database that needs to be running.

The Latest Code

Get the latest web app code here.

And here is the latest code for our component or service, which is used by the above web app.

Implement the Read Operations

Let's complete the two simpler Calculator operations: Pending Requests and Calculated Results.

If you take a look at the RequestResponseController, the operation mapped to "/pending" will either return a message (if no pending requests) or a list of Pending Requests.

We want to display both in our pending.jsp.

// our psuedo-code goes something like this....

if (there is a message)
then

    print the message

else //there is no message

    start looping thru list

        print each item in some nice format

    end of loop

end of the 'if block'


There are any number of things we could do. For example, we could have also still printed a message AND the loop, and the message, in this case, would be how many items in the loop.

Or we can also do that in the JSP.

I will leave that for you.

Let's replace what we now have in the <body></body>  of pending.jsp with this:

    <div class="container">
        <c:choose>
            <c:when test="${ not empty message }">
                   ${message}<br />
            </c:when>
            <c:when test="${ not empty pendingRequests }">
                <table style="width: 650px" class="table table-striped">
                    <tr>
                        <td>Shape</td>
                        <td>Type</td>
                        <td>Dimension</td>
                    </tr>
                    <c:forEach items="${pendingRequests }" var="req">
                        <tr>
                            <td>${req.shapeName}</td>
                            <td>${req.calcType}</td>
                            <td>${req.dimension}</td>
                        </tr>
                    </c:forEach>
                </table>
            </c:when>
        </c:choose>
    </div>

We want to test this, but first, we need to ensure we have entries in the Pending Requests.

To do that, we can use the command-line version of our application that we've previously developed. You can take a look at these articles, and specifically this one.

I used a Cygwin terminal window to run the app and add a few Pending Requests.

Image title


Image title

So, for me, I know I should see at least two pending requests in the web page tab.

Possible Errors

If you see this:

Image title

Then notice that the "Shape," "Type," and "Dimension" headings do not match; they're not the same font as the rest of the page. Also, where are the two or three requests? And finally, there's no styling for headings.

You are probably missing the "c:" taglib inclusion in pending.jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

You need that so the <c:choose>yadda yadda</c:choose> will work.

You are also probably missing these in the <head></head> section (same as with index.jsp):

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/resources/js/jquery-2.2.4.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>


If you see Eclipse complain when you add the "<%@ taglib prefix="c".....  >, then you are missing this in the project's POM:

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

<version>1.2</version>

</dependency>


After fixing all of that, this is what shows:

Image title

That looks a lot better.

We need to repeat the same things with the Calculated Results. Open the RequestResponseController and replace what is currently inside the mapped "/results" operation with the following:


        System.err.println("\n\n\nCalculated Results\n\n\n");

        List<CalculationResult> calculatedResults = this.calculator.getAllCalculatedResults();

        if (null==calculatedResults || calculatedResults.isEmpty()) {
            return new ModelAndView(
                          "/results",
                          "message", 
                          "There are NO Calculated Results Yet");
        }

        return new ModelAndView("/results","calculatedResults",calculatedResults);

Now open results.jsp and replace what is inside the <body></body> with this:

    <div class="container">
        <c:choose>
               <c:when test="${ not empty message }">
                   ${message}<br/>
               </c:when>
               <c:when test="${ not empty calculatedResults }">

                <table style="width: 650px" class="table table-striped">
                <tr> <td>Shape</td><td>Type</td><td>Dimension</td><td>Result</td></tr>
                    <c:forEach items="${calculatedResults }" var="res">
                    <tr> <td>${res.shapeName}</td><td>${res.calcType}</td><td>${res.dimension}</td><td>${res.result }</td></tr>
                    </c:forEach>
                </table>
               </c:when>
           </c:choose>
    </div>

Remember to add the "c:" taglib inclusion, as well as the three lines for styling (Bootstrap and JQuery).

Again, before trying, I ran the command-line app to run the calculations. The only way to produce Calculated Results is to well, ahem, calculated them. That means all Pending Requests will move over as Calculated Results.

OK, once I am satisfied that I have the entries that I seek, I try it:

Image title

And if I check Pending Requests, there's a nice message, in the correct style, saying there are not any.

So we are good.

Add Delete-All Feature

For now, let's add two buttons. One goes on the Pending Requests tabbed-pane, and one goes on the Calculated Results tabbed-pane. Their purpose is to delete all of (Pending or Calculated, respectively).

And we'll have to add the Controller code to support that.

JSPs

First, the pending.jsp, and the results.jsp changes.

<div class="container">
     <form:form action="delpending" method="post" commandName="deleteAllPendingForm">
           <table style="width: 650px" class="table table-striped">
                <tr> <td align="center"><input type="submit" value="Delete All Pending Requests" /></td> </tr>
           </table>
     </form:form>
</div>

And:

<div class="container">
     <form:form action="delresults" method="post" commandName="deleteAllResultsForm">
           <table style="width: 650px" class="table table-striped">
                <tr> <td align="center"><input type="submit" value="Delete All Calculated Results" /></td> </tr>
           </table>
     </form:form>
</div>

Place each of the above additions, in their respective pages, immediately after the

<c:when test="${ not empty pendingRequests }">

or

<c:when test="${ not empty calculatedResults }">

Controller

Add the following to the RequestResponseController:

    @RequestMapping(value="/delpending",method=RequestMethod.POST)
    public ModelAndView delpending() {

        System.err.println("\n\n\nINSIDE Controller delpending()\n\n\n");

        this.calculator.deleteAllPendingRequests();

        List<CalculationRequest> pending = this.calculator.getAllPendingRequests();

        if (null==pending || pending.isEmpty()) {
            return new ModelAndView("/pending","message", "There are NO Pending Requests");
        }

        return new ModelAndView("/pending","message","Oops! there are "+pending.size());

    }

    @RequestMapping(value="/delresults",method=RequestMethod.POST)
    public ModelAndView delresults() {

        System.err.println("\n\n\nINSIDE Controller delresults()\n\n\n");

        this.calculator.deleteAllResults();

        List<CalculationResult> results = this.calculator.getAllCalculatedResults();

        if (null==results || results.isEmpty()) {
            return new ModelAndView("/results","message", "There are NO Results");
        }

        return new ModelAndView("/results","message","Oops! there are "+results.size());

    }


Since we are adding a <form></form> , you need another taglib inclusion:

 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

I had to run the test a few times using the command-line app to add Requests, then deleting them via the web. The Calculated Results have another step, because we have to run the requests.

Latest Code

Go here for the web app project code. The shape-calc service project did not change this time around.

Next Steps

We have one major task — that is to add a form and be able to create Requests, just like we can do via the command-line app.

We also need to add another button, to "Run Pending Requests" (which does the calculations).

And we need to clean up a bit — there's text at the index.jsp that no longer has a purpose, as well as code in the Controller.

We will leave those for the next article.

See you then!

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:
java 8 ,javascript ,spring mvc ,command line interface

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}