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{ 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:
org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web org.jetbrains.kotlin kotlin-stdlib-jre8 ${kotlin.version} org.jetbrains.kotlin kotlin-reflect ${kotlin.version} org.springframework.boot spring-boot-starter-test test ${project.basedir}/src/main/kotlin ${project.basedir}/src/test/kotlin org.springframework.boot spring-boot-maven-plugin kotlin-maven-plugin org.jetbrains.kotlin ${kotlin.version} spring 1.8 compile compile compile test-compile test-compile test-compile org.jetbrains.kotlin kotlin-maven-allopen ${kotlin.version}
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{ val imgFile = ClassPathResource("image/jsa_about_img.png") return ResponseEntity .ok() .contentType(MediaType.IMAGE_JPEG) .body(InputStreamResource(imgFile.getInputStream())) } }
4. Create index.html view
Bootstrap 4 Image - Kotlin SpringBoot - JQuery %MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf220%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf221%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf222%%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf223%1. Bootstrap 4 Image - Kotlin SpringBoot ResAPI
2. Bootstrap 4 Image Gallery
3. Bootstrap 4 Aligning Images
%MINIFYHTMLb1b395d27948d70f59ced0cc9818ebf224%![]()
![]()
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'); }); })