Coding Tech Utils

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

: Create a new generic Application/workspace

: Create new Generic Project where you will create the components

: Create the folder structure as displayed. Make the needed files manually

: Click on refresh on the application navigator to get to see the application files

: Optional Step: Open JDeveloper Preferences to register new XML Schema for the XML files

: Search the XML Schema as shown

: Add the above marked Schema. Note: 3rd Schema gives an error in Jdev 11GR1. so you can skip the same also

: The Preferences tab will be seen as shown.

: Add the shown libraries to the project

: Create new JavaScript Files as per next steps.

Create new files and package structure as shown:

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>

: Open Project Properties

: Create new Deployment Profile

: enter values as shown

: finally created profile

: navigate to compiler tab in project properties and add the .js and .css value in the add to compiler options

: deploy the new profile to get a deployed jar

: deployment successful

: create a new tester project.

: click finish

: open project properties for the new project. Navigate to JSP Libs

: Add the new jar to the project as shown

: Library added

: Check the tags executed.

: Create a new page (jspx)

: Open the Component palette and select the drop down to select the new lib

: Debug the new Page to test the page

Final Output:

In this tutorial, I will add an internal task flow to Web Center Portal. For demo, i will use the login task flow of the Web Center Portal.

: Login to WebCenter Portal with an Admin User and navigate to Edit Mode of Portal

: Add a new page where the Login Task flow will be added

: use Blank type page to create a new page

: Enter Page details to create new page and click on create button

: After the page has been created, click on “Data” Switch to go to edit mode of the page

: Click on Assets Tab in the top navigation to navigate to Assets Management Page

: Navigate to Resource Catalogs, Click on Edit Button in the Demo Domain Catalog Page

: Add a Folder(“Default Taskflows”) from add menu. Then Click on Add from Library from the add menu.

: In the search bar, write Login and click on search

: Select the LoginTaskFlow Item and in the Name Text Box rename it to Login TaskFlow and click on add

: The asset will be added to the resource catalog. Manipulate its position as per need

: return to the edit mode of the Login Page. Open the Default Taskflows folder to get the newly added taskflows.

: Click on add of the Login TaskFlow

: The Task flow will be added to the box of the page. Click on Save.

: In a new Browser or Incognito mode, open the URL of the portal and navigate to the Login Page to see the task flow. The form controls will be disabled in case you are already logged in.

Coding Tech Utils

Hacker Scripts..Based on a true story

TechUtils.in

How to create a Custom ADF Component

How to add inbuilt task flows in WebCenter Portal

Retrieve GET parameters from URL in Managed Bean in Oracle ADF

How to create new Portal in WebCenter Portal

How to start up Oracle WebCenter Portal

Search

Stack Connect

Click Fall

Me!

Vineet Verma

Tags

Follow Blog via Email

FB Page

Authors