Interactive graph UI

Table of Contents

• Demonstration
• Description
• Technical Requirements
• Topics for Theoretical Defense
• How to use my project
• Theoretical Materials

Demonstration 🎥

Youtube video
https://youtu.be/ny15aofvGCI

Description 📝

👋 Welcome to this laboratory project!

🛠 What is it?
This is a modern web application built on the JavaServer Faces framework. Its architecture uses 2 facelets templates for flexibility and modularity. The starting page provides general information and redirects to the main page with functionality. Server logic is implemented using Managed Beans, ensuring flexible and scalable data processing.

🎯 The goal of the site
To make the process of entering coordinates of points and checking their hit in a given area as convenient and intuitive as possible. My UI was developed with a focus on good UX 😎

---

📌 Main features

• 🖥 Interactive Data Entry: Use intuitive interface elements to enter coordinates.
• 📊 Dynamic Graph: Visualization of the area and points on the coordinate plane in real-time.
• 🔒 Server-Side Validation: Reliable verification of entered data is ensured through Managed Beans.

---

🚀 Want to know more? Check out the user manual and dive into the amazing world of this web application! 💻

Technical Requirements

Goal: Develop a web application based on the JavaServer Faces Framework

📋 Main parts of the application

• Managed Beans: Managed beans that contain server-side data processing logic.
• index.xhtml: The starting page containing general information and redirecting to the main page.
• main.xhtml: The main application page with a web form for entering coordinates and displaying results.

🎨 The index.xhtml start page should include

1. Header: Full name, group number, variant number.
2. Interactive Clock: Shows the current date and time, updates every 10 seconds.
3. Link: allows you to go to the main page of the application.

📊 The main main.xhtml page should include

1. A set of components: To set the coordinates of the point and the radius of the area according to the task variant. The use of additional component libraries may be required - ICEfaces (prefix "ace") and PrimeFaces (prefix "p").
   • Form: Sends data to the server via Managed Beans.
   • A set of fields: For setting the coordinates of the point and the radius of the area.
2. Validation: JavaScript- or JSF-validation of entered data.
3. 🟠 Interactive Element:
   • Dynamic visualization of results on the graph.
   • Graph update after each request.
   • An adaptive graph that changes its state depending on the selected radius.
   • The color of the points should depend on the fact of hitting/not hitting the area.
4. Results: A table with the results of previous checks, stored in a Managed Bean.
5. A link that allows you to return to the start page.

Additional requirements for the application:

• All verification results must be stored in a PostgreSQL-managed database.
• Access to the DB must use the ORM EclipseLink.
• A Session-scoped Managed Bean should be used to manage the list of results.
• The configuration of managed beans should be set using parameters in the configuration file.
• The rules of navigation between the pages of the application should be defined in a separate configuration file.

🌐 Deployment

• The developed web application must be deployed on the WildFly server in standalone configuration, ports must be configured in accordance with the issued portbase, access to the http listener must be open to all IPs.

Topics for preparation for laboratory defense

1. JavaServer Faces technology. Features, differences from servlets and JSP, advantages and disadvantages. Structure of a JSF application.
2. Using JSP pages and Facelets templates in JSF applications.
3. JSF components - implementation features, class hierarchy. Additional component libraries. The event processing model in JSF applications.
4. Data converters and validators.
5. Presentation of the JSF page on the server side. UIViewRoot class.
6. Managed beans - purpose, configuration methods. Managed beans context.
7. Configuration of JSF applications. The faces-config.xml file. FacesServlet class.
8. Navigation in JSF applications.
9. Access to the DB from Java applications. JDBC protocol, query formation, working with DBMS drivers.
10. ORM concept. ORM libraries in Java applications. Main APIs. Integration of ORM providers with JDBC drivers.
11. ORM libraries Hibernate and EclipseLink. Features, API, similarities and differences.
12. JPA technology. Features, API, integration with ORM providers.

How to use my project

Docker

Tip

For a quick setup to view the project (not suitable for profiling for the OPI course and Docker is not available on Helios)

git clone git@github.com:worthant/interactive-graph-ui.git
cd interactive-graph-ui
mvn clean package
docker-compose up --build

Connect in browser:

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

Manual setup (for helios mainly)

Note

I've included a fully functional standalone.xml config in the resources - you can check it out as an example and use it for the project.

1. Follow all the steps from my guide
2. Don't forget to create a database in studs:

Connect with 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
}

3. Also, don't forget to forward the ports:

ssh -L port:localhost:port sXXXXXX@se.ifmo.ru -p 2222

4. Done, go to the browser and enter:

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

Theoretical materials

1. JavaServer Faces: Official JSF documentation
2. ORM EclipseLink: EclipseLink documentation
3. Lecture from se.ifmo: internet.pdf
4. Sergei Nazemtsev's theory: theory.md
5. ACID-transactions: habr
6. JSF Lifecycle: 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