In this part, we would build the GUI and learn the following:<\/p>\n
- \n
- Building a GUI Using Bootstrap\/JQuery\/JavaScript<\/li>\n
- How Thymeleaf works<\/li>\n
- Making REST API call using RestTemplate<\/li>\n<\/ul>\n
So, let’s get started!<\/p>\n
- \n
- Add the JQuery and a Bootstrap Dependencies<\/a><\/li>\n
- Build the HTML Page<\/a><\/li>\n
- Create the JavaScript<\/a><\/li>\n
- Setup the Controller file<\/a><\/li>\n
- Troubleshooting Possible Errors<\/a><\/li>\n
- Watch the Video<\/a><\/li>\n<\/ol>\n
<\/p>\n
1. Add the JQuery and Bootstrap Dependencies<\/strong><\/h5>\n
It’s easier to just add the JQuery and Bootstrap dependencies in your pom.xml. In this way you have all the necessary scripts and stylesheets added to your classpath.<\/p>\n
See the dependencies below. You can also get them from Maven Repository<\/a><\/p>\n
<\/p>\n
<dependency><\/span>\r\n\t<groupId><\/span>org.webjars<\/groupId><\/span>\r\n\t<artifactId><\/span>bootstrap<\/artifactId><\/span>\r\n\t<version><\/span>4.3.1<\/version><\/span>\r\n<\/dependency><\/span>\r\n\r\n<dependency><\/span>\r\n\t<groupId><\/span>org.webjars<\/groupId><\/span>\r\n\t<artifactId><\/span>jquery<\/artifactId><\/span>\r\n\t<version><\/span>3.4.1<\/version><\/span>\r\n<\/dependency><\/span>\r\n<\/pre>\n<\/p>\n
2. Create the HTML Page<\/strong><\/h5>\n
You need to create the index.html page inside the src\/main\/resources\/templates folder. You can find all the files in my Github repository here<\/a>.<\/p>\n
The html page would have to produce this output shown below:
\n![\"\"](\"https:\/\/www.kindsonthegenius.com\/microservices\/wp-content\/uploads\/sites\/18\/2020\/04\/Html-Page-Output.jpg\")
<\/a><\/p>\nI would not put the code for this page here. You can get it from Github. However, you can see below the code for the ‘Order One Now’ button.<\/p>\n
<\/p>\n
<a<\/span> id=<\/span>\"orderButton\"<\/span> \r\n th:href=<\/span>\"@{\/newOrder\/(id=${product.id},price=${product.price})}\"<\/span> \r\n class=<\/span>\"btn btn-warning\"<\/span> ><\/span>\r\n Order One Now!\r\n<\/a>\r\n<\/span>\r\n<\/pre>\nNotice in the code the th:href<\/strong> attribute. The th: prefix is added so the thymeleaf engine can interpret it. Also note that two parameters are passed along with the url string: the product price and product id.<\/p>\n
Another thing to note is how to include jquery and bootstrap links. See below<\/p>\n
<\/p>\n
<link<\/span> href=<\/span>\"\/webjars\/bootstrap\/4.3.1\/css\/bootstrap.css\"<\/span> rel=<\/span>\"stylesheet\"<\/span> \/><\/span>\r\n<script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"\/webjars\/jquery\/3.4.1\/jquery.min.js\"<\/span>><\/script><\/span>\r\n<script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"\/webjars\/bootstrap\/4.3.1\/js\/bootstrap.min.js\"<\/span>><\/script><\/span>\r\n<script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"..\/static\/main.js\"<\/span> th:src=<\/span>\"@{\/js\/main.js}\"<\/span>><\/script><\/span>\r\n<\/pre>\n<\/p>\n
- Build the HTML Page<\/a><\/li>\n
- Add the JQuery and a Bootstrap Dependencies<\/a><\/li>\n