Generate Application from Model

This tutorial will guide you through the creation of an entity data model and generation of a full-stack Dirigible application, from this model.

Prerequisites

• Access to the latest version of Eclipse Dirigible (3.2.2+)

Overview

In this tutorial we will create an entity model of a car service bookings and generate full-stack Dirigible application from it. The complete sample can be found here.

Setup Car Service Bookings

1. Create new project car-service-bookings
2. Right click -> New -> Entity Data Model
3. Rename file.edm to car-service-bookings.edm
4. Open car-service-bookings.edm

###Brands

1. Drag and drop new entity

   

2. Name it Brands

3. Rename entityId to Id

4. Drag and drop new property

   

5. Rename property2 to Name

6. Open the properties of the Brands entity

7. Open the General tab

8. Set the Type to Primary Entity

9. Switch to the User Interface tab

10. Set the Layout Type to Manage Master Entites

Models

1. Drag and drop new entity

2. Name it Models

3. Rename entityId to Id

4. Drag and drop new property

5. Rename property2 to Name

6. Add new relation between Models and Brands

   

7. Rename the relation property in the Models entity to BrandId

8. Open the relation properties

9. Set Name to Brand

10. Set Relationship Type to Composition

11. Set Relationship Cardinality to one-to-many

12. Open the properties of the BrandId property

13. Switch to the User Interface tab

14. Set Is Major to Show in form only

15. Open the properties of the Models entity

16. Open the General tab

17. Set the Type to Dependent Entity

18. Swith to the User Interface tab

19. Set the Layout Tab to Manage Details Entities

Cars

1. Drag and drop new entity
2. Name it Cars
3. Rename entityId to Id
4. Drag and drop new property
5. Rename property2 to PlateNumber
6. Add new relation between Cars and Models
7. Rename the relation property in the Cars entity to ModelId
8. Open the properties of the ModelId property
9. Open the Data tab
10. Set the Data Type to INTEGER
11. Switch to the User Interface
12. Set Widget Type to Dropdown
13. Set Label to Model
14. Set Dropdown Key to Id
15. Set Dropdown Value to Name

    Note: the dropdown key and value refers respectively to the Models:Id and Models:Name values

Generation

1. Save the model

   

2. Right click on car-service-bookings.model and select Generate

3. Set Template to Full-stack Application (AngularJS)

4. Set Extension to car-service

5. Check Embedded mode

6. Set Title to Car Service

7. Set Brand to Car Service

8. Click Generate

9. Publish the project

Extensibility

Sample view based extension can be found here

Wrap up

The whole application can be found here

Resources

• Sample Car Service Bookings: sample-v3-car-service-bookings
• Sample Data: sample-v3-car-service-bookings-data
• Sample Extension: sample-v3-car-service-bookings-extension