July 26, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Consuming and Binding EJBs and Data in Creator

  • April 4, 2005
  • By Dick Wall
  • Send Email »
  • More Articles »

Binding Lists and Tables using Collections and Arrays

So far, you have a working EJB API and a simple screen, but it's not very exciting and also not very representative of any real-world usage. You can up the ante by adding a new page with a table of company details in it. The page will use the an EJB method that returns a two-dimensional array of Strings with the details in it, and you will bind the details into the table and display them.

To create the page:

  1. In the navigation view, add a new page. Call it something like ArrayBinding.
  2. In the project navigator, right-click on the new page and select "Set as Start Page."
  3. Open the page, and then drag a Data Table control into it.
  4. The data you are binding in has five fields in each row in the string array. The data in these rows (in order) is: companyId, companyName, formedDate, annualIncome, and numberOfEmployees.
  5. Right-click on the table and select table layout. (Note: You need to select the whole table to see the table layout option. Click on the table repeatedly until the whole table is outlined.)
  6. In the Table Layout dialog, remove the columns that are already defined, then define 5 new ones. For the new columns, fill in (for the Header and Value fields respectively):


  7. Heading Value
    Company ID #{currentRow[0]}
    Company Name #{currentRow[1]}
    Formed #{currentRow[2]}
    Annual Income #{currentRow[3]}
    No. Of Employees #{currentRow[4]}

  8. The above Value setting binds in the current row elements by index name using the JSP 2.0 Expression Language.
  9. Next, you need to bind the array returned from the EJB method into the table. First, drag the CollectionDemoEJB onto the page so that it makes a reference.
  10. Make a property on the page. To do this, there are actually two ways to do this. I am going to use the quicker way:
    • Using the project explorer, open the Java Sources section of the tree, expand out the default package, and find the ArrayBinding.java file. Expand this class, and keep expanding until you see a node that reads "Bean Patterns."
    • Right-click on the Bean Patterns node and then choose Add->Property.
    • When the dialog comes up, set the property name to be companyDetails and the type to be String[][].
    • Hit OK.
    What this has actually done is to create a companyDetails attribute, and a getter and setter for it. You could have accomplished the same by adding the attribute and accessor/modifier yourself, but this way is a little faster.
  11. Now, you need to load the data into the new property in the class constructor. Right-click on the page and select Edit ArrayBinding Java Source; then, go to the Constructor and add the following code after the comment about adding additional code here:
  12. try {
        this.companyDetails = this.collectionDemoEJBClient1.
                              listCompanyDetails();
    }
    catch (RemoteException rex) {
        throw new FacesException(rex);
    }
    catch (NamingException nex) {
        throw new FacesException(nex);
    }
    catch (CreateException cex) {
        throw new FacesException(cex);
    }
    
  13. Save and compile the new code. Remember to use the fast import option to add necessary import statements.
  14. Switch back to the jsp page and click on the table until the whole table is selected. Then, look in the properties and find the Value field; click on the ... button at the side.
  15. In the dialog that comes up, Select the Bind to an Object tab and find the companyDetails String[][] property you just created. Select that and the binding is made.
  16. Now, run the page. You should see a list of three companies details in the Data Table.

Any list or array type can be bound into a data table in this manner. The iterator value will be whatever the elements of that list or array are in order (the default name for the iterator in the table is currentRow). How you use the data from the iterator is of course up to you and you can hit problems with array bounds exceptions or (as you will see below) bean properties that are incorrectly named.

What you have done here is bound a very simple grid of strings into a datatable. The approach is simplem but has a number of limitations. Firstly, the 2d array of Strings can only represent String data, while the datatable control can actually deal with more than just string data. Also, the expressions used to access the data in the table are not very friendly—you need to know the field positions of data in the array columns, for example. One approach to improving this might be to use a HashTable or HashMap to both name the data fields and allow non-string objects to be used.

The EL (Expression Language) to access a HashMap entry would be:

#{currentRow['myfield']}

Instead of using a numerical array index, you use the string key to access the field in the Map. However, an even richer and easier way of accessing data in the DataTable, and for that matter other controls in Creator exists, is that of using serializable beans.

Binding Serializable Objects

By making EJB methods return either Serializable beans, or collections of such beans, you are able to get structured data back to the client from the EJB. The SerializedDemoEJB is an example of doing this.

This is the culmination of the binding process, and you are going to build a moderately complex page for this last one. As a result, the steps will be slightly less detailed. Refer to the previous examples if you get stuck on a particular step.

