OpenUI5 and OData data bindings with MariaDB – CRUD Full Example- Part 1

OpenUI5 is the open source version of the powerful web MVC framework SAPUI5 created by SAP AG. OpenUI5 is based on web standards (HTML5, CSS, OData, XML, jQuery). The backend is linked using OData, JSON, XML and other data formats. Last but not least OpenUI5 have the same principles created for SAPUI5 (ROLE – BASED, ADAPTIVE, COHERENT, SIMPLE and DELIGHTFUL). For that reason OpenUI5 is a great option to build powerful solutions.

In this tutorial we will create a CRUD (Create, Read, Update and Delete) solution using MariaDB v10.1.21 as database, JPA v2.1, Apache Olingo v2.0.8 and Tomcat v7.0.56 to create an OData service, OpenUI5 v1.46.8 as Front End and Tomcat v7.0.56 as application server all included on XAMPP v5.6.30.

This first part include the installation and configuration of the environments, the data table creation in the database and expose the data table as OData service. The second part will include the OpenUI5 front end with the CRUD concepts implemented.



MariaDB set up

The first step is start up your Apache, MySQL and Tomcat services. 1. Click on Start button of Apache, MySQL and Tomcat. 2. Click on Admin button of MySQL.


In phpMyAdmin portal, open test database and click on New to create a new table.


  • Set People as table name.
  • Set Phone as field name, type = Varchar, Length = 20, Index = Primary.
  • Set Name as field name, type = Varchar, Length = 20.
  • Set LastName as field name, type = Varchar, Length = 20.
  • Set Email as field name, type = Varchar, Length = 50.
  • Click on Save (Guardar) button


JPA OData Service

Download JPA Libraries Dependencies and extract the files.


To create an OData service is required to connect with the data base. In eclipse IDE select Windows / Show View / Data Source Explorer.


Right click on Database Connection folder and click on New.


Find MySQL as Connection Type, Set People_DB as Name. Click on Next.


To create a connection driver click on New Driver Definition button.


If the jar driver file doesn’t exist in eclipse then you will see the “Unable to locate JAR”. Select MySQL JDBC Driver 5.1 and go to Jar List tab.


Remove any driver file that exist by default and add the mysql-connector-java-5.1.18.jar that was downloaded from JPA Libraries Dependencies and press OK.


Set the parameters:

  • Database: test
  • URL: jdbc:mysql://localhost:3306/test
  • User: root

Press on Test Connection button. You should see a success ping message. Click on Finish button.


In eclipse IDE create a new projectRight click on Project Explorer view / New / Dynamic Web Project.


  • Set People_OData as project name.
  • Click on New Runtime
  • Select Apache Tomcat (select de version that you have installed with XAMPP).
  • Click on Next.


Click on Browser button and find your Tomcat installed with XAMPP and click on Finish.


Click on Modify, Check the JPA project face. Click on OK and click on Next. Click Next in Java – src screen too.


  • Select EclipseLink 2.5.x as Platform.
  • Select Disable Library Configuration as JPA implementation.
  • Select Annotated classes must be listed in persistence.xml as Persistent class management. Click on Next.


Check the option Generate web.xml deployment descriptor and click on Finish button.


Copy and paste into People_OData/WebContent/WEBINF/lib folder all the jar files that were downloaded from JPA Libraries Dependencies. Right click on People_OData/WebContent/WEBINF/lib folder and click on Validate option.


In eclipse menu select Project / Clean and select People_OData project and press OK.


We need to create a new JPA Entities from Tables file. Right click on People_OData/ New / JPA Entities from Tables.


  • Select People_DB as connection.
  • People as table.
  • Check List generated classes in persistence.xml
  • Click on Next. In Table Associations screen click on Next too.


In Customize Defaults options, check Always generate optional JPA annotations and DDL parameters option and click on Finish.


Open your persistence.xml and select the connection tab.

  • Set Resource Local as transaction type.
  • Click on Populate from connection to get the values from People_DB. Save the file.


Create a new class:

  • Set main as package.
  • Set PeopleServiceFactory as name.
  • Set ODataJPAServiceFactory as superclass.


Replace all the code in the class PeopleServiceFactory with this code.

package main;

import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;

import org.apache.olingo.odata2.jpa.processor.api.ODataJPAContext;
import org.apache.olingo.odata2.jpa.processor.api.ODataJPAServiceFactory;
import org.apache.olingo.odata2.jpa.processor.api.exception.ODataJPARuntimeException;

public class PeopleServiceFactory extends ODataJPAServiceFactory {

private static final String PERSISTENCE_UNIT_NAME = “People_OData”;

public ODataJPAContext initializeODataJPAContext() throws ODataJPARuntimeException {
ODataJPAContext oDatJPAContext = this.getODataJPAContext();
try {
EntityManagerFactory emf = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);
return oDatJPAContext;
} catch (Exception e) {
throw new RuntimeException(e);


Replace all the code in web.xml file with all this code.


<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns:xsi=”
id=”WebApp_ID” version=”3.0″>

Right click on People_OData project and select Run As / Run on Server.


Select your localhost server and Finish.


To test the OData service put this url in your internet browser: http://localhost:8080/People_OData/peopleService.svc/


The service is running very well.



3 thoughts on “OpenUI5 and OData data bindings with MariaDB – CRUD Full Example- Part 1

  1. Pingback: OpenUI5 and OData data bindings with MariaDB – CRUD Full Example- Part 2 | Innovators at Heart

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s