adminhq

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

Java web

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

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

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

Еще по теме

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *