How to create a Custom ADF Component

In this tutorial, we will create a custom ADF Component.

Create new files and package structure as shown:

Structure

Source Code of the required files is as below:

AlertDemo.java

package com.techutils.adf.jsf.faces.component;

import javax.faces.event.AbortProcessingException;
import javax.faces.event.FacesEvent;

import org.apache.myfaces.trinidad.bean.FacesBean;
import org.apache.myfaces.trinidad.bean.PropertyKey;
import org.apache.myfaces.trinidad.component.UIXObject;


public class AlertDemo extends UIXObject {
    public AlertDemo() {
        super(RENDERER_TYPE);
    }
    static public final FacesBean.Type TYPE =
        new FacesBean.Type(UIXObject.TYPE);

    static public final PropertyKey VISIBLE_KEY =
        TYPE.registerKey("visible", Boolean.class, Boolean.TRUE);

    static public final PropertyKey PARTIAL_TRIGGERS_KEY =
        TYPE.registerKey("partialTriggers", String[].class);

    static public final PropertyKey CLIENT_COMPONENT_KEY =
        TYPE.registerKey("clientComponent", Boolean.class);

    static public final String RENDERER_TYPE = "com.techutils.adf.jsf.AlertDemo";

    static public final String COMPONENT_TYPE = "com.techutils.adf.jsf.AlertDemo";

    public void setPartialTriggers(String[] newpartialTriggers) {
        setProperty(PARTIAL_TRIGGERS_KEY, newpartialTriggers);
    }

    public String[] getPartialTriggers() {
        return (String[])getProperty(PARTIAL_TRIGGERS_KEY);
    }

    @Override
    protected FacesBean.Type getBeanType() {
        return TYPE;
    }

    @Override
    public void broadcast(FacesEvent facesEvent) throws AbortProcessingException {
        super.broadcast(facesEvent);
    }

    public void setVisible(boolean newvisible) {
        setBooleanProperty(VISIBLE_KEY, newvisible);
    }

    public boolean isVisible() {
        return getBooleanProperty(VISIBLE_KEY, Boolean.TRUE);
    }

    static {
        // register the new TYPE by family and rendererType
        TYPE.lockAndRegister(UIXObject.COMPONENT_FAMILY, RENDERER_TYPE);
    }
}


AlertDemoRenderer.java

package com.techutils.adf.jsf.faces.renderer;

import com.techutils.adf.jsf.faces.component.AlertDemo;

import java.io.IOException;

import java.util.Collections;
import java.util.List;

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

import oracle.adf.view.rich.render.ClientComponent;
import oracle.adf.view.rich.render.ClientEvent;
import oracle.adf.view.rich.render.ClientMetadata;
import oracle.adf.view.rich.render.RichRenderer;

import org.apache.myfaces.trinidad.bean.FacesBean;
import org.apache.myfaces.trinidad.bean.PropertyKey;
import org.apache.myfaces.trinidad.context.RenderingContext;

import java.io.IOException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

import oracle.adf.view.rich.render.ClientComponent;
import oracle.adf.view.rich.render.RichRenderer;

import org.apache.myfaces.trinidad.bean.FacesBean;
import org.apache.myfaces.trinidad.context.RenderingContext;

public class AlertDemoRenderer extends RichRenderer {
    public AlertDemoRenderer() {
        super(AlertDemo.TYPE);
    }
    private static final String _CLIENT_COMPONENT = "TUAlertDemo";
    private static PropertyKey _DATA_KEY = null;
    private static final String _ROOT_STYLE_KEY = "TU|AlertDemo";

