Having trouble with custom pager component not rendering at all

[ShinTec]

Hi Forum
i cant figure out why this component of mine is not working

this is what my component is

[The standard user interface for navigating a large table is a pager, a set of links
to each page of the table, to the next and previous pages, and if there are a great
number of pages, to the next and previous batch of pages]
//====================================
the arrows and page number should show appear on the bottom of the page like in this image

//========================================
but none of the arrow stuff in the picture show up on my page




dont know what im doing wrong .Here is my code

//=============================
this is my PagerRenderer class

package com.tke.controller;

import java.io.IOException;
import java.util.Map;

import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponent;
import javax.faces.component.UIData;
import javax.faces.component.UIForm;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.FacesRenderer;
import javax.faces.render.Renderer;



@FacesRenderer(componentFamily="javax.faces.Command",rendererType="com.corejsf.pager")
public class PageRenderer extends Renderer 
{

	/**
	 * 
	 */
	public void encodeBegin(FacesContext facesContext, UIComponent uiComponent) throws IOException
	{
		String id = uiComponent.getClientId(facesContext);
		
		UIComponent parent = uiComponent;
		
		while (!(parent instanceof UIForm)) parent = parent.getParent();
		
		String formId = parent.getClientId(facesContext);
		
		ResponseWriter responseWriter = facesContext.getResponseWriter();
		
		String styleClass = (String) uiComponent.getAttributes().get("styleClass");
		String selectedStyleClass = 
				(String) uiComponent.getAttributes().get("selectedStyleClass");
		
		String dataTableId = (String) uiComponent.getAttributes().get("dataTableId");
		
		int showPages = toInt(uiComponent.getAttributes().get("showPages"));
		
		//find uiComponent with given id
		UIData uiData = (UIData) uiComponent.findComponent(dataTableId);
		
		int first = uiData.getFirst();
		int itemCount = uiData.getRowCount();
		int pageSize = uiData.getRows();
		if(pageSize <= 0) pageSize = itemCount;
		
		int pages = itemCount / pageSize;
		
		if(itemCount % pageSize != 0) ++pages;
		
		int currentPage = first / pageSize;
		
		if(first >= itemCount - pageSize) currentPage = pages -1;
		
		int startPage = 0;
		
		int endPage = pages;
		
		if (showPages > 0) 
		{
			startPage = (currentPage / showPages) * showPages;
			endPage = Math.min(startPage + showPages, pages);
		}

		if (currentPage > 0)
			
		
				writeLink(responseWriter, uiComponent, formId, id, "<", styleClass);
				
				if (startPage > 0)
				
				writeLink(responseWriter, uiComponent, formId, id, "<<", styleClass);
				
				
				for (int i = startPage; i < endPage; ++i) 
				{
					writeLink(responseWriter, uiComponent, formId, id, "" + (i + 1),
					i == currentPage ? selectedStyleClass : styleClass);
				}
				
				if (endPage < pages)
				{
					writeLink(responseWriter, uiComponent, formId, id, ">>", styleClass);
				}
				
				if (first < itemCount - pageSize)
				{
					writeLink(responseWriter, uiComponent, formId, id, ">", styleClass);
				}
				
				
				// hidden field to hold result
				writeHiddenField(responseWriter, uiComponent, id);
		
			
	}
	
	/**
	 * 
	 * @param writer
	 * @param component
	 * @param formId
	 * @param id
	 * @param value
	 * @param styleClass
	 * @throws IOException
	 */
	private void writeLink(ResponseWriter writer, UIComponent component,
			String formId, String id, String value, String styleClass)
			throws IOException 
	{
		writer.writeText(" ", null);
		writer.startElement("a", component);
		writer.writeAttribute("href", "#", null);
		writer.writeAttribute("onclick", onclickCode(formId, id, value), null);
		if (styleClass != null)
		writer.writeAttribute("class", styleClass, "styleClass");
		writer.writeText(value, null);
		writer.endElement("a");
	}
	
	/**
	 * 
	 * @param formId
	 * @param id
	 * @param value
	 * @return
	 */
	private String onclickCode(String formId, String id, String value) 
	{
		return new StringBuilder().append("document.forms['")
		.append(formId).append("']['")
		.append(id).append("'].value='").append(value).append("'; document.forms['")
		.append(formId).append("'].submit(); return false;").toString();
	}
	
