Что такое jsp

Продолжаем изучать java веб и сегодня мы узнаем об jsp страницах:

  • что это такое;
  • как работает jsp;
  • как работать с jsp.

JSP (Java server pages) — это технология, которая позволяет внедрять Java-код, а также EL (expression language) в статичное содержимое страницы) и позволяющая веб-разработчикам динамически генерировать HTML, XML и другие веб-страницы. JSP является составной частью единой технологии создания бизнес-приложений J2EE.

JSP — может выполняться практически на любом веб сервере, так как эта технология основана на языке программирования Java, который не зависит от платформы. Java server pages поддерживает теги HTML, Javascript, а также собственный набор тегов.

JSP — позволяет отделить динамическую часть страницы от статической. Эта технология предусматривает вставку Java кода в страницу. Мы не будем рассматривать такой вариант использования JSP поскольку эта технология считается устаревшей и несовершенной. Причина проста: разработчики дизайнеры, которые разрабатывают внешний вид страницы не всегда могут быть знакомы с Java и это может вызвать дополнительные трудности при редактировании или поддержке веб приложений.

Вместо вставки Java кода сейчас используется библиотека тегов jstl или Javascript для совсем продвинутых. Мы рассмотрим пример именно с jstl тегами. Это очень удобная библиотека, которая имеет почти весь функционал, который необходим при создании динамических страниц. Если нужно что-то специфическое, то всегда можно написать собственный тег и вставить его содержимое на страницу.

Мы уже частично знакомы с JSP по первым веб статьям. Основная часть JSP страницы это HTML, в которую вставляются теги с динамическим содержимым.

Пример JSP страницы

Очень необходимым знанием, которым мы будем пользоваться является директива JSP.

Директива JSP — это сообщение, которое страница может послать соответствующему контейнеру с указанием действий. Синтаксис директивы:<%@ директива атрибут=«значение» %>

Есть три основных типа директив:

  1. page (может использоваться для импорта классов);
  2. include (дает вам возможность вставить файл в класс сервлета при трансляции JSP файла в сервлет);
  3. taglib (дает возможность подключить библиотеку тегов).

Так, как код в страницу мы вставлять не будем, рассмотрим последние две директивы.

Include

Например у нас есть страницы, которые будут иметь одинаковую верхнюю и нижнюю часть. Очень распространенный шаблон, в котором футер и хедер одинаковы для всех страниц. Для того, чтобы не писать Код этих страниц в каждом JSP файле можно вынести их код в отдельный файлы и потом подключить в нужном нам месте с помощью директивы include.

Код    
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  4. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  5. <c:set var="language"
  6.     value="${not empty param.language ? param.language : not empty language ? language : pageContext.request.locale}"
  7.     scope="session" />
  8. <fmt:setLocale value="${language}" />
  9. <fmt:setBundle basename="message" />
  10. <html>
  11. <head>
  12. <title><fmt:message key="home.title"></fmt:message></title>
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <!-- Bootstrap -->
  15. <link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  16. <!-- styles -->
  17. <link href="resources/css/styles.css" rel="stylesheet">
  18. <script src="https://code.jquery.com/jquery.js"></script>
  19. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  20. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  21. <!--[if lt IE 9]>
  22.       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  23.       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  24.     <![endif]-->
  25. </head>
  26. <body>
  27.     <jsp:include page="template/header.jsp" />
  28.  
  29.     <div class="page-content">
  30.         <div class="row">
  31.             <div class="col-md-2">
  32.                 <jsp:include page="template/sidebar.jsp" />
  33.             </div>

Расположение файлов в проекте:

директива

Tagllib

В коде выше можно проследить использование директивы taglib. С ее помощью мы подключили библиотеку тегов jstl. С помощью этой директивы можно подключить библиотеку собственных тегов: <%@ taglib uri=»/WEB-INF/mylib.tld» prefix=»test» %>.

Заметьте, что важным атрибутом taglib является prefix. Это обязательный к использованию атрибут. С помощью prefix можно вызывать библиотеку в коде. Имя prefix можно выбирать любое. К стати, вот и использование jstl тегов на деле:

Код    
  1. <c:forEach items="${accounts}" var="account">
  2. <tr align="center">
  3. <td>${account.number}</td>
  4. <td>${account.balance}</td>
  5. <td><c:if test="${!account.isBlocked}">${statusActive }</c:if>
  6. <c:if test="${account.isBlocked}">${statusBlocked }</c:if></td>
  7. <td><c:if test="${!account.isBlocked}">
  8. <a href="?command=blockaccount&accountId=${account.accountId}">${block }</a>
  9. </c:if></td>
  10. <td><a href="?command=showinfo&accountId=${account.accountId}">${showInfo }</a></td>       
  11. </tr>
  12. </c:forEach>

Код выше демонстрирует вывод всех элементов списка. О том, как мы его передали на страницу будет в следующих статьях. Его синтаксис:

<c:forEach items=”${list}” begin=”5” end=”20” step=”4” var=”item”> ${item} </c:forEach>

Код    
  1. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <c:set var="language"
  4.     value="${not empty param.language ? param.language : not empty language ? language : pageContext.request.locale}"
  5.     scope="session" />
  6. <fmt:setLocale value="${language}" />
  7. <fmt:setBundle basename="message" />
  8. <div class="sidebar content-box" style="display: block;">
  9.     <ul class="nav">
  10.         <!-- Main menu -->
  11.         <li class="current"><a href="/"><i
  12.                 class="glyphicon glyphicon-home"></i><fmt:message key="sidebar.home"></fmt:message></a></li>
  13.         <li><c:if test="${currentUser.role.id==2 }">
  14.         <form action="add-user" method="post">
  15.         <fmt:message key="sidebar.addUser" var="addNewUser"></fmt:message>
  16.         <input type="hidden" name="command" value="adduser">
  17.         <input type="submit" value="${addNewUser}">
  18.         </form>
  19.             </c:if></li>
  20.         <li><c:if test="${currentUser.role.id==1 }">
  21.                 <a href="?command=create-payment"><fmt:message key="sidebar.createPayment"></fmt:message></a>
  22.             </c:if></li>
  23.     </ul>
  24. </div>

Это код сайдбара, который подключался выше. Как видим, здесь используется разветвления, чтобы вывести только ту информацию, которая доступна определенном типу пользователя.

Синтаксис: <c:if test=”${a == b}”>
a equals b
</c:if>

Лучше всего рассматривать теги jstl при написании реального проекта, так как я не вижу смысла учить и запоминать весь синтаксис для каждого действия. Код выше должен послужить только примером, как это используется. Не нужно ничего заучивать. Когда Вы будете писать код, тогда и обратитесь к данному синтаксису.

К стати, код проекта, с которого был взят этот код, находится тут: https://github.com/caligula95/payment-systemapp

Я выложил проект на heroku: https://payment-systemapp.herokuapp.com/ — тут используется бесплатный аккаунт, так что для первого запроса нужно подождать пару минут, чтобы проект запустился.

 

Добавить комментарий