OEPE has been iteratively providing more ADF tooling with each release. The latest v12.1.1.2 release provides features that allows us to develop a fully functioning ADF application. The following tutorial describes HR sample application development using ADF features supported by OEPE release v12.1.1.2. It covers some of the key ADF toolings like Data Control generation on EJB, generation of Data First & UI First scenario, Page Definition editor, ADF Table generation, generation of DVT graph and some of the cool AppXray features.

Development Environment Set up

Create ADF Application

• Start Eclipse with an empty workspace
• Switch to Java EE perspective
• Launch File | New | Oracle ADF Application wizard
• Type in application name, "HR" 
• Create a new run time selecting WebLogic Server 10.3.6 instance 
• Launch "New JPA Project" wizard, click on Modify... button and select utility module facet
• On the JPA project wizard, click Next and navigate to "JPA Facet" Page
• For platform, select "EclipseLink 2.1.x" and verify the selection of "WebLogic System Library (Oracle TopLink 11gR1)" implementation
• Click on "Add connection..." and create a new 10g/11g "Oracle Database Connection"
• On the JPA project wizard, click on "Override default schema from connection" and click Finish
• NOTE: Click "No" on switch perspective dialog
• On the ADF Application wizard, click Finish

Figure 1: Oracle ADF Application wizard

Generate Data Model

• In Project Explorer, right click on "HRModel" | New | "JPA Entities from Tables"
  • On "Select Tables", pick "Employees" & "Department" table and click Next
  • Retain default "Table Associations" and click Next
  • On "Customize Default Entity Generation", type in a package name and click Finish
• Open Employee.java and update with @NamedQuery(name="findAllEmps", query="select e from Employee e ")
• Open Department.java and update with @NamedQuery(name="findAllDepts", query="select d from Department d")
• Save the files
• Generate Data Control artifacts
  • In Project Explorer, right click on "HRModel" | New | Other | Oracle | Application Development Framework | select "ADF Data Model Components" and click Next
  • Type in package name, ex: ejb.beans
  • Type in class name, ex: "HRModelSessionEJB" and click Next
  •  Double click on "Employee" entity and move it over to selected panel
  • Click Next, retain default object type "ADF Data Control" and click Finish

Figure 2: ADF Data Model Component wizard

Iterative Data Control artifact generation

• In Project Explorer, expand HRModel | src | model and right click on "HRModelSessionEJB" | Model Components | Edit Session Bean Facade ...
• On Edit Session Bean Facade, double click on Department and move it over to selected panel, click Finish
• In Project Explorer, right click on HRModel | src | model | "HRModelSessionEJB" | select Model Components | Create ADF Data Control

Figure 3: Edit Session Bean Facade and ADF Data Control

Data First, Department Id artifact generation

• Create ADF page
  • In Project Explorer, right click on "HRWeb" project | New | JSP File, type in file name "emplist.jspx" and click Next
  • On template selection page, select "ADF Rich Faces Page - Three Columns (xhtml, xml syntax)" and click Finish
  • In the JSP source view, modify the facet order, i.e. move "f:facet name=start" before "f:facet name=center"
• Generate ADF OutputText tag on departmentId artifact
  • In the JSP source view, place the cursor within "f:facet name=start" tag
  • On the Palette view, switch to Tags tab, expand ADF Faces | DND "Panel Form Layout" and click Finish 
  • On the Palette view, switch to Data tab, expand HRModelSessionEJBLocal | findAllDepts, DND "departmentId" within panelFormLayout as "Text | ADF Output Text w/ Label"
  • save the page

Figure 4: Data First, DND data control artifact

Define artifact in Page Definition editor

• In Project Explorer, right click on emplist.jspx | Open Page Definition
• Define new attribute value binding
  • On Page Definition editor, click on + to add new Binding
  • On the New Binding dialog, select "attributeValues" and type in id "deptName", click OK
  • On the details panel, click on "Browse" button
  • On "Rebind Attribute selection", expand findAllDepts and select "departmentName", click OK
  • NOTE: The Page definition editor validates in-valid/undefined binding or iterators.
  • save and close page definition file