	/**
	 * 
	 * @param writer
	 * @param component
	 * @param id
	 * @throws IOException
	 */
	private void writeHiddenField(ResponseWriter writer, UIComponent component,
	String id) throws IOException 
	{
		writer.startElement("input", component);
		writer.writeAttribute("type", "hidden", null);
		writer.writeAttribute("name", id, null);
		writer.endElement("input");
	}
	
	/**
	 * 
	 */
	public void decode(FacesContext facesContext, UIComponent uiComponent)
	{
		String id = uiComponent.getClientId(facesContext);
		
		Map<String, String> parameters = 
				facesContext.getExternalContext().getRequestParameterMap();
		
		String response = (String) parameters.get(id);
		
		if(response == null || response.equals("")) return;
		
		String dataTableId = (String) facesContext.getAttributes().get("dataTableId");
		
		int showPages = toInt(facesContext.getAttributes().get("showPages"));
		
		UIData uiData = (UIData) uiComponent.findComponent(dataTableId);
		
		int first = uiData.getFirst();
		
		int itemCount = uiData.getRowCount();
		
		int pageSize = uiData.getRows();
		
		if(pageSize <= 0) pageSize = itemCount;
		
		if(response.equals("<")) first -= pageSize;
		else if(response.equals(">")) first += pageSize;
		else if(response.equals("<<")) first -= pageSize * showPages;
		else if(response.equals("<<")) first += pageSize * showPages;
		else
		{
			int page = Integer.parseInt(response);
			first = (page -1) * pageSize;
		}
		
		if(first + pageSize > itemCount) first = itemCount - pageSize;
		if(first < 0) first = 0;
		
		uiData.setFirst(first);
			
	}
			

	/**
	 *This converts an object into an int
	 * @param value object value to be converted
	 * @return an int 
	 */
	private static int toInt(Object value) 
	{
		
		if (value == null) return 0;
		
		if (value instanceof Number) return ((Number) value).intValue();
		
		if (value instanceof String) return Integer.parseInt((String) value);
		
		throw new IllegalArgumentException("Cannot convert " + value);
	}

}//end of class PageRenderer

//---------------------
this is my .tablib.xml file

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

<facelet-taglib version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
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-facelettaglibary_2_0.xsd">

 	<namespace>http://customJsf.com</namespace>
 	<tag>
 		<tag-name>pager</tag-name>
 		
 		<component>
 			<component-type>javax.faces.Command</component-type>
 			<renderer-type>com.corejsf.pager</renderer-type>
 		</component>
 	</tag>
 </facelet-taglib>

this is my web.xml file

<?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_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>tkeJavaProject2011</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  <context-param>
    <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
  <listener>
    <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
  </listener>
  
  <context-param>
  	<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
  	<param-value>/WEB-INF/customJsf.taglib.xml</param-value>
  </context-param>
</web-app>

//==============================
and my html file

<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ex="http://customJsf.com">
	

<ui:composition template="WEB-INF/templates/MainTemplate.xhtml">
	<ui:define name="content">

	<h:body>
		<h:form id="accForm1">
			<h4>
				<h:outputText style="color:blue;" 
				value="The Accounting department has paid #{tkeAccountingReportBean.totalNumberOfRecordsPaid}
				 timerecords!"/>
			</h4>
			
			<h:dataTable id="accTable1" border="2" cellspacing="2" value="#{tkeAccountingReportBean.accTimeRecordList}" 
	    		var="timeRec">
	    			<h:column>
	    				<f:facet name="header">Employee's Name</f:facet>
	    				<h:outputText value="#{timeRec.userName}"/>
	    			</h:column>
	    			<h:column>
	    				<f:facet name="header">Start Week Date</f:facet>
	    				<h:outputText value="#{timeRec.startWeekDate}"/>
	    			</h:column>
	    			<h:column>
	    				<f:facet name="header">TimeRecord Status</f:facet>
	    				<h:outputText value="#{timeRec.timeRecordStatus}"/>
	    			</h:column>
	    			<h:column>
	    				<f:facet name="header">View timerecord</f:facet>
	    				<h:commandLink value="view" 
	    				action="#{tkeAccountingReportBean.generateTheHours(timeRec)}"
	    				/>
	    			</h:column>
	    		</h:dataTable>
	    		<ex:pager dataTableId="accTable1" showPages="2"
				selectedStyleClass="currentPage"/>
				
	    		<h:commandButton value="back" action="back"/>
		</h:form>
		
	</h:body>
	</ui:define>
</ui:composition>
</html>

any help would be much appreciated and thank you in advance