Hi everyone. In this series of video, we will get an overview of CUBA Platform and CUBA Studio using a simple application for customers and orders management as an example.
Today we will create a CUBA project and implement UI screens for customer creation and edit.
1.1 Creating a New Project
Start Studio by clicking on its icon.
In a few seconds you will see the welcome screen.
Let's create a new project.
Click on "Create New Project" link on the welcome screen.
In the "New Project" dialog select "CUBA Project" type.
Click the "Next" button.
Specify the project name - "Sales" in our case.
The following properties will be automatically generated in the fields below:
- Project namespace. It is a namespace for domain entities and database tables.
- Root package. It is the root package for project's Java classes.
Click "Finish".
An empty project will be created in the specified folder, and in a moment you’ll see Studio's main screen.
During the first use of the particular platform build, Studio will download sources and binary artifacts of the platform.
When all artifacts are downloaded, the IDE needs to re-index them for better performance, it may take some time.
Therefore, opening the project and assembling the application may take several minutes.
Before starting to work on the project, it is recommended to wait until the background task indicator goes out.
In the center of the screen, you can see a source text of the project build file, you can close it safely.
CUBA project structure is displayed on the left side of the workspace as a tree with various nodes. Using this tree, we can navigate through the project and update it.
- For example, "Properties" node allows us to update project properties like framework version.
- Under "Modules" node we can see the project's modules and files in each module.
- And if we expand "Runs At..." node we'll see the default URL for an application.
1.2 Creating a Simple Entity and Database Update
After the empty project is loaded we can create our first entity - customer and user interface for entity manipulations.
- Right-click on "Data Model" node in the project structure and select New → Entity
- In the entity creation dialog enter entity name - "Customer". Click OK
- Entity Designer will open. Using this designer we can add attributes to the "Customer" - "name" and "email".
- Click on "New" button under the attributes table
- Enter "name" as an attribute Name
- Select "Mandatory" checkbox for this attribute
- Click on "Add" button
- Create an "email" field in the same manner.
- For the "email" field we will add validation and enter an error message "Email is not valid"
The entity is created.
The Text tab of the entity designer allows you to view the source code of the "Customer" class.
The DDL Preview tab, displays the script for creation of the SALES_CUSTOMER database table.
We can close the designer: IDEA saves all changes automatically.
Let’s create the database tables.
- Click on CUBA → Generate Database Scripts.
- Click on "Save and Close" button to create scripts in the project.
Please note that by default Studio implicitly starts local HSQL database server instance in the background when a project is open.
All scripts will be applied to this database.
You can see script sources in the project tree under: project→ data stores→ main data store→ init node.
Then we need to create a database.
Select CUBA → Create database in the application menu.
By default, the database name matches the name of the project namespace.
1.3 Basic UI screen creation
Now let's create the user interface to edit customers.
- Right-click on "Customer" entity and select: New → Screen
- We'll create both browser and editor screens for the "Customer" to simplify things.
- Select a corresponding item in the dialog and click "Next"
- On the next screens you can leave all items unchanged for now
- Click on "Finish" button
You will see four tabs opened - screen controllers and layout XML descriptors.
In CUBA, screen elements and their positions are described in an XML descriptor.
You can review the screens layout by selecting a screen's XML descriptor and click on the "Designer" tab.
1.4 Application Start
Now we're ready to start the application.
Select: CUBA → Start application server.
You will see a console window with application server diagnostic messages.
A few seconds later the link under "Runs At..." node will become active.
Double-click it to access your application using a browser.
The username and password are admin - admin, they are filled in by default.
The application contains three menu items: "Application", "Administration" and "Help".
The first menu item contains "Customers" entry.
By clicking on this item you'll see a customers browse form is opening.
Let's create a customer to ensure that both screens work as expected.
Click on "Create" button to open the customers editor and enter a customer's name.
Let's enter an invalid email address to check if the validator works.
After pressing "OK" button you will see an alert in the bottom right corner with the error message.
Then we can enter a valid email and save the data.
In this video we have created a basic CUBA application and entered some data into the database.
In the next video, we'll implement screens for order creation and discuss a UI screen internals and CUBA views concept.