Figure 5: Page Definition editor

UI First, Department Name artifact generation

• Switch to emplist.jspx and place the cursor after closing panelLabelAndMessage tag
• On the Palette View, switch to "Tags" tab
• Expand "ADF Faces" node and DND "Panel Label And Message" tag
• Click on the binding button next to "Label" field and select "bindings.deptName.hints.label", click Finish
• In the source view, place the cursor within panelLabelAndMessage tag and from Palette view, DND "Output Text" tag
• Click on the binding button next to "Value" field and select "bindings.deptName.inputValue", click Finish

Figure 6: Panel Label & Message and Output Text tag editors

Generate ADF Tag from Data Palette view

•  In the JSP source view, place the cursor after closing panelLabelAndMessage tag (i.e. after deptName)
• On the Palette view, switch to Data tab, right click on "findAllDepts" | Insert in the page | ADF Navigation | Navigation Buttons

Figure 7: Data Palette | Data control artifact context menu item

Generate Employee Table

•  In the JSP source view, place the cursor within f:facet name=center tag
• On the Palette view, switch to Data tab, DND "findAllDepts | employees" as Table | ADF Table...
• On the Table configuration page, select columns EmployeeId, FirstName, LastName and PhoneNumber, remove the remaining entries and click Finish

Figure 8: ADF Table tag editor

Modify Employee Table behavior

•  In the JSP source view, place the cursor on table tag
• On the Properties view, click on "Edit Component Definition"
  • Check "Read-only Table", select "Single row", and "Enable sorting"
• Click Finish and save the page

Figure 9: Edit Component definition editor

Generate DVT Graph

• In the JSP source view, place the cursor within "f:facet name=end" tag
• In the Data Palette view, right click on findAllDepts | employees | Insert in the page | Graph | Bar Graph
  • Retain default Bar Graph Type and select second layout, click Next
  • Bars: Click "Add attribute" and select "employeeId"
  • X axis: Click "Add attribute" and select "salary", click Finish

Figure 10: Bar Graph wizard

Smart editor, Graphical representation of Binding references

•  In the JSP source view, place the cursor on jsp:root tag
• On the Properties view, switch to "Bindings" tab
  • You can navigate to the binding definition, iterator or referenced tag on the JSP page
  • Also, you can place the cursor on individual tag to view the corresponding binding references

Figure 11: Smart editor binding references

AppXaminer, Graphical representation of ADF artifact references

• In Project Explorer, right click on emplist.jspx | Show AppXray Dependencies
  • The AppXaminer displays all web artifact references in JSP page, ex: references to resource bundle, image files, adf binding references, jsf managed bean references.
  • For each artifact reference, you can navigate deeper to source file, ex: in case of adf binding, you can navigate all the way up to JPA bean class.
  • The reference link on AppXaminer provides navigation to respective source file
  • In addition to JSP, the AppXray visualization works on other web artifact files, ex: taskflow, page definition, data binding, data control, managed bean or resource bundle file

Figure 12: AppXaminer visualization

Deploy and run ADF application on WLS P5 RT

• In the Servers view, click on "new server wizard..." link
• Select WLS PS RT, click Next
  • On "Specify a WebLogic domain directory" page click on create button and create a domain with JRF extension
  • On New Server dialog, click Finish
• Start the server
• NOTE: The eclipse internal browser has a known issue with DVT tag rendering, try the following step to use external browser
  • Window | Preferences | General | Web Browser | switch to "Use external web browser" and select Firefox / IE / Chrome
• In Project Explorer, right click on emplist.jspx | Run As | Run on Server, select WebLogic Server 10.3.6 domain and click Finish

Figure 13: WLS server configuration and RT output of emplist.jspx

References

• OEPE User Guide:  http://docs.oracle.com/cd/E27086_03/help/oracle.eclipse.tools.common.doc/html/index.html
• Download and import the completed application: HRApp.zip