Presenting Your App on the Web

Let’s recap the importance of a GUI (graphical user interface) and the relevance of doing it on the web by paraphrasing Chapter 14 of the book Pro Spring 6 by Iuliana Cosmina:

• In an enterprise application, the presentation layer critically affects users’ level of acceptance of the application. The presentation layer is the front door into your application.
• It lets users perform business functions provided by the application, as well as presents a view of the information that is being maintained by the application.
• How the user interface performs greatly contributes to the success of the application.
• Because of the explosive growth of the Internet (especially these days), as well as the rise of different kinds of devices that people are using, developing an application’s presentation layer on the web is a challenging yet crucial task.

How Spring MVC Helps Us Easily Develop a Web UI

In order to create a presentation layer in Spring that is accessible in a web browser, we can make use of Spring MVC:

• Spring Boot Starter Web includes Spring Web, Spring MVC and an embedded Tomcat servlet container, meaning we already have everything we need to spin up our app on a server we can visit on our web browser.
• Spring MVC will support our use of some new layers (a controller layer and a view layer), which will make it so that, when an end user on a web browser sends a request (HTTP request) to our Spring application, he/she will get to see a view (a dynamically resolved, fully rendered HTML-document).
• This means our Spring app has suddenly become a fully fledged web application, as it is accessible on the web.

• Spring Boot Starter Web helps us get up and running with such a web application in minutes by providing us all the tools and support out-of-the-box.
• Installing Spring Boot Starter Web is as easy as adding the dependency to our project:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

• Working with the parent POM and BOM in Spring Boot means we don’t need to specify a version, we can leave compatibility and version management to the Spring team.
• If you use Spring Initializr to start your projects, you can simply select the Spring Web dependency when “shopping”.

Click to see Spring Initializr screenshot

👩‍💻 Hands-on Demo: Spring MVC

1. Use Spring Initializr to create a new Spring MVC project named “hello-spring-mvc“.
   • While “shopping” for dependencies, search for “Web” and explore the different options, before adding the relevant one:
     • Add Spring Web.
2. Look at the resulting POM file and study the dependencies.

?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.1.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>be.multimedi</groupId>
    <artifactId>hello-spring-mvc</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>hello-spring-mvc</name>
    <description>hello-spring-mvc</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3. Explore your project structure: adding this dependency gave IntelliJ extra instructions to make some more folders that you’ll be using, what are they?

🕵️‍♂️ Click here to reveal the solutions

In the “src/main/resources” folder, we can see that next to the application.properties file, there are two newly created folders, the “static” and “templates” directories.

• The templates folder will hold all our dynamic HTML pages (a mix of pure HTML code and special JSP/Thymeleaf/FreeMarker syntax).
• The static folder will hold all the non-dynamically created stuff for our website, such as CSS files, JS files, videos, images, etc.
• Both of these are necessary for the views (presentation), and both will be extensively used in the following topics, so don’t worry too much about them right now beyond noticing their existence.

4. Run your application without writing even a single letter of code and explore the run console: what is happening? Read the individual logs to try to figure it out.

🕵️‍♂️ Click here to reveal the solutions

• The first thing you’ll notice is the application is still running:
  
  • Your Java application will run continuously on the “server” (your computer in this case, as it’s being hosted locally), constantly monitoring and listening for any incoming HTTP requests.
• Notice how Tomcat, the embedded servlet container responsible for managing all our servlets and taking care of all the highly technical HTTP communication, is mentioned.

• Specifically, how it’s (by default) started its service on the port 8080 (MySQL users: remember how your MySQL server started running on the port 3306?).
• So your app is now running on the (locally hosted) web server at the 8080 port.
• That means you could technically already visit your web app via your web browser by typing in the address (in this case, since it’s hosted locally, the address is localhost:8080).

5. Visit your web app using your web browser and try to interpret the result.

🕵️‍♂️ Click here to reveal the solutions

• Congratulations on visiting your very first Spring web app!
• This 404 error is very logical and should make sense to you if you have a basic understanding of HTTP response status codes (make sure you Google-Fu if not). We haven’t made any views yet nor any controller methods listening to GET-requests sent to the homepage, so the DispatcherServlet couldn’t redirect the request as it couldn’t find a matching controller method, so it returns a 404 error.

6. Stop the application. This will also shut down the Tomcat server, making the website inaccessible. Try visiting localhost:8080 again and notice the difference.
7. (Extra) Add this Spring Boot Starter Web dependency to any of your previous completed Spring Data projects and launch them.

Observations and the DispatcherServlet

• The embedded Tomcat servlet container, included in the Spring Boot Starter Web dependency, will ensure that, when we run our application, it’ll spin up said embedded Tomcat server, making our app accessible via web browsers.
• You only need to enter the address (by default, localhost:8080) to navigate to our web app’s presentation.
• Spring MVC will also autoconfigure a DispatcherServlet for us, which does a lot for us in terms of accepting and redirecting HTTP-requests (to the relevant controller methods we wrote), and then generating a HTTP-response to send back to the user.
  • We will look at the DispatcherServlet more later on in the course.

To actually start developing our web app using Spring MVC, we still have to add some layers (write some classes and HTML documents) ourselves, namely the Controller layer and the View layer. We’ll look at how in upcoming topics, but here’s a high-level overview of how a typical Spring MVC application could be architecturally organised:

• It’s the collaboration between the Model, the Controller layer and the View layer, under supervision of the DispatcherServlet, that results in a dynamically filled in webpage we can return to the user’s web browser in a HTTP Response.
• The user’s web browser will then be able to interpret and display the returned HTML document, making it presentable to the user.
• This is how we’re going to create a Web UI Presentation layer for our web application, by following the Model-View-Controller (MVC) design pattern, supported by Spring MVC.

Summary

• The GUI is a critical aspect of enterprise applications with user interfaces, serving as the primary interface through which users interact and access business functions. The success of an application is closely tied to the performance and user-friendliness of its presentation layer, making it the “front door” to the application.
• Making our app accessible via the web is interesting as its ubiquity and ease of portability to other platforms makes it the most likely to be successful and maintainable.
• By using Spring Boot Starter Web, developers can quickly set up a web application accessible through web browsers, integrating Spring Web, Spring MVC, and an embedded Tomcat servlet container.
• Creating a Spring MVC project using Spring Initializr involves adding the Spring Web dependency, which conveniently manages compatibility and versioning. The resulting project structure includes “static” and “templates” directories, essential for views and web content.
• Spring MVC introduces the concept of DispatcherServlet, a behind-the-scenes class responsible for handling and redirecting HTTP requests to corresponding controller methods. This key component ensures the seamless flow of HTTP communication within the application, and is autoconfigured in our Spring Boot project.
• The development of a web presentation layer in Spring MVC follows the Model-View-Controller (MVC) design pattern. The collaboration between the Model, Controller layer, and View layer, orchestrated by the DispatcherServlet, results in the generation of dynamic HTML pages as HTTP responses. These HTML documents are then presented in the user’s web browser, forming the basis for an effective Web UI Presentation layer.