Как в thymeleaf получить значение из checkbox

В отличие от выражений в th:object, эти выражения могут включать в себя навигацию по свойствам (фактически здесь позволено любое выражение, разрешенное для атрибута пути тега JSP).

Обратите внимание, что th:field также понимает новые типы элемента , представленные в HTML5, такие как , и т. д., эффективно добавляя полную поддержку HTML5 для Spring MVC.

6.3 Checkbox fields

th:field также позволяет определять входные данные checkbox флажков. Давайте посмотрим пример с нашей HTML-страницы:

 
Covered " />
 

Обратите внимание, что здесь есть кое-что еще, кроме самого флажка, например, внешняя метка, а также использование функции #ids.next(‘closed’) для получения значения, которое будет применено к атрибуту id входных данных флажка.

Зачем нам нужно динамическое создание атрибута id для этого поля? Поскольку флажки являются потенциально многозначными, и, следовательно, к их значениям идентификатора всегда будет добавлен суффикс порядкового номера (внутренне используя функцию #ids.seq(…)), чтобы гарантировать, что каждый из флажков input одного и того же свойства имеет другое значение идентификатора.

Нам будет легче это увидеть, если мы посмотрим на такое многозначное поле флажка:

Обратите внимание, что на этот раз мы добавили атрибут th:value, потому что поле функций не является логическим, как было описано выше, а представляет собой массив значений.

Давайте посмотрим вывод HTML, сгенерированный этим кодом:

Здесь мы видим, как суффикс последовательности добавляется к каждому атрибуту id input и как функция #ids.prev(…) позволяет нам извлечь последнее значение последовательности, сгенерированное для определенного идентификатора ввода.

Не беспокойтесь об этих скрытых входах с name = «_ features»: они автоматически добавляются, чтобы избежать проблем с браузерами, не отправляющими невыбранные значения флажков на сервер при отправке формы.

Также обратите внимание, что если бы наше свойство features содержало некоторые выбранные значения в нашем form-backing bean, то th:field позаботилось бы об этом и добавило бы атрибут checked=«checked» в соответствующие входные теги.

6.4 Radio Button fields

Поля переключателей задаются аналогично не булевым (многозначным) флажкам, за исключением того, что, конечно, они не многозначны:

6.5 Dropdown/List selectors

Поля выбора состоят из двух частей: тега и его вложенных тегов . При создании поля такого типа только тег должен включать атрибут th:field, но атрибуты th:value во вложенных тегах будут очень важны, поскольку они будут обеспечивать возможность узнать, какова текущая выбранная опция (аналогично не булевым флажкам и переключателям).

Давайте перестроим поле типа выпадающий список:

 Wireframe  

На данный момент, понять этот кусок кода довольно легко. Просто обратите внимание, как приоритет атрибута позволяет нам устанавливать атрибут th:each в самом теге .

6.6 Dynamic fields

Благодаря расширенным возможностям связывания полей формы в Spring MVC, мы можем использовать сложные выражения Spring EL для привязки динамических полей формы к нашему form-backing bean. Это позволит нам создавать новые объекты Row в нашем компоненте SeedStarter и добавлять поля этих строк в нашу форму по запросу пользователя.

Для этого нам понадобится пара новых замапированных методов в нашем контроллере, которые добавят или удалят строку из нашего SeedStarter в зависимости от наличия определенных параметров запроса:

@RequestMapping(value="/seedstartermng", params=) public String addRow(final SeedStarter seedStarter, final BindingResult bindingResult) < seedStarter.getRows().add(new Row()); return "seedstartermng"; >@RequestMapping(value="/seedstartermng", params=) public String removeRow( final SeedStarter seedStarter, final BindingResult bindingResult, final HttpServletRequest req)

И теперь мы можем добавить динамическую таблицу в нашу форму:

 
 
 
Row
 
Variety
 
Seeds per cell
 
Add row 
 
 
 
 
1
 
 Thymus Thymi  
 
__].seedsPerCell>" />
 
Remove row 
 
 
 

Достаточно много вещей здесь, но не так много, чтобы не понимать… за исключением одной странной вещи:

 . 

