From 9a77b56427760d4b9d602a9846099c3deeeef32c Mon Sep 17 00:00:00 2001
From: Mic <misvy@vmware.com>
Date: Mon, 14 Jan 2013 11:02:08 +0800
Subject: [PATCH] cleaned up CSS and migrated to Bootstrap

---
 pom.xml                                       |   9 +-
 src/main/webapp/WEB-INF/jsp/header.jsp        |  12 +-
 src/main/webapp/WEB-INF/jsp/owners/form.jsp   | 105 ++++----
 src/main/webapp/WEB-INF/jsp/owners/list.jsp   |  11 +-
 src/main/webapp/WEB-INF/jsp/owners/search.jsp |  16 +-
 src/main/webapp/WEB-INF/jsp/owners/show.jsp   |  15 +-
 src/main/webapp/WEB-INF/jsp/pets/form.jsp     |   6 +-
 .../webapp/WEB-INF/jsp/pets/visitForm.jsp     |   8 +-
 src/main/webapp/WEB-INF/jsp/vets.jsp          |  10 +-
 src/main/webapp/WEB-INF/jsp/welcome.jsp       |  11 +-
 src/main/webapp/WEB-INF/petclinic-servlet.xml |   3 +
 .../spring/applicationContext-jdbc.xml        |   2 +-
 src/main/webapp/resources/css/petclinic.css   |   5 +
 .../webapp/resources/styles/petclinic.css     | 234 ------------------
 14 files changed, 108 insertions(+), 339 deletions(-)
 create mode 100644 src/main/webapp/resources/css/petclinic.css
 delete mode 100644 src/main/webapp/resources/styles/petclinic.css
diff --git a/pom.xml b/pom.xml
index a60fcf2ce..a5606ea93 100644
--- a/pom.xml
+++ b/pom.xml
@@ -131,7 +131,14 @@
 			<artifactId>jstl</artifactId>
 			<version>1.2</version>
 		</dependency>
-
+		
+		<!-- Webjars (static dependencies distributed as JAR files) -->
+		<dependency>
+		    <groupId>org.webjars</groupId>
+		    <artifactId>bootstrap</artifactId>
+		    <version>2.2.1</version>
+		</dependency>
+		
 		<!-- Rome RSS -->
 		<dependency>
 			<groupId>rome</groupId>
diff --git a/src/main/webapp/WEB-INF/jsp/header.jsp b/src/main/webapp/WEB-INF/jsp/header.jsp
index 1cdc67061..7ca657876 100644
--- a/src/main/webapp/WEB-INF/jsp/header.jsp
+++ b/src/main/webapp/WEB-INF/jsp/header.jsp
@@ -5,9 +5,15 @@
 -->
 
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="<spring:url value="/static/styles/petclinic.css" htmlEscape="true" />" type="text/css"/>
-  <title>PetClinic :: a Spring Framework demonstration</title>	
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+	<title>PetClinic :: a Spring Framework demonstration</title>	
+  
+	<spring:url value="/resources/css/petclinic.css" var="petclinicCss" />
+	<link href="${petclinicCss}" rel="stylesheet"/>
+
+  	<spring:url value="/webjars/bootstrap/2.2.1/css/bootstrap.min.css" var="bootstrapCss" />
+	<link href="${bootstrapCss}" rel="stylesheet"/>
+	
 </head>
 
 
diff --git a/src/main/webapp/WEB-INF/jsp/owners/form.jsp b/src/main/webapp/WEB-INF/jsp/owners/form.jsp
index 6ebdf2853..f051703a1 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/form.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/form.jsp
@@ -10,69 +10,66 @@
 <jsp:include page="../header.jsp"/>
 
 <body>
-	<div id="header">
+	<div id="header well">
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
 	</div>
-  	<div id="main">
+  	<div class="container" style="padding-top: 50px;">
 		<c:choose>
 			<c:when test="${owner['new']}"><c:set var="method" value="post"/></c:when>
 			<c:otherwise><c:set var="method" value="put"/></c:otherwise>
 		</c:choose>
 		