    protected void encodeAll(FacesContext context, RenderingContext arc,
                             UIComponent component, ClientComponent client,
                             FacesBean bean) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        {
            writer.startElement("div", component);
            renderStyleClass(context, arc, "col-md-6");
            renderId(context, component);
            {
                writer.startElement("label", component);
                renderStyleClass(context, arc, "label");
                writer.writeAttribute("for",
                                      getClientId(context, component) + "_input",
                                      null);
                writer.writeText("Input Value: ", null);
                writer.endElement("label");
            }
            {
                writer.startElement("input", component);
                renderStyleClass(context, arc, "inputStyleClass");
                writer.writeAttribute("id",
                                      getClientId(context, component) + "_input",
                                      null);
                writer.writeAttribute("name",
                                      getClientId(context, component) + "_input",
                                      null);
                writer.writeAttribute("type", "text", null);
                writer.writeAttribute("placeholder", "placeholder", null);
                writer.writeAttribute("value", "123", null);
                writer.writeAttribute("maxLength", "10", null);
                writer.endElement("input");
            }
            {
                writer.startElement("button", component);
                renderStyleClass(context, arc, "label");
                writer.writeAttribute("id",
                                      getClientId(context, component) + "_submit",
                                      null);
                writer.writeAttribute("onClick",
                                      "javascript:alert($(#'"+getClientId(context, component) + "_input"+"').val());",
                                      null);
                writer.writeText("Submit", null);
                writer.endElement("button");
            }
            writer.endElement("div");
        }

    }

    protected String getClientConstructor() {
        return _CLIENT_COMPONENT;
    }

    @Override
    protected ClientComponent.Type getDefaultClientComponentType() {
        return ClientComponent.Type.CREATE_WITH_REQUIRED_ATTRS;
    }

    @Override
    protected String getDefaultStyleClass(FacesContext context,
                                          RenderingContext arc,
                                          FacesBean bean) {
        return this._ROOT_STYLE_KEY;
    }

    @Override
    protected void findTypeConstants(FacesBean.Type type,
                                     ClientMetadata metadata) {
        super.findTypeConstants(type, metadata);

    }


}


DemoResourceLoader.java

package com.techutils.adf.jsf.faces.resource;

import java.io.IOException;

import java.net.URL;

import org.apache.myfaces.trinidad.resource.ClassLoaderResourceLoader;
import org.apache.myfaces.trinidad.resource.RegexResourceLoader;

public class DemoResourceLoader extends RegexResourceLoader {
    public DemoResourceLoader() {
        super();
        register("(/.*\\.(jpg|gif|png|jpeg))",
                 new ClassLoaderResourceLoader("META-INF"));
    }

    @Override
    protected URL findResource(String string) throws IOException {
        return super.findResource(string);
    }
}


DemoSimpleDesktopBundle.java

package com.techutils.adf.jsf.faces.resource;

import java.util.ListResourceBundle;

public class DemoSimpleDesktopBundle extends ListResourceBundle {
    public DemoSimpleDesktopBundle() {
        super();
    }

    protected Object[][] getContents() {
        return new Object[0][0];
    }
}



AlertDemoTag.java

package com.techutils.adf.jsf.faces.tag;

import com.techutils.adf.jsf.faces.component.AlertDemo;

import javax.el.ValueExpression;

import org.apache.myfaces.trinidad.bean.FacesBean;
import org.apache.myfaces.trinidad.webapp.UIXComponentELTag;

public class AlertDemoTag extends UIXComponentELTag {
    public AlertDemoTag() {
        super();
    }
    private ValueExpression _partialTriggers = null;
    private ValueExpression _visible = null;

    static public final String COMPONENT_TYPE =
        "com.techutils.adf.jsf.AlertDemo";
    static public final String RENDERER_TYPE =
        "com.techutils.adf.jsf.AlertDemo";


    public String getComponentType() {
        return COMPONENT_TYPE;
    }

    public String getRendererType() {
        return RENDERER_TYPE;
    }

    public void setPartialTriggers(ValueExpression _partialTriggers) {
        this._partialTriggers = _partialTriggers;
    }

    public ValueExpression getPartialTriggers() {
        return _partialTriggers;
    }

    public void setVisible(ValueExpression _visible) {
        this._visible = _visible;
    }

    public ValueExpression getVisible() {
        return _visible;
    }


    @Override
    protected void setProperties(FacesBean facesBean) {
        super.setProperties(facesBean);
        setStringArrayProperty(facesBean, AlertDemo.PARTIAL_TRIGGERS_KEY,
                               _partialTriggers);
        setProperty(facesBean, AlertDemo.VISIBLE_KEY, _visible);
    }
}

AlertDemo.js

AdfUIComponents.createComponentClass(
 "AlertDemo",
 {
      componentType:"com.techutils.adf.jsf.AlertDemo",superclass:AdfUIObject 
 }
);