Если вы помните из учебника «Использование Thymeleaf», то синтаксис __$__ является выражением предварительной обработки, которое является внутренним выражением, которое вычисляется до фактической оценки всего выражения. Но почему такой способ указания индекса строки? Не будет ли этого достаточно с:

…вообще-то нет. Проблема в том, что Spring EL не оценивает переменные в скобках индекса массива, поэтому при выполнении вышеприведенного выражения мы получим ошибку, сообщающую нам, что rows[rowStat.index] (вместо rows[0], rows[1] и т. д.) недопустимая позиция в коллекции строк. Вот почему здесь необходима предварительная обработка.

Давайте посмотрим на фрагмент полученного HTML-кода после того, как несколько раз нажали «Add Row»:

  1  Thymus vulgaris Thymus x citriodorus Thymus herba-barona Thymus pseudolaginosus Thymus serpyllum     Remove row   2  Thymus vulgaris Thymus x citriodorus Thymus herba-barona Thymus pseudolaginosus Thymus serpyllum     Remove row   

Завоевание Spring Boot

Доброго времени суток, уважаемый Читатель! И приятно познакомиться, даже если основной причиной заглянуть в скромную тему о первом знакомстве с разработкой на Spring Boot послужило помпезное название. Хотелось бы поделиться опытом выполнения вступительного задания для стажировки на портале JavaRush, излагая обозрение со стороны вполне обыкновенного студента технического университета, желающего проверить на прочность накопленные знания. Никоим образом не отрицаю возможное наличие грубости в приложенном коде или методике мышления, и приветствую конструктивную критику, ведь именно благодаря “шишкам и ссадинам” удается развиваться в профессиональном направлении. Более того, совершенно не претендую на звание “панацеи” в решении поставленных условий и намеренно упускаю отдельные фрагменты программы, оставляя ключевым значением вхождение в относительно сложную тему без малейших последствий для нервной системы. Верно, опрометчиво отрицать очевидное: мне было тяжело и совершенно ничего не понятно до определенного момента. И если Вы испытываете схожие ощущения от первой встречи с заданием, то “Добро пожаловать!”. Напишем web-приложение на Spring Boot по упрощенной аналогии вступительного теста на стажировку с использованием двигателя шаблонов Thymeleaf и query -запросами на локальный сервер MySQL для фильтрации входящего массива информации. Итак, начнем же!

Spring Boot. Что за зверь и как его готовить?

Если кратко и лаконично, — великолепный инструмент от компании Pivotel для сохранения драгоценного времени в процессе создания приложения, исключающий потребность прямого подключения сторонних библиотек, написания внушительного полотна мапирования и сервлетов. Достаточно воспользоваться сборщиком Spring Initializr, интегрированном в IntelliJ IDEA Ultimate Edition (File — New — Project. — Spring Initializr) или расположенном на web-сервисе start.spring.io, указывая пакеты для включения из широкого перечня предложений.

• WEB — основной компонент для разработки web-приложения, включающий локальный сервер Apache Tomcat по стандартному адресу localhost:8080 и универсальный фреймворк Spring MVC.
• DevTools — используется для быстрого перезапуска приложения в горячей JVM при обнаружении изменений в скомпилированном коде или шаблонах; более того освобождает от очистки cache у Thymeleaf, если выбранный движок включен в проект.
• JPA — технология требуется для работы с базами данных и обеспечивает объектно-реляционное отображение Java объектов, предоставляет API (Hibernate в нашем случае) для управления, сохранения и получения сущностей.
• Thymeleaf (Mustache, AngularJS, Vaadin и далее) — двигатель шаблонов для визуализации приложения; благодаря относительному знакомству с принципами html остановил выбор на Thymeleaf, выдвинувшему язык на краеугольный столп мира.
• MySQL — подключает драйвера Java Database Connectivity для выполнения SQL-запросов к базе данных.

Первые шаги в большое будущее

