In the tutorial, JavaSampleApproach will show how to show images on web-view from Kotlin SpringBoot RestAPI with Bootstrap 4 Image and Jquery.
Contents
I. Technologies
– Java 1.9
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap 4
– Kotlin 1.1.61
– Spring Boot – 1.5.9.RELEASE
II. Goal
We create a SpringBoot project as below structure:
We create a Kotlin RestAPI:
@GetMapping(value = "/api/image") fun getImage(): ResponseEntity<InputStreamResource>{ val imgFile = ClassPathResource("image/jsa_about_img.png") return ResponseEntity .ok() .contentType(MediaType.IMAGE_JPEG) .body(InputStreamResource(imgFile.getInputStream())) } |
We use Bootstrap 4 Image to style data on web-view, with results:
Bootstrap 4 Image provides useful classes to style with images:
– .rounded class adds rounded corners to an image
– .rounded-circle shapes the image to a circle
– .img-thumbnail shapes the image to a thumbnail (bordered)
We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:
Bootstrap 4 Aligning Images with 2 classes: {.float-right, .float-left}
Bootstrap 4 Responsive Images with .img-fluid class that applies max-width: 100% and height: auto.
III. Practice
Step to do:
– Create Kotlin SpringBoot project
– Create index controller
– Implement Kotlin RestAPI
– Create index.html view
– Create JQuery script
1. Create Kotlin SpringBoot project
Use SpringToolSuite to create a Kotlin SpringBoot project with dependencies:
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-stdlib-jre8</artifactId> <version>${kotlin.version}</version> </dependency> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-reflect</artifactId> <version>${kotlin.version}</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory> <testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> <plugin> <artifactId>kotlin-maven-plugin</artifactId> <groupId>org.jetbrains.kotlin</groupId> <version>${kotlin.version}</version> <configuration> <compilerPlugins> <plugin>spring</plugin> </compilerPlugins> <jvmTarget>1.8</jvmTarget> </configuration> <executions> <execution> <id>compile</id> <phase>compile</phase> <goals> <goal>compile</goal> </goals> </execution> <execution> <id>test-compile</id> <phase>test-compile</phase> <goals> <goal>test-compile</goal> </goals> </execution> </executions> <dependencies> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-allopen</artifactId> <version>${kotlin.version}</version> </dependency> </dependencies> </plugin> </plugins> </build> |
2. Create Index controller
package com.javasampleapproach.bootstrap4image.controller import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller class WebController { @GetMapping(value="/") fun homepage(): String{ return "index" } } |
3. Implement Kotlin RestAPI
package com.javasampleapproach.bootstrap4image.controller import org.springframework.core.io.ClassPathResource import org.springframework.core.io.InputStreamResource import org.springframework.http.MediaType import org.springframework.http.ResponseEntity import org.springframework.web.bind.annotation.GetMapping import org.springframework.web.bind.annotation.RestController @RestController class RestAPI { @GetMapping(value = "/api/image") fun getImage(): ResponseEntity<InputStreamResource>{ val imgFile = ClassPathResource("image/jsa_about_img.png") return ResponseEntity .ok() .contentType(MediaType.IMAGE_JPEG) .body(InputStreamResource(imgFile.getInputStream())) } } |
4. Create index.html view
<!DOCTYPE HTML> <html> <head> <title>Bootstrap 4 Image - Kotlin SpringBoot - JQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="/js/jquery.js"></script> </head> <body class="container"> <h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI</h1> <div> <div id="loadImageBootstrapStyleDiv"> <a href="/api/image"> <img src="/api/image" id="jsaAboutImageId" class="rounded img-fluid" alt="JSA-About Image" /> <div class="caption"> <p>JSA-About Image</p> </div> </a> </div> <div class="btn-group"> <button id="roundedCornersBtn" type="button" class="btn btn-primary">Rounded Corners</button> <button id="circleBtn" type="button" class="btn btn-primary">Circle</button> <button id="thumbnailBtn" type="button" class="btn btn-primary">Thumbnail</button> </div> </div> <h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">2. Bootstrap 4 Image Gallery</h1> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image"> <img src="/api/image" class="rounded" alt="JSA-About rounded" style="width:100%" /> <div class="caption"> <p>JSA-About img-rounded</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image"> <img src="/api/image" class="rounded-circle" alt="JSA-About rounded-circle" style="width:100%" /> <div class="caption"> <p>JSA-About img-circle</p> </div> </a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="/api/image"> <img src="/api/image" class="img-thumbnail" alt="JSA-About img-thumbnail" style="width:100%" /> <div class="caption"> <p>JSA-About img-thumbnail</p> </div> </a> </div> </div> </div> <h1 style="text-decoration: underline; color:#283E84; margin:10px 0px 10px 0px">3. Bootstrap 4 Aligning Images</h1> <div> <img src="/api/image" class="float-left" alt="JSA-About" width="320" /> <img src="/api/image" class="float-right" alt="JSA-About" width="320" /> </div> </body> </html> |
5. Create JQuery script
$( document ).ready(function() { $("#roundedCornersBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('rounded img-fluid'); }); $("#circleBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('rounded-circle img-fluid'); }); $("#thumbnailBtn").on( "click", function() { $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-fluid'); }); }) |