Utiliser Twitter Bootstrap dans Spring Boot

View more Tutorials:

Tutoriels Spring Boot

Objectif de cette publication
Créer un projet Spring Boot
Déclarer le fichier pom.xml
Resource Handler
Controller
Views

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.

Facebook

1- Objectif de cette publication

Avant de démarrer la lecon, nous prenons quelques minutes pour comprendre Bootstrap:

Bootstrap est un HTML, CSS & JavaScript Framework permettant de concevoir et de développer des applications "Responsive Web Mobile". Bootstrap comprend HTML templates, CSS templates & Javascript et des bases ainsi que des élements disponibles telles que: typography, forms, buttons, tables, navigation, modals, image carousels et autres. Bootstrap a des Javascript Plugin qui aide à concevoir votre Web Reponsive plus facilement et plus rapidement.

Bootstrap est développé par Mark Otto et Jacob Thornton à Twitter. Il est publié comme un code de ressource ouverte publié en aout 2011 sur GitHub.

See more:

Introduction à Bootstrap

Dans cet article, je vais vous montrer comment créer une application Spring Boot à l'aide de Bootstrap. Et parce que Bootstrap est un Html, Css, Javascript Framework donc vous utilisez n'importe laquelle technologie pour la couche View (JSP, Thymeleaf, Freemarker,...).

Les contenus mis à jour dans ce lecon:

Créer une application Spring Boot.
Déclarer des bibliothèques nécessaires pourque vous puissiez utiliser Bootstrap.
Créer une page simple utilisant des composants de l'interface d'utilisateur (UI Component) fournits par Bootstrap.

2- Créer un projet Spring Boot

3- Déclarer le fichier pom.xml

Bootstrap a été enveloppé dans un petit et joli fichier Jar. Afin de l'utiliser, vous devez simplement le déclarer dans le fichier pom.xml, donc vous êtes prêt à travailler avec Bootstrap Framework.

** Bootstrap **


<!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>jquery</artifactId>
   <version>3.3.1-1</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.webjars/popper.js -->
<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>popper.js</artifactId>
   <version>1.14.1</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>4.1.1</version>
</dependency>

Le contenu complet du fichier pom.xml:

pom.xml


<?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
    http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>org.o7planning</groupId>
    <artifactId>SpringBootBootstrap</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>SpringBootBootstrap</name>
    <description>Spring Boot + Bootstrap</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.0.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</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-thymeleaf</artifactId>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1-1</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/popper.js -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>popper.js</artifactId>
            <version>1.14.1</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.1.1</version>
        </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>

4- Resource Handler

Les ressources de données de Bootstrap sont empaquées dans le fichier Jar. Vous devez les exposer (expose), pour qu'elles puissent être accédées par des répertoires, par exemple :

http://somedomain/SomeContextPath/jquery/jquery.min.css
http://somedomain/SomeContextPath/popper/popper.min.js
http://somedomain/SomeContextPath/bootstrap/css/bootstrap.min.css
http://somedomain/SomeContextPath/bootstrap/js/bootstrap.min.js

WebMvcConfig.java


package org.o7planning.sbbootstrap.config;
 
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
 
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //
        // Access Bootstrap static resource:
        //
 
        //
        // http://somedomain/SomeContextPath/jquery/jquery.min.css
        //
        registry.addResourceHandler("/jquery/**") //
                .addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.3.1-1/");
 
        //
        // http://somedomain/SomeContextPath/popper/popper.min.js
        //
        registry.addResourceHandler("/popper/**") //
                .addResourceLocations("classpath:/META-INF/resources/webjars/popper.js/1.14.1/umd/");
 
        // http://somedomain/SomeContextPath/bootstrap/css/bootstrap.min.css
        // http://somedomain/SomeContextPath/bootstrap/js/bootstrap.min.js
        //
        registry.addResourceHandler("/bootstrap/**") //
                .addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.1.1/");
 
    }
 
}

5- Controller

HelloWorldController.java


package org.o7planning.sbbootstrap.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloWorldController {

    @RequestMapping("/")
    public String helloWorld(Model model) {
        return "index";
    }

}

6- Views

index.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8"/>
      <title>Twitter Bootstrap Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <!-- See configuration in WebMvConfig.java -->
      <link th:href="@{/bootstrap/css/bootstrap.min.css}"
                rel="stylesheet" media="screen"/>
                
       
      <script th:src="@{/jquery/jquery.min.js}"></script>  
      <script th:src="@{/popper/popper.min.js}"></script>  
      <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>   
         
   </head>
   
   <body>
         
      <h2>Hello Twitter Bootstrap</h2>
      
      <div class="btn-group">
            <button type="button" class="btn btn-success">This is a success button</button>
            <button type="button" class="btn btn-warning">This is a warning button</button>
            <button type="button" class="btn btn-danger">This is a danger button</button>
     </div>
   </body>
   
</html>

Et voici est l'image du site web avec des composants d'interface d'utilisateur (UI Component) de Bootstrap:

View more Tutorials:

Tutoriels Spring Boot