Skip to content

Latest commit

 

History

History
211 lines (164 loc) · 12.8 KB

README_RU.md

File metadata and controls

211 lines (164 loc) · 12.8 KB

Интерактивный граф на JSF

Содержание

Демонстрация 🎥

Видео на youtube
https://youtu.be/ny15aofvGCI

Описание 📝

👋 Добро пожаловать в этот лабораторный проект!

🛠 Что это такое?
Это современное веб-приложение, построенное на фреймворке JavaServer Faces. В его архитектуре используются 2 facelets-шаблона для гибкости и модульности. Стартовая страница предоставляет общую информацию и перенаправляет на основную страницу с функциональностью. Серверная логика реализована с помощью Managed Beans, обеспечивая гибкую и масштабируемую обработку данных.

🎯 Цель сайта
Сделать процесс ввода координат точек и проверки их попадания в заданную область максимально удобным и интуитивно понятным. Мой UI был разработан с упором на хороший UX 😎

📌 Основные функции

  • 🖥 Интерактивный Ввод Данных: Используйте интуитивно понятные элементы интерфейса для ввода координат.
  • 📊 Динамический График: Визуализация области и точек на координатной плоскости в реальном времени.
  • 🔒 Валидация на Сервере: С помощью Managed Beans обеспечивается надежная проверка введенных данных.

🚀 Хотите узнать больше? Ознакомьтесь с руководством пользователя и погрузитесь в удивительный мир этого веб-приложения! 💻

Технические требования

graph

Цель: Разработать веб-приложение на базе JavaServer Faces Framework

📋 Основные части приложения

  • Managed Beans: Управляемые бины, которые содержат логику обработки данных на стороне сервера.
  • index.xhtml: Стартовая страница, содержащая общую информацию и перенаправляющая на основную страницу.
  • main.xhtml: Основная страница приложения с веб-формой для ввода координат и отображения результатов.

🎨 Стартовая страница index.xhtml должна включать

  1. Шапка: ФИО, номер группы, номер варианта.
  2. Интерактивные часы: Показывают текущие дату и время, обновляются раз в 10 секунд
  3. Ссылка: позволяет перейти на основную страницу приложения

📊 Основная страница main.xhtml должна включать

  1. Набор компонентов: Для задания координат точки и радиуса области в соответствии с вариантом задания. Может потребоваться использование дополнительных библиотек компонентов - ICEfaces (префикс "ace") и PrimeFaces (префикс "p").
    • Форма: Отправляет данные на сервер через Managed Beans.
    • Набор полей: Для задания координат точки и радиуса области.
  2. Валидацию: JavaScript- или JSF-валидация введенных данных.
  3. 🟠 Интерактивный Элемент:
    • Динамическая визуализация результатов на графике.
    • Обновление графика после каждого запроса.
    • Адаптивный график, который меняет свое состояние в зависимости от выбранного радиуса.
    • Цвет точек должен зависить от факта попадания / непопадания в область.
  4. Результаты: Таблицу с результатами предыдущих проверок, хранящихся в Managed Bean.
  5. Ссылку, позволяющую вернуться на стартовую страницу

Дополнительные требования к приложению:

  • Все результаты проверки должны сохраняться в базе данных под управлением PostgreSQL.
  • Для доступа к БД необходимо использовать ORM EclipseLink.
  • Для управления списком результатов должен использоваться Session-scoped Managed Bean.
  • Конфигурация управляемых бинов должна быть задана с помощью параметров в конфигурационном файле.
  • Правила навигации между страницами приложения должны быть заданы в отдельном конфигурационном файле.

🌐 Развертывание

  • Разработанное веб-приложение должно быть развёрнуто на сервере WildFly в standalone-конфигурации, порты должны быть настроены в соответствии с выданным portbase, доступ к http listener'у должен быть открыт для всех IP.

Темы для подготовки к лабораторной защите

  1. Технология JavaServer Faces. Особенности, отличия от сервлетов и JSP, преимущества и недостатки. Структура JSF-приложения.
  2. Использование JSP-страниц и Facelets-шаблонов в JSF-приложениях.
  3. JSF-компоненты - особенности реализации, иерархия классов. Дополнительные библиотеки компонентов. Модель обработки событий в JSF-приложениях.
  4. Конвертеры и валидаторы данных.
  5. Представление страницы JSF на стороне сервера. Класс UIViewRoot.
  6. Управляемые бины - назначение, способы конфигурации. Контекст управляемых бинов.
  7. Конфигурация JSF-приложений. Файл faces-config.xml. Класс FacesServlet.
  8. Навигация в JSF-приложениях.
  9. Доступ к БД из Java-приложений. Протокол JDBC, формирование запросов, работа с драйверами СУБД.
  10. Концепция ORM. Библиотеки ORM в приложениях на Java. Основные API. Интеграция ORM-провайдеров с драйверами JDBC.
  11. Библиотеки ORM Hibernate и EclipseLink. Особенности, API, сходства и отличия.
  12. Технология JPA. Особенности, API, интеграция с ORM-провайдерами.

Как использовать мой проект

Docker

Tip

Чтобы просто посмотреть лабу (нетривиально профилировать для курса по ОПИ и на helios нету docker)

git clone [email protected]:worthant/interactive-graph-ui.git
cd interactive-graph-ui
mvn clean package
docker-compose up --build

Теперь приложение доступно в браузере по:

http://localhost:32318/interactive-graph-ui-1.0-SNAPSHOT/

Ручная настройка (для гелиоса)

Note

Я добавил полностью рабочий standalone.xml конфиг в resources - можете его глянуть для примера и использовать в лабе

  1. Выполните все шаги из моего гайда
  2. Не забудьте создать базу данных в studs:

Подключиться - psql -h pg -d studs

CREATE TABLE point_model {
  id SERIAL PRIMARY KEY,
  x DOUBLE PRECISION NOT NULL,
  y DOUBLE PRECISION NOT NULL,
  r DOUBLE PRECISION NOT NULL
}
  1. Также не забудьте пробросить порты:
ssh -L port:localhost:port [email protected] -p 2222
  1. Готово, заходите в браузер и вводите:
http://localhost:port/interactive-graph-ui-1.0-SNAPSHOT/

Теоретические материалы

  1. JavaServer Faces: Официальная документация JSF
  2. ORM EclipseLink: Документация EclipseLink
  3. Lecture from se.ifmo: internet.pdf
  4. Sergei Nazemtsev's theory: theory.md
  5. ACID-транзакции: habr
  6. Жизненный цикл JSF: java-online
  7. Lombok: complete guide
  8. CSS Battle: css is fun!)
  9. Responsive CSS: vk - HASH
  10. Tailwind CSS: tw
  11. Tailwind Components: for error pages and beautiful buttons