What's the Pay-off?

This database query interface offers some additional possibilities to justify the complexity of this dynamic generation technique. You can enhance the user interface with extensions to enable data editing (for an application in a production environment where data access is impossible) or store various database queries and their associated connection properties for simple database re-connect and query execution. Additionally, by adding a database query tool, the user interface can be used as a data entry mechanism that could be modified at will without the need to re-deploy updates; instead, the database can be updated with a schema and mappings that could be used as the framework for such an application architecture.

Figure 6 shows the results of a query entered in the JSF database browser. The contents in this panel were created at runtime, including the Edit and Delete buttons and their method bindings, the header page number navigator (the input field in the header of the data table) and the footer page control (allowing for data navigation). When a user clicks the Edit or Delete buttons, the Field tab is displayed with the data in the selected row shown in either edit or delete mode. Additionally, the content of the data cells can be customized as needed in the oid column. I changed this column to a link component that enables users to navigate to another page for further data display if desired. Of course, the cells could also contain other components such as option buttons, combo boxes, or other nested components.

Clicking the Edit or Delete button displays the Field tab, enabling the user to modify or delete data (see Figure 7). All content on this panel is entirely generated dynamically, complete with the data grid Back and Next buttons. To make this design even more effective, columns could be designed to indicate read-only attributes, key column distinctions, or other metadata details for clarification, all of which can also be dynamically generated at runtime.

One Size Fits Some

Certainly, before taking the approach of dynamic component creation, you should have a clear vision of what is variable or changing in your interface to ensure it is a candidate for this technique. By no means does this example fit all project requirements. The dynamic generation of components and event handlers, as well as the process flow, can become overly complicated and may even cause maintenance issues. Thoughtful analysis and design are necessary before you can take this approach when building a web application. However, with the proper vision and understanding of what this architecture can provide, applications that support flexible and dynamic content can be developed quickly while reducing testing efforts and minimizing maintenance.

Summary

In this article, you have learned that JSF enables you to connect data elements to web fields with little effort (using standard drag-and-drop functionality provided by various IDEs). Moreover, you've seen that you can create dynamic content and even large sections of a page so that content can be generated at runtime—to support the needs of changing requirements for your application. Depending on your needs and whether your application can support a partial dynamic generation process, this may be extremely helpful when developing your solution.

I developed this sample application using JDK 5.0, Tomcat 5.x and MySQL 4.x. For my next article, I will update the code base using some of the new features in Java 5.0.

Page:   1   2  3