JSTL теги — часть 1

Продолжаем писать простое джава веб приложение и сегодня пришло время рассмотреть, как работать с jstl тегами и как очень удобно отобразить информацию на jsp странице с их помощью. На повестке дня:

• подключение библиотеки jstl к проекту;
• использование тега forEach для вывода списка объектов;
• использование out для вывода объекта.

Начнем…

С JSP  и JSTl мы уже частично знакомы из предыдущих статей. Теперь, давайте используем уже имеющиеся знания, дополним их и попробуем применить их в нашем простом сайте, который мы пишем уже несколько месяцев.

Для тех, кто тут впервые: мы пишем простое java веб приложение, с целью ознакомиться с основами веб программирования на джава. Весь цикл статей Вы сможете найти в разделе java web.

Прежде всего, чтобы отобразить информацию ее нужно добавить. Я вручную добавил несколько записей в нашу базу данных. В кого ничего не сохранилось вот вам дамп моей базы. Просто создайте файл с расширением sql вставьте содержимое и импортируйте в MySql. Для ленивых, в конце статьи будет ссылка на код гитхаб и в корне каталога будет дамп, который можно будет скачать. Для особенно ленивых, можно попробовать вставить как текст в консоль MySql (не гарантирую, что все заработает):

Код

1. -- MySQL dump 10.13  Distrib 5.7.19, for Win64 (x86_64)
2. --
3. -- Host: localhost    Database: simpleapp
4. -- ------------------------------------------------------
5. -- Server version   5.7.19-log
6.  
7. /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
8. /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
9. /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
10. /*!40101 SET NAMES utf8 */;
11. /*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
12. /*!40103 SET TIME_ZONE='+00:00' */;
13. /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
14. /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
15. /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
16. /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
17.  
18. --
19. -- Table structure for table `article`
20. --
21.  
22. DROP TABLE IF EXISTS `article`;
23. /*!40101 SET @saved_cs_client     = @@character_set_client */;
24. /*!40101 SET character_set_client = utf8 */;
25. CREATE TABLE `article` (
26.   `id` int(11) NOT NULL AUTO_INCREMENT,
27.   `title` varchar(45) NOT NULL,
28.   `body` varchar(3000) DEFAULT NULL,
29.   `category_id` int(11) NOT NULL,
30.   `users_id` int(11) NOT NULL,
31.   PRIMARY KEY (`id`,`category_id`,`users_id`),
32.   KEY `fk_article_category_idx` (`category_id`),
33.   KEY `fk_article_users1_idx` (`users_id`),
34.   CONSTRAINT `fk_article_category` FOREIGN KEY (`category_id`) REFERENCES `category` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION,
35.   CONSTRAINT `fk_article_users1` FOREIGN KEY (`users_id`) REFERENCES `users` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION
36. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
37. /*!40101 SET character_set_client = @saved_cs_client */;
38.  
39. --
40. -- Dumping data for table `article`
41. --
42.  
43. LOCK TABLES `article` WRITE;
44. /*!40000 ALTER TABLE `article` DISABLE KEYS */;
45. INSERT INTO `article` VALUES (1,'First java program','My future content about java programming',1,1),(2,'SQL - helpful operations','My future content about SQL',2,1),(3,'Javascript as good frontend solution','My future content about javascript programming',3,1);
46. /*!40000 ALTER TABLE `article` ENABLE KEYS */;
47. UNLOCK TABLES;
48.  
49. --
50. -- Table structure for table `category`
51. --
52.  
53. DROP TABLE IF EXISTS `category`;
54. /*!40101 SET @saved_cs_client     = @@character_set_client */;
55. /*!40101 SET character_set_client = utf8 */;
56. CREATE TABLE `category` (
57.   `id` int(11) NOT NULL AUTO_INCREMENT,
58.   `name` varchar(45) DEFAULT NULL,
59.   PRIMARY KEY (`id`)
60. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
61. /*!40101 SET character_set_client = @saved_cs_client */;
62.  
63. --
64. -- Dumping data for table `category`
65. --
66.  
67. LOCK TABLES `category` WRITE;
68. /*!40000 ALTER TABLE `category` DISABLE KEYS */;
69. INSERT INTO `category` VALUES (1,'java'),(2,'sql'),(3,'javascript');
70. /*!40000 ALTER TABLE `category` ENABLE KEYS */;
71. UNLOCK TABLES;
72.  
73. --
74. -- Table structure for table `role`
75. --
76.  
77. DROP TABLE IF EXISTS `role`;
78. /*!40101 SET @saved_cs_client     = @@character_set_client */;
79. /*!40101 SET character_set_client = utf8 */;
80. CREATE TABLE `role` (
81.   `id` int(11) NOT NULL AUTO_INCREMENT,
82.   `name` varchar(45) NOT NULL,
83.   PRIMARY KEY (`id`)
84. ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
85. /*!40101 SET character_set_client = @saved_cs_client */;
86.  
87. --
88. -- Dumping data for table `role`
89. --
90.  
91. LOCK TABLES `role` WRITE;
92. /*!40000 ALTER TABLE `role` DISABLE KEYS */;
93. INSERT INTO `role` VALUES (1,'admin'),(2,'user');
94. /*!40000 ALTER TABLE `role` ENABLE KEYS */;
95. UNLOCK TABLES;
96.  
97. --
98. -- Table structure for table `users`
99. --
100.  
101. DROP TABLE IF EXISTS `users`;
102. /*!40101 SET @saved_cs_client     = @@character_set_client */;
103. /*!40101 SET character_set_client = utf8 */;
104. CREATE TABLE `users` (
105.   `id` int(11) NOT NULL AUTO_INCREMENT,
106.   `login` varchar(45) NOT NULL,
107.   `password` varchar(50) DEFAULT NULL,
108.   `email` varchar(45) DEFAULT NULL,
109.   `role_id` int(11) NOT NULL,
110.   PRIMARY KEY (`id`),
111.   KEY `fk_users_role1_idx` (`role_id`),
112.   CONSTRAINT `fk_users_role1` FOREIGN KEY (`role_id`) REFERENCES `role` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION
113. ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
114. /*!40101 SET character_set_client = @saved_cs_client */;
115.  
116. --
117. -- Dumping data for table `users`
118. --
119.  
120. LOCK TABLES `users` WRITE;
121. /*!40000 ALTER TABLE `users` DISABLE KEYS */;
122. INSERT INTO `users` VALUES (1,'admin',NULL,NULL,1);
123. /*!40000 ALTER TABLE `users` ENABLE KEYS */;
124. UNLOCK TABLES;
125. /*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
126.  
127. /*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
128. /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
129. /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
130. /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
131. /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
132. /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
133. /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
134.  
135. -- Dump completed on 2017-10-15 16:29:50

Базу данных наполнили, теперь можно приступить к слою представления. Как помним слой доступа к базе данных мы уже написали в статье: Работа с базой данных MySql в Java и договорились, что в этом проекте мы пропустим слой сервисом, а будем работать непосредственно через слой DAO.

Предлагаю вывести на главную страницу сайта все статьи, которые есть в базе. Для этого переходим в наш сервлет и создаем объект ArticleDao, который отвечает за работу с сущностью статьи. private ArticleDao articleDao = new ArticleDaoImpl().

Далее нужно выбрать в список все статьи и передать их на jsp. Делается это очень просто. Нужно поместить атрибут в HttpServletRequest request переменную. 

Полный вид класса HomeServlet:

Код

1. package com.javamaster.controller;
2.  
3. import java.io.IOException;
4. import java.util.List;
5.  
6. import javax.servlet.ServletException;
7. import javax.servlet.http.HttpServlet;
8. import javax.servlet.http.HttpServletRequest;
9. import javax.servlet.http.HttpServletResponse;
10. import javax.servlet.http.HttpSession;
11.  
12. import com.javamaster.dao.ArticleDao;
13. import com.javamaster.dao.impl.ArticleDaoImpl;
14. import com.javamaster.entity.Article;
15. import com.javamaster.entity.Category;
16.  
17. /**
18.  * Servlet implementation class HomeServlet
19.  */
20. public class HomeServlet extends HttpServlet {
21.     private static final long serialVersionUID = 1L;
22.    
23.     private ArticleDao articleDao = new ArticleDaoImpl();
24.        
25.     /**
26.      * @see HttpServlet#HttpServlet()
27.      */
28.     public HomeServlet() {
29.         super();
30.         // TODO Auto-generated constructor stub
31.     }
32.  
33.     /**
34.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
35.      */
36.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
37.         String path = request.getServletPath();
38.         if (path.equals("/")){
39.             List<Article> articles = articleDao.getAllArticles();
40.             request.setAttribute("title", "Title of our application");
41.             request.setAttribute("articles", articles);
42.             request.getRequestDispatcher("/WEB-INF/view/index.jsp").forward(request, response);
43.         }
44.         else if (path.equals("/welcome")){
45.             request.getRequestDispatcher("/WEB-INF/view/welcome.jsp").forward(request, response);
46.         }
47.     }
48.  
49.     /**
50.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
51.      */
52.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
53.         // TODO Auto-generated method stub
54.         doGet(request, response);
55.     }
56.  
57. }

Как видно из кода выше, используя метод setAttribute() можно поместить как объект, так и список объектов.

Теперь стоит задача получить наши атрибуты на странице jsp. В данном случае нам отлично поможет библиотека jstl тегов, в которой есть все необходимое для работы с объектами. В крайнем случае, Вы всегда можете написать свой собственный тег. Я обязательно напишу статью, как создавать собственные теги, но уверяю, jstl библиотеки вполне хватает для стандартных ситуаций.

Для того, чтобы использовать библиотеку ее нужно подключить к нашему проекту.

Да, это очевидные вещи, но практика показывает, что лучше все таки об этом упомянуть. Вводим в гугле фразу jstl maven и первая ссылка будет весть на репозиторий нашей библиотеки. Или можете просто скопировать код ниже.

Код

1. <dependency>
2.     <groupId>jstl</groupId>
3.     <artifactId>jstl</artifactId>
4.     <version>1.2</version>
5. </dependency>

Полный код pom.xml:

Код

1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
2.  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
3.   <modelVersion>4.0.0</modelVersion>
4.   <groupId>com.javamaster</groupId>
5.   <artifactId>simplewebapp</artifactId>
6.   <packaging>war</packaging>
7.   <version>0.0.1-SNAPSHOT</version>
8.   <name>simplewebapp Maven Webapp</name>
9.   <url>http://maven.apache.org</url>
10.   <dependencies>
11.     <dependency>
12.       <groupId>junit</groupId>
13.       <artifactId>junit</artifactId>
14.       <version>3.8.1</version>
15.       <scope>test</scope>
16.     </dependency>
17.     <!-- https://mvnrepository.com/artifact/jstl/jstl -->
18. <dependency>
19.     <groupId>jstl</groupId>
20.     <artifactId>jstl</artifactId>
21.     <version>1.2</version>
22. </dependency>
23.    
24.     <dependency>
25.             <groupId>javax</groupId>
26.             <artifactId>javaee-web-api</artifactId>
27.             <version>6.0</version>
28.             <scope>provided</scope>
29.         </dependency>
30. <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
31.         <dependency>
32.             <groupId>mysql</groupId>
33.             <artifactId>mysql-connector-java</artifactId>
34.             <version>5.1.34</version>
35.         </dependency>
36.  
37.        
38.   </dependencies>
39.   <build>
40.     <finalName>simplewebapp</finalName>
41.   </build>
42. </project>

Далее подключаем библиотеку jstl непосредственно на нашей странице: <%@ taglib prefix=«c« uri=«http://java.sun.com/jsp/jstl/core« %>

Чтобы вывести значение атрибута title можно воспользоваться тегом out: <c:out value=»${attribute}»>

В нашем случае:  <title><c:out value=»${title}»></title>. Данный атрибут можно заменить на ${attribute} — выражение.

Для вывода списка объектов воспользуемся тегом forEach:

<c:forEach var="variable" items="${variableList}" >
        <tr><td><c:out value="${variable.parameter}"></td></tr>
    </c:forEach>

Строку <c:out value=«${variable.parameter}»> можно заменить на ${variable.parameter}

Пример с нашего проекта. Весь код index.jsp очень большой (никак не приведу его в порядок), так что выложу только часть. Весь код будет по ссылке в конце статьи.

Код

1. <!-- Articles -->
2.             <c:forEach items="${articles}" var="article">
3.             <div class="row">
4.                 <article class="col-xs-12">
5.                     <h2>${article.title}</h2>
6.                     <p>${article.body}</p>
7.                     <p><button class="btn btn-default">Read More</button></p>
8.                     <p class="pull-right"><span class="label label-default">keyword</span> <span class="label label-default">tag</span> <span class="label label-default">post</span></p>
9.                     <ul class="list-inline">
10.                         <li><a href="#">Today</a></li>
11.                         <li><a href="#"><span class="glyphicon glyphicon-comment"></span> 2 Comments</a></li>
12.                         <li><a href="#"><span class="glyphicon glyphicon-share"></span> 8 Shares</a></li>
13.                     </ul>
14.                 </article>
15.             </div>
16.             </c:forEach>

Обратите внимание: мы в атрибут var поместили просто переменную. Мы можем называть ее по собственному желанию. Потом мы используем эту переменную в выражении типа ${}. В атрибут items мы поместили то название атрибута, которое мы создали и поместили в метод setAttribute. Будьте внимательны, когда меняете названия атрибутов в сервлете. Тогда его придется поменять и в jsp.

Давайте запустим наше приложение и посмотрим, что вышло в итоге.

На этом и закончим нашу статью. Практически ничего нового мы тут не узнали. Просто хотелось показать, как использовать jstl теги на практике. На самом деле мы сейчас рассматривали теги JSTL core. Есть еще и другие: fmt, sql, xml для работы с соответственными технологиями. Я разделил эту статью на две часть и во второй часть мы рассмотрим больше тегов JSTL core и немного fmt  отдельно от контекста нашего веб приложения.

Код на гит как и обещал: https://github.com/caligula95/simplewebapp-part6

И как принято, записал видео: