Tutorial: CRUD on an existing database using Portofino 4.1

In many real life projects, some important design decisions have already been taken by others before we even start to work. This is the case, for example, when we are asked to write a new webapp on top of an existing (legacy) database. The table schema is fixed and cannot be changed. In these situations we have to start from what we have and build the best possible webapp.

In this tutorial I consider a simple, practical example. The given database is Openbravo, the web application framework is Portofino 4.1.

Step by step, I create a functional and pleasant application. In this tutorial I explore the CRUD on a single table: "m_product".

Click on "wizard" to start creating a new app.

Let's start the wizard : configure the connection to the database using JDBC.

Choose the schema.

Let's skip user management . Just click on Next .

Choose to don't generate pages , we will create a new page from scratch.

Click on Finish.

The new app has been created .

Let's have a look at the database schema in the Administration section.

We can see the list of tables. Let's find m_product.

The table details contains the list of columns , we can change the order they appear.

Simply drag-and-drop column's names.

Now return in the home to add a new page , we are going to create the Catalog page.

The new Catalog page it's a CRUD based on the m_product table seen before..

The query is in HQL language and after saving we will see the available columns.

That's what we see after saving , just the first column in the summary.

Click on the Configure button (wrench icon) to show more columns.

Activate other columns and choose their behavior in summary , creation , edit and detail page.

This is what we see after saving , we can do better.

The detail page title is not really pleasant to see.

To change his appearence return in the Administration section.

In the m_product table details we can set a "short name" as an OGNL expression.

Now the detail page looks better.

We can also hide the m_product_id unchecking the right field in the configuration page.

Also the m_product_category_id is not really pleasant to be seen nor really useful.

Let's set a "Short name" also for m_product_category , it will automatically loaded when the system recognise the foreign key.

Now it looks even better but we can also force the system to recognise isactive as a Boolean .

We can change the data type and add Y,N as recognised values.

In the administration section go to the Connection providers page and click on Edit button.

Add Y and N as recognised boolean strings.

Now Isactive behave like a boolean value .

In the configuration page we can change the column name shown in the CRUD .

Active as a boolean value is triggered by a checkbox , the Category can be choosen from a list and Created/Updated date value from a calendar.

Let's make created and updated field not insertable/updatable by the user.

In the Groovy script add the code above to automatically set created and updated value using the current date .

Let's change also the editSetup method to update the updated value when we edit the product.

In the table details we can click on the date field mentioned above and change format .

Now we can also see hours, minutes and seconds in a custom format.

Finish.