Написание простых приложений с http4k #

Документация #

• Официальная документация на библиотеку http4k
• Простая маршрутизация с http4k

Задачи #

Скачайте архив, с исходным кодом проекта по ссылке. Данный проект основан на базовом шаблоне проекта, в который были внесены следующие изменения:

• Добавлены CSS-файлы Zurb Foundaiton.
• Добавлена базовая раскладка layout.peb, подключающая CSS-файлы Foundation.
• Добавлена раздача статических файлов из classpath-проекта.
• Из маршрутизатора http4k выделены обработчики.
• Создание шаблонизатора перенесено в стартовую функцию main.

Отображение информации о треугольнике #

Добавьте отображение информации о треугольнике (длины сторон, периметр, площадь) при переходе по маршруту /triangle/show.

Примерный план реализации:

1. Создайте модель ru.ac.uniyar.models.TriangleVM с необходимыми данными для отображения. Все параметры модели — вещественные числа.
2. Унаследуйте созданный класс от org.http4k.template.ViewModel.
3. Создайте шаблон для отображения модели в файле src/main/resources/ru/ac/uniyar/models/TriangleVM.pub.
4. Реализуйте отображение данных модели на странице. Рекомендуется использовать отдельные параграфы для каждого параметра.
5. Добавьте обработчик для данного запроса.
   1. В файле WebApplicaiton.kt создайте функцию showTriangle.
   2. Данная функция должна возвращать обработчик запроса, HttpHandler. Функция должна принимать в качестве аргумента шаблонизатор, renderer: TemplateRenderer.
   3. Внутри обработчика создайте экземпляр класса TriangleVM с заполненными данными. Длины сторон: 3.0, 4.0, 5.0. Периметр: 12.0. Площадь: 6.0.
   4. Для формирования тела ответа используйте вызов шаблонизатора на экземпляре класса TriangleVM.
6. Свяжите обработчик запроса с маршрутом /triangle/show внутри функции по формированию маршрутизатора app. Связывание производите для GET-запроса.
7. Перезапустите приложение.
8. Откройте в браузере ссылку http://localhost:9000/triangle/show и убедитесь, что информация о треугольнике отображается на полученной странице.

Введение параметров о треугольнике. #

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

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

Маршрут для введения данных: /triangle/new.

Примерный план реализации:

1. Создайте фиктивную модель ru.ac.uniyar.models.NewTriangleDataVM, содержащую одно поле — целое число.
2. Унаследуйте класс от org.http4k.template.ViewModel.
3. Создайте шаблон для отображения модели в файле src/main/resources/ru/ac/uniyar/models/NewTriangleDataVM.pub. В данном шаблоне опишите форму:
   1. В рамках элемента form укажите метод для отправки данных равным POST.
   2. Внутри элемента form добавьте три поля для ввода вещественных чисел с помощью элемента input. Каждому полю укажите имя: side_one, side_two и side_three соответственно.
   3. Добавьте интерактивную кнопку для отправки содержимого формы, элемент input с типом submit.
4. Создайте обработчик запроса для показа формы.
   1. В файле WebApplicaiton.kt создайте функцию showNewTriangleForm.
   2. Данная функция должна возвращать обработчик запроса, HttpHandler. Функция должна принимать в качестве аргумента шаблонизатор, renderer: TemplateRenderer.
   3. Внутри тела функции создайте экземпляр объекта NewTriangleDataVM, инициализировав его числом 0.
   4. Сформируйте тело ответа путём вызова шаблонизатора, renderer с передачей ему созданного объекта.
5. Свяжите обработчик запроса с маршрутом /triangle/new внутри функции по формированию маршрутизатора app. Связывание производите для GET-запроса.
6. Перезапустите приложение.
7. Откройте в веб-браузере ссылку http://localhost:9000/triangle/new и убедитесь, что форма корректно отображается.
8. Создайте объект для сохранения результатов отправки запроса от пользователя.
   1. Создайте класс ru.ac.uniyar.domain.Triangle, который инициализируется длинами трёх сторон. Длины описываются вещественными числами. Сделайте все поля класса изменяемыми, т.е. опишите их data class Tirangle(var sideA: Float)
   2. Создайте экземпляр данного класса в функции main. Передайте ему длины трёх сторон: 3.0, 3.0, 3.0.
   3. Модифицируйте функцию app так, чтобы она принимала в качестве аргумента экземпляр класса Triangle.
   4. В функции main при описании приложения передайте ему ссылку на созданный объект Triangle.
9. Создайте обработчик запроса с результатами отправки формы.
   1. В файле WebApplicaiton.kt создайте функцию createNewTriangle.
   2. Данная функция должна возвращать обработчик запроса, HttpHandler. Функция должна принимать в качестве аргумента ссылку на объект Triangle.
   3. Внутри тела функции из запроса получите объект формы путём вызова на нём функции form.
   4. Из формы извлеките строки, которые были переданы от клиента. Для получения строки воспользуйтесь методом findSingle. Не забудьте преобразовать null-строку к пустой.
   5. Преобразуйте строки в числа с использованием метода toFloat().
   6. Преобразованные данные запишите в качестве значений свойства объекта Triangle.
   7. В качестве ответа сформируйте перенаправляющий ответ.
      1. Код ответа — FOUND
      2. С помощью метода header установите заголовок Location равным /triangle/show