Далее возникает довольно интересный и вполне логично обоснованный вопрос: “А что делать теперь? Как это будет работать?”. Программа строится на принципах Model-View-Controller: организует считывание сущностей из подключенной базы данных (Model) и отображается в пользовательском интерфейсе с элементами управления (View); связь между компонентами и выполнение действий согласно переданных запросов выполняется благодаря Controller. Именно создание ключевых элементов служит опорной точкой для продолжения разработки. Дабы избежать скользкой дорожки и сохранять уважение товарищей на трудовом поприще, следует располагать компоненты в соответствующих директориях (скажем, поместить файл Controller в папку controllers в ветку “java”) и бережно хранить порядок на рабочем месте.

Сущность — маленькая деталь в большом механизме

• Идентификационный номер для определения расположения в общем потоке;
• Текстовое сообщение из определенного количества символов;
• Дату добавления пользователем в общей перечень;
• Логическую переменную для определения “Сделано или не сделано” (“Прочитано или не прочитано”).

 @Entity public class Note < @Id @GeneratedValue private int id; private String message; private Date date; private boolean done; public Note() < >public Note(String message) < this.message = message; this.date = new Date(); this.done = false; >> 

Очередное отклонение от темы обсуждения для большего понимания происходящего с теоретической позиции. Связь между компонентами в Spring задается аннотациями, — специальными указателями перед объектами, каждый из которых выполняет определенную роль в механизме и начинается символом “@”. Аннотация @Entity указывает Spring Boot на принадлежность последующих данных класса к “Сущности”, а @Id и @GeneratedValue задают выбранное поле идентификатором с автоматической генерацией итератора при обработке массива информации. Специально упускаю добавление стандартных Getter and Setter для увеличения компактности визуального формата. Далее, принимая во внимание использование базы данных для хранения записей, переходим на следующую ступень в разработке приложения: создадим в директории “repository” интерфейс NoteRepository, — связующий элемент в цепочке обмена, — и унаследуем наиболее подходящий для дальнейшей работы репозиторий с указанием хранимой сущности и целочисленного итератора для обращения.

public interface NoteRepository extends JpaRepository

Собственно, всё. Кратко и лаконично. Теперь Spring Boot будет использовать созданный компонент для организации взаимодействий с базой данных. Присутствует относительно много типов наследуемых репозиториев с различным потенциалом возможного действия. JpaRepository находится на вершине лестницы и обладает самым большим потенциалом, включая нижестоящие CrudRepository и PageAndSortingRepository. Более не будем углубляться и отходить от темы, ведь отдельные тонкости можно узнать на сайте Pivotel в технической документации. Теперь, после воплощения образа данных и указания способов связи на стороне приложения, требуется обратить внимание на создание базы MySQL в соответствующей внешней среде “MySQL Workbench”, заранее установленной на настольную платформу в сборке от официального разработчика с дополнительными пакетами для создания локального сервера:

• Отдельного булева типа как такового не существует. Любые действия с обработкой запросов преобразуют “true” или “false” в битовое значение “1” или “0” соответственно;
• Сохранение даты полностью происходит в типе Timestamp. Если использовать привычный до мозга костей Date, то придется ограничиться лишь положением в календаре.

После окончательного выполнения подготовительных действий, указываем “MySQL Workbench” на отправку данных в локальный сервер нажатием на значок с “молнией” на панели инструментов. Теперь, если добавление информации прошло корректно, можем уверенно возвращаться в родную IDE для дальнейшего продолжения разработки, добавляя конфигурацию текущей базы в application.properties (обычно, располагается в директории “resources”):

 spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update 

И окончательно привязывая сущность Note к MySQL с помощью аннотаций. @Table указывает на использование таблицы с выбранным именем и схемой, а @Column — принадлежность переменных к определенному полю.

 @Entity @Table(name = "test", schema = "test", catalog = "") public class Note < @Id @GeneratedValue private int id; @Column(name = "message") private String message; @Column(name = "date") private Date date; @Column(name = "done") private boolean done; public Note() < >public Note(String message) < this.message = message; this.date = new Date(); this.done = false; >> 

Вид или пользовательский интерфейс

