Using Font Awesome Icons in a JavaServer Faces h:commandButton

      3 Comments on Using Font Awesome Icons in a JavaServer Faces h:commandButton

This will be a short blog. Today I spent way too much time looking for a solution. I am writing a web app for my GoPiGo3 robot car. The first version used 5 JSF h:commandButton buttons labelled forward, right, reverse, left and stop. I wanted to replace them with icons from the Font Awesome library. I thought this was a common way to dress up a button but I was wrong. A shout out to the freeCodeCamp site and the forum question that contained the answer https://forum.freecodecamp.org/t/solved-adding-font-awesome-icons-to-an-input-button/74139. It was John Kennedy’s answer to the question “Adding Font Awesome Icons to an input button?”.

While John’s answer dealt with plain HTML, the attributes he used are also found in the JSF h:commandButton tag. Here is what my robot control panel first looked like:

Next, using Font Awesome icons:

My projects are always Maven based. To be able to use Font Awesome I added the following dependency.

[pastacode lang=”markup” manual=”%3Cdependency%3E%0A%20%20%20%20%3CgroupId%3Eorg.webjars%3C%2FgroupId%3E%0A%20%20%20%20%3CartifactId%3Efont-awesome%3C%2FartifactId%3E%0A%20%20%20%20%3Cversion%3E4.7.0%3C%2Fversion%3E%0A%3C%2Fdependency%3E” message=”Maven dependency for Font Awesome” highlight=”” provider=”manual”/]

The current version of Font Awesome is 5.0.13 but as of this writing I am unable to get this version to work. I have emailed the Font Awesome people concerning this.

Next is the JSF page. Here is the original version with just text. If you know me then you may wonder why I am not using i118n. For this blog I have purposely removed references to bundles and have hard coded the text. The production version will use i18n. I have also removed all actions to simplify the code.

[pastacode lang=”markup” manual=”%3C%3Fxml%20version%3D’1.0’%20encoding%3D’UTF-8’%20%3F%3E%0A%3C!DOCTYPE%20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0%20Transitional%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-transitional.dtd%22%3E%0A%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%0A%20%20%20%20%20%20xmlns%3Ah%3D%22http%3A%2F%2Fxmlns.jcp.org%2Fjsf%2Fhtml%22%3E%0A%0A%20%20%20%20%3Ch%3Ahead%3E%0A%20%20%20%20%20%20%20%20%3Ctitle%3EGoPiGo3%3C%2Ftitle%3E%0A%20%20%20%20%3C%2Fh%3Ahead%3E%0A%0A%20%20%20%20%3Ch%3Abody%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3EGoPiGo3%20Control%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch%3Aform%20id%3D%22gopigo%22%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGrid%20columns%3D%223%22%20cellpadding%3D%221%22%20border%3D%220%22%20cellspacing%3D%2210%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22forwardButton%22%20value%3D%22forward%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22leftButton%22%20value%3D%22left%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22stopButton%22%20value%3D%22stop%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22rightButton%22%20value%3D%22right%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22reverseButton%22%20value%3D%22reverse%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh%3ApanelGrid%3E%0A%20%20%20%20%20%20%20%20%3C%2Fh%3Aform%3E%0A%20%20%20%20%3C%2Fh%3Abody%3E%0A%3C%2Fhtml%3E%0A” message=”index.xhtml with test for buttons” highlight=”” provider=”manual”/]

Here is the Font Awesome version. Take note of the h:outputStylesheet in the h:head section. For the buttons I refer to the Unicode value for the icon and the matching class name. The class name has three parts. The first is the library name, fa. The second is the name of the icon such as fa-arrow-right. The third, fa-3x, is a size multiplier. Font Awesome icons are displayed based on the current CSS value of the page so the multiplier allows you to enlarge the icon without enlarging anything else.

[pastacode lang=”markup” manual=”%3C%3Fxml%20version%3D’1.0’%20encoding%3D’UTF-8’%20%3F%3E%0A%3C!DOCTYPE%20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0%20Transitional%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-transitional.dtd%22%3E%0A%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%0A%20%20%20%20%20%20xmlns%3Ah%3D%22http%3A%2F%2Fxmlns.jcp.org%2Fjsf%2Fhtml%22%3E%0A%0A%20%20%20%20%3Ch%3Ahead%3E%0A%20%20%20%20%20%20%20%20%3Ctitle%3EGoPiGo3%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%3Ch%3AoutputStylesheet%20library%3D%22webjars%22%20name%3D%22font-awesome%2F4.7.0%2Fcss%2Ffont-awesome.min-jsf.css%22%20%2F%3E%0A%20%20%20%20%3C%2Fh%3Ahead%3E%0A%0A%20%20%20%20%3Ch%3Abody%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3EGoPiGo3%20Control%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch%3Aform%20id%3D%22gopigo%22%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGrid%20columns%3D%223%22%20cellpadding%3D%221%22%20border%3D%220%22%20cellspacing%3D%2210%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22forwardButton%22%20value%3D%22%26%23xf062%3B%22%20class%3D%22fa%20fa-arrow-up%20fa-3x%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22leftButton%22%20value%3D%22%26%23xf060%3B%22%20class%3D%22fa%20fa-arrow-left%20fa-3x%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22stopButton%22%20value%3D%22%26%23xf256%3B%22%20class%3D%22fa%20fa-hand-stop-o%20fa-3x%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22rightButton%22%20value%3D%22%26%23xf061%3B%22%20class%3D%22fa%20fa-arrow-right%20fa-3x%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3AcommandButton%20id%3D%22reverseButton%22%20value%3D%22%26%23xf063%3B%22%20class%3D%22fa%20fa-arrow-down%20fa-3x%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch%3ApanelGroup%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh%3ApanelGrid%3E%0A%20%20%20%20%20%20%20%20%3C%2Fh%3Aform%3E%0A%20%20%20%20%3C%2Fh%3Abody%3E%0A%3C%2Fhtml%3E%0A” message=”index.xhtml with Font Awesome icons” highlight=”” provider=”manual”/]