10. Свяжите обработчик createNewTriangle с POST-запросом по пути /triangle/new внутри функции по созданию маршрутизатора, app.
11. Перезапустите приложение.
12. Убедитесь, что после корректного заполнения формы http://localhost:9000/triangle/new происходит переход на страницу с отображением информации о треугольнике.
13. Добавьте функции для вычисления периметра и площади треугольника из длин сторон внутри класса ru.ac.uniyar.domain.Triangle.
    1. Добавьте функцию для вычисления периметра fun perimeter(): Float внутри класса ru.ac.uniyar.domain.Triangle.
    2. Добавьте функцию для вычисления площади fun area(): Float внутри класса ru.ac.uniyar.domain.Triangle. Для вычисления можете воспользоваться методом вычисления площади по длинам сторон.
14. Модифицируйте обработчик запроса на отображение информации о треугольнике так, чтобы он показывал актуальную информацию о треугольнике.
    1. Добавьте аргумент triangle: Triangle в функцию showTriangle.
    2. Выполните заполнение модели для отображения TriangleVM данными из переданного объекта triangle.
    3. В функции app выполните передачу нового аргумента для функции showTriangle.
15. Перезапустите приложение.
16. Удостоверьтесь, что после корректного ввода данных на форме ввода http://localhost:9000/triangle/new и отправки её веб-приложению, приложение отображает в качестве результата страницу /triangle/show с введёнными данными.

Отображение истории #

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

Маршрут для отображения списка: /triangle/. Маршрут для отображения элемента списка: /triangle/{number}.

Примерный план реализации:

1. Создайте класс для хранения списка треугольников ru.ac.uniyar.domain.Triangles.
   1. Класс должен хранить изменяемый список треугольников val triangles = mutableListOf<Trinagle>().
   2. Класс должен позволять добавлять треугольники в список fun add(triangle: Triangle).
   3. Класс должен позволять получать ссылку на последний треугольник в списке fun fetchOne(): Triangle.
   4. Класс должен позволять получать нумерованный список треугольников fun fetchAllTriangles(): Iterable<IndexedValue<Triangle>>.
2. Создайте экземпляр класса ru.ac.uniyar.domain.Triangles внутри функции main.
3. Модифицируйте маршрутизатор таким образом, чтобы он получал ссылку на объект класса triangle: Triangles. Передайте данную ссылку внутри функции main.
4. Модифицируйте обработчик на добавление информации createNewTriangle таким образом, чтобы он добавлял в список треугольников новые экземпляры класса ru.ac.uniyar.domain.Triangle.
   1. Добавьте обработчику метода аргумент triangles: Triangles.
   2. Внутри обработчика вместо модификации полей объекта класса Triangle создайте новый экземпляр данного класса и добавьте его в переданный список triangles.
   3. Уберите у обработчика аргумент triangle: Triangle.
   4. Исправьте аргументы, передаваемые функции createNewTriangle при её вызове внутри функции app.
5. Создайте модель для отображения списка треугольников, ru.ac.uniyar.models.TrianlesListVM. Данная модель должна содержать ссылку на итератор по элементам массива triangles: Iterable<IndexedValue<Triangle>>.
6. Создайте шаблон для отображения модели в файле src/main/resources/ru/ac/uniyar/models/TrianlesListVM.pub. Для каждого треугольника отобразите его порядковый номер и периметр.
   1. Необходимо отобразить ссылки для отображения информации о треугольнике в формате: /triangle/1, /triangle/2, где номер — порядковый номер в списке.
   2. Необходимо отобразить кнопку для перехода на страницу добавления нового треугольника /triangle/new. Кнопка должна располагаться над списком известных треугольников.
7. Создайте обработчик для отображения списка известных треугольников.
   1. В файле WebApplication.kt создайте функцию showTriangeList.
   2. Данная функция должна возвращать обработчик запроса, HttpHandler. Функция должна принимать в качестве аргумента шаблонизатор, renderer, и ссылку на объект класса Triangles.
   3. Внутри обработчика создайте экземпляр класса TrianlesListVM, передав ей необходимые параметры.
   4. Для формирования тела ответа используйте вызов шаблонизатора на экземпляре класса TrianglesListVM.
8. Свяжите созданный обработчик запроса с маршрутом /triangle внутри функции по формированию маршрутизатора app. Передайте данному обработчику необходимые данные для работы.
9. Модифицируйте обработчик отображения информации о треугольнике таким образом, чтобы он мог показывать произвольный треугольник.
   1. Номер треугольника для отображения будет передаваться через переменную в запросе. Для получения переменной из запроса используйте функцию Request.path.
   2. Преобразуйте полученную строку к числу с использованием функции toInt().
   3. Получите экземпляр класса Triangle от объекта Triangles по индексу.
   4. Используйте полученную ссылку для заполнения модели TriangleVM.
10. Исправьте связывание обработчика отображения информации о треугольнике в маршрутизаторе.
    1. Используйте шаблонный маршрут /triangle/{number} для связывания обработчика.
    2. Передайте обработчику ссылку на объект Triangles.

Перенаправление на страницу с историей добавления треугольников #

Добавьте обработку корневого маршрута /. При обращении к нему клиент должен переходить на страницу с отображением списка треугольников.

Примерный план реализации:

1. Создайте обработчик корневого маршрута, функцию redirectToTriangleList в файле WebApplication.kt.
2. Данная функция должна возвращать обработчик запроса, HttpHandler. Функция не принимает никаких аргументов.
3. Внутри обработчика запроса необходимо вернуть ответ со статусом FOUND и заголовком Location со значением /triangle.
4. Свяжите данный обработчик с маршрутом / и GET-запросом внутри функции app.
5. Перезапустите приложение.
6. Убедитесь, что после открытия ссылки приложения, http://localhost:9000/, происходит переход к списку треугольников.