devstory

Utiliser Twitter Bootstrap dans Spring Boot

  1. Objectif de cette publication
  2. Créer un projet Spring Boot
  3. Déclarer le fichier pom.xml
  4. Resource Handler
  5. Controller
  6. Views

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:
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:
  1. Créer une application Spring Boot.
  2. Déclarer des bibliothèques nécessaires pourque vous puissiez utiliser Bootstrap.
  3. 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:

Tutoriels Spring Boot

Show More

Tutoriels Spring Boot

Show More

Articles les plus récents

Show More