Add a database
1. Introduction
This tutorial shows how to create a simple data model, how to add a new database to the project and how to synchronize it with the data model exporting entities and relationhips. Let's get started!
2. Open the WebRatio perspective
If you're not already in the WebRatio perspective, in the main menu select Window > Open Perspective > WebRatio.
3. Create a web project
First of all let's create a new Web Project. In the main menu, click on the File > New > Web Project item, or click on the link below. Enter "DatacentricApplication" for the project name, then click Finish.
4. Create a new entity
Double click on the Data Model box to open the data model editor. Let's add a new entity named "Customer". Select the Entity icon from the left-side palette and click in the work area.
5. Editing entity properties
Edit the Entity properties in the Properties View. Enter "Customer" for the entity name.
6. Adding attributes to the entity
The next step is Adding Attributes to the Entity. Right click on the "Customer" entity and select the Add Attribute command from the menu.
7. Editing attribute properties
You can set the attribute properties in the Properties View. Enter "name" for the attribute name and select "String" as attribute's type. Add other attributes to the entities, such as surname, address, email, and so on.
8. Creating a new database
The next step is to create a database for the data model. Right-click in the work area and select the Add database command from the menu. The tool automatically shows you the Outline panel with the new database node.
9. Editing Database properties
Now in the Properties View you can set the database properties. Enter "Test" for the database name and choose Apache Derby for the database type. The URL has the following format: jdbc:derby://localhost:1527/<databaseName>;create=true where <databaseName> is an arbitrary name. In this way we are saying to Apache Derby to create the database if it does not exist. Finally, enter the username and the password to be used for the connection. Use arbitrary values if you are going to create the database from scratch.
10. Connecting to the database
Now you can establish the connection to the database. Right-click on the Test node in the Outline panel and select the Refresh command from the menu. If the Database properties are correct, the operation ends successfully and the icon of the database changes showing a green rectangle. Moreover, expading the node, you can see the new Metadata node. N.B. In the Properties View the property Default Schema becomes editable. It's a mandatory property. Select the APP option.
11. Synchronizing to the database
Once connected to the database, you can synchronize the data model to the database. Right-click on the Test node and select the Synchronize command from the menu. The tool opens the Synchronize Wizard showing the incoming and the outcoming elements. Select all the elements and right-click on them. Select the Export to Database command from the menu. All the selected elements will be exported in the Derby database. Click on the Next button to go to the next step. In the wizard page you can see the SQL code for the export. Click on the Finish button to end the operation. You can see, as result, that the Metadata node in the outline is now expandible and it shows the metadata of the created tables and views.
Defining contents and business logic
1. Add a new customer
This tutorial walks through the process of creating a new datacentric application with the possibility to add new customers. This is the first step to realize an application that completely manage an entity of your datamodel.
2. Create data model
We will use the data model created before. So if you want to use a different data model or create a new one, follow the steps explained in the section before.
3. Add a site view
First of all let's add a site view to the project. In the first editor tab named Project, click the Site View from the left-side palette. Enter DatacentricApplication for the site view name, then click Finish.
4. Add a page
Select the Page icon from the left-side palette and then click in the site view.
5. Editing page properties
Edit the Page properties in the Properties View. Enter "Customer management" for the page name and check the Home property to mark the new page as the home page of your site view.
6. Add the customer list
Select the Index Unit from the palette and then click in the page. This unit allows to see a list of elements, in this case it will be the list of customers. In the Properties View enter "Customers List" for the unit name. Then click on the button next to the Entity property. Select the Entity Customer from the dialog and click on the Ok button. Now we have to choose which attributes of the entity are displayed in the list. Click on the button next to the Display Attributes property. In the dialog, check the "name" and "surname" attributes. We want to see the surname as first attribute. To reorder the attributes, select the surname attribute and press the Up button until the attribute is at the top of the list. Click on the Ok button to save your choice. We want also that the list is ascending ordered by surname. Click on the button next to the Sort Attributes property. Double click the cell next to the surname attribute and choose "ascending" from the dropdown menu, then click on the Ok button.
7.Add the customer form
In order to add new customers we need a form with all the fields necessary to collect the information. Select the Entry Unit from the palette and then click in the page. In the Properties View enter "Customers Data" for the unit name.
8.Add fields to the customer form
The next step is to add as many fields as the number of the "Customer" entity attributes. Don't consider the oid attribute. To add a field to the form, right-click on the Entry Unit and choose the Add Field command. For each field, enter the name in the Properties View and choose "String" for the type of the field.
9.Add the create customer operation
Now we have to add the operation that insert a new customer into the database. Select the Create Unit from the palette and then click anywhere outside the page. In the Properties View enter "Add customer" for the unit name. Then click on the button next to the Entity property. Select the Entity Customer from the dialog and click on the Ok button.
10.Link the form and the operation
We have to connect the form and the operation in order to bring to the operation all the information submitted by the user. Select the Link from the palette. Click first on the Entry Unit and then on the create operation to place the link. In the Properties View enter "Add customer" for the link name. Then click on the button next to the Coupling property. In the dialog uncheck the Enable Default Coupling option. Click on each parameter and choose from the dropdown the field of the Entry Unit that corresponds to the entity attribute. In order to quickly couple the parameters use the Guess Coupling option, that is able to couple by name the fields and the attributes. Don't consider the oid attribute because the create operation generates itself a new oid for the object. Click on the Ok button to finish.
11.Add the OK Link
The Create operation can end succesfully or not. For this reason we have to place two different links representing these two cases. Let's add the OK link meaning that the customer has been succesfully created. Select the OK Link from the palette. Click first on the create operation unit and then on the page.
12.Add the error page
If the create operation ends with errors we want to see an error page. Select the Page icon from the left-side palette and then click in the site view. In the Properties View enter Error for the page name.
13. Add the KO link
Let's add the KO link meaning that the customer has not been created. Select the KO Link from the palette. Click first on the create operation unit and then on the Error page.
14. Generate the full web project
Click the Generate Full Project button in the main toolbar.
Start Tomcat, open your browser and type the following url: http://localhost:8080/DatacentricApplication.