Improve the View - Add JSTL Support

Spring Boot: Build Your Website Real Quick Micro-Service With Spring Boot
11 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€93.80
List Price:  €131.33
You save:  €37.52
£80.29
List Price:  £112.41
You save:  £32.12
CA$137.56
List Price:  CA$192.59
You save:  CA$55.03
A$155.72
List Price:  A$218.02
You save:  A$62.29
S$136.13
List Price:  S$190.59
You save:  S$54.46
HK$783.15
List Price:  HK$1,096.44
You save:  HK$313.29
CHF 90.82
List Price:  CHF 127.16
You save:  CHF 36.33
NOK kr1,103.56
List Price:  NOK kr1,545.03
You save:  NOK kr441.46
DKK kr700
List Price:  DKK kr980.03
You save:  DKK kr280.02
NZ$169.65
List Price:  NZ$237.52
You save:  NZ$67.86
د.إ367.23
List Price:  د.إ514.13
You save:  د.إ146.90
৳10,973.26
List Price:  ৳15,363.01
You save:  ৳4,389.74
₹8,346.81
List Price:  ₹11,685.87
You save:  ₹3,339.05
RM478.30
List Price:  RM669.64
You save:  RM191.34
₦129,687.03
List Price:  ₦181,567.03
You save:  ₦51,880
₨27,846.09
List Price:  ₨38,985.64
You save:  ₨11,139.55
฿3,684.97
List Price:  ฿5,159.11
You save:  ฿1,474.13
₺3,259.29
List Price:  ₺4,563.14
You save:  ₺1,303.85
B$524.14
List Price:  B$733.82
You save:  B$209.68
R1,920
List Price:  R2,688.08
You save:  R768.07
Лв183.64
List Price:  Лв257.10
You save:  Лв73.46
₩138,024.19
List Price:  ₩193,239.39
You save:  ₩55,215.20
₪378.55
List Price:  ₪529.99
You save:  ₪151.43
₱5,756.02
List Price:  ₱8,058.66
You save:  ₱2,302.64
¥15,447.20
List Price:  ¥21,626.70
You save:  ¥6,179.50
MX$1,726.94
List Price:  MX$2,417.79
You save:  MX$690.84
QR366.07
List Price:  QR512.51
You save:  QR146.44
P1,385.95
List Price:  P1,940.39
You save:  P554.43
KSh13,348.66
List Price:  KSh18,688.66
You save:  KSh5,340
E£4,832.56
List Price:  E£6,765.78
You save:  E£1,933.22
ብር5,710.80
List Price:  ብር7,995.35
You save:  ብር2,284.55
Kz83,585.80
List Price:  Kz117,023.47
You save:  Kz33,437.66
CLP$96,622.33
List Price:  CLP$135,275.13
You save:  CLP$38,652.80
CN¥724.04
List Price:  CN¥1,013.69
You save:  CN¥289.64
RD$5,929.75
List Price:  RD$8,301.89
You save:  RD$2,372.13
DA13,457.15
List Price:  DA18,840.55
You save:  DA5,383.40
FJ$227.57
List Price:  FJ$318.61
You save:  FJ$91.03
Q780.47
List Price:  Q1,092.69
You save:  Q312.22
GY$20,930.40
List Price:  GY$29,303.40
You save:  GY$8,372.99
ISK kr14,100.58
List Price:  ISK kr19,741.38
You save:  ISK kr5,640.80
DH1,016.63
List Price:  DH1,423.32
You save:  DH406.69
L1,790.82
List Price:  L2,507.22
You save:  L716.40
ден5,785.11
List Price:  ден8,099.38
You save:  ден2,314.27
MOP$806.50
List Price:  MOP$1,129.14
You save:  MOP$322.63
N$1,910.91
List Price:  N$2,675.35
You save:  N$764.44
C$3,692.82
List Price:  C$5,170.09
You save:  C$1,477.27
रु13,360.74
List Price:  रु18,705.58
You save:  रु5,344.83
S/376.13
List Price:  S/526.61
You save:  S/150.47
K381.31
List Price:  K533.85
You save:  K152.54
SAR375.08
List Price:  SAR525.14
You save:  SAR150.05
ZK2,557.08
List Price:  ZK3,580.02
You save:  ZK1,022.93
L466.85
List Price:  L653.61
You save:  L186.76
Kč2,369.96
List Price:  Kč3,318.04
You save:  Kč948.08
Ft37,031.68
List Price:  Ft51,845.84
You save:  Ft14,814.15
SEK kr1,094.85
List Price:  SEK kr1,532.83
You save:  SEK kr437.98
ARS$86,967.11
List Price:  ARS$121,757.44
You save:  ARS$34,790.32
Bs693.40
List Price:  Bs970.79
You save:  Bs277.38
COP$389,858.15
List Price:  COP$545,817.01
You save:  COP$155,958.85
₡50,274.61
List Price:  ₡70,386.47
You save:  ₡20,111.85
L2,477.26
List Price:  L3,468.26
You save:  L991
₲742,412.64
List Price:  ₲1,039,407.40
You save:  ₲296,994.75
$U3,872.48
List Price:  $U5,421.62
You save:  $U1,549.14
zł405.79
List Price:  zł568.12
You save:  zł162.33
Already have an account? Log In

Transcript

Hey there welcome back friends in this video we will move forward and for example I click on Samsung then we get to this horrible output This is strange This is horrible. So let's improve on the view file the overall look and feel of this view. So let me open this up. So first of all let us open up the controller store dot java and we can easily make out we can easily make out that there are there are like only one view we are like reusing the Samsung view for Apple again right so we were too lazy to create a yet another what a yet another view for Apple which for display the Apple devices. Indeed there is no need to create two views again. So that was something which we didn't did, but at this time What we'll do first of all, we will create a generic view and that the view name would be view devices right?

