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.

Also verify that you have the latest templates of CobiGen by importing into your workspace the CobiGenTemplates project. To do so, we have to:

• Click on the Eclipse’s menu File > Import > Existing Projects into Workspace and browse to select the workspaces/main/CobiGen_Templates directory.

• Then click Finish and you should have the CobiGenTemplates as a new project in Eclipse’s workspace.

Generation

We are going to generate the CRUD into a sample application that we have developed for testing this functionality. You can clone or download it from here.

After having that sample app, we are going to start implementing the ETO:

package com.cap.ionicBasic.logic.api.to;

import com.cap.general.common.api.to.AbstractEto;
import com.cap.ionicBasic.common.api.sample;

/**
 * Entity transport object of sample
 */
public class sampleEto extends AbstractEto implements sample {

  private static final long serialVersionUID = 1L;

  private String name;

  private String surname;

  private long age;

  @Override
  public String getName() {

    return this.name;
  }

  @Override
  public void setName(String name) {

    this.name = name;
  }

  @Override
  public String getSurname() {

    return this.surname;
  }

  @Override
  public void setSurname(String surname) {

    this.surname = surname;
  }

  @Override
  public long getAge() {

    return this.age;
  }

  @Override
  public void setAge(long age) {

    this.age = age;
  }

  @Override
  public int hashCode() {

    final int prime = 31;
    int result = super.hashCode();
    result = prime * result + ((this.name == null) ? 0 : this.name.hashCode());
    result = prime * result + ((this.surname == null) ? 0 : this.surname.hashCode());
    result = prime * result + ((Long) this.age).hashCode();
    return result;
  }

  @Override
  public boolean equals(Object obj) {

    if (this == obj) {
      return true;
    }
    if (obj == null) {
      return false;
    }
    // class check will be done by super type EntityTo!
    if (!super.equals(obj)) {
      return false;
    }
    sampleEto other = (sampleEto) obj;
    if (this.name == null) {
      if (other.name != null) {
        return false;
      }
    } else if (!this.name.equals(other.name)) {
      return false;
    }
    if (this.surname == null) {
      if (other.surname != null) {
        return false;
      }
    } else if (!this.surname.equals(other.surname)) {
      return false;
    }
    if (this.age != other.age) {
      return false;
    }
    return true;
  }

}

As you can see, this ETO contains 3 attributes: name, surname and age. Those attributes 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 Grid used for generating the page containing the list.

  2. Ionic OASP4J 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 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 page of the list.