Tuesday, April 26, 2011

Instant Java Web App Admin Generation with JRapid’s Reverse Engineering

Most web applications have many more model objects exposed on the backend than they do on the front end. Implementing interfaces for all those models is redundant and a waste of time when all you need is CRUD functionality that’s smart enough to handle all your model associations.


JRapid’s reverse engineering process addresses this in a quick and painless way, producing an amazing production ready UI that can be further customized to match the detailed requirements of your web app.


Some of the features you’ll get out of this simple process are:
  • AJAX lists and forms interface for creating, updating, and deleting records
  • RESTful XML API support
  • CSS styling and theming support
  • Full source code and WAR download
You can see the web app that we'll get out of this process here.


The reverse engineering process is still under development and is marked as a beta feature in the menu option that starts the wizard. It basically scans the tables present in a database schema which you may provide by entering a public’s schema connection data or by pasting a SQL creation script. It then creates the necessary entities and properties to manage the database. The process creates the tables in the database development schema created with every JRapid project, and executes any insert statement present in the script.

For this example I’ll be using the BIRT Sample Database. The schema is for Classic Models, a retailer of scale models of classic cars. The database contains typical business data such as customers, orders, order line items, products and so on. The original schema does not include foreign keys, which were added in the script used for this article as they are used by the process to produce a more detailed application.

Download the modified schema creation script from here as we’ll be using it in the next steps. You may see the ER diagram here.

Let’s start by creating an empty JRapid project. You need to be registered as a JRapid user to do this. If you’re not already registered, do so at www.jrapid.com. Projects of up to 20 entities are free, and the sample database has only eight tables.

Once in the JRapid Designer, make sure you update your project’s version to, at least, the 1.0nb80. This is the latest nightly build available at the time of writing. This guarantees certain bug fixes to the reverse engineering process.

Go to the Create menu and select DB Reverse Engineering (Beta).



This will open the Reverse Engineering wizard. Select Paste SQL Dump File in the Discover Mode field and paste the contents of the creation script into the Dump data field. 

Note that your creation script may contain data inserts to include sample data to be imported into your produced app.


After the form is submitted the process generates all the entities and properties corresponding to the tables and columns in the SQL script. As a second step, a new form is shown allowing for further customization.



This forms lists all the entities created and details the properties included, along with the assigned name and label, and the database column name.

It also specifies if the property is an entity-type property that establishes a relationship with another entity. This is where the foreign keys in the original database are used as important information to define this attribute. The last column, Display, indicates which properties are going to be shown as columns in the lists generated for each entity.


Take a look at the image above that shows how the Employees entity is customized. The process defines the relationships with the Offices and Employees entities. It also makes the property corresponding to the column marked as primary key a visible column by default. For this table, the column is employeenumber, but we’ll add the lastName and firstName properties as well.

Click OK to submit the customizations. We must run a code generation to make sure these changes are done. Go to the Generate menu and click on the Generate App files option.


You may use the Organize button to tidy up the entity diagram and see what the process generated for the DB schema.


Our app is ready for us to try it. Click on the Preview menu and select Preview Index.






This will open the main panel for your web app on a new browser tab.


The web app already looks great and has all the functionalities needed to manage your database tables, but we can introduce some tweaks to improve the user experience.

Go back to the JRapid Designer browser tab. Click on the Index panel in the Entity Diagram.


Add the following columns to the panel.


Switch to the Content tab of this same form and change the Header and Footer to better suit our app.


Now refresh the tab were the Panel was opened and take a look at the lists included for easier access.


One more tip: go to the entity diagram and edit each of the date type properties: orderdate, requiredate and shippdate.


For each of these, select jdatepicker as the widget.


This will show a datepicker control when the user makes focus on any of these form fields.


As a last tweak we’ll make an important change to our Orders entity. The process created two entities: Orders and Orderdetails. With some knowledge of the business model and the database design it’s easy to see that an Orders record has many Orderdetails. It is a typical multi-line pattern.

In the Entity diagram we can put our mouse pointer over the add button of the Orders entity and select property to create a new property.


Fill in the form as follows.


Then click OK to submit the changes and a code generation will be executed. If you go back to the application Panel and double click on an Order record you’ll see that the form that opens now shows all the related Orderlines. These can be edited inline, new lines can be added or existing deleted.


This article shows how easy is to obtain a complete management Java web application from an existing database and how simple is to tweak it using JRapid. You can then download the full source code for your application, or a WAR file, and deploy it in your own servers. You can also publish your application to JRapid's production environment, although this is still a beta feature.


Once your app is ready for deployment, you may change the database connection data to point to your original schema and use your new web app to manage it. You can see the final app running here.


No comments:

Post a Comment