February 3, 2011

Part 11: Finalizing the Interface

If you have followed this tutorial so far, you will probably remember that in Part 2 I had shown you how the GUI will look when we're done. Here it is again:

We have put together everything except our interface, so it's time to modify our index.jsp to finalize the interface. Here's how your index.jsp file should look right now:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Modeling Agency Index</title>
</head>
<body>

<h1>The IdleWorx Modeling Agency</h1>
<hr>

<div style="width:300px;float:left;">
 
 <h2>Available Clients</h2>
 <c:forEach items="${all_clients}" var="client">
  <a href="client.do?id=${client.id}">${client.name}</a><br>
 </c:forEach> 
</div>

<div style="width:300px;float:left;">
 <h2>Available Models</h2>
 <c:forEach items="${all_models}" var="model">
  <a href="model.do?id=${model.id}">${model.name}</a><br>
 </c:forEach> 
</div>

<div style="clear:both;">
 <h2>Bookings</h2>
 <table border="1">
 <tr>
  <th>Client</th>
  <th>Model</th>
  <th>Time</th>
  <th>Place</th>
 </tr>
 <c:forEach items="${all_bookings}" var="booking">
 <tr>
  <td>${booking.client.name}</td>
  <td>${booking.model.name}</td>
  <td>${booking.time}</td>
  <td>${booking.location}</td>
  <td></td>
 </tr>
 </c:forEach> 
 </table>
</div>

</body>
</html>

Open up: http://localhost:8080/ModelingAgency/test.do. You should now have an interface very similar to the image above.

You'll notice I used the JSTL and EL libraries to nicely write our output (please don't use scriptlets in your JSP classes).

Also if you haven't noticed so far, in your ModelingAgency web application folder, you should have a file called sql.log wich has logged all of the SQL statements that MyBatis generated. You may find it useful when debugging your MyBatis apps

Congrats

If you got this far, I hope you now feel more comfortable about MyBatis,Tomcat and MySQL. You should now have all the basics to get a very simple app started in Eclipse using these technologies.

You can download a full version of the app here.

This tutorial took me a long time to write, so if you found it useful in any way, if you found errors with it or you think something is missing, please let me know and I will do my best to improve it.

Go back to the IdleWorx Monster MyBatis Tutorial

Tags: , , , ,