That will copy this name let me paste it in here as well. And let me rename this file which is Samsung dot JSP. We will rename this to view devices dot CSV. Let me click on OK Alright, so here is the file cool enough nice enough let me expand this first thing first. Which device we are displaying first of all we need to extract the brand name and if I show you if I show you the devices, thing, in devices we have two things. Firstly, we have a list list of devices and we also have a brand name thing right.

So we can extract that and that is fairly straightforward. Here, what we will do we will make use of this this particular object or devices Object devices is nothing but object of this class devices. So, this will contain the brand name and the list of devices right. Let me expand this. So, here how we can extract a specific field very simple we will make use of the dot operator and they give the name of the property which is brand name and we will get the name of the plant cool enough nice and then here again we will say list of devices taught plant name and then we will also mark this as each three thing that would be good heading three. Here we go.

And we will also add a horizontal row and then we will loop over over list now whenever we are looping over the list always tasty is the way to go. And that is the way we will make use of it. All right, so in order to do that, we need to import the port, the tag lab and in order to get the tag lab, we'll navigate to steadies.org. And we will search for GST or tag lib. So search GS, the tag lib. You can also Google this and you can get it from any website.

But as a content creator, I cannot refer to third party websites over well navigate here in our own website and we will simply copy this this tag lip and navigate to eclipse or sts to be very specific and here we will paste the tag lip now Only pasting the tag lib is not enough. So definitely, we will, again navigate to Google, and we will Google for jst l Maven. And here is the search result. Let me click on the search result. And this will give us some kind of warning in here that the artifact has been moved. So let me click on this move to URL.

If I click on this, this will give us two version. So version 1.2 is the latest version we will go with that I will click this particular dependency will open up STS, here is the palm that XML file. Now friends, there are few things which I will discuss in just a minute. First of all, let me get rid of the spaces and add the dependency for my things a little and save the changes. So here we have the jst l API. In our previous videos, we have added the CI SP API, but the servlet API is not that We have Tomcat servlet API rather.

So here, if we scroll down, there are a couple of compiled dependency. One is JSP API, which we have already added. But the servlet API is not added. So let us quickly add that it will, again, give us this warning that this this has been moved to some other location. Let me navigate that. In fact, let me click on this link and go for the stable version, which is version 2.5.

That is a better version. Let me copy this, take a note of the URL version is 2.5. We won't use the newer version, which is alpha release, go with the final release, which is 2.5. As of now, when you will be like practicing or you will be developing the version may vary. So take a note of it. Sometimes there there could be some issues with dependencies.

So you get to experiment a little you you may have to Google a little based on the dependencies Because we are manually adding these dependencies, so, sometimes it may happen. For example, in here for example, I added these dependency but again gstl is not added yet the reason being we are making use of a Spring Boot environment and here we are making use of what we are making use of embedded Tomcat embedded Tomcat as a result that is a jet another dependency which we have to add else you will get an error. It is a standard standard standard jar. So, search for standard char, and here the second second thing is tag lib standard go with this one. And it is moved to somewhere else. Again, let me click on this version 1.2 point five.

Let me click on this and it readily says an implementation of JSP standard tag library So we need to also add, add this into our into our POM dot XML then only our Tomcat will pardon me, our project will have the support of jst l All right. So, there are these volatile things which we have to understand we have to find and indeed, even I have spent quite some time to understand why my program was not executing because of test missing chart. So many times we have to like experiment, experiment, Google skills are very important as a software developer, all right. Now, let me relaunch this application. So that we will get the changes and let me also open up the view devices dot JSP. So here we have a few things added list of devices, brand name devices.

Let me complete this. Here we go. And here, we need to make use of what we will make uses for each for each from gstl core tag there are a few things here like items and variable first of all we will give the variable name as device. And apart from that, here we need to also make use of something known as items. Right so items will have the list. Now here is the catch, let me show you.

Here is a very store dot java and we are passing the object and we have given the name of the object as devices which is cool. No problem here. So here it would be like dollars and ball devices but the object name is devices and if we navigate to devices dot char inside the object there are two properties devices and plant names. So here we need to access this list this list is a property inside the class So, take a note of it. So, it would be like devices starter devices alright. And when we would like to like list the information here, what we need to do we need to extract information from devices and the list is of type device again take a note of it and inside the device inside the device if we check that again these properties name and type getting a point.

So, we have to like try to understand how to extract information properly then only we will be able to extract information properly. So here we will create a unordered list first. Let me close the unordered list. After this for each and inside this for each we will create a list and here we will do what we will extract the information cert would be like device, whoops, it would be like this dollar symbol device dot name. And then we can like add some other information. For example, we can add a colon and choose a jet.

Another thing. In fact, let us add couple of labels that would be better. Name, device name, category, colon device type, that would be rather a better format. I am not sure how it will look but it does check. And we will also add a br tag here. And that's it.

I would say. This looks good. Let me relaunch the application. Alright, so here, let me click on Samsung. Alright, so this looks good. A name, note nine category smartphone.

Name, s 10, category smartphone. Good enough, fairly decent UI, not rocket science, Apple. Again, good enough. So our application is working. And that the final step, the final step to make this application a better application would be to remove to remove these hard coded you are ELLs. So it's been quite some time that we are going with this hard coded URL.

But finally from the next video, we will work in that direction so that we can remove these hard coded URLs. All right, so I hope you guys enjoyed this video. Thanks for watching. Have a nice day and take care

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.