-		<h2><c:if test="${owner['new']}">New </c:if>Owner:</h2>
-		<form:form modelAttribute="owner" method="${method}">
-		  <table>
-		    <tr>
-		      <th>
-		        First Name: <form:errors path="firstName" cssClass="errors"/>
-		        <br/>
-		        <form:input path="firstName" size="30" maxlength="80"/>
-		      </th>
-		    </tr>
-		    <tr>
-		      <th>
-		        Last Name: <form:errors path="lastName" cssClass="errors"/>
-		        <br/>
-		        <form:input path="lastName" size="30" maxlength="80"/>
-		      </th>
-		    </tr>
-		    <tr>
-		      <th>
-		        Address: <form:errors path="address" cssClass="errors"/>
-		        <br/>
-		        <form:input path="address" size="30" maxlength="80"/>
-		      </th>
-		    </tr>
-		    <tr>
-		      <th>
-		        City: <form:errors path="city" cssClass="errors"/>
-		        <br/>
-		        <form:input path="city" size="30" maxlength="80"/>
-		      </th>
-		    </tr>
-		    <tr>
-		      <th>
-		        Telephone: <form:errors path="telephone" cssClass="errors"/>
-		        <br/>
-		        <form:input path="telephone" size="20" maxlength="20"/>
-		      </th>
-		    </tr>
-		    <tr>
-		      <td>
-		        <c:choose>
-		          <c:when test="${owner['new']}">
-		            <p class="submit"><input type="submit" value="Add Owner"/></p>
-		          </c:when>
-		          <c:otherwise>
-		            <p class="submit"><input type="submit" value="Update Owner"/></p>
-		          </c:otherwise>
-		        </c:choose>
-		      </td>
-		    </tr>
-		  </table>
+		<h2><c:if test="${owner['new']}">New </c:if>Owner</h2>
+		<form:form modelAttribute="owner" method="${method}" class="form-horizontal" id="add-owner-form">
+			<fieldset>
+					<div class="control-group" id="firstName">
+						<label class="control-label">First Name </label>
+						<div class="controls">
+							<form:input path="firstName" />
+							<span class="help-inline"><form:errors path="firstName" /></span>
+						</div>
+					</div>
+					<div class="control-group" id="lastName">
+						<label class="control-label">Last Name </label>
+						<div class="controls">
+							<form:input path="lastName" />
+							<span class="help-inline"><form:errors path="lastName" /></span>
+						</div>
+					</div>
+					<div class="control-group" id="address">
+						<label class="control-label">Address </label>
+						<div class="controls">
+							<form:input path="address" />
+							<span class="help-inline"><form:errors path="address" /></span>
+						</div>
+					</div>
+					<div class="control-group" id="city">
+						<label class="control-label">City </label>
+						<div class="controls">
+							<form:input path="city" />
+							<span class="help-inline"><form:errors path="city" /></span>
+						</div>
+					</div>
+					<div class="control-group" id="telephone">
+						<label class="control-label">Telephone </label>
+						<div class="controls">
+							<form:input path="telephone" />
+							<span class="help-inline"><form:errors path="telephone" /></span>
+						</div>
+					</div>
+					<div class="form-actions">
+						<c:choose>
+				          <c:when test="${owner['new']}">
+				            <button type="submit">Add Owner</button>
+				          </c:when>
+				          <c:otherwise>
+				            <button type="submit">Update Owner</button>
+				          </c:otherwise>
+				        </c:choose>
+					</div>
+				</fieldset>
 		</form:form>
-
   	</div>
 	<jsp:include page="../footer.jsp"/>
 </body>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/list.jsp b/src/main/webapp/WEB-INF/jsp/owners/list.jsp
index cb679b019..5ca9cec02 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/list.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/list.jsp
@@ -9,15 +9,14 @@
 <jsp:include page="../header.jsp"/>
 
 <body>
-	<div id="header">
+
+  	<div class="container">
+
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-  	<div id="main">
-
-	<h2>Owners:</h2>
+		<h2>Owners</h2>
 	
-		<table>
+		<table class="table table-striped">
 		  <thead>
 		  	<tr>
 			    <th>Name</th>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/search.jsp b/src/main/webapp/WEB-INF/jsp/owners/search.jsp
index 1a1614f5e..440da975d 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/search.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/search.jsp
@@ -9,23 +9,21 @@
 
 <body>
 
-	<div id="header">
+	<div class="container">
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-	<div id="main">
 
-		<h2>Find Owners:</h2>
+		<h2>Find Owners</h2>
 		
 		<spring:url value="/owners" var="formUrl"/>
-		<form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get">
+		<form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get" class="form-horizontal">
 					<fieldset>
-						<label class="control-label">Last name:</label>
 						<div class="controls">
+							<label class="control-label">Last name </label>
 							<form:input path="lastName" size="30" maxlength="80"/>
-							<form:errors path="*" cssClass="errors"/>
+							<span class="help-inline"><form:errors path="*" /></span>
 						</div>				
-						<div>
+						<div class="form-actions">
 							<button type="submit">Find Owner</button>
 						</div>
 					</fieldset>
@@ -36,7 +34,7 @@
 		
 		<jsp:include page="../footer.jsp"/>
 
-  </div>
+  	</div>
 </body>
 
 </html>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/show.jsp b/src/main/webapp/WEB-INF/jsp/owners/show.jsp
index 60c0c031a..640d31e86 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/show.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/show.jsp
@@ -3,21 +3,19 @@
 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<html lang="en">
 
 <jsp:include page="../header.jsp"/>
 
 <body>
 
-	<div id="header">
+	<div class="container">
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-  <div id="main">
   
-	<h2>Owner Information</h2>
+		<h2>Owner Information</h2>
 	
-	  <table>
+	  <table class="table table-striped"  style="width:600px;">
 	    <tr>
 	      <th>Name</th>
 	      <td><b>${owner.firstName} ${owner.lastName}</b></td>
@@ -55,7 +53,7 @@
 	  <h2>Pets and Visits</h2>
 	
 	  <c:forEach var="pet" items="${owner.pets}">
-	    <table width="94%">
+	    <table class="table" style="width:600px;">
 	      <tr>
 	        <td valign="top">
 	          <table>
@@ -119,10 +117,11 @@
 	      </tr>
 	    </table>
 	  </c:forEach>
+	  
+	  <jsp:include page="../footer.jsp"/>
   
   	</div>
 
-	<jsp:include page="../footer.jsp"/>
 </body>
 
 </html>
diff --git a/src/main/webapp/WEB-INF/jsp/pets/form.jsp b/src/main/webapp/WEB-INF/jsp/pets/form.jsp
index c3d942715..495e7df68 100644
--- a/src/main/webapp/WEB-INF/jsp/pets/form.jsp
+++ b/src/main/webapp/WEB-INF/jsp/pets/form.jsp
@@ -8,12 +8,10 @@
 <jsp:include page="../header.jsp"/>
 
 <body>
-	<div id="header">
+
+  	<div class="container">
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-
-  	<div id="main">
 		<c:choose>
 			<c:when test="${pet['new']}"><c:set var="method" value="post"/></c:when>
 			<c:otherwise><c:set var="method" value="put"/></c:otherwise>
diff --git a/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp b/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
index 0756eedab..871c99a85 100644
--- a/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
+++ b/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
@@ -9,13 +9,11 @@
 <jsp:include page="../header.jsp"/>
 
 <body>
-	<div id="header">
+
+  	<div class="container">
+
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-
-  	<div id="main">
-
 		<h2><c:if test="${visit['new']}">New </c:if>Visit:</h2>
 		
 		<form:form modelAttribute="visit">
diff --git a/src/main/webapp/WEB-INF/jsp/vets.jsp b/src/main/webapp/WEB-INF/jsp/vets.jsp
index 8c12018f0..bb9e0d0a2 100644
--- a/src/main/webapp/WEB-INF/jsp/vets.jsp
+++ b/src/main/webapp/WEB-INF/jsp/vets.jsp
@@ -5,17 +5,15 @@
 
 <html lang="en">
 