Увы, можно смело утверждать следующее: “Визуализация приложения станет основным камнем преткновения без наличия малейших теоретических или практических знаний”. Будучи откровенным, front-end составляющая заняла поразительный объем от общего количества работы и уверенно трепала нервы на протяжение длительного временного периода. Но благодаря удивительной простоте Thymeleaf удалось обрести подходящий компромисс после череды феерических поражений. Дальнейшее обсуждение будет вестись именно о тонкостях использования выбранного движка, хотя общая концепция придерживается схожего положения. Основная методика заключается в возможности использовании чистейшего HTML и сборке конечного отображения из отдельных фрагментов для исключения множественного повторения идентичных участков. Предположим, архитектура пользовательского интерфейса состоит из главной страницы, состоящей из навигационной панели с элементами управления (добавление новой записи, возвращение на главную страницу) и динамической таблицы для отображения сущностей с сортировкой по времени добавления заметки в направлении увеличения (ASC) или уменьшения (DESC) значения. Примем за стандартное положение отображение всех записей по возрастанию. Согласно иерархической политике выбранного движка шаблонов, составные элементы визуализации должны быть расположены на ветви “templates” в директории “resources”. Следовательно, дальнейшие манипуляции с компонентами принимают во внимание выдвинутые условия. Создадим главную страницу с именем “index” (или любым другим согласно личных предпочтений) на шаблоне html5. Например:

И так, разложим по полочкам ключевую составляющую конечного приложения. Thymeleaf использует отдельный синтаксис для указания применения процедур и начинается с ключевого слова “th:”, ссылка на библиотеку с которым подсоединяется в обязательном порядке в открывающем тэге .

Операция “if” совершенно не отличается от привычного образа действий и проверяет входящий атрибут “notes” на наличие объектов для дальнейшего отображения. Следует отдельно упомянуть о перехлестывании темы с использованием Controller, принимая во внимание применение оного для организации взаимодействия модели и визуализации. Многие туманные моменты обретают очертания в дальнейшем, просто возвратитесь назад при наличии желания.

Операция “replace” указывает на замену “заглушки” или действующего блока на выбранный фрагмент из текущей или отдельной страницы — последний случай наглядно наблюдается в примере. Мы копируем фрагмент с названием “notebook” из “list.html” директории “operations” в файла “index”, полностью заменяя содержимое в конечном пункте назначения. Исходящий же обладает следующим содержанием:

     
 
 
 
#
 
Message
 
Date ' (sortDate = 'ASC')>"> ' (sortDate = 'DESC')>"> 
 
Done
 
Edit
 
Delete
 
 
 
 
#
 
Message
 
Date
 
   
 
'(id=$)>"> 
 
'(id=$)>"> 
 
 
 
 
  

Вновь обратимся к конструктивному обозрению и пройдем по использованным функциям Thymeleaf в порядке следования, опуская стандартный синтаксис HTML или использованные графические стили, и направляя внимание именно на понимание механизма движка шаблонов.

Операция “fragment” задает название фрагмента и открывает возможность использования содержимого блока для команды “replace”. Причем! Никоим образом не исключается множественное применение в пределах одной страницы, вновь выдвигая аналогию с процедурами или функциями в языках программирования.

 ' (sortDate = 'ASC')>"> 

Используется вызов аннотации @PostMapping в Controller с маппингом “/sort/”, где , — исходящий атрибут направления сортировки. Нечто схожее можно наблюдать в следующем блоке, добавляющем динамическое изменение в зависимости от положения выбранного пользователем элемента в цикле итерации:

Перечисление значений очень напоминает привычное использование блока for в синтаксисе Java: переменная “note” принимает текущий элемент из массива входящего атрибута $ — массива с сущностями, — и используются в дальнейшем для изменения значений. Будучи откровенным, можно отводить отдельную статью для перечисления широкого спектра возможностей Thymeleaf с приведением примеров практического применения — двигатель шаблонов предельно прост и совершенно не требует изучения внушительного багажа дополнительного синтаксиса. Описанные выше функции изложены в технической документации на официальном сайте разработчиков и исполняют ключевое значение в организации связи с back-end. Следовательно, можно уверенно переходить к следующей и завершающей части. Конечно же, приложив остальные составляющие фрагменты визуализации в ссылке на готовое приложение в конце статьи.

