{"id":18692,"date":"2013-11-06T01:00:14","date_gmt":"2013-11-05T23:00:14","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=18692"},"modified":"2013-11-05T08:55:06","modified_gmt":"2013-11-05T06:55:06","slug":"implementing-a-custom-jsf-2-0-component-with-maven","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2013\/11\/implementing-a-custom-jsf-2-0-component-with-maven.html","title":{"rendered":"Implementing a custom JSF 2.0 component with maven"},"content":{"rendered":"

Some time ago, I have written my own custom JSF component. But at that point in time, JSF 1.0 was still up to date and the project didn\u2019t use maven as build system. Thus, I always wanted to write a custom JSF2 component with maven. So let\u2019s start:<\/p>\n

First of all we setup a maven project with two modules. Here is the pom.xml file of the parent project:
\n 
\n 
\n 
\n 
\n <\/p>\n

<project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\r\n\txsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/maven-v4_0_0.xsd\">\r\n\t<modelVersion>4.0.0<\/modelVersion>\r\n\t<groupId>martins-developer-world<\/groupId>\r\n\t<artifactId>jsf-component<\/artifactId>\r\n\t<packaging>pom<\/packaging>\r\n\t<version>0.0.1-SNAPSHOT<\/version>\r\n\t<name>jsf-component Maven Webapp<\/name>\r\n\t<dependencies>\r\n\t\t<dependency>\r\n\t\t\t<groupId>junit<\/groupId>\r\n\t\t\t<artifactId>junit<\/artifactId>\r\n\t\t\t<version>4.11<\/version>\r\n\t\t\t<scope>test<\/scope>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.faces<\/groupId>\r\n\t\t\t<artifactId>jsf-api<\/artifactId>\r\n\t\t\t<version>2.1<\/version>\r\n\t\t\t<scope>provided<\/scope>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>com.sun.faces<\/groupId>\r\n\t\t\t<artifactId>jsf-impl<\/artifactId>\r\n\t\t\t<version>2.2.0<\/version>\r\n\t\t\t<scope>provided<\/scope>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.servlet<\/groupId>\r\n\t\t\t<artifactId>servlet-api<\/artifactId>\r\n\t\t\t<version>2.5<\/version>\r\n\t\t\t<scope>provided<\/scope>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.servlet<\/groupId>\r\n\t\t\t<artifactId>jsp-api<\/artifactId>\r\n\t\t\t<version>2.0<\/version>\r\n\t\t\t<scope>provided<\/scope>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.servlet<\/groupId>\r\n\t\t\t<artifactId>jstl<\/artifactId>\r\n\t\t\t<version>1.2<\/version>\r\n\t\t\t<scope>provided<\/scope>\r\n\t\t<\/dependency>\r\n\t<\/dependencies>\r\n\t<build>\r\n\t\t<finalName>jsf-component<\/finalName>\r\n\t<\/build>\r\n\t<modules>\r\n\t\t<module>jsf-component-webapp<\/module>\r\n\t\t<module>jsf-component-impl<\/module>\r\n\t<\/modules>\r\n<\/project><\/pre>\n
As you can see, we have added the JSF dependencies in the top level pom.xml, so that we inherit them in the child modules. As we will use the JBoss Application Server to test our web application, we have to set the scope for the maven dependencies to provided, so that our war file and our component jar won\u2019t deploy them. The implementation of our component will reside in jsf-component-impl, thus we chose jar as packaging type for this module:
 
<\/div> <\/div><\/p>\n
<?xml version=\"1.0\"?>\r\n<project\r\n\txsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd\"\r\n\txmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\">\r\n\t<modelVersion>4.0.0<\/modelVersion>\r\n\t<parent>\r\n\t\t<groupId>martins-developer-world<\/groupId>\r\n\t\t<artifactId>jsf-component<\/artifactId>\r\n\t\t<version>0.0.1-SNAPSHOT<\/version>\r\n\t<\/parent>\r\n\t<artifactId>jsf-component-impl<\/artifactId>\r\n\t<name>jsf-component-impl<\/name>\r\n\t<properties>\r\n\t\t<project.build.sourceEncoding>UTF-8<\/project.build.sourceEncoding>\r\n\t<\/properties>\r\n\t<dependencies>\r\n\t<\/dependencies>\r\n<\/project><\/pre>\n
Now let\u2019s implement a Java class that extends UIOutput. I have chosen UIOutput because as a first step I just want to implement a simple helloWorld tag, that prints the first and last name given as attribute within a span element. As this component doesn\u2019t receive any input, UIOutput it appropriate:<\/p>\n
package martins.developer.world.jsf.component.impl;\r\n\r\nimport java.io.IOException;\r\n\r\nimport javax.faces.application.ResourceDependencies;\r\nimport javax.faces.application.ResourceDependency;\r\nimport javax.faces.component.FacesComponent;\r\nimport javax.faces.component.UIOutput;\r\nimport javax.faces.context.FacesContext;\r\nimport javax.faces.context.ResponseWriter;\r\n\r\n@ResourceDependencies({ @ResourceDependency(name = \"css\/jsf-component.css\", target = \"head\") })\r\n@FacesComponent(\"HelloWorld\")\r\npublic class HelloWorldComponent extends UIOutput {\r\n\tprivate static final String COMPONENT_FAMILY = \"martins.developer.world.jsf.component.helloWorld\";\r\n\r\n\tprivate enum PropertyKeys {\r\n\t\tfirstName, lastName\r\n\t};\r\n\r\n\t@Override\r\n\tpublic String getFamily() {\r\n\t\treturn COMPONENT_FAMILY;\r\n\t}\r\n\r\n\t@Override\r\n\tpublic void encodeBegin(FacesContext context) throws IOException {\r\n\t\tResponseWriter writer = context.getResponseWriter();\r\n\t\twriter.startElement(\"span\", this);\r\n\t\twriter.writeAttribute(\"class\", \"helloWorldClass\", \"\");\r\n\t\twriter.writeText(String.format(\"Hello %s %s!\", getFirstName(), getLastName()), \"\");\r\n\t\twriter.endElement(\"span\");\r\n\t}\r\n\r\n\tpublic String getFirstName() {\r\n\t\treturn (String) getStateHelper().eval(PropertyKeys.firstName, \"???firstName???\");\r\n\t}\r\n\r\n\tpublic void setFirstName(String firstName) {\r\n\t\tgetStateHelper().put(PropertyKeys.firstName, firstName);\r\n\t}\r\n\r\n\tpublic String getLastName() {\r\n\t\treturn (String) getStateHelper().eval(PropertyKeys.lastName, \"???lastName???\");\r\n\t}\r\n\r\n\tpublic void setLastName(String lastName) {\r\n\t\tgetStateHelper().put(PropertyKeys.lastName, lastName);\r\n\t}\r\n}<\/pre>\n
The getFamily() method is the only method that we are enforced to implement. Interesting is here the method encodeBegin(). This is the place where we implement our span tag. As it should have a CSS class attribute, we add it with the writeAttribute() method of the Writer. The two attributes of the resulting JSF tag are modelled as simple properties with getter and setter methods. The implementation of these getters and setters uses the StateHelper available in JSF 2.0. In encodeBegin() we use the getters to retrieve the value given by the user.<\/p>\n
Interesting is also the annotation @ResourceDependencies. With this annotation we can tell the JSF framework that we have some files we depend on. In this case it is a CSS file that resides with the folder src\/main\/resources\/META-INF\/resources\/css.
\nThe annotation @FacesComponent registers this component in the boot process at the JSF framework. The given name is used in the taglib file to reference this class:<\/p>\n
<?xml version=\"1.0\"?>\r\n<facelet-taglib xmlns=\"http:\/\/java.sun.com\/xml\/ns\/javaee\">\r\n\t<namespace>http:\/\/martinsdeveloperworld.wordpress.com<\/namespace>\r\n\t<tag>\r\n\t\t<tag-name>helloWorld<\/tag-name>\r\n\t\t<component>\r\n\t\t\t<component-type>HelloWorld<\/component-type>\r\n\t\t<\/component>\r\n\t<\/tag>\r\n<\/facelet-taglib><\/pre>\n
In this taglib file under src\/main\/resources\/META-INF we define the available components, here only our helloWorld tag. The attributes of the tag are derived from the properties of the Java class.<\/p>\n
Finally we want to test our newly created component. To be able to do this, we setup a simple JSF2 webapp project and add the following snippet to the web.xml, in order to declare that we want to use our custom component:<\/p>\n
<context-param>\r\n\t\t<param-name>facelets.FACELETS_LIBRARIES<\/param-name>\r\n\t\t<param-value>\/META-INF\/jsf-component.taglib.xml<\/param-value>\r\n\t<\/context-param><\/pre>\n
Now we can write a simple JSF page that references our new tag:<\/p>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\r\n   \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:f=\"http:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:h=\"http:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:mdw=\"http:\/\/martinsdeveloperworld.wordpress.com\">\r\n<h:head>\r\n<title>Hello JSF 2!<\/title>\r\n<\/h:head>\r\n<h:body>\r\n\t<h2>Hello World!<\/h2>\r\n\t<mdw:helloWorld firstName=\"Martin\" lastName=\"Developer\"\/>\r\n<\/h:body>\r\n<\/html><\/pre>\n
When we deploy this application to the JBoss Application Server and call the corresponding URL, we get the following HTML output:<\/p>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n\t<title>Hello JSF 2!<\/title>\r\n\t<link type=\"text\/css\" rel=\"stylesheet\" href=\"\/jsf-component-webapp\/faces\/javax.faces.resource\/css\/jsf-component.css\" \/>\r\n<\/head>\r\n<body>\r\n\t<h2>Hello World!<\/h2>\r\n\t<span class=\"helloWorldClass\">Hello Martin Developer!<\/span>\r\n<\/body>\r\n<\/html><\/pre>\n
Clearly we can see the span tag with the CSS class and the output. The CSS file is referenced in the head of the HTML document.<\/p>\n