You can see all the icons available in version 4.7 of Font Awesome at https://fontawesome.com/v4.7.0/cheatsheet/

There you have it. There is a price to pay for this. I wanted 5 icons from Font Awesome and the Font Awesome jar file is 674 KB. I will likely switch to using 5 small jpeg images for the buttons as the application needs to run on a Raspberry Pi. My students frequently use Font Awesome as part of Bootstrap and Primefaces. I wanted to learn how to use Font Awesome on its own.

REST Client Code Generated by NetBeans Does Not Handle Lists and the Solution

      No Comments on REST Client Code Generated by NetBeans Does Not Handle Lists and the Solution

In my Introduction to Java Web Services course I use as an example a web service that returns a List of JPA entity objects of type Fish. A Fish is just several fields that describes different aspects of aquarium fish. For many years, going back to 2004, I only showed SOAP services. The code generator in my favourite IDE, NetBeans, output working server and client code. Then about five years ago I added REST services to my curriculum.

The NetBeans code generator for REST services produced workable code except in one situation for REST clients. The List type could not be returned by the generated code. Here is what the client generated code looks like:

[pastacode lang=”java” manual=”public%20%3CT%3E%20T%20getJson(Class%3CT%3E%20responseType)%20throws%20ClientErrorException%20%7B%0A%20%20%20%20WebTarget%20resource%20%3D%20webTarget%3B%0A%20%20%20%20return%20resource.request(javax.ws.rs.core.MediaType.APPLICATION_JSON).get(responseType)%3B%0A%7D%0A” message=”REST client method” highlight=”” provider=”manual”/]

To call this code I used:

[pastacode lang=”java” manual=”List%3CFish%3E%20fishies%20%3D%20client.getJson(List.class)%3B” message=”Calling the REST service” highlight=”” provider=”manual”/]

When I ran this code, I received the following error message:

[pastacode lang=”markup” manual=”org.glassfish.jersey.message.internal.MessageBodyProviderNotFoundException%3A%20MessageBodyReader%20not%20found%20for%20media%20type%3Dapplication%2Fjson%2C%20type%3Dinterface%20java.util.List%2C%20genericType%3Dinterface%20java.util.List.” message=”Error message” highlight=”” provider=”manual”/]

This error has been around from the first time I explored REST services. After spending a few hours looking for a solution five years ago I came across one that showed by adding a dependency to my pom.xml the code will work.

[pastacode lang=”markup” manual=”%3Cdependency%3E%0A%20%20%20%20%3CgroupId%3Ecom.owlike%3C%2FgroupId%3E%0A%20%20%20%20%3CartifactId%3Egenson%3C%2FartifactId%3E%0A%20%20%20%20%3Cversion%3E1.4%3C%2Fversion%3E%0A%3C%2Fdependency%3E%0A” message=”Maven dependency” highlight=”” provider=”manual”/]

Genson, a Java and Scala JSON conversion library, was created to deal with several issues in REST services, one of which was to simplify working with List. You can learn more about this library at https://owlike.github.io/genson/. I added the dependency to the client pom file and never gave it another thought until today. How could jax-rs not be able to handle a List? So, I did more research.

I discovered that this was a problem that many had encountered and not just NetBeans users. There were several suggested solutions, but the one that made the most sense showed me that the problem was not with jax-rs but with the code that NetBeans generated.

The solution came from Adam Bien’s blog. Adam is one of the foremost Java EE developers and trainers who is in great demand as a speaker. I have had the good fortune of meeting him at JavaOne. His blog at http://www.adam-bien.com/roller/abien/entry/jax_rs_returning_a_list showed that responses from a REST service that are in a List must be wrapped in a GenericType class. First, I changed the generated getJson method, renaming it getJson2:

[pastacode lang=”java” manual=”public%20List%3CFish%3E%20getJson2()%20throws%20ClientErrorException%20%7B%0A%20%20%20%20WebTarget%20resource%20%3D%20webTarget%3B%0A%20%20%20%20return%20resource.request(javax.ws.rs.core.MediaType.APPLICATION_JSON)%0A%20%20%20%20%20%20%20%20.get(new%20GenericType%3CList%3CFish%3E%3E()%20%7B%20%7D)%3B%0A%7D%0A” message=”Corrected method for returning a List” highlight=”4″ provider=”manual”/]

If you compare this to the generated code shown earlier in this article you will see that this method is now tightly coupled to the data type it is returning. The generated code was designed to work in all cases because it used generics. As generated, you needed to pass the class of the returned data. Problem is that you cannot pass a generic type such as List<Fish>.class instead of List.class.

When the return type is a generic collection, Adam pointed out that it must be wrapped in a GenericType class that is part of jax-rs. The code that NetBeans produces should work in all cases but not in this case.

The dependency for Genson is now removed and my executable client is 378K smaller.

Thanks to Adam Bien for his article. Read his blog at http://www.adam-bien.com and follow him on Twitter at @AdamBien