For this page, you will create a pulldown menu of company names to IDs, a section of information about the company, and then a table of employee details for that company.

  1. Create a new page. Call it CompanyDetails, and set it as the start page.
  2. Open the page, add a dropdown list called companySelect, and text labels and fields for Company Name, Company Formed, Annual Income and Number of Employees. Name the output text fields something meaningful in each case.
  3. Add a data table.
  4. The resulting screen before binding should look something like this:


  5. Click here for a larger image.

  6. One by one, drag a reference to the CollectionDemoEJB and SerializedDemoEJB onto the page.
  7. Locate the CompanyDetails.java node in the project navigator, expand until you see the Bean Patterns, and add the following properties to the Bean Patterns:
    • property companyNameList of type java.util.Map
    • property currentCompany of type com.wallsoft.creator.demo.ejb.Company
    • property employeeDetails of type java.util.List
  8. Right-click on the page and Edit CompanyDetails Java Source.
  9. In the CompanyDetails.java source file, add the following code to the constructor:
  10. try {
       this.companyNameList = this.collectionDemoEJBClient1.
                              getCompanyMap();
       if(this.currentCompany == null) {
          this.currentCompany = 
             this.serializedDemoEJBClient1.getCompanyForId(
                 (String)this.companyNameList.values().iterator().
                         next());
          this.employeeDetails = this.currentCompany.
                                 getEmployees();
    }
    }
    catch(RemoteException rex) {
       throw new FacesException(rex);
    }
    catch(NamingException nex) {
       throw new FacesException(nex);
    }
    catch(CreateException cex) {
       throw new FacesException(cex);
    }
    
  11. What you are doing with this code is setting the map you will use in the dropdown menu, and initializing the current company to the first in the list if it is not already initialized.
  12. Go back to the JSP Page view and highlight the dropdown list. Look in the Application Outline pane (bottom right) and expand the dropdown list node. Select the dropdown1SelectItems node and, in the properties, click the value ... button. (Note: You have to bind the value of the dropdown1SelectItems for the list, not the value of the list itself. Binding the value for the list sets the selected value, not the possible selections.)
  13. In the dialog, go to the Bind to an Object tab and then find and select the companyNameList property for the CompanyDetails bean. This will bind it to the map you retrieved in the above code.
  14. Right-click on the dropdown list and check the "Auto submit on change" option.
  15. Double-click on the dropdown list to go through to the event handler for the selection being changed.
  16. Replace the TODO comment with the following code:
  17.    try {
          this.currentCompany = 
             this.serializedDemoEJBClient1.getCompanyForId(
                     (String)this.companySelect.getValue());
          this.employeeDetails = this.currentCompany.getEmployees();
       }
       catch(RemoteException rex) {
          throw new FacesException(rex);
       }
       catch(NamingException nex) {
          throw new FacesException(nex);
       }
       catch(CreateException cex) {
          throw new FacesException(cex);
       }
    }
    
  18. The above code gets the value from the dropdown list for the selected entry, and using that to do the lookup of the company details in the EJB.
  19. Go back to the JSP page, and select each of the four output text fields in turn, using the value ... button in the properties. Bind them to the relevant fields in the currentCompany property for the page. Note that you can expand the currentCompany bean to see the properties in it; bind the correct properties to the text fields.
  20. Select the whole table, and go to the value ... button. In the dialog, select the CompanyDetails employeeDetails property. The use of the separate employeeDetails property should not really be necessary, but there appears to be a bug in Creator at present where binding currentCompany.employees into the table will not work. Putting it into an intermediate property on the class works and is an easy workaround.
  21. Right-click on the table and select layout. Hint, navigating to the Library References and finding the Employee class in the CreatorDemoClient library will show you the properties available on that class and makes binding in the table easier because you can see the properties available.
  22. Set up the following columns for the table:

    • Header Text:ID, Value: #{currentRow.employeeId}
    • Header Text:Name, value: #{currentRow.name}
    • Header Text:Hired, value: #{currentRow.hireDate}
    • Header Text:Salary, value: #{currentRow.salary}
  23. Save and build; then run. The page should work to allow a company to be selected from the list, and update the details on the page based on the selection.

Conclusion

In this, the final article of three about integrating Creator into an existing development process using EJB APIs to provide a wrapper around the business logic, you have seen the fruits of your labors from the previous articles. Creating and obtaining data through the EJB APIs is only a part of the problem; the data must then be displayed and bound into a Creator GUI (this is, after all, the point of the exercise). This article has detailed increasingly sophisticated methods of displaying and binding data in Creator.

While not covered explicitly in this article, it should be but a step to send updates back through an EJB API to affect the underlying data. (Hint, binding properties in beans causes modifiers to be used automatically when a value changes, and then pass the altered bean back into an EJB API call to update the data it is based on.)

If you have trouble with any of the examples, download and look at the CreatorDemoApp.zip file (see links at the top of this article). A working project with all three examples ready to run in it is there. This should help you find the problems with your own project.

About the Author

Dick Wall is a Lead Systems Engineer at NewEnergy Associates, a Siemens Company based in Atlanta, GA that provides energy IT and consulting solutions for decision support and energy operations. He can be reached for comment on this and other matters at dick.wall@newenergyassoc.com.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel