Requirement: I have an student.jspx page. In that page I have a table displaying Student details from STUDENT table. On top of the Student table in the ADF page I have a Add button as shown below:
Now, when I click on the Add button it will show the popup with the form to enter the new Student details. And there will be one button : Add.
Also, the field for StudentId will be pre-populated with the new StudentId and will be a Read Only field. The StudentId will be calcullated based on the last StudentId in the database table. Here In this case as the last StudentId in the Student table is 2, hence the new StudentId 3 is dispalyed in the form. Once we fill the form and enter on Save buttoni it will insert new Student record for that particular StudentId and will return to the Student table. Also, it should refresh the Student table automatically.
Solution: For solution of the above requirement we will be using the Student table which is created as shown below:
create table student (student_id number(10) primary key, student_name varchar2(20),student_class varchar2(20));insert into student values (1,'Susanto','MBA');
insert into student values (2,'Anitha','MCA');
Thus, for solution of the above requirement follow the steps as shown below:
Step1: Create an Oracle ADF Fusion Web Application and named it as ‘AddDemo‘.
Step 2: Create an ADF Business Components from table for the Student table. The ADF Business Components should comprise of StudentEO, StudentVO, and ApplicationModule as shown below:
Step 3: Create a student.jspx page. Now go to the Data Controls and expand AppModuleAMDataControl. Select Student1, and drag and drop Student1 on the student.jspx page as a ADF Table as shown below:
Check Enable Sorting, Enable Filtering, and Read-Only Table. Also select Single Row radio button as shown below:
Click OK.
Step 4: Now surround the af:table with the af:panelCollection. Inside the toolbar facet, drag and drop af:toolbar from the component table. Inside the af:toolbar drag and drop af:button and name the af:button as Add.
Also inside the af:toolbar drag and drop af:popup and make the contentDelivery=”lazyUncached“ .
Create the binding of the af:popup as binding=”#{pageFlowScope.AddBean.popupBind}”. This is needed so that we can hide the af:popup after successfull Addition of the new Student record.
Also create a popupFetchListener for the af:popup as popupFetchListener=”#{pageFlowScope.AddBean.popupFetchListener}”. This is required to do some processing when the af:popup loads. Inside the popupFetchListener we will be incrementing the StudentId and set the incremented StudentId value in the Form.
Now drag and drop af:dialog inside the af:popup. Set the type=”none”.
Drag and drop af:panelGroupLayout from the component palette and set halign=”left” layout=”vertical”.
Drag and drop three af:inputText and label it as “Student Id”, “Student Name”, and “Student Class”. Also create the bindings for the three af:inputText as binding=”#{pageFlowScope.AddBean.sidBind}”, binding=”#{pageFlowScope.AddBean.snameBind}”, and binding=”#{pageFlowScope.AddBean.sclassBind}” respectively.
Also create the value binding for the first af:inputText as value=”#{pageFlowScope.AddBean.studentId}” and set readOnly=”true”.
Now inside the af:dialog we have a facet named buttonBar. Inside buttonBar the drag and drop af:button and set the properties as text=”Save” and actionListener=”#{pageFlowScope.AddBean.addMethod}”.
Step 5: Now, go to the student.jspx page and open the Bindings tab. Beside the Bindings section click the green + icon to action action binding as shown below:
Select action and click OK. Expand AppModuleAMDataControl and Expand Operations and select Commit as shown below:
Click OK. This will add the commit action binding in the student.jspx page as shown below:
Save All the application.
Step 6: Thus, the complete student.jspx page is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="student.jspx" id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:panelCollection id="pc1">
<f:facet name="menus"/>
<f:facet name="toolbar">
<af:toolbar id="t2">
<af:button text="Add" id="b1">
<af:showPopupBehavior popupId="p1"/>
</af:button>
<af:popup childCreation="deferred" autoCancel="disabled" id="p1"
binding="#{pageFlowScope.AddBean.popupBind}"
popupFetchListener="#{pageFlowScope.AddBean.popupFetchListener}"
contentDelivery="lazyUncached">
<af:dialog id="d2" type="none">
<af:panelGroupLayout id="pgl1" halign="left" layout="vertical">
<af:inputText label="Student Id" id="it1"
binding="#{pageFlowScope.AddBean.sidBind}"
value="#{pageFlowScope.AddBean.studentId}" readOnly="true"/>
<af:inputText label="Student Name" id="it2"
binding="#{pageFlowScope.AddBean.snameBind}"/>
<af:inputText label="Student Class" id="it3"
binding="#{pageFlowScope.AddBean.sclassBind}"/>
</af:panelGroupLayout>
<f:facet name="buttonBar">
<af:button text="Save" id="b2"
actionListener="#{pageFlowScope.AddBean.addMethod}"/>
</f:facet>
</af:dialog>
</af:popup>
</af:toolbar>
</f:facet>
<f:facet name="statusbar"/>
<af:table value="#{bindings.Student1.collectionModel}" var="row"
rows="#{bindings.Student1.rangeSize}"
emptyText="#{bindings.Student1.viewable ? 'No data to display.' : 'Access Denied.'}"
rowBandingInterval="0" selectedRowKeys="#{bindings.Student1.collectionModel.selectedRow}"
selectionListener="#{bindings.Student1.collectionModel.makeCurrent}" rowSelection="single"
fetchSize="#{bindings.Student1.rangeSize}"
filterModel="#{bindings.Student1Query.queryDescriptor}" filterVisible="true"
queryListener="#{bindings.Student1Query.processQuery}" varStatus="vs" id="t1">
<af:column sortProperty="#{bindings.Student1.hints.StudentId.name}" filterable="true"
sortable="true" headerText="#{bindings.Student1.hints.StudentId.label}" id="c1">
<af:outputText value="#{row.StudentId}"
shortDesc="#{bindings.Student1.hints.StudentId.tooltip}" id="ot1">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.Student1.hints.StudentId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.Student1.hints.StudentName.name}" filterable="true"
sortable="true" headerText="#{bindings.Student1.hints.StudentName.label}" id="c2">
<af:outputText value="#{row.StudentName}"
shortDesc="#{bindings.Student1.hints.StudentName.tooltip}" id="ot2"/>
</af:column>
<af:column sortProperty="#{bindings.Student1.hints.StudentClass.name}" filterable="true"
sortable="true" headerText="#{bindings.Student1.hints.StudentClass.label}" id="c3">
<af:outputText value="#{row.StudentClass}"
shortDesc="#{bindings.Student1.hints.StudentClass.tooltip}" id="ot3"/>
</af:column>
</af:table>
</af:panelCollection>
</af:form>
</af:document>
</f:view>
</jsp:root>Step 7: Thus, now go to the AddBean.java and write the code as shown below:
package com.susanto.bean;
import javax.faces.event.ActionEvent;
import oracle.adf.model.BindingContext;
import oracle.adf.model.OperationBinding;
import oracle.adf.model.binding.DCBindingContainer;
import oracle.adf.model.binding.DCIteratorBinding;
import oracle.adf.view.rich.component.rich.RichPopup;
import oracle.adf.view.rich.component.rich.input.RichInputText;
import oracle.adf.view.rich.event.PopupFetchEvent;
import oracle.adfinternal.view.faces.taglib.listener.ResetActionListener;
import oracle.jbo.Row;
import oracle.jbo.ViewObject;
public class AddBean {
private RichInputText sidBind;
private RichInputText snameBind;
private RichInputText sclassBind;
private RichPopup popupBind;
private String stuId;
private String studentId;
public void setStudentId(String studentId) {
this.studentId = studentId;
}
public String getStudentId() {
return studentId;
}
public AddBean() {
}
public void setSidBind(RichInputText sidBind) {
this.sidBind = sidBind;
}
public RichInputText getSidBind() {
return sidBind;
}
public void setSnameBind(RichInputText snameBind) {
this.snameBind = snameBind;
}
public RichInputText getSnameBind() {
return snameBind;
}
public void setSclassBind(RichInputText sclassBind) {
this.sclassBind = sclassBind;
}
public RichInputText getSclassBind() {
return sclassBind;
}
public void addMethod(ActionEvent actionEvent) {
String sid = sidBind.getValue().toString();
String sname = snameBind.getValue().toString();
String sclass = sclassBind.getValue().toString();
System.out.println("sid : " + sid);
System.out.println("sname : " + sname);
System.out.println("sclass : " + sclass);
DCBindingContainer bindings = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
DCIteratorBinding requestIter = bindings.findIteratorBinding("Student1Iterator");
ViewObject vo = requestIter.getViewObject();
Row row = vo.createRow();
row.setAttribute("StudentId", sid);
row.setAttribute("StudentName", sname);
row.setAttribute("StudentClass", sclass);
vo.insertRow(row);
OperationBinding operationBinding = (OperationBinding) bindings.getOperationBinding("Commit");
operationBinding.execute();
popupBind.hide();
ResetActionListener ral = new ResetActionListener();
ral.processAction(actionEvent);
}
public void setPopupBind(RichPopup popupBind) {
this.popupBind = popupBind;
}
public RichPopup getPopupBind() {
return popupBind;
}
public void popupFetchListener(PopupFetchEvent popupFetchEvent) {
System.out.println("Inside PopupFetchEvent");
DCBindingContainer bindings1 = (DCBindingContainer) BindingContext.getCurrent().getCurrentBindingsEntry();
DCIteratorBinding dcIterBind = (DCIteratorBinding) bindings1.get("Student1Iterator");
ViewObject vo1 = dcIterBind.getViewObject();
vo1.last();
stuId = vo1.getCurrentRow()
.getAttribute("StudentId")
.toString();
System.out.println(stuId);
Integer studtId = Integer.parseInt(stuId) + 1;
System.out.println("studtId" + studtId);
this.studentId = studtId.toString();
}
}
Step 8: Save all and run the Student.jspx. Thus, the ran application is shown below:
Now click on the Add button and it will open a popup with the new StudentId pre-populated as shown below:
Fill the form with the Student Name as Moumita and Student Class as MCA.
Click on Save. Thus, we can see below that the data gets reflected in the Student table in the ADF page.
Just for confirmation purpose I will check if the record is inserted in the database also. Thus the below image shows that the record is also saved in the database.
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
540 total views, 2 views today