-<jsp:include page="header.jsp"/>
 
 <body>
-	<div id="header">
+	<div class="container">
+		<jsp:include page="header.jsp"/>
+		
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-	
-  	<div id="main">
 
-		<h2>Veterinarians:</h2>
+		<h2>Veterinarians</h2>
 		
 			<table>
 			  <thead>
diff --git a/src/main/webapp/WEB-INF/jsp/welcome.jsp b/src/main/webapp/WEB-INF/jsp/welcome.jsp
index 95270b8f8..f292716c4 100644
--- a/src/main/webapp/WEB-INF/jsp/welcome.jsp
+++ b/src/main/webapp/WEB-INF/jsp/welcome.jsp
@@ -7,27 +7,22 @@
 <jsp:include page="header.jsp"/>
 
 <body>
-	<div id="header">
+  	<div class="container">
 		<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
 		<img src="${banner}" />
-	</div>
-
-  	<div id="main">
 		<img src="<spring:url value="/resources/images/pets.png" htmlEscape="true" />" align="right" style="position:relative;right:30px;"></img>
 		<h2><fmt:message key="welcome"/></h2>
 		
-		<ul>
+		<ul class="unstyled">
 		  <li><a href="<spring:url value="/owners/search" htmlEscape="true" />">Find owner</a></li>
 		  <li><a href="<spring:url value="/vets" htmlEscape="true" />">Display all veterinarians</a></li>
 		  <li><a href="<spring:url value="/resources/html/tutorial.html" htmlEscape="true" />">Tutorial</a></li>
 		</ul>
 		
-		<p>&nbsp;</p>
-		<p>&nbsp;</p>
 	
+		<jsp:include page="footer.jsp"/>
 
   	</div>
-	<jsp:include page="footer.jsp"/>
 </body>
 
 </html>
diff --git a/src/main/webapp/WEB-INF/petclinic-servlet.xml b/src/main/webapp/WEB-INF/petclinic-servlet.xml
index 4c56a4236..095746eb6 100644
--- a/src/main/webapp/WEB-INF/petclinic-servlet.xml
+++ b/src/main/webapp/WEB-INF/petclinic-servlet.xml
@@ -64,6 +64,9 @@
 	<mvc:annotation-driven content-negotiation-manager="contentNegotiationManager" /> 
 
 	<mvc:resources mapping="/resources/**" location="/resources/"/>
+	
+	<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
+	
 
 	<bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
 	    <property name="favorPathExtension" value="false" />
diff --git a/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml b/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
index a45edac8e..162fab1f2 100644
--- a/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
+++ b/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
@@ -53,7 +53,7 @@
 		Exporter that exposes the Clinic DAO and the CallMonitoringAspect via JMX,
 		based on the @ManagedResource, @ManagedAttribute, and @ManagedOperation annotations.
 	--> 
-	<context:mbean-export/>
+	<context:mbean-export/> 
 
 	<!-- PetClinic's central data access object using Spring's SimpleJdbcTemplate -->
 	<bean id="clinic" class="org.springframework.samples.petclinic.jdbc.SimpleJdbcClinic"/>
