Учебник по сервлету Java EE: использование JSP для создания верхнего колонтитула, области нижнего колонтитула, форматирования и базового CSS для книжного магазина
содержание
|
Учебник по сервлету Java EE / JSP: очистка нашего графического интерфейса
Это руководство является частью Учебника по Java EE, охватывающего JSP_2.2 и Сервлеты 3.0 .
Мы собираемся провести некоторую очистку графического интерфейса (чтобы он выглядел прилично или, возможно, несколько прилично).
Добавление шаблона сайта с использованием jsp: include, добавление CSS, использование JSTL fmt: formatDate и fmt: formatNumber
После последнего шага у нас есть рабочий список книг CRUD, который реализует элементарную архитектуру модели 2. Мы можем добавлять, редактировать / обновлять, перечислять и читать. Прежде чем мы добавим больше функциональности, давайте создадим шаблон сайта с помощью jsp: include.
Это основано на первых двух уроках. Я предлагаю начать с тех, кто хочет согласованности, и, возможно, нет, если вы просто ищете быстрый ответ для использования CSS, jsp: include и т. Д.
Многие люди используют Tiles (каркас расширения JSP) вместо JSP. Когда впервые вышел Tiles, JSP был несколько ограничен в возможностях повторного использования страниц JSP. JSP улучшился и теперь имеет файлы тегов JSP (описанные в более поздней кулинарной книге). Это не означает, что вам следует избегать использования Tiles, а просто заявляет, что если у вас нет очень сложного макета сайта и, возможно, даже если у вас сложный макет сайта, JSP обычно достаточно. Не добавляйте сложность и другую структуру, которую вы должны изучить, если и до тех пор, пока вы не изучите, что на самом деле может делать JSP.
Позвольте мне выразить это иначе: не включайте инфраструктуру Tiles в новое приложение, пока вы полностью не изучите файлы тегов JSP. Если вы знаете и любите Tiles, то, возможно, было бы неплохо придерживаться его в новом проекте, но если вы не знакомы с Tiles, начните с включений JSP и файлов тегов JSP (будет рассказано позже).
Определение простого шаблона с помощью JSP parma.X
Вот пример шаблона JSP.
/WEB-INF/pages/template.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<title>${param.title}</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/style.css" />
</head>
<body>
<jsp:include page="/WEB-INF/pages/header.jsp"/>
<h1>${param.title}</h1>
<jsp:include page="/WEB-INF/pages/${param.content}.jsp"/>
<jsp:include page="/WEB-INF/pages/footer.jsp"/>
</body>
</html>
Этот шаблон будет вызываться book-form.jsp и book-list.jsp. Это позволяет нам удалить весь HTML-код рабочей таблицы из book-form.jsp и book-list.jsp. Когда book-form.jsp и book-list.jsp вызывают template.jsp, они передают два параметра через jsp: param, а именно заголовок и контент. Заголовок — это заголовок страницы, а контент — это краткое имя JSP, которое фактически является содержимым страницы.
Личное примечание: мне нравится, что мои фрагменты JSP хорошо сформированы, т. Е. Мне не нравится начинать тег типа <body> на одной странице JSP и заканчивать его на другой. За эти годы я обнаружил, что это делает шаблоны JSP очень сложными для изменения и поддержки. Это скорее личное предпочтение, чем лучшая практика.
Вызов шаблона из book-form.jsp и book-list.jsp
Вот book-form.jsp и book-list.jsp, вызывающие шаблон с помощью <jsp: include>
/WEB-INF/pages/book-list.jsp
<jsp:include page="/WEB-INF/pages/template.jsp"> <jsp:param name="content" value="book-list-content"/> <jsp:param name="title" value="Book Listing"/> </jsp:include>
/WEB-INF/pages/book-form.jsp
<jsp:include page="/WEB-INF/pages/template.jsp"> <jsp:param name="content" value="book-form-content"/> <jsp:param name="title" value="Book Form"/> </jsp:include>
) — энтузиаст Java EE / Servlet и энтузиаст Open Source, который любит работать с контейнерным сервлетом Caucho Servlet, контейнером сервлетов Java EE Web Profile.
Смола Контейнер сервлетов с открытым исходным кодом Caucho Контейнер сервлетов веб-профиля Java EE
template.jsp
template.jsp
Сам шаблон позволяет нам обрабатывать все распространенные задачи для макета сайта в одном месте. Логика этого шаблона довольно проста, но, поскольку он может и использует ключевые теги JSTL, логика может быть намного более сложной.
Давайте пройдемся по этому шаблону шаг за шагом:
/WEB-INF/pages/template.jsp директива страницы и включает ядро JSTL
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
Выше мы просто делаем нашу стандартную директиву страницы JSP и импортируем библиотеку тегов ядра JSTL для логики отображения.
/WEB-INF/pages/template.jsp
<!DOCTYPE HTML>
<html>
<head>
<title>${param.title}</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/style.css" />
</head>
<body>
Выше определено, что базовая структура HTML замечает, что мы импортируем файл CSS с именем /resources/style.css. Это определяет внешний вид нашего сайта.
Обратите внимание, что style.css — это код CSS, скопированный из различных руководств и примеров шаблонов CSS, с небольшими изменениями. Подлинное освещение CSS выходит за рамки данного руководства и кулинарной книги. Но общая стратегия, которую я использовал для создания CSS, заключается в следующем:
- Спросите клиента, как он может выглядеть на сайте, попросите его отправить вам ссылки на похожие сайты.
- посмотрите, хватит ли бюджета, чтобы нанять кого-то, кто артистичен, обладает стилем и любит заниматься дизайном сайта, если затем нанять его, и пусть он делает все, что нужно для пиксельного толчка
- Если нет бюджета, чтобы нанять кого-то, кто хорошо разбирается в веб-дизайне, поищите в Интернете примеры проектов CSS и / или посмотрите сайты, которые понравились клиентам, стиль копирования и макет CSS.
Проблема с вышесказанным заключается в том, что клиенты не всегда сообщают вам, чего они хотят, но очень четко понимают, чего они не хотят. Я сделал все три. Я предпочитаю, чтобы другие присылали мне внешний вид, макеты (предпочли макеты, выполненные в CSS и HTML), а затем я взламывал их, пока они не выглядели достаточно близко. Вы должны изучить CSS достаточно хорошо, чтобы использовать CSS, который вы найдете в Интернете. Начните с изучения этого учебного руководства по CSS для школ W3 . Бывают случаи, когда вы просто не можете найти пример CSS, который вам нужен, в таких случаях вам может быть полезно ознакомиться с фактической спецификацией CSS .
Вот полнота style.css (пожалуйста, только просмотрите его), обратите внимание, что это набор материалов, которые я мог бы найти за пять минут, чтобы сайт выглядел несколько прилично, не тратя много времени. (Цветовой образец для образца действительно отвратителен в настоящее время, H1 мультипликационно большой, а логотип слишком большой, и я не собираюсь ничего менять, никогда.)
/resources/style.css
/* The CSS for the table was based of an example at wc3 schools.
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
*/
table.listing
{
font-family: Arial, Helvetica, sans-serif;
width:80%;
border-collapse:collapse;
}
.listing td, th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
.listing th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
.listing tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
/* unvisited link */
a:link
{
text-decoration:none;
color:#000000;
}
/* visited link */
a:visited
{
text-decoration:none;
color: #707070 ;
}
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
/* The CSS for the form was taken from this project.
https://github.com/pmcelhaney/semantic-form.css/blob/master/index.html
*/
form.semantic {
width:70%;
}
form.semantic fieldset
{
clear: both;
margin: 1em 0 0 0;
padding: 10px;
overflow: auto;
background-color: #f8f8f8;
border: 1px solid #888;
}
form.semantic legend
{
font-weight: bold;
}
form.semantic div
{
clear: both;
margin: 0;
padding: 0.5em 0 0 0;
overflow: visible;
}
form.semantic label
{
display: block;
float: left;
width: 120px;
text-align: right;
padding: 2px 1ex 6px 0;
vertical-align: baseline;
}
form.semantic label.after
{
width: auto;
text-align: left;
display: inline;
float: none;
}
form.semantic label.long
{
clear: both;
width: auto;
text-align: left;
float: none;
}
form.semantic input
, form.semantic select
, form.semantic textarea
{
float: left;
}
form.semantic input.date {
width : 100px;
}
form.semantic input.money {
width : 100px;
}
form.semantic input[type=radio]
, form.semantic input[type=checkbox]
{
vertical-align: text-bottom;
}
form.semantic ul {
list-style-type: none;
float: left;
padding: 0;
margin: 0;
}
form.semantic li {
clear: both;
padding: 0.2em 0;
}
form.semantic li label {
width: auto;
text-align: left;
padding: 0;
}
form.semantic div.field-row
{
clear: none;
float: left;
margin: 0;
padding: 0;
overflow: visible;
}
form.semantic div.field-row *
{
float: none;
display: inline;
}
form.semantic .button-row
{
text-align: right;
}
form.semantic .button-row input
{
float: none;
}
form.semantic div.long label
{
width: auto;
text-align: left;
float: none;
}
form.semantic div.long textarea
{
width: 100%;
}
/* Errors -- for use with JQuery Validate, etc. */
form.semantic input.error
, form.semantic select.error
, form.semantic textarea.error
{
background-color: #77002a;
color: white;
}
form.semantic label.error
{
width: auto;
color: #77002a;
text-align: left;
}
/* from caucho.com */
#footer hr
{
width: 100%;
}
#footer
{
font-size: 80%;
text-align: right;
}
/* bottom nav */
.bottom {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size : 90%;
color : #999;
}
ul.bottom {
list-style-type : none;
padding : 0em;
margin : 0;
margin-top : 3em;
text-align : center;
}
.bottom li {
display : inline;
margin : 0.1em 0.1em;
padding : 0.0em;
}
.bottom a {
color : #999;
}
.bottom a:hover {
color : #ffcc33;
}
/* bottom */
.about {
color : #999;
font-family : Helvetica, Arial, sans-serif;
text-align : center;
font-size : 90%;
}
div.about {
margin-top : 1em;
}
) — энтузиаст Java EE / Servlet и энтузиаст Open Source, который любит работать с контейнерным сервлетом Caucho Servlet, контейнером сервлетов Java EE Web Profile.
Смола Контейнер сервлетов с открытым исходным кодом Caucho Контейнер сервлетов
веб-профиля Java EE
Вы можете заметить, что я сейчас использую эти стили в book-form-content.jsp и book-list-content.jsp.
Форматирование дат и чисел в book-list.jsp с помощью fmt: formatNumber и fmt: formatDate
На последнем шаге урока список книг не очень хорошо отформатировал даты или число. JSTL включает библиотеку тегов формата для форматирования чисел и дат, которую мы можем использовать в book-list.jsp следующим образом:
/WEB-INF/pages/book-list-content.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix ="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix ="fmt" %>
<a href="${pageContext.request.contextPath}/book">Add Book</a>
<table class="listing">
<tr>
<th>Title</th>
<th>Description</th>
<th>Price</th>
<th>Publication Date</th>
</tr>
<c:forEach var="book" items="${books}" varStatus="status">
<tr class="${status.index%2==0 ? 'alt' : ''}">
<td><a href="${pageContext.request.contextPath}/book?id=${book.id}">${book.title}</a></td>
<td>${book.description}</td>
<td>
<fmt:formatNumber value="${book.price}" type="currency"/>
</td>
<td>
<fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>
</td>
</tr>
</c:forEach>
</table>
Notice the use of <code>fmt:formatNumber</code> and <code>fmt:formatDate</code> as follows:
==== /WEB-INF/pages/book-list-content.jsp fmt:formatNumber and fmt:formatDate====
<pre>
<a href="${pageContext.request.contextPath}/book">Add Book</a>
...
<fmt:formatNumber value="${book.price}" type="currency"/>
...
<fmt:formatDate value="${book.pubDate}" type="both" dateStyle ="short" timeStyle ="short"/>
</table>
Fmt: formatNumber форматирует цену как валюту, а fmt: formatDate форматирует дату публикации, используя краткую форму. Мы более подробно рассмотрим теги этого формата, когда рассмотрим интернационализацию (i18n), поскольку и эти теги, и другие теги из библиотеки JSTL fmt поддерживают i18n. Чтобы узнать больше об этих тегах, смотрите документацию как в документации JSTL fmt .
Список книг Использование c: forEach varStatus для чередования цветов строк в таблице
Вы можете использовать c: forEach varStatus, чтобы чередовать цвета строк с CSS.
В файле CSS (/resources/style.css) мы определили это правило CSS:
/resources/style.css
...
.listing tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
...
Выше в основном говорится, что если вы находитесь в таблице, которая использует класс листинга, и это тег строки (<tr>), который использует класс alt, то установите цвет # 000000 и цвет фона столбца (td ) к # EAF2D3.
Теперь с точки зрения JSP / JSTL нам нужно определить четные строки и вывести атрибут класса строки как alt. Вы можете сделать это с помощью varStatus следующим образом:
/WEB-INF/pages/book-list-content.jsp c: forEach varStatus
...
<c:forEach var="book" items="${books}" varStatus="status">
<tr class="${status.index%2==0 ? 'alt' : ''}">
...
С: Foreach в varStatus = «статус» захватывает статусный объект в качестве переменных мы можем использовать. Объект состояния имеет текущий индекс, а также другие свойства о текущем состоянии цикла .
Выражение $ {status.index% 2 == 0? ‘alt’: } говорит, что выводит alt, если эта строка даже не выводит пустую строку. Это связывает каждую четную строку с классом alt CSS.
Форма книги
С самой формой книги ничего не изменилось, кроме как мы переместили ее в book-form-content.jsp, чтобы воспользоваться новым шаблоном.
/WEB-INF/pages/book-form-content.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<form class="semantic" method="post"
action="${pageContext.request.contextPath}/book">
<fieldset>
<legend>
<c:choose>
<c:when test="${not empty book.id }">
Updating Book
</c:when>
<c:otherwise>
Adding Book
</c:otherwise>
</c:choose>
</legend>
<div>
<label for="title">Title</label> <input type="text" name="title"
id="title" value="${book.title}" />
</div>
<div>
<label for="description">Description</label>
<textarea name="description" id="description" rows="2" cols="60">${book.description}</textarea>
</div>
<div>
<label for="price">Price prebuffer_9lt;/label> <input name="price" id="price"
class="money" value="${book.price}" />
</div>
<div>
<label for="pubDate">Publication Date</label> <input name="pubDate"
id="pubDate" class="date" value="${bookPubDate}" /> <label
class="after">(MM/DD/YYYY)</label>
</div>
<c:if test="${not empty book.id}">
<input type="hidden" name="id" value="${book.id}" />
</c:if>
</fieldset>
<div class="button-row">
<a href="${pageContext.request.contextPath}/book/">Cancel</a> or <input type="submit" value="Submit" />
</div>
</form>
И последнее, но не менее важное: footer.jsp и header.jsp
Мы добавили две JSP, которые реализуют области верхнего и нижнего колонтитула нашего шаблона следующим образом:
/WEB-INF/pages/footer.jsp
<div id="footer"> <ul class="bottom"> <li><a href="http://www.caucho.com/">HOME</a> | <li><a href="http://www.caucho.com/about/contact/">CONTACT US</a> | <li><a href="http://www.caucho.com/resin-4.0/">DOCUMENTATION</a> | <li><a href="http://blog.caucho.com/">BLOG</a> | <li><a href="http://wiki.caucho.com/">WIKI</a> </ul> <div class="about"> Copyright (c) 1998-2012 Caucho Technology, Inc. All rights reserved.<br><span class="caucho">caucho<sub>�</sub></span> , <span class="resin">resin<sub>�</sub></span> and <span class="quercus">quercus<sub>�</sub></span> are registered trademarks of Caucho Technology, Inc. </div> <div class="about"> resin<sub>�</sub> is a cloud optimized, java<sub>�</sub> application server that supports the java ee webprofile <sub>�</sub> </div> </div>
/WEB-INF/pages/header.jsp
<div>
<a href="${pageContext.request.contextPath}">
<img src="${pageContext.request.contextPath}/resources/logo.png"/>
</a>
</div>
) — энтузиаст Java EE / Servlet и энтузиаст Open Source, который любит работать с контейнерным сервлетом Caucho Servlet, контейнером сервлетов Java EE Web Profile.
Смола Контейнер сервлетов с открытым исходным кодом Caucho Контейнер сервлетов
веб-профиля Java EE