AlertDemoPeer.js

AdfRichUIPeer.createPeerClass(AdfRichUIPeer, "AlertDemoPeer", true);//Create Subclass of AdfRichUIPeer
AlertDemoPeer.InitSubclass = function () {
    AdfRichUIPeer.addComponentEventHandlers(this, AdfUIInputEvent.CLICK_EVENT_TYPE);//Subscribe Click Events to Peer
}
//Register Peer to main Object
AdfPage.PAGE.getLookAndFeel().registerPeerConstructor("com.techutils.adf.jsf.AlertDemo", "AlertDemoPeer");

demo.resources

\\BasicComponents\components\src\META-INF\servlets\resources\
com.techutils.adf.jsf.faces.resource.DemoResourceLoader

techutils.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/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
 version="2.1" xmlns="http://java.sun.com/xml/ns/javaee">
 <display-name>techutils</display-name>
 <tlib-version>1.0</tlib-version>
 <short-name>techutils</short-name>
 <uri>/techutils/demo</uri>
 <tag>
 <name>AlertDemo</name>
 <tag-class>com.techutils.adf.jsf.faces.tag.AlertDemoTag</tag-class>
 <body-content>JSP</body-content>
 <attribute>
 <name>id</name>
 <rtexprvalue>true</rtexprvalue>
 </attribute>
 <attribute>
 <name>rendered</name>
 <deferred-value>
 <type>boolean</type>
 </deferred-value>
 </attribute>
 <attribute>
 <name>visible</name>
 <deferred-value>
 <type>boolean</type>
 </deferred-value>
 </attribute>
 <attribute>
 <name>partialTriggers</name>
 <deferred-value></deferred-value>
 </attribute>
 <attribute>
 <name>binding</name>
 <deferred-value/>
 </attribute>
 </tag>
</taglib>

adf-js-features.xml

 <?xml version="1.0" encoding="UTF-8" ?>
<features xmlns="http://xmlns.oracle.com/adf/faces/feature">
 <feature>
 <feature-name>AlertDemo</feature-name>
 <feature-class>
 com/techutils/adf/jsf/js/component/AlertDemo.js
 </feature-class>
 <feature-class>
 com/techutils/adf/jsf/js/event/AlertDemoEvent.js
 </feature-class>
 <feature-class>
 com/techutils/adf/jsf/js/component/AlertDemoPeer.js
 </feature-class>
 </feature>
</features>

demo.taglib.xml

 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE facelet-taglib
 PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib xmlns="http://java.sun.com/JSF/Facelet">
 <namespace>http://xmlns.techutils.components/demo</namespace>
 <tag>
 <tag-name>alertDemo</tag-name>
 <handler-class>oracle.adfinternal.view.faces.facelets.rich.RichComponentHandler</handler-class>
 </tag>
</facelet-taglib>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee">
<application></application>
<component>
<component-type>com.techutils.adf.jsf.AlertDemo</component-type>
<component-class>com.techutils.adf.jsf.faces.component.AlertDemo</component-class>
</component>
<render-kit>
<render-kit-id>oracle.adf.rich</render-kit-id>
<renderer>
<component-family>org.apache.myfaces.trinidad.Object</component-family>
<renderer-type>com.techutils.adf.jsf.AlertDemo</renderer-type>
<renderer-class>com.techutils.adf.jsf.faces.renderer.AlertDemoRenderer</renderer-class>
</renderer>
</render-kit>
</faces-config>

 

trinidad-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>oneportal-customskin</skin-family>
<animation-enabled>false</animation-enabled>
<debug-output>false</debug-output>
</trinidad-config>

 

trinidad-skins.xml

<?xml version="1.0" encoding="UTF-8" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin-addition>
<skin-id>simple.desktop</skin-id>
<style-sheet-name>demo_skins/styles/demo-simple-desktop.css</style-sheet-name>
<bundle-name>com.techutils.adf.jsf.faces.resource.DemoSimpleDesktopBundle</bundle-name>
</skin-addition>
</skins>

Final Output:

final

About Vineet Verma

Developer/Blogger/Gamer/Lazy Couch Potato...:P Need PDF Books: Knowledge Base
This entry was posted in Oracle, Oracle ADF and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s