Написание простых приложений с http4k #
Документация #
Задачи #
Скачайте архив, с исходным кодом проекта по ссылке. Данный проект основан на базовом шаблоне проекта, в который были внесены следующие изменения:
- Добавлены CSS-файлы Zurb Foundaiton.
- Добавлена базовая раскладка
layout.peb
, подключающая CSS-файлы Foundation. - Добавлена раздача статических файлов из classpath-проекта.
- Из маршрутизатора http4k выделены обработчики.
- Создание шаблонизатора перенесено в стартовую функцию
main
.
Отображение информации о треугольнике #
Добавьте отображение информации о треугольнике (длины сторон, периметр, площадь) при переходе по маршруту /triangle/show
.
Примерный план реализации:
- Создайте модель
ru.ac.uniyar.models.TriangleVM
с необходимыми данными для отображения. Все параметры модели — вещественные числа. - Унаследуйте созданный класс от
org.http4k.template.ViewModel
. - Создайте шаблон для отображения модели в файле
src/main/resources/ru/ac/uniyar/models/TriangleVM.pub
. - Реализуйте отображение данных модели на странице. Рекомендуется использовать отдельные параграфы для каждого параметра.
- Добавьте обработчик для данного запроса.
- В файле
WebApplicaiton.kt
создайте функциюshowTriangle
. - Данная функция должна возвращать обработчик запроса,
HttpHandler
. Функция должна принимать в качестве аргумента шаблонизатор,renderer: TemplateRenderer
. - Внутри обработчика создайте экземпляр класса
TriangleVM
с заполненными данными. Длины сторон: 3.0, 4.0, 5.0. Периметр: 12.0. Площадь: 6.0. - Для формирования тела ответа используйте вызов шаблонизатора на экземпляре класса
TriangleVM
.
- В файле
- Свяжите обработчик запроса с маршрутом
/triangle/show
внутри функции по формированию маршрутизатораapp
. Связывание производите для GET-запроса. - Перезапустите приложение.
- Откройте в браузере ссылку http://localhost:9000/triangle/show и убедитесь, что информация о треугольнике отображается на полученной странице.
Введение параметров о треугольнике. #
Добавьте страницу для указания параметров о треугольнике. На данной странице пользователь должен иметь возможность ввести длины сторон треугольника и отправить их на сервер. После отправки информации, приложение должно открыть страницу с информацией о треугольнике, где будут указаны стороны треугольника и вычисленные свойства: периметр и площадь.
Предполагается, что пользователь вводит будет вводить корректные данные на форму.
Маршрут для введения данных: /triangle/new
.
Примерный план реализации:
- Создайте фиктивную модель
ru.ac.uniyar.models.NewTriangleDataVM
, содержащую одно поле — целое число. - Унаследуйте класс от
org.http4k.template.ViewModel
. - Создайте шаблон для отображения модели в файле
src/main/resources/ru/ac/uniyar/models/NewTriangleDataVM.pub
. В данном шаблоне опишите форму:- В рамках элемента
form
укажите метод для отправки данных равнымPOST
. - Внутри элемента
form
добавьте три поля для ввода вещественных чисел с помощью элементаinput
. Каждому полю укажите имя:side_one
,side_two
иside_three
соответственно. - Добавьте интерактивную кнопку для отправки содержимого формы, элемент
input
с типомsubmit
.
- В рамках элемента
- Создайте обработчик запроса для показа формы.
- В файле
WebApplicaiton.kt
создайте функциюshowNewTriangleForm
. - Данная функция должна возвращать обработчик запроса,
HttpHandler
. Функция должна принимать в качестве аргумента шаблонизатор,renderer: TemplateRenderer
. - Внутри тела функции создайте экземпляр объекта
NewTriangleDataVM
, инициализировав его числом 0. - Сформируйте тело ответа путём вызова шаблонизатора,
renderer
с передачей ему созданного объекта.
- В файле
- Свяжите обработчик запроса с маршрутом
/triangle/new
внутри функции по формированию маршрутизатораapp
. Связывание производите для GET-запроса. - Перезапустите приложение.
- Откройте в веб-браузере ссылку http://localhost:9000/triangle/new и убедитесь, что форма корректно отображается.
- Создайте объект для сохранения результатов отправки запроса от пользователя.
- Создайте класс
ru.ac.uniyar.domain.Triangle
, который инициализируется длинами трёх сторон. Длины описываются вещественными числами. Сделайте все поля класса изменяемыми, т.е. опишите ихdata class Tirangle(var sideA: Float)
- Создайте экземпляр данного класса в функции
main
. Передайте ему длины трёх сторон: 3.0, 3.0, 3.0. - Модифицируйте функцию
app
так, чтобы она принимала в качестве аргумента экземпляр классаTriangle
. - В функции
main
при описании приложения передайте ему ссылку на созданный объектTriangle
.
- Создайте класс
- Создайте обработчик запроса с результатами отправки формы.
- В файле
WebApplicaiton.kt
создайте функциюcreateNewTriangle
. - Данная функция должна возвращать обработчик запроса,
HttpHandler
. Функция должна принимать в качестве аргумента ссылку на объектTriangle
. - Внутри тела функции из запроса получите объект формы путём вызова на нём функции
form
. - Из формы извлеките строки, которые были переданы от клиента. Для получения строки воспользуйтесь методом
findSingle
. Не забудьте преобразовать null-строку к пустой. - Преобразуйте строки в числа с использованием метода
toFloat()
. - Преобразованные данные запишите в качестве значений свойства объекта
Triangle
. - В качестве ответа сформируйте перенаправляющий ответ.
- Код ответа —
FOUND
- С помощью метода
header
установите заголовокLocation
равным/triangle/show
- Код ответа —
- В файле
- Свяжите обработчик
createNewTriangle
с POST-запросом по пути/triangle/new
внутри функции по созданию маршрутизатора,app
. - Перезапустите приложение.
- Убедитесь, что после корректного заполнения формы http://localhost:9000/triangle/new происходит переход на страницу с отображением информации о треугольнике.
- Добавьте функции для вычисления периметра и площади треугольника из длин сторон внутри класса
ru.ac.uniyar.domain.Triangle
.- Добавьте функцию для вычисления периметра
fun perimeter(): Float
внутри классаru.ac.uniyar.domain.Triangle
. - Добавьте функцию для вычисления площади
fun area(): Float
внутри классаru.ac.uniyar.domain.Triangle
. Для вычисления можете воспользоваться методом вычисления площади по длинам сторон.
- Добавьте функцию для вычисления периметра
- Модифицируйте обработчик запроса на отображение информации о треугольнике так, чтобы он показывал актуальную информацию о треугольнике.
- Добавьте аргумент
triangle: Triangle
в функциюshowTriangle
. - Выполните заполнение модели для отображения
TriangleVM
данными из переданного объектаtriangle
. - В функции
app
выполните передачу нового аргумента для функцииshowTriangle
.
- Добавьте аргумент
- Перезапустите приложение.
- Удостоверьтесь, что после корректного ввода данных на форме ввода http://localhost:9000/triangle/new и отправки её веб-приложению, приложение отображает в качестве результата страницу
/triangle/show
с введёнными данными.
Отображение истории #
Добавьте страницу, на которой будет отображён список всех треугольников, которые пользователь вводил в систему. Для каждого треугольника необходимо выводить только порядковый номер, площать и ссылку на страницу с полной информацией о данном треугольнике.
Маршрут для отображения списка: /triangle/
. Маршрут для отображения элемента списка: /triangle/{number}
.
Примерный план реализации:
- Создайте класс для хранения списка треугольников
ru.ac.uniyar.domain.Triangles
.- Класс должен хранить изменяемый список треугольников
val triangles = mutableListOf<Trinagle>()
. - Класс должен позволять добавлять треугольники в список
fun add(triangle: Triangle)
. - Класс должен позволять получать ссылку на последний треугольник в списке
fun fetchOne(): Triangle
. - Класс должен позволять получать нумерованный список треугольников
fun fetchAllTriangles(): Iterable<IndexedValue<Triangle>>
.
- Класс должен хранить изменяемый список треугольников
- Создайте экземпляр класса
ru.ac.uniyar.domain.Triangles
внутри функцииmain
. - Модифицируйте маршрутизатор таким образом, чтобы он получал ссылку на объект класса
triangle: Triangles
. Передайте данную ссылку внутри функцииmain
. - Модифицируйте обработчик на добавление информации
createNewTriangle
таким образом, чтобы он добавлял в список треугольников новые экземпляры классаru.ac.uniyar.domain.Triangle
.- Добавьте обработчику метода аргумент
triangles: Triangles
. - Внутри обработчика вместо модификации полей объекта класса
Triangle
создайте новый экземпляр данного класса и добавьте его в переданный списокtriangles
. - Уберите у обработчика аргумент
triangle: Triangle
. - Исправьте аргументы, передаваемые функции
createNewTriangle
при её вызове внутри функцииapp
.
- Добавьте обработчику метода аргумент
- Создайте модель для отображения списка треугольников,
ru.ac.uniyar.models.TrianlesListVM
. Данная модель должна содержать ссылку на итератор по элементам массиваtriangles: Iterable<IndexedValue<Triangle>>
. - Создайте шаблон для отображения модели в файле
src/main/resources/ru/ac/uniyar/models/TrianlesListVM.pub
. Для каждого треугольника отобразите его порядковый номер и периметр.- Необходимо отобразить ссылки для отображения информации о треугольнике в формате:
/triangle/1
,/triangle/2
, где номер — порядковый номер в списке. - Необходимо отобразить кнопку для перехода на страницу добавления нового треугольника
/triangle/new
. Кнопка должна располагаться над списком известных треугольников.
- Необходимо отобразить ссылки для отображения информации о треугольнике в формате:
- Создайте обработчик для отображения списка известных треугольников.
- В файле
WebApplication.kt
создайте функциюshowTriangeList
. - Данная функция должна возвращать обработчик запроса,
HttpHandler
. Функция должна принимать в качестве аргумента шаблонизатор,renderer
, и ссылку на объект классаTriangles
. - Внутри обработчика создайте экземпляр класса
TrianlesListVM
, передав ей необходимые параметры. - Для формирования тела ответа используйте вызов шаблонизатора на экземпляре класса
TrianglesListVM
.
- В файле
- Свяжите созданный обработчик запроса с маршрутом
/triangle
внутри функции по формированию маршрутизатораapp
. Передайте данному обработчику необходимые данные для работы. - Модифицируйте обработчик отображения информации о треугольнике таким образом, чтобы он мог показывать произвольный треугольник.
- Номер треугольника для отображения будет передаваться через переменную в запросе. Для получения переменной из запроса используйте функцию
Request.path
. - Преобразуйте полученную строку к числу с использованием функции
toInt()
. - Получите экземпляр класса
Triangle
от объектаTriangles
по индексу. - Используйте полученную ссылку для заполнения модели TriangleVM.
- Номер треугольника для отображения будет передаваться через переменную в запросе. Для получения переменной из запроса используйте функцию
- Исправьте связывание обработчика отображения информации о треугольнике в маршрутизаторе.
- Используйте шаблонный маршрут
/triangle/{number}
для связывания обработчика. - Передайте обработчику ссылку на объект
Triangles
.
- Используйте шаблонный маршрут
Перенаправление на страницу с историей добавления треугольников #
Добавьте обработку корневого маршрута /
. При обращении к нему клиент должен переходить на страницу с отображением списка треугольников.
Примерный план реализации:
- Создайте обработчик корневого маршрута, функцию
redirectToTriangleList
в файлеWebApplication.kt
. - Данная функция должна возвращать обработчик запроса,
HttpHandler
. Функция не принимает никаких аргументов. - Внутри обработчика запроса необходимо вернуть ответ со статусом
FOUND
и заголовкомLocation
со значением/triangle
. - Свяжите данный обработчик с маршрутом
/
и GET-запросом внутри функцииapp
. - Перезапустите приложение.
- Убедитесь, что после открытия ссылки приложения, http://localhost:9000/, происходит переход к списку треугольников.