Контроллер, администратор в маленькой компании

“Краеугольный камень в архитектуре web-приложения”, — пожалуй, никоим образом не удастся подобрать более точное описание значимости компонента Controller в организации работы программы: большинство операций проводится именно связующим элементом между моделью и видом. Благодаря механике действия Spring Boot, можно уверенно использовать маппирование и методы запроса GET/POST без малейших проблем, автоматически подключить репозиторий с данными. Создадим класс NoteController в отдельном файле в директории “controllers”, вновь обращаясь к применению соответствующей аннотации:

 @Controller public class NoteController < private NoteService service; @Autowired public void setNoteService(NoteService service) < this.service = service; >@GetMapping("/") public String list(Model model) < return "index"; >> 

Внимательный взгляд может заметить важное изменение в принципах построения архитектуры приложения, связанное с добавлением сервиса для изолирования бизнес-логики от работы со службой управления базой данных. Выполненные действия требуются для увеличения универсальности готового продукта и предоставляют широкий простор для изменения функционала пользовательского интерфейса без потребности изменений в методах связи с базой данных. Стандартное представление никоим образом не выделяется из общей массы схожих: интерфейс расположен в отдельной директории и имплементируется классом с аннотацией @Service для обнаружения Spring Boot:

 public interface NoteService < Note getNoteById(Integer id); void saveNote(Note note); void updateNote(Integer id, String message, boolean done); void deleteNote(Integer id); ListfindAll(); > @Service public class NoteServiceImpl implements NoteService < private NoteRepository repository; @Autowired public void setProductRepository(NoteRepository repository) < this.repository = repository; >@Override public Note getNoteById(Integer id) < return repository.findOne(id); >@Override public void saveNote(Note note) < repository.save(note); >@Override public void updateNote(Integer id, String message, boolean done) < Note updated = repository.findOne(id); updated.setDone(done); updated.setMessage(message); repository.save(updated); >@Override public void deleteNote(Integer id) < repository.delete(id); >@Override public List findAll() < return repository.findAll(); >> 

Возвратимся к обозрению контроллера и разберем тонкости организации работы с помощью методов Spring Boot. Аннотация @Autowired сообщает о потребности автоматической привязки сервиса к указанной переменной соответствующего типа и устанавливает связь с базой данных. Следует обратить больше внимания на способ общения с видом, обозначенный аннотацией @GetMapping(«/») и возвращающий страницу с именем “index” при получении вызова localhost:8080. Можно использовать различный подход, конкретизируя расширенное описание @RequestMapping(value = «/», method = RequestMethod.GET) или заменить возвращаемый тип на готовую ModelAndView. Однако, согласно текущего положения опыта практического применения, совершенно не замечаю кардинальных различий в конечном результате и использую привычный вариант. Расширим котроллер методом добавления новых элементов с помощью дополнительной вкладки. После нажатия пользователем на элемент навигационной панели происходит вызов @GetMapping(«/new») и перенаправление на страницу “new” из директории “operations”, возвращающую параметр с именем “message” при подтверждении введенных данных использованием кнопки и выполняющую переадресацию на главный блок. Отдельного упоминания требует потребность полного совпадения наименования переменной в окне ввода с именем передаваемого значения.

 @GetMapping("/new") public String newNote() < return "operations/new"; >@PostMapping("/save") public String updateNote(@RequestParam String message) < service.saveNote(new Note(message)); return "redirect:/"; >

Схожая методика используется для обновления записи. После нажатия на элемент управления происходит вызов мапирования @GetMapping(«/edit/«) и передача идентификатора из url-строки, добавляется атрибут “note” с записью для дальнейшего редактирования. @RequestParam(value = «done», required = false) boolean done) указание конкретного значения оказывает ключевую роль в использовании checkbox при применении движка шаблонов Thymeleaf и устанавливается по умолчанию в положение “false”.

 @GetMapping("/edit/") public String edit(@PathVariable Integer id, Model model) < Note note = service.getNoteById(id); model.addAttribute("note", note); return "operations/edit"; >@PostMapping("/update") public String saveNote(@RequestParam Integer id, @RequestParam String message, @RequestParam(value = "done", required = false) boolean done) < service.updateNote(id, message, done); return "redirect:/"; >

Удаление элементов из базы данных выполняется предельно просто и совершенно не требует выдающихся манипуляций, вызывая подходящую функцию сервиса с помощью переданного значения:

 @GetMapping("/delete/") public String delete(@PathVariable Integer id) < service.deleteNote(id); return "redirect:/"; >

Теперь внесем маленькие коррективы в готовые фрагменты и перейдем к увлекательному общению с MySQL при помощи query-запросов в Spring Data JPA, отдельно добавляя функцию управления простой фильтрацией перед закрытием Controller.

 @Controller public class NoteController < private String sortDateMethod = "ASC"; @GetMapping("/") public String list(Model model) < Listnotebook = filterAndSort(); model.addAttribute("notes", notebook); model.addAttribute("sort", sortDateMethod); return "index"; > private List filterAndSort() < Listnotebook = null; switch (sortDateMethod) < case "ASC": notebook = service.findAllByOrderByDateAsc(); break; case "DESC": notebook = service.findAllByOrderByDateDesc(); break; >return notebook; > 

Такой маленький, но такой важный Query.

Неловко признаваться, фильтрация значений вопреки ожиданиям оказалась очередным камнем преткновения в выполнении технического задания, уверенно преодолевая установленный пагинацией — разбиением массива данных на отдельные страницы определенной размерности для дальнейшего отображения, — порог сложности. Скорее всего, сказывалась накопившаяся усталость, но… озарение снизошло после совершенно случайного столкновения с Query-запросами.

 public interface NoteRepository extends JpaRepository  < ListfindAllByOrderByDateAsc(); List findAllByOrderByDateDesc(); > 

Spring Data JPA предоставляет возможности для создания конкретизированных запросов в базу данных, избавляющих от потребности сортировать информацию после получения и обладающих широким потенциалом для применения. Например:

 List findAllByOrderByDateAsc(); 

Метод будет преобразован в SQL запрос и отобразит все записи (findAll) с сортировкой (byOrder) по дате (byDate) в порядке возрастания (Asc). Более того, можно составлять сложные комбинации и проводить выборку по многим полям за единственное требование. Скажем, выбрать все (findAll) выполненные (byDoneTrue) записи в порядке (byOrder) уменьшения (Decs) по значению даты (byDate):

 Page findAllByDoneTrueOrderByDateDesc(Pageable pageable); 

Заключение или очередная исповедь начинающего программиста

Всё! Можно смело запускать web-приложение использованием комбинации Shift+F10 или нажатием на соответствующую иконку. Spring Boot соберет программу на Apache Maven и установит локальный сервер Apache Tomcat по адресу localhost:8080. Теперь достаточно лишь перейти по ссылке в любом браузере.

И, конечно же, разработать методику для выполнения остальных бизнес-требований. Потенциал приложения ограничивается приложенными усилиями, находчивой инициативой и фантазией разработчика.

Будучи откровенным и обращая внимание на пройденный путь, вновь и вновь убеждаюсь в верности выбранного направления и осознаю пользу от обучения на образовательном портале JavaRush. Благодаря множеству практических задач удалось возвратить манящий интерес к изучению программирования, окончательно забитый в устаревающей и удивительно скучной программе высшего учебного заведения схожего направления. Четыре месяца активного изучения материала в back-end стеке технологий вложили гораздо больше знаний по сравнению с целыми годами посещения лекций и лабораторных занятий. Хотите верьте, а хотите — нет. Желаю не пасовать перед трудностями вхождения в сложный материал, ведь именно благодаря преодолению препятствий мы становимся лучше и развиваемся в профессиональном и личностном плане. Надеюсь, маленький рассказ способствовал открытию свежих идеи для применения восхитительного инструмента под названием SpringBoot. P.S. Github.