diff --git a/src/main/webapp/resources/css/petclinic.css b/src/main/webapp/resources/css/petclinic.css
new file mode 100644
index 000000000..ebf2eb15a
--- /dev/null
+++ b/src/main/webapp/resources/css/petclinic.css
@@ -0,0 +1,5 @@
+.container {
+	padding-top: 10px;
+	margin-left: 50px; 
+}
+
diff --git a/src/main/webapp/resources/styles/petclinic.css b/src/main/webapp/resources/styles/petclinic.css
deleted file mode 100644
index e12f96af7..000000000
--- a/src/main/webapp/resources/styles/petclinic.css
+++ /dev/null
@@ -1,234 +0,0 @@
-/* main elements */
-
-body,div,td {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	color: #666;
-}
-
-body {
-	background-color: #fff;
-	background-image: url(../images/banner-graphic.png);
-	background-position: top center;
-	background-repeat: no-repeat;
-	text-align: center;
-	min-width: 600px;
-	margin-top: 60px;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-div {
-	margin: 5px 25px 5px 25px;
-	text-align: left;
-}
-
-/* header and footer elements */
-
-#main {
-  	margin:0 auto;
-  	position:relative;
-  	top: 35px;
-  	left:0px;
-  	width:560px;
-  	text-align:left;
-}
-
-.footer {
-	background:#fff;
-	border:none;
-	margin-top:20px;
-	border-top:1px solid #999999;
-	width:100%;
-}
-
-.footer td {color:#999999;}
-
-.footer a:link {color: #7db223;}
-
-	
-/* text styles */
-
-h1,h2,h3 {
-	font-family: Helvetica, sans-serif;
-	color: #7db223;
-}
-
-h1 {
-	font-size: 20px;
-	line-height: 26px;
-}
-
-h2 {
-	font-size: 18px;
-	line-height: 24px;
-}
-
-h3 {
-	font-size: 15px;
-	line-height: 21px;
-	color:#555;
-}
-
-h4 {
-	font-size: 14px;
-	line-height: 20px;
-}
-
-.errors {
-	color: red;
-	font-weight: bold;
-}
-
-a {
-	text-decoration: underline;
-	font-size: 13px;
-}
-
-a:link {
-	color: #7db223;
-}
-
-a:hover {
-	color: #456314;
-}
-
-a:active {
-	color: #7db223;
-}
-
-a:visited {
-	color: #7db223;
-}
-
-ul {
-	list-style: disc url(../images/bullet-arrow.png);
-}
-
-li {
-	padding-top: 5px;
-	text-align: left;
-}
-
-li ul {
-	list-style: square url(../images/bullet-arrow.png);
-}
-
-li ul li ul {
-	list-style: circle none;
-}
-
-/* table elements */
-
-table {
-	background: #d6e2c3;
-	margin: 3px 0 0 0;
-	border: 4px solid #d6e2c3;
-	border-collapse: collapse;
-}
-
-table table {
-	margin: -5px 0;
-	border: 0px solid #e0e7d3;
-	width: 100%;
-}
-
-table td,table th {
-	padding: 8px;
-}
-
-table th {
-	font-size: 12px;
-	text-align: left;
-	font-weight: bold;
-}
-
-table thead {
-	font-weight: bold;
-	font-style: italic;
-	background-color: #c2ceaf;
-}
-
-table a:link {color: #303030;}
-
-caption {
-	caption-side: top;
-	width: auto;
-	text-align: left;
-	font-size: 12px;
-	color: #848f73;
-	padding-bottom: 4px;
-}
-
-fieldset {
-	background: #e0e7d3;
-	padding: 8px;
-	padding-bottom: 22px;
-	border: none;
-	width: 560px;
-}
-
-fieldset label {
-	width: 70px;
-	float: left;
-	margin-top: 1.7em;
-	margin-left: 20px;
-}
-
-fieldset textfield {
-	margin: 3px;
-	height: 20px;
-	background: #e0e7d3;
-}
-
-fieldset textarea {
-	margin: 3px;
-	height: 165px;
-	background: #e0e7d3;
-}
-
-fieldset input {
-	margin: 3px;
-	height: 20px;
-	background: #e0e7d3;
-}
-
-fieldset table {
-	width: 100%;
-}
-
-fieldset th {
-	padding-left: 25px;
-}
-
-.table-buttons {
-	background-color:#fff;
-	border:none;
-}
-
-.table-buttons td {
-	border:none;
-}
-
-.submit input {
-	background:url(../images/submit-bg.png) repeat-x;
-    border: 2px outset #d7b9c9;
-	color:#383838;
-	padding:2px 10px;
-	font-size:11px;
-	text-transform:uppercase;
-	font-weight:bold;
-}
-
-.updated {
-	background:#ecf1e5;
-	font-size:11px;
-	margin-left:2px;
-	border:4px solid #ecf1e5;
-}
-
-.updated td {
-	padding:2px 8px;
-	font-size:11px;
-	color:#888888;
-}
