Open Garage

Adding another available attribute

Finbox — Wed, 15 Oct 2008 20:04:00 +0000

Now I will add another attribute available with UIComponentELTag which is rendered. This is a boolean attribute. Note that this attribute is a value express. This is depicted by the use of tag in Listing 1.

Listing 1 – helloworld.tld

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
version="2.1">
This is the JSP tag library for the custom components chapter.
simplefaces
1.0
sf
http://opengarage.org/simplefaces

Helloworld
helloworld
org.opengarage.simplejsf.components.taglib.HtmlHelloWorldTag
empty

The client id of this component
id
true

Control rendering of this component
rendered

boolean

Now that this attribute is added using it is very simple as shown in Listing 2

Listing 2.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="sf" uri="http://opengarage.org/simplefaces" %>

hello

Custom Helloworld component

rendered="false"/>

As shown in listing 2, setting the value of the attribute to ‘false’ means this custom component is no longer visible. Check this by running the example.

Posted in JSF 1.2

Adding an attribute to the custom component

Finbox — Tue, 09 Sep 2008 19:59:00 +0000

Well my custom component seems to be working fine with the web application let me now add an attribute.

1> As the HtmlHelloWorldTag extends UIComponentELTag the id attribute is available. In order to turn it on just change the tld file as shown highlighted in Listing 1.

Listing 1-helloworld.tld

2> Now modifiy the webtiersample.jsp as shown in Listing 2.

hello

Custom Helloworld component

Well as you can see above I have used the "id" attribute. You can refresh the browser now. Everything works fine except that the id does not appear (do view source for that). Well it works but the "id" has not been attached to our component. In the next post I will show how to do this.

Note – You may need to clear Tomcat temp work directory (on Blazon right click on server – ‘Clean Tomcat Work Directory’ ) to see the changes.

Using the attribute in Custom component

Finbox — Mon, 08 Sep 2008 20:00:00 +0000

In my last post I discussed how simple it is to enable the available attributes. However I am sure you were not convinced that it worked. Well I will clarify the doubts in this post. The modified UI component class is shown in Listing 1. I have highlighted the part that I have added.

Listing 1

package org.opengarage.simplejsf.components.component;

import java.io.IOException;

import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;

/**
* @author dhrubo
*
*/
public class HtmlHelloWorld extends UIComponentBase {

/* (non-Javadoc)
* @see javax.faces.component.UIComponent#getFamily()
*/
@Override
public String getFamily() {
return null;
}

/* (non-Javadoc)
* @see javax.faces.component.UIComponentBase#encodeBegin(javax.faces.context.FacesContext)
*/
@Override
public void encodeBegin(FacesContext context) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String id = (String) this.getAttributes().get("id");
System.out.println("id=="+id);
writer.startElement("div", this);
writer.writeAttribute("id", id, null);
writer.writeAttribute("style", "color : red", null);
writer.writeText("HelloWorld! today is: " + new java.util.Date(), null);
writer.endElement("div");

}
}

Now modify the webtiersample.jsp as shown in Listing 2.

Listing 2

hello

Custom Helloworld component

id="test"/>

Now you can browse to – http://localhost:8080/simpleweb/ and do a view source once the view is rendered on the screen. You will see this

HelloWorld! today is:

Mon Sep 08 22:02:26 IST 2008

So I am sure you are now convinced

Putting to test custom JSF component

Finbox — Sun, 07 Sep 2008 19:39:00 +0000

Now that I have developed the custom JSF component, its time to put it into use and test it as well.

1> Once again launch your Blazon ezJEE IDE if you have already closed it after reading the first post.

2> Create a Dynamic web project – my project is simpleweb

3> Add the following jar files to your WEB-INF/lib

jsf-api.jar
jsp-impl.jar
jstl-1.1.0.jar
simplejsf.jar

As mentioned in the earlier post I am using JSF 1.2. The simejsf.jar is the one that contains the custom JSF component which was exported at the end of my previous post.

4> Modify your web.xml to add support for Faces servlet as shown in Listing 1 below:

Listing 1

xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

	id="WebApp_ID" version="2.5">

	<display-name>simplewebdisplay-name>

	<servlet>

		<servlet-name>FacesServletservlet-name>

		<servlet-class>javax.faces.webapp.FacesServletservlet-class>

	servlet>

	<servlet-mapping>

		<servlet-name>FacesServletservlet-name>

		<url-pattern>*.jsfurl-pattern>

	servlet-mapping>

	<welcome-file-list>

		<welcome-file>index.jspwelcome-file>

	welcome-file-list>


web-app>

5> Create the JSP file using the custom tag developed earlier

Listing 2-webtiersample.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

<%@ taglib prefix="sf" uri="http://opengarage.org/simplefaces" %>


<f:view >

<html>

<head>

<title>hellotitle>

head>

<body>

<h2>Custom Helloworld componenth2>

<p>

<sf:helloworld/>

p>

body>

html>

f:view>

6> Create the welcome jsp file – index.jsp as shown in Listing 3.

Listing 3-index.jsp

<html>

	<head>head>


	<body>

		<jsp:forward page="webtiersample.jsf" />

	body>

html>

7> Now create a new server configuration using the server view. I am using Tomcat 6.

8> Launch your favorite browser (mine is Firefox 3), and type – http://localhost:8080/simpleweb

to see the tag in action.

First Custom JSF 1.2 component

Finbox — Sat, 06 Sep 2008 19:04:00 +0000

1> Launch Eclipse IDE and create a Java project.
2> Create a Java Project
3> Add Java Build Path dependencies

el-api.jar
el-ri.jar
jsf-api.jar
jsf-impl.jar
jsp-api.jar

The JSF API and IMPL jars are available for download at – https://javaserverfaces.dev.java.net/
Note for this tutorial I am using – mojarra-1.2_09-b02-FCS-binary release

4> Create a folder META-INF to place your configuration files – tld file and faces-config

5> Create the component class as shown in Listing 1 below.

Listing 1 – HtmlHelloWorld.java

package org.opengarage.simplejsf.components.component;


import java.io.IOException;

import javax.faces.component.UIComponentBase;

import javax.faces.context.FacesContext;

import javax.faces.context.ResponseWriter;


public class HtmlHelloWorld extends UIComponentBase {

	@Override

	public String getFamily() {

		return null;

	}


	@Override

	public void encodeBegin(FacesContext context) throws IOException {

		ResponseWriter writer = context.getResponseWriter();

		writer.startElement("div", this);

		writer.writeAttribute("style", "color : red", null);

		writer.writeText("HelloWorld! today is: " + new java.util.Date(), null);

		writer.endElement("div");

	}

}

6> Create the faces-config.xml file in the META-INF folder as shown in Listing 2

Listing 2

xml version="1.0" encoding="UTF-8"?>

<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"

	xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

	<component>

		<component-type>HtmlHelloWorldcomponent-type>

		<component-class>

			org.opengarage.simplejsf.components.component.HtmlHelloWorldcomponent-class>

	component>

faces-config>

7> Create the tag lib class as shown in Listing 3

Listing 3

package org.opengarage.simplejsf.components.taglib;


import javax.faces.webapp.UIComponentELTag;


public class HtmlHelloWorldTag extends UIComponentELTag {

	@Override

	public String getComponentType() {

		// Associates tag with UI component registered in faces-config.xml

		return "HtmlHelloWorld";

	}


	@Overridepublic

	String getRendererType() {

		// TODO Auto-generated method stub

		return null;

	}


}

8> Create the tld (META-INF/helloworld.tld) as shown in Listing 4

Listing 4

xml version="1.0" encoding="UTF-8"?>

<taglib

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"

	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	version="2.1">

	<description>This is the JSP tag library for the custom components chapter.description>

	<display-name>simplefacesdisplay-name>

	<tlib-version>1.0tlib-version>

	<short-name>sfshort-name>

	<uri>http://opengarage.org/simplefacesuri>

	<tag>

		<description>Helloworlddescription>

		<name>helloworldname>

		<tag-class>

			org.opengarage.simplejsf.components.taglib.HtmlHelloWorldTagtag-class>

		<body-content>emptybody-content>

		<attribute>

			<description>Is this component rendered?description>

			<name>renderedname>

			<deferred-value>

				<type>booleantype>

			deferred-value>

		attribute>

	tag>

taglib>

Now that all the relevant classes and configuration files are ready, you will need to build this project and export it as a jar file. So my first JSF custom component distribution is ready. In the next post I will put this newly developed component to use.