ADF FACES:Creating custom component on top of adf

Question

My UI requiement is sth like
Name : xxxxxxx
Description : xxxxxxxxx
Search : cccccc
This UI i want to create as a custom tag and use it across our project.
We need to include this utiltiy in JSP Tag libraries so that it appears in
the compoent palette.
WE have done the same thing using pure JSF and it is working fine.
But we need to leverage ADF classes.. so that we can get the same look and
feel and we simply set our proprties and renering part will come from ADF faces.
In my main component class I have written the code sth like
public void encodeChildren(FacesContext context)throws IOException {
RenderKit rk = context.getRenderKit();
CoreInputText buton = new CoreInputText();
buton.setValue("my text");
buton.setRendered(true);
rk.getRenderer("myFamily", getRendererType()).encodeBegin(context, buton);
After doing this I run my test.jsp and no output is produced.
So can you let us know the correct way for doing this.
This is a high priority requirement for US.if anybody can pls help asap..
Thanks
Ravi

Answer 1

Hi All,
I was able to get this code to run and wanted to share with you the corrections
================== HelloUIComp.java ==============
package view.components.msg;
import java.io.IOException;
import javax.faces.application.Application;
import javax.faces.component.UIComponentBase;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import oracle.adf.view.faces.component.core.CoreForm;
import oracle.adf.view.faces.component.core.input.CoreInputText;
import oracle.adf.view.faces.component.core.layout.CorePanelForm;
import oracle.adf.view.faces.component.core.nav.CoreCommandButton;
import oracle.adf.view.faces.component.core.output.CoreMessage;
import oracle.adf.view.faces.component.core.output.CoreMessages;
public class HelloUIComp extends UIComponentBase {
private CoreCommandButton button;
private CoreInputText intext;
private CoreInputText description;
private CorePanelForm panel;
private CoreForm form;
public static final String COMPONENT_TYPE = "com.mycompany..hello";
// This will be a self-rendering component
public static final String RENDERER_TYPE = null;
public HelloUIComp() {
FacesContext context = FacesContext.getCurrentInstance();
Application apps = context.getApplication();
UIViewRoot root = context.getViewRoot();
panel = (CorePanelForm)apps.createComponent(CorePanelForm.COMPONENT_TYPE);
panel.setId("errPanel");
panel.setLabelWidth("35%");
panel.setRows(7);
getChildren().add(panel);
form = (CoreForm)apps.createComponent(CoreForm.COMPONENT_TYPE);
form.setId("errForm");
panel.getChildren().add(form);
intext = (CoreInputText)apps.createComponent(CoreInputText.COMPONENT_TYPE);
intext.setId("name");
intext.setLabel("Name");
intext.setRendered(true);
intext.setRequired(true);
form.getChildren().add(intext);
description = (CoreInputText)apps.createComponent(CoreInputText.COMPONENT_TYPE);
description.setId("description");
description.setLabel("description");
description.setRendered(true);
description.setRequired(true);
description.setRows(3);
form.getChildren().add(1, description);
public boolean getRendersChildren() {
return true;
public void encodeChildren(FacesContext context) throws IOException {
// Encode the top most component
panel.encodeAll(context);
/* The below code can replace the encodeAll call
panel.encodeBegin(context);
if(panel.getRendersChildren()){
panel.encodeChildren(context);
panel.encodeEnd(context);
public String getFamily() {
return COMPONENT_TYPE;
==========================================================
Notice, you don't need any setters/getters for this object.
You will need the following tag file:
============= HelloUICompTag.java ========
package view.components.msg;
import javax.faces.webapp.UIComponentTag;
public class HelloUICompTag extends UIComponentTag{
public HelloUICompTag() {
public String getComponentType() {
return HelloUIComp.COMPONENT_TYPE;
public String getRendererType() {
// Self rendering components return null
return HelloUIComp.RENDERER_TYPE; // should be null
=========================================
You will need to update your faces.config file with the following entry. Notice you do not need an entry under render kit.
<component>
<component-type>com.mycompany.hello</component-type>
<component-class>view.components.msg.HelloUIComp</component-class>
</component>
Finally, you will need to create (or append to) a tag library
================== myTest.tld ====================
<?xml version = '1.0' encoding = 'windows-1252'?>
<taglib xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee">
<display-name>tests</display-name>
<tlib-version>1.0</tlib-version>
<short-name>tests</short-name>
<uri>http://mycompany.mil/tests</uri>
<tag>
<name>hello</name>
<tag-class>view.components.msg.HelloUICompTag</tag-class>
<body-content>JSP</body-content>
</tag>
</taglib>
=============================================
Notice you don't need a custom renderer class. The component is self-redering.
To use the component, create a myTest.jspx file like the following:
============ myTest.jspx ===============
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:mebs="http://mycompany.com/tests">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="Testing Components">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:panelPage title="My Component Test">
<f:facet name="menu1"/>
<f:facet name="menuGlobal"/>
<f:facet name="branding"/>
<f:facet name="brandingApp"/>
<f:facet name="appCopyright"/>
<f:facet name="appPrivacy"/>
<f:facet name="appAbout"/>
<!--
Well, this is a bad place to put our component
This will render a <af:form> within the above <h:form>
Should be placed outside the h:form or edit the component and remove the form
-->
<mebs:hello/>
</af:panelPage>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>
===================================
Hope this helps you.