This blog entry describes the steps necessary to take a Skyway CRUD Scaffold bootstrapped project and merge the one-to-one related objects into one form on the presentation layer for Create and Update operations as seen in the screenshot below.  The current default for Skyway CRUD Scaffolding with related objects is to place each object’s edit form on separate pages.  Skyway also does not assume related objects should be initialized in the java code.  So, the following steps provides options to enhance what is generated from Skyway to produce a master-detail merged form.

There are 2 options to accomplish this merge detailed in this tutorial:

1. Modifying the generated code to use the parent/master object as the form backing object.
   [Quicker and involves hand-coding]
2. Using a Skyway component as the form backing object.
   [Longer and all visual, no hand coding]

Project Setup and Scaffold

This section assumes you have Skyway Builder installed and understand Skyway’s CRUD Scaffolding feature.  For more details on these topics, please download Skyway Builder and run through the HOW TO: CRUD App Scaffolding tutorial.

1. Create a new Skyway Project, name it CompanyAddressBook
2. Create 3 Domain Objects (Contractor, Employee, Address) and their fields in Skyway. Fields don’t matter in this example, create any fields you like. Then create the relationships as shown here:
   Contractor 1-to-1 bidirectional to Address
   Employee 1- to-1 bidirectional to Address
3. Scaffold both Contractor and Employee

OPTION 1: Modifying the generated code

In this option, the generated Domain Object code is modified to allow new instantiations of related objects so the Master Domain Object can be used as the form backing object.  This option is quicker than option 2, but you will need to manage the manual changes in the generated code. Another approach to this option is to create use the Skyway Template Project or Modifying Artifact Generation to modify the Data Type JET template.

1. In the Contractor.java file, find the getAddress method and modify it to look like the following (additions in bold):

   /**
   *
   * @generated NOT
   */
   public Address getAddress() {
       if(address == null)
           address = new Address();
   return address;
   

2. In the Web Project > WebContent > WEB-INF > pages > contractor > address > editAddress.jsp:
   1. Copy the address table in the form and paste it in the pages > contractor > editContractor.jsp page.
   2. Remove the hidden field representing the contractor id.
   3. Merge the 2 tables together by removing the first table’s end tag and the second tables begin tag (</table><table>)
   4. Modify path attributes to contain the prefix of the address object (“address.“)

OPTION 2: Use a Skyway Component

In this option, a new Skyway Component is created consisting of the domain objects to serve as the form backing object for the JSP Master Detail form page.  This approach has more steps, but does not modify the generated Skyway code.

1. Create a new Skyway Component named EmployeeAddress in the domain package.  Add both an employee and address variable of their respective types. For each variable’s initial value, type the new instantiation in the Initial Value field (e.g. new Address()).
2. In the EmployeeController > NewEmployee operation:
   1. Remove the employee variable,
   2. Add an employeeAddress variable of type EmployeeAddress,
   3. In the output, remove the employee output variable, and add an output named employeeAddress tied to the employeeAddress variable.
3. In the NewEmployee > defaultAction, change the Variable Assignment expression to be employeeAddress = new EmployeeAddressImpl();
4. In the EmployeeController > EditEmployee operation:
   1. Add a variable named employeeAddress of type EmployeeAddress,
   2. In the output, remove the employee output variable, and add an output named employeeAddress tied to the employeeAddress variable.
5. In the EditEmployee > defaultAction:
   1. Add a Variable Assignment step to the design canvas (make it a start step), and add the following expression: employeeAddress = new EmployeeAddressImpl();
   2. Set the output of the Named Query step to employeeAddress.employee
   3. Assign the Address to the employeeAddress Component by adding another Variable Expression step after the named query and using the following expression: employeeAddress.setAddress(employeeAddress.getEmployee().getAddress());
6. In the EmployeeController > SaveEmployee operation, remove the employee input and add an input of the component type named employeeAddress. Click Save.
7. In the SaveEmployee > defaultAction:
   1. Modify the Call Save Employee step, to use the following input: employeeAddress.getEmployee()
   2. Add another Invoke Operation step to call CompanyAddressBook.com.cab.web.EmployeeController.SaveEmployeeAddress, configure the Inputs and outputs.
8. In the Web Project > WebContent > WEB-INF > pages > employee > address > editAddress.jsp:
   1. Copy the address table in the form and paste it in the pages > employee > editEmployee.jsp page.
   2. Remove the hidden field representing the employee id.
   3. Merge the 2 tables together by removing the first table’s end tag and the second tables begin tag (</table><table>)
   4. In the form tag, change the modelAttribute to employeeAddress
   5. Modify path attributes to contain the prefix of the object, either “employee.” or “address.“

Sample Project

- CompanyAddressBook [Eclipse Project Archive zip | 436KB]