Creating Declarative Component Using Query Panel and Table In ADF
Hi All,
In this post I am going to show you how you can create a declarative component using existing component in ADF. I this example I have taken the AF Query and ADF table for creation of declarative component. After creating the declarative component you can reuse it in many application. You just have to pass the required parameter for this declarative component.
To create a declarative component first create a Fusion Web Application as shown below.
After this right click on ViwController project and select "New" option.
Select the Categories as "JSF" and then select "JSF Declarative Component" option.
In the next screen give the name of the component and then click on "Add Tag Library" button.
Then give the Tag Library Name and URL according to your choice and click on OK.
Now click on af:componentDef and then go to property inspector and then select Attribute tab under common properties. Now click on Add and add some parameter for the component as shown below.
Now create bean for your component and copy and paste the below code in your bean as shown below . In this bean we have written a code to create the tree model for our table.
Write your Bean classs as follows:
========================================================================
package com.kunal.test.view;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.el.ValueExpression;
import javax.faces.application.Application;
import javax.faces.component.UISelectItem;
import javax.faces.component.UISelectItems;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.share.logging.ADFLogger;
import oracle.adf.view.rich.component.rich.data.RichColumn;
import oracle.adf.view.rich.component.rich.output.RichOutputText;
import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.event.QueryEvent;
import oracle.adf.view.rich.event.QueryOperationEvent;
import oracle.adf.view.rich.model.AttributeCriterion;
import oracle.adf.view.rich.model.AttributeDescriptor;
import oracle.adf.view.rich.model.ConjunctionCriterion;
import oracle.adf.view.rich.model.Criterion;
import oracle.adf.view.rich.model.QueryDescriptor;
import oracle.adf.view.rich.model.QueryModel;
import oracle.adfinternal.view.faces.model.binding.FacesCtrlHierBinding;
import oracle.adfinternal.view.faces.model.binding.FacesCtrlHierDef;
import oracle.binding.BindingContainer;
import oracle.jbo.AttributeDef;
import oracle.jbo.Row;
import oracle.jbo.RowSetIterator;
import oracle.jbo.ViewObject;
import oracle.jbo.server.AttributeDefImpl;
import oracle.jbo.server.ViewAttributeDefImpl;
import oracle.jbo.server.ViewObjectImpl;
import oracle.jbo.uicli.binding.JUCtrlHierBinding;
import oracle.jbo.uicli.binding.JUCtrlHierDef;
import oracle.jbo.uicli.binding.JUCtrlHierTypeBinding;
import oracle.jbo.uicli.binding.JUIteratorBinding;
import oracle.jbo.uicli.binding.JUIteratorDef;
import oracle.jbo.uicli.mom.JUTags;
public class QueryAndTableCompBean {
private static final ADFLogger log=ADFLogger.createADFLogger(QueryAndTableCompBean.class);
public QueryAndTableCompBean() {
super();
}
public DCIteratorBinding getIterator(String iteratorName, String voName,
String rsiName) {
DCBindingContainer dbc = ADFUtils.getDCBindingContainer();
DCIteratorBinding iter = dbc.findIteratorBinding(iteratorName);
if (iter == null) {
JUIteratorDef juDef =
new JUIteratorDef(iteratorName, null, voName, rsiName, 25);
HashMap initValues = new HashMap();
initValues.put(JUTags.DataControl, getDataControlName());
juDef.init(initValues);
iter = juDef.createIterBinding(BindingContext.getCurrent(), dbc);
dbc.addIteratorBinding(iteratorName, iter);
}
return iter;
}
public JUCtrlHierBinding getTree() {
DCBindingContainer dbc = ADFUtils.getDCBindingContainer();
JUCtrlHierBinding juchb =
(JUCtrlHierBinding)dbc.findCtrlBinding(getTreeName());
if (juchb == null) {
JUIteratorBinding iter =
(JUIteratorBinding)getIterator(getIteratorName(), getVOName(), null);
JUCtrlHierDef jucDef = new FacesCtrlHierDef();
HashMap initValues = new HashMap();
initValues.put(JUCtrlHierDef.PNAME_IterBinding, iter.getName());
JUCtrlHierTypeBinding typeBinding = new JUCtrlHierTypeBinding();
initValues.put(JUCtrlHierDef.PNAME_TypeBindings,
new JUCtrlHierTypeBinding[] { typeBinding });
jucDef.init(initValues);
juchb = (JUCtrlHierBinding)jucDef.createControlBinding(dbc);
dbc.addControlBinding(getTreeName(), juchb);
}
return juchb;
}
public String getTreeName(){
log.info("Tree Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}"));
return (String)JSFUtils.resolveExpression("#{attrs.voName}");
}
public String getIteratorName(){
log.info("Iteratoir Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}")+"Iterator");
return (String)JSFUtils.resolveExpression("#{attrs.voName}")+"Iterator";
}
public String getVOName(){
log.info("VO Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}"));
return (String)JSFUtils.resolveExpression("#{attrs.voName}");
}
public String getDataControlName(){
log.info("Data Control Name====>"+(String)JSFUtils.resolveExpression("#{attrs.dcName}"));
return (String)JSFUtils.resolveExpression("#{attrs.dcName}");
}
public Long getRowCountEstimated(){
return ADFUtils.findIterator(getIteratorName()).getEstimatedRowCount();
}
}
=========================================================================
Now create two more class as ADFUtils.java and JSFUtils.java also in your ViewController project.
If you need ADFUtils.java and JSFUtils.java classes then you can download them from here.
ADFUtils.java
JSFUtils.java
After this drag and drop the table from component palette and specify all the parameter shown below.
<af:table rows="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}"
fetchSize="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}" emptyText="#{backingBeanScope.QueryAndTableCompBean.tree.viewable ?
'No data to display.' : 'Access Denied.'}" var="row"
rowBandingInterval="0"
filterModel="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
value="#{backingBeanScope.QueryAndTableCompBean.tree.collectionModel}"
id="dc_t1" rowSelection="multiple" columnStretching="last"
styleClass="AFStretchWidth" varStatus="vs"
filterVisible="true">
<af:column rowHeader="true" headerText="Clean" id="c14" width="40"
inlineStyle="text-align:left;">
<af:outputText value="#{vs.index+1}" id="ot20">
<af:convertNumber groupingUsed="false"/>
</af:outputText>
</af:column>
<af:forEach items="#{backingBeanScope.QueryAndTableCompBean.tree.attributeDefs}"
var="def" varStatus="vss">
<af:column headerText="#{backingBeanScope.QueryAndTableCompBean.tree.labels[def.name]}"
sortable="true" sortProperty="#{def.name}" id="dc_c1"
filterable="true" filterFeatures="caseInsensitive">
<af:outputText value="#{row[def.name]}" id="dc_ot1"/>
</af:column>
</af:forEach>
</af:table>
Now drag and drop the query panel and specify all the required parameter as shown below and point your table as result component.
<af:query headerText="#{attrs.HeaderText}" disclosed="true" id="dc_q1"
resultComponentId="dc_t1"
model="#{attrs.SearchRegion.queryModel}"
value="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
queryOperationListener="#{attrs.SearchRegion.processQueryOperation}"/>
Now you can surround your table with panel collection and put record count if you want to show on the top right corner.
So your complete component code will look 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:xmlContent>
<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>QueryTableCustomComp</display-name>
<attribute>
<attribute-name>
voName
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
dcName
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
SearchRegion
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
HeaderText
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<component-extension>
<component-tag-namespace>component</component-tag-namespace>
<component-taglib-uri>/QueryTableCompLib</component-taglib-uri>
</component-extension>
</component>
</af:xmlContent>
</af:componentDef>
<af:query headerText="#{attrs.HeaderText}" disclosed="true" id="dc_q1"
resultComponentId="::dc_pc1:dc_t1"
model="#{attrs.SearchRegion.queryModel}"
value="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
queryOperationListener="#{attrs.SearchRegion.processQueryOperation}"/>
<af:panelBox text="#{attrs.HeaderText}" id="dc_pb1"
styleClass="AFStretchWidth">
<f:facet name="toolbar"/>
<af:panelCollection id="dc_pc1" styleClass="AFStretchWidth">
<f:facet name="menus"/>
<f:facet name="toolbar"/>
<f:facet name="secondaryToolbar">
<af:toolbar id="t3" stretchId="s2">
<af:spacer width="10" height="10" id="s2" clientComponent="true"/>
<af:outputText value="Total Records:#{backingBeanScope.QueryAndTableCompBean.rowCountEstimated}"
id="ot2" noWrap="true"
partialTriggers="::dc_q1 dc_t1"/>
</af:toolbar>
</f:facet>
<af:table rows="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}"
fetchSize="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}" emptyText="#{backingBeanScope.QueryAndTableCompBean.tree.viewable ?
'No data to display.' : 'Access Denied.'}" var="row"
rowBandingInterval="0"
filterModel="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
value="#{backingBeanScope.QueryAndTableCompBean.tree.collectionModel}"
id="dc_t1" rowSelection="multiple" columnStretching="last"
styleClass="AFStretchWidth" varStatus="vs"
filterVisible="true">
<af:column rowHeader="true" headerText="Clean" id="c14" width="40"
inlineStyle="text-align:left;">
<af:outputText value="#{vs.index+1}" id="ot20">
<af:convertNumber groupingUsed="false"/>
</af:outputText>
</af:column>
<af:forEach items="#{backingBeanScope.QueryAndTableCompBean.tree.attributeDefs}"
var="def" varStatus="vss">
<af:column headerText="#{backingBeanScope.QueryAndTableCompBean.tree.labels[def.name]}"
sortable="true" sortProperty="#{def.name}" id="dc_c1"
filterable="true" filterFeatures="caseInsensitive">
<af:outputText value="#{row[def.name]}" id="dc_ot1"/>
</af:column>
</af:forEach>
</af:table>
</af:panelCollection>
</af:panelBox>
</jsp:root>
=========================================================================
While compiling your project you may get following error:
To overcome this error make sure the following ADF library are there in your ViewController project.
Now your declarative component for Query Panel with ADF table is ready to use. You have to create the ADF library to use this in your project.
Let see How we can use this declarative component.
Right click on your ViewController project and select "Project Properties" option as shown below.
Select the "Deployment" option in left side and then click on "New" button.
Now select "Archive Type" as "ADF Library Jar File" and then give the name of Jar according to your choice. I have kept default name given by framework. Click on OK.
Click on "Ok".
Click on "Ok".
Now again right click on ViewController project and select "Deploy" option and the select the name of your Jar file.
Click on "next".
Click on "Finish" button to finish the deployment.
Wait until your deployment get finished.
Copy the location where your jar file has been created. Copy upto deploy path only.
Now go to Resource Palette option and right click on File System and select "New File System Connection" option.
Now give the connection name and directory path as copied before after deployment.
Now you can see the Jar file in the file system.
Now select your View Controller project and then right click on jar file and select the option to "Add to Project".
Now after this go to "Component Palette" and select My Component. You can see the declarative component that you have created.
Now you can use this component in your page. In your application where you want to use this component just drag and drop the component on your page.
Now specify the required parameter as shown below.
dcname=AppModuleDataControl
HeaderText = EMPLOYEE (This will be shown as text of query panel as well as for Panel Box.)
SearchRegion = #{bindings.EmployeeVOCriteriaQuery}
voName=EmployeesVO1
So after this your jspx page source code will look 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"
xmlns:QueryTableComp="/QueryTableCompLib">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<QueryTableComp:QueryTableCustomComp dcName="AppModule"
HeaderText="Employees"
SearchRegion="#{bindings.EmployeesVOCriteriaQuery}"
voName="EmployeesVO1" id="qtcc1"/>
</af:form>
</af:document>
</f:view>
</jsp:root>
So its a just four line of code that you have added in your jspx page.
Now right click on your jspx page and select the option "Go to Page Definition".
If the page definition is not there it will ask you to create. So click on OK.
Now you will get your page definition.
Now add the tree binding and Iterator as shown below.
Now create the search region and check all the parameter in property inspector as shown below.
Now run your jspx page. You can see the query panel and table on your page.
So like this you can create any kind of declarative component to reuse it in your several application.
In this post I am going to show you how you can create a declarative component using existing component in ADF. I this example I have taken the AF Query and ADF table for creation of declarative component. After creating the declarative component you can reuse it in many application. You just have to pass the required parameter for this declarative component.
To create a declarative component first create a Fusion Web Application as shown below.
After this right click on ViwController project and select "New" option.
Select the Categories as "JSF" and then select "JSF Declarative Component" option.
In the next screen give the name of the component and then click on "Add Tag Library" button.
Then give the Tag Library Name and URL according to your choice and click on OK.
Now click on af:componentDef and then go to property inspector and then select Attribute tab under common properties. Now click on Add and add some parameter for the component as shown below.
Write your Bean classs as follows:
========================================================================
package com.kunal.test.view;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.MethodExpression;
import javax.el.ValueExpression;
import javax.faces.application.Application;
import javax.faces.component.UISelectItem;
import javax.faces.component.UISelectItems;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.share.logging.ADFLogger;
import oracle.adf.view.rich.component.rich.data.RichColumn;
import oracle.adf.view.rich.component.rich.output.RichOutputText;
import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.event.QueryEvent;
import oracle.adf.view.rich.event.QueryOperationEvent;
import oracle.adf.view.rich.model.AttributeCriterion;
import oracle.adf.view.rich.model.AttributeDescriptor;
import oracle.adf.view.rich.model.ConjunctionCriterion;
import oracle.adf.view.rich.model.Criterion;
import oracle.adf.view.rich.model.QueryDescriptor;
import oracle.adf.view.rich.model.QueryModel;
import oracle.adfinternal.view.faces.model.binding.FacesCtrlHierBinding;
import oracle.adfinternal.view.faces.model.binding.FacesCtrlHierDef;
import oracle.binding.BindingContainer;
import oracle.jbo.AttributeDef;
import oracle.jbo.Row;
import oracle.jbo.RowSetIterator;
import oracle.jbo.ViewObject;
import oracle.jbo.server.AttributeDefImpl;
import oracle.jbo.server.ViewAttributeDefImpl;
import oracle.jbo.server.ViewObjectImpl;
import oracle.jbo.uicli.binding.JUCtrlHierBinding;
import oracle.jbo.uicli.binding.JUCtrlHierDef;
import oracle.jbo.uicli.binding.JUCtrlHierTypeBinding;
import oracle.jbo.uicli.binding.JUIteratorBinding;
import oracle.jbo.uicli.binding.JUIteratorDef;
import oracle.jbo.uicli.mom.JUTags;
public class QueryAndTableCompBean {
private static final ADFLogger log=ADFLogger.createADFLogger(QueryAndTableCompBean.class);
public QueryAndTableCompBean() {
super();
}
public DCIteratorBinding getIterator(String iteratorName, String voName,
String rsiName) {
DCBindingContainer dbc = ADFUtils.getDCBindingContainer();
DCIteratorBinding iter = dbc.findIteratorBinding(iteratorName);
if (iter == null) {
JUIteratorDef juDef =
new JUIteratorDef(iteratorName, null, voName, rsiName, 25);
HashMap initValues = new HashMap();
initValues.put(JUTags.DataControl, getDataControlName());
juDef.init(initValues);
iter = juDef.createIterBinding(BindingContext.getCurrent(), dbc);
dbc.addIteratorBinding(iteratorName, iter);
}
return iter;
}
public JUCtrlHierBinding getTree() {
DCBindingContainer dbc = ADFUtils.getDCBindingContainer();
JUCtrlHierBinding juchb =
(JUCtrlHierBinding)dbc.findCtrlBinding(getTreeName());
if (juchb == null) {
JUIteratorBinding iter =
(JUIteratorBinding)getIterator(getIteratorName(), getVOName(), null);
JUCtrlHierDef jucDef = new FacesCtrlHierDef();
HashMap initValues = new HashMap();
initValues.put(JUCtrlHierDef.PNAME_IterBinding, iter.getName());
JUCtrlHierTypeBinding typeBinding = new JUCtrlHierTypeBinding();
initValues.put(JUCtrlHierDef.PNAME_TypeBindings,
new JUCtrlHierTypeBinding[] { typeBinding });
jucDef.init(initValues);
juchb = (JUCtrlHierBinding)jucDef.createControlBinding(dbc);
dbc.addControlBinding(getTreeName(), juchb);
}
return juchb;
}
public String getTreeName(){
log.info("Tree Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}"));
return (String)JSFUtils.resolveExpression("#{attrs.voName}");
}
public String getIteratorName(){
log.info("Iteratoir Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}")+"Iterator");
return (String)JSFUtils.resolveExpression("#{attrs.voName}")+"Iterator";
}
public String getVOName(){
log.info("VO Name===>"+(String)JSFUtils.resolveExpression("#{attrs.voName}"));
return (String)JSFUtils.resolveExpression("#{attrs.voName}");
}
public String getDataControlName(){
log.info("Data Control Name====>"+(String)JSFUtils.resolveExpression("#{attrs.dcName}"));
return (String)JSFUtils.resolveExpression("#{attrs.dcName}");
}
public Long getRowCountEstimated(){
return ADFUtils.findIterator(getIteratorName()).getEstimatedRowCount();
}
}
=========================================================================
Now create two more class as ADFUtils.java and JSFUtils.java also in your ViewController project.
If you need ADFUtils.java and JSFUtils.java classes then you can download them from here.
ADFUtils.java
JSFUtils.java
After this drag and drop the table from component palette and specify all the parameter shown below.
<af:table rows="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}"
fetchSize="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}" emptyText="#{backingBeanScope.QueryAndTableCompBean.tree.viewable ?
'No data to display.' : 'Access Denied.'}" var="row"
rowBandingInterval="0"
filterModel="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
value="#{backingBeanScope.QueryAndTableCompBean.tree.collectionModel}"
id="dc_t1" rowSelection="multiple" columnStretching="last"
styleClass="AFStretchWidth" varStatus="vs"
filterVisible="true">
<af:column rowHeader="true" headerText="Clean" id="c14" width="40"
inlineStyle="text-align:left;">
<af:outputText value="#{vs.index+1}" id="ot20">
<af:convertNumber groupingUsed="false"/>
</af:outputText>
</af:column>
<af:forEach items="#{backingBeanScope.QueryAndTableCompBean.tree.attributeDefs}"
var="def" varStatus="vss">
<af:column headerText="#{backingBeanScope.QueryAndTableCompBean.tree.labels[def.name]}"
sortable="true" sortProperty="#{def.name}" id="dc_c1"
filterable="true" filterFeatures="caseInsensitive">
<af:outputText value="#{row[def.name]}" id="dc_ot1"/>
</af:column>
</af:forEach>
</af:table>
Now drag and drop the query panel and specify all the required parameter as shown below and point your table as result component.
<af:query headerText="#{attrs.HeaderText}" disclosed="true" id="dc_q1"
resultComponentId="dc_t1"
model="#{attrs.SearchRegion.queryModel}"
value="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
queryOperationListener="#{attrs.SearchRegion.processQueryOperation}"/>
Now you can surround your table with panel collection and put record count if you want to show on the top right corner.
So your complete component code will look 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:xmlContent>
<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>QueryTableCustomComp</display-name>
<attribute>
<attribute-name>
voName
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
dcName
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
SearchRegion
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<attribute>
<attribute-name>
HeaderText
</attribute-name>
<attribute-class>
java.lang.String
</attribute-class>
<required>
true
</required>
</attribute>
<component-extension>
<component-tag-namespace>component</component-tag-namespace>
<component-taglib-uri>/QueryTableCompLib</component-taglib-uri>
</component-extension>
</component>
</af:xmlContent>
</af:componentDef>
<af:query headerText="#{attrs.HeaderText}" disclosed="true" id="dc_q1"
resultComponentId="::dc_pc1:dc_t1"
model="#{attrs.SearchRegion.queryModel}"
value="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
queryOperationListener="#{attrs.SearchRegion.processQueryOperation}"/>
<af:panelBox text="#{attrs.HeaderText}" id="dc_pb1"
styleClass="AFStretchWidth">
<f:facet name="toolbar"/>
<af:panelCollection id="dc_pc1" styleClass="AFStretchWidth">
<f:facet name="menus"/>
<f:facet name="toolbar"/>
<f:facet name="secondaryToolbar">
<af:toolbar id="t3" stretchId="s2">
<af:spacer width="10" height="10" id="s2" clientComponent="true"/>
<af:outputText value="Total Records:#{backingBeanScope.QueryAndTableCompBean.rowCountEstimated}"
id="ot2" noWrap="true"
partialTriggers="::dc_q1 dc_t1"/>
</af:toolbar>
</f:facet>
<af:table rows="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}"
fetchSize="#{backingBeanScope.QueryAndTableCompBean.tree.rangeSize}" emptyText="#{backingBeanScope.QueryAndTableCompBean.tree.viewable ?
'No data to display.' : 'Access Denied.'}" var="row"
rowBandingInterval="0"
filterModel="#{attrs.SearchRegion.queryDescriptor}"
queryListener="#{attrs.SearchRegion.processQuery}"
value="#{backingBeanScope.QueryAndTableCompBean.tree.collectionModel}"
id="dc_t1" rowSelection="multiple" columnStretching="last"
styleClass="AFStretchWidth" varStatus="vs"
filterVisible="true">
<af:column rowHeader="true" headerText="Clean" id="c14" width="40"
inlineStyle="text-align:left;">
<af:outputText value="#{vs.index+1}" id="ot20">
<af:convertNumber groupingUsed="false"/>
</af:outputText>
</af:column>
<af:forEach items="#{backingBeanScope.QueryAndTableCompBean.tree.attributeDefs}"
var="def" varStatus="vss">
<af:column headerText="#{backingBeanScope.QueryAndTableCompBean.tree.labels[def.name]}"
sortable="true" sortProperty="#{def.name}" id="dc_c1"
filterable="true" filterFeatures="caseInsensitive">
<af:outputText value="#{row[def.name]}" id="dc_ot1"/>
</af:column>
</af:forEach>
</af:table>
</af:panelCollection>
</af:panelBox>
</jsp:root>
=========================================================================
While compiling your project you may get following error:
- Error(43,51): package oracle.adfinternal.view.faces.model.binding does not exist
- Error(44,51): package oracle.adfinternal.view.faces.model.binding does not exist
- Error(95,39): cannot find class FacesCtrlHierDef
To overcome this error make sure the following ADF library are there in your ViewController project.
Now your declarative component for Query Panel with ADF table is ready to use. You have to create the ADF library to use this in your project.
Let see How we can use this declarative component.
Right click on your ViewController project and select "Project Properties" option as shown below.
Select the "Deployment" option in left side and then click on "New" button.
Now select "Archive Type" as "ADF Library Jar File" and then give the name of Jar according to your choice. I have kept default name given by framework. Click on OK.
Click on "Ok".
Click on "Ok".
Now again right click on ViewController project and select "Deploy" option and the select the name of your Jar file.
Click on "next".
Click on "Finish" button to finish the deployment.
Wait until your deployment get finished.
Copy the location where your jar file has been created. Copy upto deploy path only.
Now go to Resource Palette option and right click on File System and select "New File System Connection" option.
Now you can see the Jar file in the file system.
Now select your View Controller project and then right click on jar file and select the option to "Add to Project".
Now after this go to "Component Palette" and select My Component. You can see the declarative component that you have created.
Now you can use this component in your page. In your application where you want to use this component just drag and drop the component on your page.
Now specify the required parameter as shown below.
dcname=AppModuleDataControl
HeaderText = EMPLOYEE (This will be shown as text of query panel as well as for Panel Box.)
SearchRegion = #{bindings.EmployeeVOCriteriaQuery}
voName=EmployeesVO1
So after this your jspx page source code will look 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"
xmlns:QueryTableComp="/QueryTableCompLib">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<QueryTableComp:QueryTableCustomComp dcName="AppModule"
HeaderText="Employees"
SearchRegion="#{bindings.EmployeesVOCriteriaQuery}"
voName="EmployeesVO1" id="qtcc1"/>
</af:form>
</af:document>
</f:view>
</jsp:root>
So its a just four line of code that you have added in your jspx page.
Now right click on your jspx page and select the option "Go to Page Definition".
If the page definition is not there it will ask you to create. So click on OK.
Now you will get your page definition.
Now add the tree binding and Iterator as shown below.
Now create the search region and check all the parameter in property inspector as shown below.
Now run your jspx page. You can see the query panel and table on your page.
So like this you can create any kind of declarative component to reuse it in your several application.
Hi Kunal,
ReplyDeleteReally a nice article.Can I have this component.
Can you mail me source code of this?