howto_ionic client generation

Table of Contents

• Ionic client generation
  • Prerequisites
  • Generation

Ionic client generation

We are going to show you how to generate a CRUD Ionic application from an ETO using CobiGen.

Prerequisites

Before starting, make sure you already have in your computer:

• Ionic: by following the steps defined on that page. It includes installing:

  • NodeJS: We have to use "NPM" for downloading packages.

  • Ionic CLI and Cordova.

If CobiGen_Templates are not already downloaded, follow the next steps:

• Right click on any file of your workspace CobiGen > Update Templates and now you are able to start the generation.

• If you want to adapt them, click Adapt Templates and you should have the CobiGen_Templates as a new project in Eclipse’s workspace.

After following those steps correctly, you should have the latest version of the templates ready to use.

Generation

We are going to generate the CRUD into a sample application that we have developed for testing this functionality. It is present on your workspaces/examples folder (devon4ng-ionic-application-template). If you do not see it, you can clone or download it from here.

After having that sample app, please create an devon4j project and then start implementing the ETO: You will find an example here.

As you can see, TableEto contains 3 attributes: 2 of them are Long and the third one TableState is an enum that you will find here. The Ionic generation works fine for any Java primitive attribute (Strings, floats, chars, boolean…​) and enums. However, if you want to use your own objects, you should override the toString() method, as explained here.

The attributes explained above will be used for generating a page that shows a list. Each item of that list will show the values of those attributes.

For generating the files:

• Right click your ETO file and click on CobiGen > Generate as shown on the figure below.

• Select the Ionic increments for generating as shown below. Increments group a set of templates for generating different projects.

  1. Ionic List used for generating the page containing the list.

  2. Ionic devon4j URL is for stating the server path.

  3. Ionic i18n used for generating the different language translations for the translationService (currently English and Spanish)

Note

By default, the generated files will be placed inside "oasp4ionic-application-template", next to the root of your project’s folder. See the image below to know where they are generated. For changing the generation path and the name of the application go to CobiGen_Templates/crud_ionic_client_app/cobigen.properties.

Now that we have generated the files, lets start testing them:

• First change the server path of your application. For doing that, modify src/assets/ServerPath.ts.

• Check that there are no duplicated imports. Sometimes there are duplicated imports in src/app/app.module.ts. This happens because the merger of CobiGen prefers to duplicate rather than to delete.

• Run Ionic serve on your console and install the dependencies if needed (Looks like a fresh checkout! No ./node_modules directory found. Would you like to install the dependencies → Yes)

After following all these steps, your application should start. However, remember that you will need your server to be running for acessing to the list page.