Using Font Awesome Icons in a JavaServer Faces h:commandButton
Performance is always a concern for IoT apps, so here's how to use items from the Font Awesome library to label command buttons in a memory-friendly way.
Join the DZone community and get the full member experience.
Join For FreeI am writing a web app for my GoPiGo3 robot car. The first version used 5 JSF h:commandButton buttons labeled forward, right, reverse, left, and stop. I wanted to replace each button with icons from the Font Awesome library. I thought this was a common way to dress up a button, but I was wrong. First, I would like to give a shout out to the freeCodeCamp site and the question forum that contained the answer to my problem.
In this question forum on freeCodeCamp, John Kennedy provided an answer that dealt with plain HTML. However, 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:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.7.0</version>
</dependency>Here is the Maven dependency for Font Awesome.
The current version of Font Awesome is 5.0.13, but, at this time, 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 plain text. If you're wondering why I am not using i118n, for this blog, I have purposely removed references to bundles and have hardcoded the text. The production version will use i18n. I have also removed all actions to simplify the code.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>GoPiGo3</title>
</h:head>
<h:body>
<h1>GoPiGo3 Control</h1>
<h:form id="gopigo" >
<h:panelGrid columns="3" cellpadding="1" border="0" cellspacing="10">
<h:panelGroup />
<h:commandButton id="forwardButton" value="forward"/>
<h:panelGroup />
<h:commandButton id="leftButton" value="left" />
<h:commandButton id="stopButton" value="stop" />
<h:commandButton id="rightButton" value="right" />
<h:panelGroup />
<h:commandButton id="reverseButton" value="reverse" />
<h:panelGroup />
</h:panelGrid>
</h:form>
</h:body>
</html>In the above section, I have used index.xhtml with test for buttons.
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.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>GoPiGo3</title>
<h:outputStylesheet library="webjars" name="font-awesome/4.7.0/css/font-awesome.min-jsf.css" />
</h:head>
<h:body>
<h1>GoPiGo3 Control</h1>
<h:form id="gopigo" >
<h:panelGrid columns="3" cellpadding="1" border="0" cellspacing="10">
<h:panelGroup />
<h:commandButton id="forwardButton" value="" class="fa fa-arrow-up fa-3x" />
<h:panelGroup />
<h:commandButton id="leftButton" value="" class="fa fa-arrow-left fa-3x" />
<h:commandButton id="stopButton" value="" class="fa fa-hand-stop-o fa-3x" />
<h:commandButton id="rightButton" value="" class="fa fa-arrow-right fa-3x" />
<h:panelGroup />
<h:commandButton id="reverseButton" value="" class="fa fa-arrow-down fa-3x" />
<h:panelGroup />
</h:panelGrid>
</h:form>
</h:body>
</html>Again, here is my index.xhtml with Font Awesome icons.
There you have it. However, there is a price to pay for this. I wanted five icons from Font Awesome and the Font Awesome jar file is 674 KB. I will likely switch to using five 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. But, I wanted to learn how to use Font Awesome on its own.
Published at DZone with permission of Ken Fogel, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments