Sunday, May 19, 2013

ADF Mobile With EJB Restful Web Service

This article is the continuation of my previous article on Configuring EJB with Restful Web Service in ADF. Here will see how to integrate EJB Restful Web Service with ADF mobile.

Application screen looks like below when it is deployed and run on the Android Device/Emulator. In the below screen Department list will be displayed.


Clicking on any department will take you to the selected Department details page, edit the details and click on the Save button to submit the data. Clicking on delete button will delete the current department.


From Department List screen, click on add button to add the new record. Enter the details and click on Save button to submit the data.


After the below actions, updated department result page will be displayed as shown below.


You can download the sample workspace from here
[Runs with Oracle JDeveloper 11.1.2.4.0 + HR Schema]

Implementation Steps

Create an ADF Mobile Application, the application consists of two projects. Application Controller project of Application LifeCycle, Listeners, Device Features DataControl and ViewController project contains mobile features content like AMX Files, Task Flows and DataControl.

In Application Controller project, create a Departments.java file and add the below code.
public class Departments {
    private BigDecimal departmentId;
    private String departmentName;
    private BigDecimal locationId;
    private BigDecimal managerId;

    public Departments() {
        super();
    }

    public Departments(BigDecimal departmentId, String departmentName, BigDecimal locationId, BigDecimal managerId) {
        this.departmentId = departmentId;
        this.departmentName = departmentName;
        this.locationId = locationId;
        this.managerId = managerId;
    }

    public void setDepartmentId(BigDecimal departmentId) {
        this.departmentId = departmentId;
    }

    public BigDecimal getDepartmentId() {
        return departmentId;
    }

    public void setDepartmentName(String departmentName) {
        this.departmentName = departmentName;
    }

    public String getDepartmentName() {
        return departmentName;
    }

    public void setLocationId(BigDecimal locationId) {
        this.locationId = locationId;
    }

    public BigDecimal getLocationId() {
        return locationId;
    }

    public void setManagerId(BigDecimal managerId) {
        this.managerId = managerId;
    }

    public BigDecimal getManagerId() {
        return managerId;
    }
}
Create DepartmentsDC.java file and add the below code, create DataControl based on DepartmentsDC file
public class DepartmentsDC {
    public DepartmentsDC() {
        super();
    }

    public Departments ediDepartment(BigDecimal departmentId, String departmentName, BigDecimal locationId,
                                     BigDecimal managerId) {
        return new Departments(departmentId, departmentName, locationId, managerId);
    }

    public Departments addDepartment() {
        BigDecimal defaultVal = new BigDecimal("0");
        return new Departments(defaultVal, "", defaultVal, defaultVal);
    }
}
In the New Gallery expand the General - XML nodes and select XML Schema and click OK, enter Departments.xsd in File Name field and the following attributes as shown in below image.


In the New Gallery expand the General - Connection nodes and select URL Connection and click OK, enter the URL Endpoint details, You can download Configuring EJB with Restful Web Service in ADF from my previous article.


Note: - Next create a URL Service Data Control from - http://IpAddress:7101/EJBRestService/jersey/EJBRESTService api with HTTP Methods: GET, PUT, POST, DELETE.

In the New Gallery expand the General - Data Control nodes and select URL Service Data Control and click OK and enter the details to create the GET method


In the New Gallery expand the General - Data Control nodes and select URL Service Data Control and click OK and enter the details to create the POST method.


In Create URL Service Data Control wizard - step 3 of 5, specify the XSD url which we created earlier.


In the New Gallery expand the General - Data Control nodes and select URL Service Data Control and click OK and enter the details to create the PUT method.


In Create URL Service Data Control wizard - step 3 of 5, specify the XSD url which we created earlier.


In the New Gallery expand the General - Data Control nodes and select URL Service Data Control and click OK and enter the details to create the DELETE method.


In Create URL Service Data Control wizard - step 3 of 5, enter the departmentId value as 0.


Next open the DataControls.dcx file and change the Definition id values to looks like below.


In ViewController project. Locate and expand the Application Sources folder, then expand the META-INF folder. You will see the adfmf-feature.xml file, click on the adfmf-feature.xml file to launch the Feature editor. Add a new feature by clicking the green plus sign on the Features table near top of the editor this will launch the new Create ADF Mobile Feature dialog, modify the values as shown below.


In the Features table, select the newly created feature Departments. Under the Features table, click the Content tab, and locate the Content table. Notice that the content item Departments.1 is created by default. Next add a new file by clicking the green plus sign and select taskflow option, this will launch the new Create ADF Mobile Task Flow dialog, modify the value as shown below.


Click on the DepartmentsTaskflow.xml to open the file in taskflow editor and follow the below steps.
  • Create three views and name them as deptList, deptAdd and deptEdit respectively
  • Draw the control flow case from deptList to addDept and Outcome as "add"
  • Draw the control flow case from deptList to editDept and Outcome as "edit" 
  • From DataControl palette drag and drop getDepartmentsFindAll and drop as method-call
  • Draw the control flow case from getDepartmentsFindAll method-call to deptList and Outcome as "getDepartmentsFindAll"
  • Draw the control flow case from addDept to getDepartmentsFindAll method-call and Outcome as "list"
  • Draw the control flow case from editDept to getDepartmentsFindAll method-call and Outcome as "list"
DepartmentsTaskflow.xml will looks as shown below diagram.


Double click on deptList view will launch Create ADF Mobile AMX Page dialog, in page facets select Header and Secondary Action. Go to source tab and follow the below steps:
  • In Header facet, amx:outputText set the value as "Dept List"
  • In Secondary Action facet, for amx:commandButton modify the values text: Add, action: add
  • From DC palette drag and drop EJBService->getDepartmentsFindAll()->Return->departmentss->departments->ADF Mobile List View and select the default options
  • In amx:Item, set the action as "edit"
  • Inside amx:Item set the setPropertyListener as shown below

Note:- Created the DataControl DepartmentsDC with addDepartment and editDepartment methods, so that the type casting the ADF form values to departments object will be easy.

Double click on deptAdd view will launch Create ADF Mobile AMX Page dialog, in page facets select Header, Primary Action. Go to source tab and follow the below steps:
  • In Header facet, amx:outputText set the value as "Add Dept"
  • In Primary Action facet, for amx:commandButton modify the values text: Back, action: __back
  • From DC palette drag and drop DepartmentsDC->addDepartment->Departments->Form as ADF Mobile Form.
  • Go to bindings and add the following attributesValues, departmentId, departmentName, locationId, managerId as shown below.
  • From DC palette drag and drop postDepartments->Method as ADF Mobile Button, set name as "Save", action as "list" and set the setPropertyListener as shown below 

Double click on deptAdd view will launch Create ADF Mobile AMX Page dialog, in page facets select Header, Primary, Secondary Action. Go to source tab and follow the below steps:
  • In Header facet, amx:outputText set the value as "Edit Dept"
  • In Primary Action facet, for amx:commandButton modify the values text: Back, action: __back
  • In Secondary Action facet,  from DC palette drag and drop EJBService->deleteDepartments->Method as ADF Mobile Button, set action as "list". In Edit Action Binding wizard mention the parameter for departmentId as #{pageFlowScope.departmentId}
  • From DC palette drag and drop DepartmentsDC->editDepartment->Departments->Form as ADF Mobile Form and in edit action binding wizard mention the parameters as shown below
  • Go to bindings and add the following attributesValues, departmentId, departmentName, locationId, managerId as shown below.
  • From DC palette drag and drop putDepartments->Method as ADF Mobile Button, set name as "Save", action as "list" and set the setPropertyListener as shown below.

3 comments:

  1. Thanks for your grateful informations, am working in Ecommerce web development company india, so it will be helpful info for my works.

    ReplyDelete
  2. Thank you for sharing. The professionals at QualiTest have the experience and expertise to provide you with the most reliable mobile testing services available.

    ReplyDelete
  3. Can you show demo of how to call web service data control programatically.

    ReplyDelete