ADF Declarative Component example

In my previous post I promised to show  how to create ADF Declarative Component for Smart List Of Values. So, I'm going to create a component consisting of three elements: a label, an input text and a combobox list of values. That's very easy. I created a separate ADF ViewController project in my work space:

In this project open the Create JSF Declarative Component wizard:

The new declarative component smartLovDef should have at least three attributes: some string for label, attribute binding for input text and LOV binding for combobox list of values:

The wizard creates metadata file declarativecomp-metadata.xml and smartLovDef.jspx file where we can put the content of our component:

The source code of smartLovDef.jspx looks like this:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <af:componentDef var="attrs" componentVar="component">
        
 <af:panelLabelAndMessage label="#{attrs.label}" id="plam1">
  <af:panelGroupLayout id="pgl1" layout="horizontal">
    <af:inputText value="#{attrs.attrBinding.inputValue}"
                  required="#{attrs.attrBinding.hints.mandatory}"
                  columns="#{attrs.attrBinding.hints.displayWidth}"
                  id="deptid" partialTriggers="departmentNameId"
                 autoSubmit="true" simple="true"/>
    <af:inputComboboxListOfValues id="departmentNameId"
                popupTitle="Search and Select: #{attrs.lovBinding.hints.label}"
                value="#{attrs.lovBinding.inputValue}"
                model="#{attrs.lovBinding.listOfValuesModel}"
                columns="#{attrs.lovBinding.hints.displayWidth}"
                shortDesc="#{attrs.lovBinding.hints.tooltip}"
                partialTriggers="deptid"
               simple="true">
    </af:inputComboboxListOfValues>
  </af:panelGroupLayout>
 </af:panelLabelAndMessage>

    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <display-name>smartLovDef</display-name>
        <attribute>
          <attribute-name>label</attribute-name>
          <attribute-class>java.lang.String</attribute-class>
          <required>true</required>
        </attribute>
        <attribute>
          <attribute-name>attrBinding</attribute-name>
          <attribute-class>java.lang.Object</attribute-class>
          <required>true</required>
        </attribute>
        <attribute>
          <attribute-name>lovBinding</attribute-name>
          <attribute-class>java.lang.Object</attribute-class>
          <required>true</required>
        </attribute>
        <component-extension>
          <component-tag-namespace>cscomponent</component-tag-namespace>
          <component-taglib-uri>/componentLib</component-taglib-uri>
        </component-extension>
      </component>
    </af:xmlContent>
  </af:componentDef>
</jsp:root>

The next step is to deploy the component into ADF Library. We have to add new deployment profile for the CSComponents project:

And let's deploy the project into library:

The following step is to define File System connection in the resource palette to the deployment path of CSComponents project:

After that we have to choose the project where we're going to use the new component (in my case ViewConroller) and add CSComponents.jar library to it:

Now we can use smartLovDef  component in our page and drag it from the component palette:

In our jspx page the source code is going to look like this:

    <cscompLib:smartLovDef label="#{bindings.DepartmentId.label}"
                        attrBinding="#{bindings.DepartmentId}" 
                        lovBinding="#{bindings.DepartmentName}"
                        id="sld1"/>