Skip to content
March 9, 2013 / Pedro Gabriel

Create Declarative Component with Modal

During an ADF application development sometimes you probably find yourself doing the same set of specific components more than once in different pages or even in the same page. If you are facing this issue or already have faced it you should consider using Declarative Components. With declarative components you developed once are use it whenever or wherever you want.

Today I will demonstrate how to develop a declarative component with an inputText that receives the result of searching for data in a modal, and a button to erase the data in the underlying inputText.

CreateDeclarativeComponentImage

You can download this example here: DeclarativeComponents.

First of all create a Generic Application with an ADF ViewController Project . After this you will get a normal ADF project but without the ADF Model Project. Then select to create an ADF Declarative Component and set the following values:

CreateDeclarativeComponent

Don’t forget to check the “Use Custom Component Class” checkbox and setting the desired name. This class exposes the java methods that afterwards can be invoked by the managed bean of the page that consumes this declarative component. In the same window you can set the attributes and methods, but I will make it right after “jspx” page have been created. Then set the following attributes and methods:

CreateDeclarativeComponentAttributes

CreateDeclarativeComponentMethods

In order to know the “Method Signature” for each method inserted you just need to see the component’s documentation, in this case the inputText component. A quick and easy way to do it is to use the provided short cuts. For example drag and drop an inputText, put the cursor over it and press CTRL + D.

Next step the following layout and components to the declarative component:

CreateDeclarativeComponentPage

Then set “CustomComponent.java” class with the following code. Here you can expose all the methods you want to use it later in the consumer page.

package component;

import common.DCUtils;
import java.util.Iterator;
import java.util.List;
import javax.faces.component.UIComponent;
import oracle.adf.view.rich.component.rich.fragment.RichDeclarativeComponent;
import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.adf.view.rich.component.rich.output.RichOutputText;

public class CustomComponent extends RichDeclarativeComponent {

    private static final String OUTPUT_TEXT_ATTR_NAME = "outputText_AttributeName";
    private static final String INPUT_TEXT_VALUE = "inputText_Value";

    public CustomComponent() {
    }

    public Object getKeyName() {
        Object result = null;
        try
        {
            RichOutputText inputValue = (RichOutputText)getUIComponent(OUTPUT_TEXT_ATTR_NAME);
            result = inputValue.getValue();
        }
        catch(Exception ex)
        {
            ex.printStackTrace();
        }
        return result;
    }

    public Object getLabel() {
        Object result = null;
        try
        {
            RichInputText inputValue = (RichInputText)getUIComponent(INPUT_TEXT_VALUE);
            result = inputValue.getLabel();
        }
        catch(Exception ex)
        {
            ex.printStackTrace();
        }
        return result;
    }

    public Object getValue() {
        Object result = null;
        try
        {
            RichInputText inputValue = (RichInputText)getUIComponent(INPUT_TEXT_VALUE);
            result = inputValue.getValue();
        }
        catch(Exception ex)
        {
            ex.printStackTrace();
        }
        return result;
    }

    public void setValue(Object value) {
        try
        {
            RichInputText inputValue = (RichInputText)getUIComponent(INPUT_TEXT_VALUE);
            inputValue.setSubmittedValue(value);
            inputValue.setValue(value);
            DCUtils.refreshComponent(inputValue);
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }
    }

    public void setValuetDisabled(boolean disabled) {
        try
        {
            RichInputText inputValue = (RichInputText)getUIComponent(INPUT_TEXT_VALUE);
            inputValue.setDisabled(disabled);
            DCUtils.refreshComponent(inputValue);
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }
    }

    public void clearValue() {
        try
        {
            RichInputText inputValue = (RichInputText)getUIComponent(INPUT_TEXT_VALUE);
            inputValue.setSubmittedValue(null);
            inputValue.setValue(null);
            DCUtils.refreshComponent(inputValue);
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }
    }

    private UIComponent getUIComponent(String componentId) {
        try
        {
            List children = this.getChildren().get(0).getChildren();
            Iterator iterator = children.iterator();

            while (iterator.hasNext())
            {
                UIComponent component = iterator.next();
                if (component.getId().equalsIgnoreCase(componentId))
                    return component;
            }
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }
        return null;
    }
}

After this you have finished developing your declarative component. But before using it do the following steps: (1) create an “ADF Library Jar File” deployment plan; (2) include the generated jar in your ADF application. After this whenever you create a page in your ADF application you select your declarative component from the component palette. The consumer page I have created looks like this:

CreateDeclarativeComponentHome

Next you need to implement the methods for each operation of the declarative component. The Home’s managed bean is this:

package view;

import component.CustomComponent;
import javax.faces.event.ActionEvent;
import oracle.adf.view.rich.component.rich.fragment.RichDeclarativeComponent;
import org.apache.myfaces.trinidad.event.ReturnEvent;

public class Home {
    private Object value;
    private Object returnValue;
    private RichDeclarativeComponent customComponent;

public Home() {     }

     public void clearActionListener(ActionEvent actionEvent) {
         //Get CustomComponent class to acess its methods.
         CustomComponent component = (CustomComponent)customComponent;

         //Clears CustomComponent value but not the value passed to the component.
         component.clearValue();

         //You need to reset the value passed to the component,
         //otherwise it won't get cleaned.
         value = null;
    }

    public String searchAction() {
         return "search";
    }

    public void searchReturnListener(ReturnEvent returnEvent) {
         //Get CustomComponent class to acess its methods.
         CustomComponent component = (CustomComponent)customComponent;

         //Set CustomComponent with the new value.
         component.setValue(returnValue);

         //You need to set the value with new returned value,
         //otherwise you won't get it updated.
         value = returnValue;
    }

    public void searchActionListener(ActionEvent actionEvent) {
        // Add event code here with you need to perform previous
        // data computation
    }

    public void setValue(Object value) {
        this.value = value;
    }

    public Object getValue() {
        return value;
    }

    public void setReturnValue(Object returnValue) {
        this.returnValue = returnValue;
    }

    public Object getReturnValue() {
        return returnValue;
    }

    public void setCustomComponent(RichDeclarativeComponent customComponent) {
        this.customComponent = customComponent;
    }

    public RichDeclarativeComponent getCustomComponent() {
        return customComponent;
    }
}

The final result looks like this:

CreateDeclarativeComponentImageResult

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: