Hana

SAP HANA Cloud Development Scenario (Getting Started)

SAP HANA Cloud End-to-End-Development Scenarios

Getting Started
Develop your first End-to-End SAP HANA Cloud Application Scenario Version 1.3

1

SAP HANA Cloud Development Scenario (Getting Started)

© Copyright 2013 SAP AG or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see http://www.sap.com/corporateen/legal/copyright/index.epx#trademark for additional trademark information and notices. This tutorial intends to complement SAP product documentation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intende d to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent. Disclaimer: Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components. Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

2

SAP HANA Cloud Development Scenario (Getting Started)

Table of Contents
Table of Contents ......................................................................................................................... 3 Introduction ................................................................................................................................. 5 1 1.1 1.2 1.2.1 1.2.2 1.2.3 2 2.1 2.2 2.3 2.4 2.4.1 2.4.2 2.4.3 2.4.4 3 3.1 Installation ........................................................................................................................ 7 Execute ESPM Installation Guide................................................................................................. 7 Ready-to-Run PersonsList Application Sources ........................................................................... 7 Download ready-to-run PersonsList Application sources ....................................................... 8 Import ready-to-run PersonsList Application projects into your Eclipse .............................. 11 Fetch newest version of Github sources ............................................................................... 13 Develop a SAPUI5-based Web Application ....................................................................... 15 Create Web Project for SAPUI5 Application Development ....................................................... 15 Add a SAPUI5 button to Application View ................................................................................ 22 Extend Web Application UI - PersonsList Table ........................................................................ 26 Deploy and Run SAPUI5 Web Application in SAP HANA Cloud ................................................. 34 Add SAP HANA Cloud library ................................................................................................. 34 Configure your SAP HANA Cloud server in Eclipse ................................................................ 35 Verify that all HANA Cloud Application are in stopped Run State......................................... 36 Publish and Run PersonsList Web Application to Cloud........................................................ 37 Use JPA Model and Persistence Cloud Service for PersonsList Web Application ................. 42 Develop a JPA Model ................................................................................................................. 42

3.1.1 Create a JPA Project .............................................................................................................. 42 3.1.2 Create Person Entity Using the Graphical JPA Editor ............................................................ 46 3.1.3 Maintain Meta-Data of Person entity ................................................................................... 51 3.1.4 Modify personlist web.xml .................................................................................................... 51 3.2 Convert PersonsList Application Eclipse Projects into Maven Projects .................................... 52 3.2.1 3.2.2 4 4.1 Convert PersonsList Eclipse Projects step by step into a Maven Project .............................. 52 Check out Maven-converted PersonsList Projects ................................................................ 70 Bind Application UI and JPA Model via OData Service....................................................... 77 Expose the JPA-based Person Database Entities by means of OData Service .......................... 77

4.1.1 Configuration and Implementation Steps to expose Person Entity as OData Service .......... 77 4.1.2 Test OData Service ................................................................................................................ 82 4.2 Bind PersonsList Application UI and JPA Model via the OData Service .................................... 84 4.3 5 5.1 Publish and Test PersonsList Application on local Server ......................................................... 85 Publish and Run PersonsList Application on SAP HANA Cloud ........................................... 90 Publish and Run PersonsList Application on SAP HANA Cloud.................................................. 90 3

SAP HANA Cloud Development Scenario (Getting Started) 5.1.1 5.1.2 5.1.3 5.1.4 6 7 Configure your SAP HANA Cloud server in Eclipse ................................................................ 90 Verify that all HANA Cloud Application are in stopped Run State......................................... 90 Create a new SAP HANA Cloud server entry in Eclipse ......................................................... 90 Publish and Run PersonsList Web Application on SAP HANA Cloud ..................................... 92 What comes next?........................................................................................................... 95 Tutorial Documentation History....................................................................................... 96

Appendix ................................................................................................................................... 97 Appendix A1: Run the Ready-to-Use PersonsList Application .............................................................. 97 A1.1 Publish and Run PersonsList application on SAP HANA Cloud local server .................................. 98 A1.2 Publish and Run PersonsList application on SAP HANA Cloud ...................................................... 99 A1.3 Maven Build: Run Automated Integration Test (UI5 Selenium Tests) ........................................ 102 Appendix A2: Automated Integration Testing (UI5 Selenium Tests) .................................................. 104 A2.1 Add the integration test dependencies in pom.xml ................................................................... 104 A2.2 Add integration test profiles in pom.xml .................................................................................... 104 A2.3 Create Integration Test ............................................................................................................... 106 Appendix A3: Compare developed with Best Practice PersonsList Application ................................. 110 A3.2 Compare Example: PersonsList Maven Project .......................................................................... 110

4

SAP HANA Cloud Development Scenario (Getting Started)

Introduction
What do you get here?
In this tutorial you develop your own end-to-end PersonsList Web Application from UI to Database and publish and run each developed increment on SAP HANA Cloud local runtime for testing and finally on SAP HANA Cloud You will learn the basics of developing with SAP's PaaS offering: How to setup the Eclipse development environment, program with SAP's HTML5 toolkit and the cloud-based persistence service, test locally and finally deploy to the cloud.

Development Scenario Overview
Development Scenario Overview in one picture

SAP Technology used: SAP HANA Cloud, UI Development Toolkit for HTML5 (SAPUI5), SAP OData (Connectivity)

5

SAP HANA Cloud Development Scenario (Getting Started)

Develop PersonsList Web application with HTML5 & JPA persistence
The Web application in this scenario consists of a HTML5 user interface that connects to a JPA-based persistence layer via OData.

Execute the step-by-step descriptions of the five chapters of this tutorial and you get familiar with the basics of how to develop end-to-end applications on SAP HANA Cloud.

PersonsList Development Scenario in five Steps

6

SAP HANA Cloud Development Scenario (Getting Started)

1 Installation
Overview
Before developing your HANA Cloud End-to-End Scenario, you need to download and set up the necessary tools, which include e.g. Eclipse IDE for Java EE Developers and Eclipse Tools for SAP HANA Cloud.

1.1 Execute ESPM Installation Guide
Make sure that you have executed all steps of chapter 1 of the ESPM Installation Guide before continuing with this tutorial. You don’t need to execute chapter 2 and 3 of the downloaded ESPM Installation Guide. Download ESPM Scenarios Installation Guide from here:  http://scn.sap.com/docs/DOC-46868

After you executed the chapter 1 you have the necessary tools, programs, account installed and configured to execute this Getting Started tutorial. Continue with the download of the ready-to-run PersonsList application sources as described in the following section 1.2.

1.2 Ready-to-Run PersonsList Application Sources
In this section you will download the PersonsList application sources as a Git Repository and import the corresponding projects into your Eclipse workspace.  Download ready-to-run PersonsList Application sources (section 1.2.1)  Import ready-to-run PersonsList Application projects into your Eclipse (section 1.2.2) These downloaded sources contain the final version of the PersonsList application as it is developed in this step-by-step tutorial. By means of this final version can quickly run the PersonsList Application locally and on SAP HANA Cloud before you start developing it step-by-step. After the next section it is explained how you do this. But the downloaded sources do not only contain the final version of the PersonsList application. You can also get those application sources which correspond to each section of the tutorial. This enables you to compare your developed PersonsList application sources with the original and correct PersonsList sources. This will help you to analyze problems which might occur in your developed 7

SAP HANA Cloud Development Scenario (Getting Started) PersonsList due to wrongly executed instructions, typos etc. After you develop your first own PersonsList project sources in chapter 2, we explain how you can compare your developed sources of a certain section with the original sources.

1.2.1 Download ready-to-run PersonsList Application sources
1. Open Git Repositories view. Eclipse main menu, choose Window  Show View  Other...; On the opened Show View select Git  Git Repositories and confirm with OK to open the view. In the following screenshot Git Repositories View was dragged and dropped under the Project Explorer view.

2. Open URL https://github.com/SAP/cloud-personslist-scenario/ Find the icon next to the Git Repository clone URL (the actual page layout as shown in the next screenshot might look different, but somewhere on the page your will find the icon).

3. Choose "Copy Git URL to Clipboard" icon (as shown in the screenshot above).

8

SAP HANA Cloud Development Scenario (Getting Started)

Some Web Browser version does not copy the input field URL correctly to the clipboard when clicking Copy Git URL to Clipboard icon. In this case select the URL of the input field and copy it. The effect of a not correctly copied URL is that the Clone Git Repository wizard page is empty and not pre-filled with the correct values as displayed in the screenshot of the following step. 4. Back in Eclipse IDE: In the Git Repositories view choose Clone a Git Repository link (as
shown in the next screenshot)

This opens the Clone Git Repository wizard where the three fields URI, Host and Repository path are already pre-filled with the correct values (due to the copy to clipboard action before). 5. Choose Next and make sure all branches (master, section-2.1, etc.) nodes are selected.

9

SAP HANA Cloud Development Scenario (Getting Started)

6. Choose Next

7. Specify a directory where you want to download the cloud-personslist-scenario Git repository
We suggest to use C:\dev\git\ (which is named in the following as <local-gitrepo-path>) 8. Keep the other default settings and choose Finish This will create a node cloud-personslist-scenario[master] in your Eclipse Git Repositories view.

10

SAP HANA Cloud Development Scenario (Getting Started)

With these steps you have downloaded the ready-to-run PersonsList sources as Git Repository to your local computer and you can start working with it. In the following section you will see how to import the final version to your Eclipse workspace.

1.2.2 Import ready-to-run PersonsList Application projects into your Eclipse
In your Eclipse Git Repositories view navigate to cloud-personslist-scenario/Branch/Local and Remote Tracking nodes and expand both.

The version of commit messages of the branches (in the above screenshot the version is [v-1.2]) might already be higher. Make sure that this sources version corresponds to the Getting Started PersonsList Scenario.pdf version you are executing (.pdf document version is displayed on the cover page). As you can see there is one child node (or local branch) master. Under Remote Tracking you find more branches which starts with “section-<Number>”. These “sections” branches corresponds to the developed PersonsList sources after executing the step-by-step tutorial till a certain section which name is part of the branch name.

11

SAP HANA Cloud Development Scenario (Getting Started) Later you will see how to check out a certain “Remote Tracking” section branch as local branch and retrieve this PersonsList source state to compare your so far developed PersonsList application with it or just run the best practice PersonsList application at a certain point in the tutorial.
The Local branch master is decorated by a checked icon. The checked icon means that the PersonsList source of this branch is currently checked out. The master branch contains the final version of the PersonsList application and is therefore the so called final ready-to-run version. Below we describe how you import this ready-to-run application into your Eclipse workspace. With the imported project you can first run the Application in its final version before you start developing you own PersonsList application from scratch beginning with chapter 2.

Import Ready-to-Run PersonsList Application Projects
As the final version of the developed PersonsList application consists only of Maven projects you will import this version as Maven Projects into your Eclipse.

This projects import is the first prove if the installed and configured Maven integration in Eclipse works (e.g. properties in settings.xml in Error! Reference source not found. are correctly defined). 1. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\git\cloudpersonslist-scenario (or where you downloaded before the personslist Git Repository) Maven analyses then the PersonsList application projects and depending on your bandwidth and if you are using Maven for the first time, this calculation might take a few minutes)

3. Choose Finish The import of the final ready-to-run PersonsList application projects starts. As the before Maven calculation took already some time, the actual import will download many artifacts (libraries, jars) in the local Maven repository (located at <local-user-homepath>\.m2\repository) and takes therefore again a longer time if you are using Maven for the first time. Finally three projects personslist-repo, personslist-repo-model-jpa and personslist-repo-web are imported as should not be decorated with no error markers. 12

SAP HANA Cloud Development Scenario (Getting Started)

These best practice PersonsList projects are code-wise almost the same as what you will develop step-by-step as PersonsList application starting with chapter 2. The make it easy to compare your developed increments with the best practice application as shown later in this tutorial. But there is one difference: The project names of the best practice application contain an additional “-repo” string which your developed application will not contain. Through this both the best practice and the developed PersonsList projects can work in parallel in your Eclipse IDE.

1.2.3 Fetch newest version of Github sources
When you execute the first time this Getting Started PersonsList Scenario.pdf in a certain version (e.g version 1.2 as displayed on the cover page) then the document corresponds to the corresponding version of Personslist Github sources. The version of the Personslist Github sources can be seen in the Git Repositories view as shown in the following screenshot (the version is the first part of the commit message header of each branch)

As soon as a new version of the Getting Started PersonsList Scenario.pdf is published on SCN, either because something needed to be fixed or a new feature was included you should to make that you also get the corresponding Personslist Github sources which corresponds to the version of the document you are working with. Assume you had already downloaded the version 1.2 of the Personslist Github sources and you want to fetch the newest available (e.g. version 1.3). Then execute the following simple steps to get the newest available sources from Github.

1. In Git Repository view select cloud-personslist-scenario root node. 2. Open context menu and choose Fetch from Upstream

13

SAP HANA Cloud Development Scenario (Getting Started) 3. Confirm the Fetch Results dialog with OK

With this you have updated your local Git repository with the newest sources available on Github.

What comes next after this Installation part?
You have now two options how to continue with this tutorial 1. You start immediately developing your own PersonsList application in chapter 2 (“Develop a SAPUI5-based Web Application”). Or 2. You start first with the ready-to-run PersonsList application on local runtime and on HANA Cloud in “Appendix A1: Run the Ready-to-Use PersonsList Application”. And after doing that you develop your own PersonsList application in chapter 2 Decide what you prefer to do next.

14

SAP HANA Cloud Development Scenario (Getting Started)

2 Develop a SAPUI5-based Web Application
Overview
In this section you will create a Web Project and add a simple SAPUI5 control (HelloWorld button). Then you will extend the Web Project and create a UI5 data table which displays person entities. You will learn how to use the SAPUI5 SDK documentation to add the data table and other SAPUI5 controls. Steps to create the SAPUI5 Persons Data Table:  Create the SAPUI5-based Web Application project (section 2.1)  Add a SAPUI5 button to Application View (section 2.2).  Extend Web Application UI - PersonsList Table (section 2.3)

2.1 Create Web Project for SAPUI5 Application Development
1. From the Eclipse main menu, choose File  New  Other... New dialog opens. 2. Select SAPUI5 Application Development  Application Project and choose Next 3. In the Project name field, enter personslist-web. Do not change the name personslist-web here as the Maven pom files in chapter 3 will rely on this name.

15

SAP HANA Cloud Development Scenario (Getting Started) 4. Deselect the "Use default location" option enter the following path, the location where the personslist-web project will be located C:\dev\personslist\personslist-web Additional Info: PersonsList Project Structure The reason why we do not choose the default location is that later we will add two other projects to the entire PersonsList Application. One of these projects the personslist-model-jpa contains the Person entity as JPA model (chapter 3.1.1) and the second is the root project personslist (chapter 3.2.1) which contains common Maven build artefacts. In preparation to develop this project structure for the PersonsList Application we do not use the default location
personslist |- .project | |- personslist-model-jpa | |- .project | |... | |- personslist-web |- .project |...

5. Make sure that the Create an initial View option is selected. 6. Choose Next

7. In the Name field, enter personslist. 16

SAP HANA Cloud Development Scenario (Getting Started) 8. Make sure that JavaScript option is selected as Development Paradigm. 9. Choose Finish to create the personslist-web SAPUI5 Application project. After this creation the three main files of the project index.html, personslist.controller.js and personslist.view.js are opened in the editor area Your Eclipse IDE should look similar as in the following picture

In the following we removed the three personslist-repo projects from Eclipse workspace to focus on the newly developed project(s) only. You can do this as well as shown in the following picture

In case a Delete Resources dialog comes up and complains about “not in sync” resources then confirm with Continue. You can always re-import the three personslist-repo projects by using File  Import... ; Maven  Existing Maven Projects as described before in section 1.2.2

17

SAP HANA Cloud Development Scenario (Getting Started)

Optional Info: Details of the created SAPUI5 Application Project Select the personslist-web project  Open context menu  Choose Properties Properties for personslist-web dialog opens  The web application project contains the Dynamic Web Module, Java and JavaScript facets

 Two SAPUI5 Libraries, Core and Server Side Libraries are added to Java Build Path

These SAPUI5 libraries are used when you deploy later the application to the local server runtime 18

SAP HANA Cloud Development Scenario (Getting Started)

 The SAPUI5 Core Libraries is added as Library to the JavaScript Include Path

This ensures that SAPUI5 code completion and displaying JavaDoc of the corresponding SAPUI5 classes works. For details how SAPUI5 code-completion and JavaDoc works see SAPUI5 Developer Guide  Link java script files with editor To link a java script file with an editor, which mean you select e.g. an open editor of a java script file and then the corresponding java script file in the Project Explorer view is selected

a) Choose View Menu from Project Explorer toolbar (1.) b) Choose Customize View... (2.) c) Switch to Content tab and unselect the entry JavaScript Elements then choose OK. (3. and 4.) d) Choose Link with Editor (5.) as shown in the next picture an see how the project tree is expanded and selects the editor which is currently opened and in focus

19

SAP HANA Cloud Development Scenario (Getting Started)

5. A JavaScript view personslist.view.js and a controller personslist.controller.js has been created at location personslist-web/WebContent/personslist-web

 The personslist.view.js will be used to define the visual parts (SAPUI5 controls) of the Persons List Application developed in this tutorial.  The personslist.controller.js will handle the control flow of the application triggered through actions from the view (e.g. button clicked). For more details of the View/Controller pattern of a SAPUI5 application project see SAPUI5 documentation Model View Controller(MVC) Approach

20

SAP HANA Cloud Development Scenario (Getting Started)

6. An index.html has been created at location personslist-web/WebContent The index.html is the main entry point of the application to be created: It contains a first JavaScript section where the SAPUI5 bootstrap script is defined. It ensures which sapui5 runtime libs are available. By default the sap.ui.commons ui lib and the sap_goldreflection ui-theme lib are used.

7. The second JavaScript section calls the view personslist.view.js and places the content from the view (as defined in the createContent function in the view) and places the content in <div> section with id="content".

As you can see in personslist.view.js, the createContent function is empty, so that the current application would simply display an empty html page if index.html is called. 21

SAP HANA Cloud Development Scenario (Getting Started)

Additional Info: HANA Cloud SDK Samples Many technical aspects which will be included into the developed personslist-web application are coming from the HANA Cloud SDK samples. The different samples in the HANA Cloud SDK focus on single aspects like SAPUI5, persistence service or building HANA Cloud applications with Maven. Whereas the personslist web application will integrate many of these aspects in the application. For more details about the HANA Cloud SDK samples and how they use Maven as build technology see here
In the following tutorial sections you will develop the intended PersonsList UI by means of SAPUI5 technology.

2.2 Add a SAPUI5 button to Application View
2. In the short SAPUI5 Getting Started documentation it is explained how to create a SAPUI5 button on an HTML page. The same SAPUI5 button can be added to the personslist.view.js as described by the following steps. 3. Modify personslist.view.js and create a SAPUI5 HelloWorld button: a. In the opened editor of personslist.view.js, add to the createContent : function(oController)function the following content:
// create the button instance var myButton = new sap.ui.commons.Button("btn"); // set properties, e.g. the text (there is also a shorter way of setting several properties) myButton.setText("Hello World!"); // attach an action to the button's "press" event (use jQuery to fade out the button) myButton.attachPress(function(){$("#btn").fadeOut();}); return myButton;

b. Save the js file. The personslist view (sap.ui.jsview) returns a simple SAPUI5 button (sap.ui.commons.Button) via the createContent function. In index.html an instance of this personslist view is created and the view instance uses placeAt to place the result of the view (here the button) at the HTLM div with id=”content”. For this the application has to be published on a server as follows. 4. Create a new HANA Cloud local runtime server a. Select the Servers view If it is not open, then choose in Eclipse main menu, choose Window  Show View  Other...; On the opened Show View select Server  Servers and confirm with OK to open the view. b. In Servers view click on new server wizard... link (or open context menu and choose New)

22

SAP HANA Cloud Development Scenario (Getting Started)

c. Window New Server opens.

If there is a "How do you want to select the server" option on the wizard page, then make sure that the Manually define a new server option is selected. d. As server type, select SAP  SAP HANA Cloud local runtime. e. Keep the Server (host, name and runtime environment) values as shown in the screenshot

23

SAP HANA Cloud Development Scenario (Getting Started) f. Choose Finish. A local runtime server node appears in Servers view and a folder Servers is created and appears in the navigation tree of the Eclipse IDE. It contains configurable folders and files you can use, for example, to change your HTTP or JMX port.

5. Run personslist-web Application on the created local HANA Cloud server a. Open personslist-web/WebContent/index.html with HTML Editor b. On the index HTML Editor, open context menu Run As  Run on Server. c. Run On Server dialog opens. Make sure that the Choose an existing server option is selected. d. Select server localhost  SAP HANA Cloud local runtime. e. Choose Finish. The local runtime starts up in the background and your personslist-web Application is installed, started and ready to serve requests. The external Web Browser opens (as you configured in the ESPM Installation Guide, there in section 1.8) and shows the SAPUI5 Hello World button.

24

SAP HANA Cloud Development Scenario (Getting Started)

Confirm that button disappears when clicking on it. Additional Info: Runtime Server for SAPUI5 Applications In the above example we used SAP HANA Cloud local runtime to publish and run the SAPUI5 application. The reason for this is, that the application to be developed during this tutorial, is targeted to be deployed on HANA Cloud and will work for the entire tutorial. We mention here that you could use a light-weight runtime to develop pure SAPUI5 Applications as explained in the following steps: 1. Select personslist-web/WebContent/index.html 2. Open context menu Run As  Run on Server  Web App Preview

Web App Preview editor opens the SAPUI5 application and displays the expected HelloWorld! button 25

SAP HANA Cloud Development Scenario (Getting Started)

Additional Info: HANA Cloud local runtime The publishing to the SAP HANA Cloud local runtime server of the .html file with the SAPUI5 control works the same as for the HelloWorld Servlet Tutorial described here

2.3 Extend Web Application UI - PersonsList Table
Now you extend the simple HelloWorld button by a UI, which consists of three SAPUI5 controls as drafted in the following picture

UI draft:

UI User interaction should look like 1. User enters a person's firstname and lastname in the Text Fields 2. User choose then the Add Person Button (the persons data is submitted to the controller which adds it to the model) 3. Entered person name is taken from the model and displayed in a Table

26

SAP HANA Cloud Development Scenario (Getting Started)

Additonal Info: How to get SAPUI5 table and other controls source code from? By means of a detailed SAPUI5 documentation developers can start implementing their Application UI with SAPUI5 controls: For developing the above explained controls and corresponding user interaction we sketch here how you could get code snippets from SAPUI5 documentation for corresponding controls. Note: Here we just sketch it but after this info box you execute the next tutorial steps.  Open SAPUI5 SDK - Demo Kit (Controls)  On the Controls tab and select in the detailed navigation Complex Controls  Table

 For the selected SAPUI5 control (in this case the table) you get a short overview about the control and one or more example(s) show how the control could look like.

27

SAP HANA Cloud Development Scenario (Getting Started)

 Choose the Show Source link An area under the displayed SAPUI5 control opens. The corresponding source code is displayed there and can be copied and pasted into your application code.

In the below personlist-web application you will modify the Table source code as found in the SAPUI5 documentation a bit so that it fits the above drafted UI of our application. For code details see next section "Add SAPUI5 table code to your application" and here the modification as a list  The Table source code example already contains a button in the header. You just have to rename it to "Add Person"  Place a Label and Text Field controls left to the Button (search in the SAPUI5 controls tab for the Label and Text Field to get the source code)  Then modify a bit the Table control to just display Firstname and Lastname as columns  The Table control and the AddPerson button is added to the view personslist.view.js  The AddPerson actions results in the controller personslist.controller.js, where it adds the user entered values to the oPersonsModel  After binding the oPersonsModel the view displays the new Person value in the Table All these modifications have been done in the below JavaScript code of personslist.view.js and personslist.controller.js.

28

SAP HANA Cloud Development Scenario (Getting Started)

Add SAPUI5 table code to your application
1. Modify index.html: a. In the Project Explorer view, expand the personslist-web/WebContent node. b. Select index.html, and from the context menu choose Open With  HTML Editor. c. Replace the existing sap-ui-bootstrap script section with the following code, so that the sap.ui.table gets added as additional data-sap-ui-lib.
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection" > </script>

d. Save editor 2. Modify personslist.view.js: a. In the Project Explorer view, expand the personslist-web/WebContent/personslistweb node. b. Select personslist.view.js, and from the context menu choose Open With  JavaScript Editor. c. In the opened editor, replace the content of the createContent : function(oController) with the following content:

29

SAP HANA Cloud Development Scenario (Getting Started)
createContent : function(oController) { // Create an instance of the table control var oTable = new sap.ui.table.Table({ title : "Persons List", visibleRowCount : 7, firstVisibleRow : 3, selectionMode : sap.ui.table.SelectionMode.Single, }); // toolbar var oTableToolbar = new sap.ui.commons.Toolbar(); // first name field var oFirstNameLabel = new sap.ui.commons.Label({ text : 'First Name' }); var oFirstNameField = new sap.ui.commons.TextField({ id : 'firstNameFieldId', value : '', width : '10em', }); oFirstNameLabel.setLabelFor(oFirstNameField); oTableToolbar.addItem(oFirstNameLabel); oTableToolbar.addItem(oFirstNameField); // last name field var oLastNameLabel = new sap.ui.commons.Label({ text : 'Last Name' }); var oLastNameField = new sap.ui.commons.TextField({ id : 'lastNameFieldId', value : '', width : '10em', }); oLastNameLabel.setLabelFor(oLastNameField); oTableToolbar.addItem(oLastNameLabel); oTableToolbar.addItem(oLastNameField); // add button var oAddPersonButton = new sap.ui.commons.Button({ id : 'addPersonButtonId', text : "Add Person", press : function() { oController.addNewPerson(sap.ui.getCore().getControl( "firstNameFieldId").getValue(), sap.ui.getCore() .getControl("lastNameFieldId").getValue(), oTable); } }); oTableToolbar.addItem(oAddPersonButton); oTable.setToolbar(oTableToolbar); // define the columns and the control templates to be used oTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({ text : "First Name" }), template : new sap.ui.commons.TextField().bindProperty("value", "FirstName"), sortProperty : "FirstName", filterProperty : "FirstName", width : "100px" })); oTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({ text : "Last Name" }), template : new sap.ui.commons.TextField().bindProperty("value", "LastName"), sortProperty : "LastName", filterProperty : "LastName", width : "200px" })); // bind table rows to /Persons based on the model defined in the init method of the controller oTable.bindRows("/Persons"); return oTable; }

d. Save the JavaScript editor.

30

SAP HANA Cloud Development Scenario (Getting Started)

Formatting of the copied JavaScript Code After you copied the JavaScript code from this pdf file into your Eclipse editor the copied source file is not well formatted. To format it, select the copied part in the editor and then open context menu and choose Source Format.

3. Modify personslist.controller.js: a. In the Project Explorer view, expand the personslist-web/WebContent/personslistweb node. b. Select personslist.controller.js, and from the context menu choose Open With  JavaScript Editor. c. In the opened editor, replace the content of the onInit: function() with the following content:

31

SAP HANA Cloud Development Scenario (Getting Started)
onInit: function() { var oPersonsModel = new sap.ui.model.json.JSONModel(); oPersonsModel.setData({ Persons : [ { FirstName : "", LastName : "" } ] }); this.getView().setModel(oPersonsModel); }, addNewPerson : function( sFirstName, sLastName, oTable ) { var oPersonsModel = new sap.ui.model.json.JSONModel(); oPersonsModel.setData({ Persons : [ { FirstName : sFirstName, LastName : sLastName } ] }); this.getView().setModel(oPersonsModel); oTable.unbindRows().bindRows("/Persons"); },

d. Save the JavaScript editor.

Publish and Run SAPUI5 Web Application on SAP HANA Cloud local runtime
Execute the following steps to publish and run personslist-web Application on local server 1. Open personslist-web/WebContent/index.html with HTML Editor 2. Place your cursor in the opened HTML Editor and open context menu Run As  Run on Server. 3. Window Run On Server opens. Make sure that the Choose an existing server option is selected. 32

SAP HANA Cloud Development Scenario (Getting Started) 4. Choose Finish. The local runtime starts up in the background and your personslist-web Application is installed, started and ready to serve requests. The External Web Browser defined before opens in an external window (see ESPM Installation Guide section 1.8) displaying the intended Persons Table.

Confirm that entering a First Name and a Last Name and subsequent click on the AddPerson button will result in displaying the First Name / Last Name pair in the table.

So far every newly added person name replaces the before entered. As no persistence for the persons entities has been implemented until now each newly entered and added value is just displayed and the before has gone. In the next chapter 3 you will learn how to use HANA Cloud Persistence Service to store entities of an application in a database. But before this you quickly see in the following section 2.4 how to publish and run the so far developed SAPUI5 Web Application to your SAP HANA Cloud Developer Trial Account.

33

SAP HANA Cloud Development Scenario (Getting Started)

2.4 Deploy and Run SAPUI5 Web Application in SAP HANA Cloud
In this section we quickly show how you deploy the so far developed PersonsList SAPUI5 Web Application to your SAP HANA Cloud Developer Trial Account. Prerequisite is that you know your SAP HANA Cloud Developer Trial Account data  SAP HANA Cloud Developer Account name: "<your p-User>trial" (p-user with lower case)  (SCN) user name: <your P-User> (alternatively <e-mail> as user)  (SCN) user account password: <********> which you created before in the ESPM Installation Guide (there in section Error! Reference source not found.) In this section we show how the developer, Lisa Gordan, would deploy and run the Customer Reviews web application on her SAP HANA Cloud Trial Account. Lisa Gordan has an SCN user account for p-user: p1940159689 and a developer HANA Trial account: p1940159689trial, which you will in all below screenshot and corresponding steps. In all steps of this section use your own SCN user account (p-user/password) and SAP HANA Cloud developer trial account instead of the one of Lisa Gordan.

2.4.1 Add SAP HANA Cloud library
1. Select personslist-web project node 2. Open context menu and choose Properties

a. Choose Java Build Path b. Select Libraries tab c. Choose Add Library… 34

SAP HANA Cloud Development Scenario (Getting Started) d. In the opened Add Library dialog choose Server Runtime e. Choose Next

f. Select SAP HANA Cloud and choose Finish 3. Back on the Properties for personslist-web dialog choose OK

2.4.2 Configure your SAP HANA Cloud server in Eclipse
You will now specify within the Eclipse preference your developer trial account data.
1. From the Eclipse main menu, choose Window  Preferences 2. Navigate to Server  SAP HANA Cloud

35

SAP HANA Cloud Development Scenario (Getting Started)

3. Enter corresponding account name, SCN user name and enter the host hanatrial.ondemand.com. Also navigate via Browse... to the SAP HANA SDK you downloaded before. SAP HANA cloud account names must only contain lowercase letter and digits. The fact that SCN user accounts work with capital or lower case letter (e.g. p1940159689 or P1940159689) while SAP HANA Cloud account only works with lowercase (e.g. p1940159689trial) is a bit confusing. Therefore you should avoid problems by always using your SCN user name with a lower case letter. 4. Confirm with OK These SAP HANA Cloud account settings will be from now on used as default when you create a new SAP HANA Cloud server from Eclipse.

2.4.3 Verify that all HANA Cloud Application are in stopped Run State
With your SAP HANA Cloud trail account you can publish many web application on your account but only one application is allowed to be started. As you want to publish and start a new web application, i.e. PersonsList, on your trial account, you need to make sure that no application is started any more (as you might have started the welcome application) Execute the following steps to make sure that all application on your trial account are stopped. 1. Open SAP HANA Cloud cockpit by launching the following https://account.hanatrial.ondemand.com/cockpit

36

SAP HANA Cloud Development Scenario (Getting Started)

2. In case the Log On page appears enter your credentials and choose Log On After this the HANA Cloud cockpit appears

3. If an application is in Started Run State (like in the above picture the “espm” application, which a user could already see if the entire ESPM Installation Guide was executed before) then choose the Stop icon button. Confirm the Stop Application dialog with OK to stop this application.

2.4.4 Publish and Run PersonsList Web Application to Cloud
1. Select personslist-web project node 2. Open context menu Run As  Run on Server. Window Run On Server opens.

37

SAP HANA Cloud Development Scenario (Getting Started)

a. Make sure that the Manually define a new server option is selected. b. The Server’s host name should be correctly pre-filled with handtrial.ondemand.com according to the before configured Eclipse preferences. 3. Choose Next.

a. Enter personslist as Application name b. The Cloud Account name (your <p-user>trial) and (SCN) User name (<p-user>) should be correctly pre-filled according to the before configured Eclipse preferences. 38

SAP HANA Cloud Development Scenario (Getting Started) c. Then enter your SCN account password. 4. Choose Finish. After this the PersonsList Web Application is published to the specified Developer account on SAP HANA Cloud. In Servers view a corresponding servers node next to the before created local SAP HANA server runtime is created and its status indicates publishing, starting and finally started.

Then started PersonsList Web application is automatically launched in the defined external Web Browser

The URL indicates that the application runs this time not on localhost but on the hanatrial Cloud Landscape with is accessible by every internet user. From Eclipse Servers view you can now delete the server node without stopping and deleting it by executing these steps: 39

SAP HANA Cloud Development Scenario (Getting Started)

a. Select personslist hanatrial server node in Server view. b. Open context menu choose Delete c. Deselect option Stop servers before deleting (which means: only delete the servers node in my Eclipse IDE and keep the started Web application in the Cloud running) (If you select the option, then the server where your application is currently started is stopped and by this your application is stopped and deleted as well from the server) d. Choose Delete This removed the personslist hanatrial server node from your Eclipse Servers node but keeps the application in the HANA Cloud running Confirm that the personslist is still running in the cloud a. Open https://account.hanatrial.ondemand.com/cockpit to launch your SAP HANA Cloud cockpit b. Log in with your SCN User and Password

40

SAP HANA Cloud Development Scenario (Getting Started) The personslist web application is still running. By clicking on the personslist link itself you will switch to the application page where you could find the application launch URL. c. Choose Stop to stop your personslist application

d. Choose Delete to delete your personslist application from your Cloud account. You have learned by this how to deploy and run your first SAPUI5-based web application on the HANA trial account. In Chapter 5 your will learn some more details about running web applications in the cloud when you deploy the persistence enabled PersonsList Web application. As already mentioned above you will create now the persistence of the PersonsList Web Applications in the following chapter 3.

41

SAP HANA Cloud Development Scenario (Getting Started)

3 Use JPA Model and Persistence Cloud Service for PersonsList Web Application
Overview
In this section you extend the Web Application to store person entities in a database which works in the cloud. For this you will make use of JPA and HANA Cloud persistence service. Steps to extend the PersonsList Web Application to use cloud database for storing data:
 

Develop a Person JPA Model (section 3.1) Convert PersonsList Application Eclipse Projects into Maven Projects (section 3.2)

3.1 Develop a JPA Model
In this section, you develop a SAP HANA Cloud JPA Project that describes the JPA model. A JPA model contains a persistence descriptor (persistence.xml) that describes the defined persistence unit, which in turn defines the entity classes.

3.1.1 Create a JPA Project
1. From the Eclipse main menu, choose File  New  JPA Project. The New JPA Project wizard opens. 2. Enter personslist-model-jpa as the project name. Do not change the name personslist-model-jpa here as the Maven pom files later in this chapter will rely on this name.

42

SAP HANA Cloud Development Scenario (Getting Started)

3. Deselect the Use default location option enter the following path, the location where the personslist-model-jpa project will be located C:\dev\personslist\personslist-model-jpa 4. As Target runtime select SAP HANA Cloud.
This will result in the error message "EJB Module 3.0 and Dynamic Web Module 2.5 cannot both be selected".

5. As the "Default Configuration for SAP HANA Cloud" is not appropriate for JPA Projects by default, you have to customize it as described in the following sub steps a.-c a. Choose Modify... in the Configuration section (Project Facets dialog opens)

43

SAP HANA Cloud Development Scenario (Getting Started)

b. Deselect the EJB Module and Dynamic Web Module checkboxes. c. Choose OK to close the dialog and confirm that the New JPA Project dialog looks like in the following screenshot (error message has been vanished).

6. Keep then other default settings for the other project settings and choose Next. 7. On the Java page, keep the default settings and choose Next. 8. On the JPA Facet page in the Platform section change the following three settings 44

SAP HANA Cloud Development Scenario (Getting Started) a. Select EclipseLink 2.4.x/2.5x from the dropdown list. b. In the JPA implementation section, select Disable Library Configuration from the dropdown list. c. Select the option Annotated classes must be listed in persistence.xml

9. Choose Finish to create the jpa-model project. 10. Confirm the Open Associated Perspective? dialog with Yes, so that the JPA project will be created.

Set Server Runtime for the created JPA Project
1. In the Project Explorer view, select the personslist-model-jpa project, and from the context menu choose Properties. 2. Select Java Build Path and switch to Libraries tab 3. Choose Add Library. The Add Library dialog box opens. 4. Select Server Runtime and choose Next. 45

SAP HANA Cloud Development Scenario (Getting Started)

5. Select SAP HANA Cloud and choose Finish. 6. Back on window Properties for personslist-model-jpa choose OK to finish.

3.1.2 Create Person Entity Using the Graphical JPA Editor Configure JPA Diagram Editor
1. In the Project Explorer view select personslist-model-jpa project 2. Open context menu and choose Properties. 3. Select JPA  Diagram Editor

4. Enter com.sap.hana.cloud.sample as Default Java Package for new entities 5. Choose OK 46

SAP HANA Cloud Development Scenario (Getting Started)

Create JPA Person Entity
1. In the Project Explorer view, open the personslist-model-jpa project. Select JPA Content, and
from the context menu choose Open Diagram.

The graphical JPA editor opens. 2. From the palette, drag and drop a Java Entity onto the editor grid. 3. A class called Entity1 is created automatically with the before defined default package com.sap.hana.cloud.sample You can see which package has been assigned by opening the src folder in the Project Explorer view.

4. Select the Java entity Entity1, and from the context menu choose Refactor Persistent Type Class  Rename.

47

SAP HANA Cloud Development Scenario (Getting Started)

Alternatively, click the name and use the inline editor to rename the entity. 5. Enter Person as the new name and choose Finish. 6. Choose Save in the main Eclipse icon toolbar.

Create a named query for the Person entity
1. In the graphical editor, selecting the Person entity might not display the corresponding JPA Details as expected. For this reason it is better to use the JPA Structure view 2. Select the Person entity box in the graphical editor and see if the Person Id node is visible in the JPA Structure view. (If the Person Id node is still not visible in the JPA Structure view then open "personslistmodel-jpa/src/com/sap/hana/cloud/sample/Person.java" in a Java Editor. At least then JPA Structure view should display the Person related structure) 3. In JPA Structure view select Person node

48

SAP HANA Cloud Development Scenario (Getting Started) 4. In the JPA Details view navigate to Queries section, choose Add. The Add Query dialog box opens.

5. Enter the name AllPersons and choose type Named Query, and choose OK. 6. In the Query field, enter the text select p from Person p

49

SAP HANA Cloud Development Scenario (Getting Started)

Modify id attribute of the Person entity
1. In the JPA Structure view Select id node

2. In the Primary Key Generation section in the JPA Details view, select the Primary key generation checkbox and retain Default (Auto) as the strategy.

Create two new attributes of the Person entity
1. Hover over the Person entity* graphical box to display the hover buttons. 2. Choose the Create Attribute hover button in the graphical editor (hover over the Person entity to display the buttons). Define two attributes with the names "FirstName" and "LastName".

50

SAP HANA Cloud Development Scenario (Getting Started)

It is important to use exactly the attribute names FirstName and LastName The reason for this is, that the generated method names for the Person entity according to the created attributes are getFirstName() and getLastName(). These methods are later used in other classes (e.g. TestServlet) and they will only work if the names are exactly the same. 3. Choose Save All in the main Eclipse icon toolbar.

3.1.3 Maintain Meta-Data of Person entity
In personslist-model-jpa/src/main/resources/META-INF folder define additional settings in persistence.xml: 1. Select persistence.xml, and from the context menu choose Open With  Persistence XML Editor. 2. On General tab enter org.eclipse.persistence.jpa.PersistenceProvider as the persistence provider. 3. On Connection tab select Resource Local as the Transaction Type. JTA transactions are currently not offered by SAP HANA Cloud. 4. On Options tab, select in EclipseLink Schema Generation section the value Drop and Create Tables as the DDL generation type. 5. Save the file. After this the Source tab should look like the following screenshot.

6. Confirm that the red underlined values are part of your persistence.xml file.

3.1.4 Modify personlist web.xml
Add sapui5 context parameter for proxying recources and a resource reference description to the web.xml 1. Make sure that Java EE perspective is selected. (Window → Open Perspective → Other...) 2. Open personslist-web/WebContent/WEB-INF/web.xml 3. Insert the following content after the <servlet-mapping> elements in the UI5 resource servlet section:
<!-- This option enables proxying of resources from a remote location (in the cloud) --> <context-param> <param-name>com.sap.ui5.resource.REMOTE_LOCATION</param-name> <param-value>https://sapui5.hana.ondemand.com</param-value> </context-param> <!-- Enable usage of Cloud persistence service --> <resource-ref> <res-ref-name>jdbc/DefaultDB</res-ref-name> <res-type>javax.sql.DataSource</res-type> </resource-ref>

4. Save the web.xml file. 51

SAP HANA Cloud Development Scenario (Getting Started)

3.2

Convert PersonsList Application Eclipse Projects into Maven Projects

In this section we will add Maven as build technology to the developed HANA Cloud PersonsList Web Application. You can now either convert the so far developed PersonsList Eclipse projects step-by-step into Maven Projects (as described in section 3.2.1). Or you can avoid this tedious and error prone work by getting the ready-to-use and converted Maven Projects from personslist Git Repository (as described in section 3.2.2).

Decision help, which of the two sections you should execute:
If you are not that experienced so far with Maven and Java Eclipse development you should probably only read through the following section 3.2.1 (to just get a feeling of what you have to do for the Maven conversion) and only execute the easier steps of section 3.2.2 to get the PersonsList Maven Projects as needed to continue with chapter 4 then. If you are a developer looking for challenges that not everyone is able to cope with then you should try to execute section 3.2.1 and finish it successfully. If you fail you could still take the easier alternative which is section 3.2.2.

3.2.1 Convert PersonsList Eclipse Projects step by step into a Maven Project
Execute the steps of the following four sections to learn how the so far developed PersonsList Web Eclipse projects (personslist-model-jpa and personslist-web) are converted into Maven Projects     Maven Project: personslist parent (section 3.2.1.1 3.2.1.1) Maven Project: personslist-model-jpa (section 3.2.1.2) Maven Project: personslist-web (section 3.2.1.3) Maven Build: personslist parent (section 3.2.1.4) Additional Info: Convert Eclipse PersonsList Projects into Maven Projects In the remaining steps of this section you will create the Maven projects structure of the PersonList application.
personslist |- .project | |- personslist-model-jpa | |- .project | |... | |- personslist-web |- .project |...

It will consist of a parent Maven project (personslist) which holds commonly used artifacts like properties with values which are used by both child projects (personslist-model-jpa and personslist-web) of the PersonsList application. The two already existing projects personslist-model-jpa and personslist-web were created as Eclipse projects by using the corresponding Eclipse creation wizards. For more technical details on Maven see Apache Maven homepage 52

SAP HANA Cloud Development Scenario (Getting Started)

The conversion of the PersonsList Eclipse projects to Maven projects is a tedious and error prone work because it consists of a lot of manual steps as described below. 1. Consider to compare your developed and step-by-step converted PersonsList project with the best practice projects as described in Appendix A3.2 Compare Example: PersonsList Maven Project 2. The advantages (e.g. dependency management or test automation) of having the PersonsList application as Maven Project will become obvious later in this tutorial.

3.2.1.1 Maven Project: personslist parent
Create personslist parent Maven Project
1. 2. 3. 4. In the Project Explorer view, choose File  New  Project... (New Project wizard opens) Expand and select General  Project Choose Next Enter personslist as the project name. Do not change the name personslist here as the Maven pom files later in this chapter will rely on this name.

5. Deselect the "Use default location" option enter the following path, the location where the personslist project will be located C:\dev\personslist 6. Choose Finish to create the project 7. In Project Explorer view select the newly created personslist project 53

SAP HANA Cloud Development Scenario (Getting Started) 8. Open context menu Configure  Convert to Maven Project (Create new POM dialog opens).

9. Enter com.sap.hana.cloud.sample as Group Id and select pom as Packaging type. Keep the other default settings 10. Choose Finish. The pom.xml of the Maven project personslist is opened in the Maven POM Editor.

11. In the editor switch to the pom.xml tab 12. Copy the following content and replace the entire pom.xml by the following contents. Formatting of the copied Xml Code After you copied the Xml code from this pdf file into your Eclipse editor the copied source file is not well formatted. To format it, select the copied part in the editor and then open context menu and choose Source Format.

54

SAP HANA Cloud Development Scenario (Getting Started)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.sap.hana.cloud.sample</groupId> <artifactId>personslist</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>pom</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <!-- Properties that hold the local server information required for local integration testing --> <local.server.root>${project.build.directory}/server</local.server.root> <local.server.host>localhost</local.server.host> <m2e.jaxrs.activation>false</m2e.jaxrs.activation> </properties> <modules> <!-<module>personslist-model-jpa</module> <module>personslist-web</module> --> </modules> <dependencies> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.2</version> </dependency> <!-- Test dependencies --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <dependency> <groupId>org.hamcrest</groupId> <artifactId>hamcrest-library</artifactId> <version>1.2.1</version> <scope>test</scope> </dependency> <dependency> <groupId>org.apache.derby</groupId> <artifactId>derby</artifactId> <version>10.9.1.0</version> <scope>test</scope> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.7.2</version> <scope>test</scope> </dependency> </dependencies> <build> <pluginManagement> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <!-- prevent Maven warning --> </plugin> <!--This plugin's configuration is used to store Eclipse m2e settings only. It has no influence on the Maven build itself. --> <plugin> <groupId>org.eclipse.m2e</groupId> <artifactId>lifecycle-mapping</artifactId> <version>1.0.0</version> <configuration> <lifecycleMappingMetadata> <pluginExecutions> <pluginExecution> <pluginExecutionFilter> <groupId> org.apache.maven.plugins </groupId> <artifactId> maven-dependency-plugin </artifactId> <versionRange>[2.4,)</versionRange> <goals> <goal>copy-dependencies</goal> <goal>unpack-dependencies</goal> </goals> </pluginExecutionFilter> <action> <execute> <runOnIncremental>false</runOnIncremental> </execute> </action> </pluginExecution> </pluginExecutions> </lifecycleMappingMetadata> </configuration> </plugin> </plugins> </pluginManagement> </build> </project>

55

SAP HANA Cloud Development Scenario (Getting Started)

Additional Info: personslist pom.xml The modules section of the personslist pom.xml includes the personslist-model-jpa and the personslist-web modules. This ensures later that a build of this personslist Maven project will build the complete application. Both modules are still out-commented because both Eclipse projects have not yet converted to Maven. As soon as this is done in the corresponding below sections the modules will be activated in the personslist pom.xml as described later. 13. Save editor Project Maven errors Sometimes Maven Projects show errors due a missing Maven update of the corresponding projects. During the entire tutorial or later when you extend the project to your needs, you might run into situations where a project has again an error. Always consider first to do a Maven update of the project to avoid this by the following steps: 1. Select the project node which shows a Maven error and open context menu 2. Choose option Maven  Update Project... Update Maven Project dialog opens 3. Make sure that the intended project is selected and choose OK to update the project 4. After this action the might show no errors any more

3.2.1.2 Maven Project: personslist-model-jpa
Convert personslist-model-jpa to a Maven Project
1. Select the created personslist-model-jpa project and open context menu 2. Choose Configure  Convert to Maven Project (Create new POM dialog opens).

56

SAP HANA Cloud Development Scenario (Getting Started)

3. Choose com.sap.hana.cloud.sample as Group Id from dropdown list and keep the other default settings 4. Choose Finish. The pom.xml of the converted Maven Project personslist-model-jpa is opened in the Maven POM Editor. 5. In the editor switch to the pom.xml tab 6. Copy the following content and replace the entire pom.xml by the following contents.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.sap.hana.cloud.sample</groupId> <artifactId>personslist</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <artifactId>personslist-model-jpa</artifactId> <packaging>jar</packaging> <dependencies> <dependency> <groupId>org.eclipse.persistence</groupId> <artifactId>eclipselink</artifactId> <version>2.5.0</version> </dependency> </dependencies> </project>

57

SAP HANA Cloud Development Scenario (Getting Started) 7. Save editor. After this the project might show one or more errors. If so, you can ignore it. Only at the end of this section must have no errors anymore. 8. Create a new project folder structure src/main/java a. Select personslist-model-jpa project and open context menu

b. Choose New  Folder New Folder dialog opens c. Enter the following string as Folder name src/main/java d. Choose Finish to create the new folder structure /main/java under the existing project folder personslist-model-jpa/src

9. Create a new project folder structure src/main/resources In the same way as created before create now a new folder structure with the following string src/main/resources 10. Move META-INF folder to src/main/resources a. Select personslist-model-jpa/src/META-INF and open context menu

58

SAP HANA Cloud Development Scenario (Getting Started)

b. Choose Move... Move Resource dialog opens c. Choose personslist-model-jpa/src/main/resources as destination for META-INF d. Choose OK to move META-INF and its contents to the destination

11. Add src/main/java as source folder a. Select personslist-model-jpa project and open context menu b. Choose Properties Properties for personslist-model-jpa dialog opens

59

SAP HANA Cloud Development Scenario (Getting Started)

c. Select Java Build Path and make sure that Source tab is selected d. Choose Add Folder... Source Folder Selection dialog opens e. Select the checkbox of src/main/java f. Choose OK to add src/main/java as source folder g. Back on the Properties dialog choose OK

12. Move package com.sap.hana.cloud.sample to src/main/java a. Select com.sap.hana.cloud.sample and open context menu

60

SAP HANA Cloud Development Scenario (Getting Started) b. Choose Refactor  Move... Move dialog opens c. Choose src/main/java source as destination for com.sap.hana.cloud.sample d. Choose OK to move com.sap.hana.cloud.sample and its contents to the destination

13. Remove personslist-model-jpa from Project Explorer view a. Select personslist-model-jpa project and open context menu

b. Choose Delete Delete Resource dialog opens c. Make sure that Delete project contents on disk (cannot be undone) is not selected and then confirm the dialog with OK. This removes the personslist-model-jpa from the Project Explorer view Through the above steps you prepared the jpa project using the standard Maven project structure and not the Eclipse standard structure any more. With the next few steps you will delete the Eclipse kind of projects artifacts and import the project as Maven Project in your Eclipse workspace.

Modify jpa project structure on disk and import it as Maven project
1. In your Windows Explorer navigate to location C:\dev\personslist\personslist-model-jpa 2. Select all files and folders but not pom.xml, src and diagrams.

61

SAP HANA Cloud Development Scenario (Getting Started)

3. Delete selected files and folders 4. Import the personslist-model-jpa as Maven project a. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects b. Choose Next and then choose Browse... and navigate to location C:\dev\personslist\personslist-model-jpa.

5. Choose Finish to import personslist-model-jpa project as Maven project so that it is again displayed in the Project Explorer view.

62

SAP HANA Cloud Development Scenario (Getting Started)

3.2.1.3 Maven Project: personslist-web
Convert personslist-web to a Maven Project
Similar to the above personslist-model-jpa project you will now convert your personslist-web project to a Maven project. 1. Select personslist-web project and open context menu 2. Choose Configure  Convert to Maven Project (Create new POM dialog opens).

3. Choose com.sap.hana.cloud.sample as Group Id from dropdown list and keep the other default settings 4. Choose Finish. The pom.xml of the converted Maven Project personslist-web is opened in the Maven POM Editor. 5. In the editor switch to the pom.xml tab 6. Copy the following content and replace the entire pom.xml by the following contents. Formatting of the copied Xml Code After you copied the Xml code from this pdf file into your Eclipse editor the copied source file is not well formatted. To format it, select the copied part in the editor and then open context menu and choose Source Format.

63

SAP HANA Cloud Development Scenario (Getting Started)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.sap.hana.cloud.sample</groupId> <artifactId>personslist</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <artifactId>personslist-web</artifactId> <packaging>war</packaging> <dependencies> <dependency> <groupId>com.sap.hana.cloud.sample</groupId> <artifactId>personslist-model-jpa</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <!-- SAP HANA Cloud SDK dependencies --> <dependency> <groupId>com.sap.cloud</groupId> <artifactId>neo-sdk-core-api</artifactId> <version>${sap.cloud.sdk.version}</version> <scope>system</scope> <systemPath>${sap.cloud.sdk.path}/api/neo-sdk-core-api-${sap.cloud.sdk.version}.jar</systemPath> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.2.3</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.2</version> <scope>provided</scope> </dependency> <!-- SAP UI5 dependencies --> <dependency> <groupId>com.sap.ui5.commons</groupId> <artifactId>com.sap.ui5.commons</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.commons_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.core</groupId> <artifactId>com.sap.ui5.core</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.core_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.makit</groupId> <artifactId>com.sap.ui5.makit</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.makit_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.mobile</groupId> <artifactId>com.sap.ui5.mobile</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.mobile_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.resource</groupId> <artifactId>com.sap.ui5.resource</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.resource_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.richtexteditor</groupId> <artifactId>com.sap.ui5.richtexteditor</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.richtexteditor_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.table</groupId> <artifactId>com.sap.ui5.table</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.table_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.themelib_sap_goldreflection</groupId> <artifactId>com.sap.ui5.themelib_sap_goldreflection</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.themelib_sap_goldreflection_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.themelib_sap_ux</groupId> <artifactId>com.sap.ui5.themelib_sap_ux</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.themelib_sap_ux_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.utils</groupId> <artifactId>com.sap.ui5.utils</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.utils_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.ux3</groupId> <artifactId>com.sap.ui5.ux3</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.ux3_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.visualization</groupId> <artifactId>com.sap.ui5.visualization</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.visualization_${sap.cloud.ui5.version}.jar</systemPath> </dependency> <dependency> <groupId>com.sap.ui5.viz</groupId> <artifactId>com.sap.ui5.viz</artifactId> <version>${sap.cloud.ui5.version}</version> <scope>system</scope> <systemPath>${eclipse.path}/plugins/com.sap.ui5.viz_${sap.cloud.ui5.version}.jar</systemPath> </dependency> </dependencies> <build> <finalName>${project.artifactId}</finalName> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>2.5</version> <configuration> <filesets> <fileset> <directory>${project.basedir}/src/main/webapp/WEB-INF/lib</directory> <includes> <include>com.sap.ui5*.*</include> </includes> </fileset> </filesets> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <version>2.4</version> <executions> <execution> <id>copy-dependencies</id> <goals> <goal>copy-dependencies</goal> </goals> <configuration> <outputDirectory>${project.basedir}/src/main/webapp/WEB-INF/lib</outputDirectory> <includeGroupIds> com.sap.ui5.commons,com.sap.ui5.core,com.sap.ui5.makit,com.sap.ui5.mobile,com.sap.ui5.resource,com.sap.ui5.richtexteditor,com.sap.ui5.table,com.sap.ui5.themelib_sap_goldreflection,com.sap.ui5.themelib_sap_ux,com.sap.u i5.utils,com.sap.ui5.ux3,com.sap.ui5.visualization,com.sap.ui5.viz </includeGroupIds> </configuration> </execution> </executions> </plugin> </plugins> </build> </project>

64

SAP HANA Cloud Development Scenario (Getting Started) 7. Save editor. After this the project might show one or more errors. If so, you can ignore it. Only at the end of this section must have no errors anymore. 8. Create a new project folder structure src/main/webapp a. Select personslist-web project and open context menu b. Choose New  Folder New Folder dialog opens c. Enter the following string as Folder name src/main/webapp d. Choose Finish to create the new folder structure src/main/webapp under the existing project folder personslist-web

9. Move files and folder of WebContent to src/main/webapp a. Open node personslist-web/WebContent, then select all the child nodes and open context menu

b. Choose Move... Move Resource dialog opens c. Choose personslist-web/src/main/webapp as destination for the selected contents d. Choose OK to move the selected contents to the destination 65

SAP HANA Cloud Development Scenario (Getting Started)

10. Create a new project folder structure src/main/java In the same way as created before create now a new folder structure with the following string src/main/java 11. Remove personslist-web project from Project Explorer view a. Select personslist-web project and open context menu b. Choose Delete Delete Resource dialog opens c. Make sure that Delete project contents on disk (cannot be undone) is not selected and then confirm the dialog with OK. This removes the personslist-web project from the Project Explorer view Through the above steps you prepared the web project using the standard Maven project structure and not the Eclipse standard structure any more. With the next few steps you will delete the Eclipse kind of projects artifacts and import the project as Maven Project in your Eclipse workspace.

Modify web project structure on disk and import it as Maven project
1. In your Windows Explorer navigate to location C:\dev\personslist\personslist-web 2. Select all files and folders but not pom.xml and src

66

SAP HANA Cloud Development Scenario (Getting Started)

3. Delete selected files and folders 4. Import the personslist-web as Maven project a. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects b. Choose Next and then choose Browse... and navigate to location C:\dev\personslist\personslist-web.

5. Choose Finish to import personslist-web project as Maven project so that it is again displayed in the Project Explorer view.

67

SAP HANA Cloud Development Scenario (Getting Started)

3.2.1.4 Maven Build: personslist parent
Now that you converted both the jpa and the web project into Maven projects you can enable their corresponding modules in the personslist parent Maven project and build them. 1. Enable personslist jpa and web modules in parent Maven project a. Open personslist/pom.xml with Maven POM Editor b. Switch to pom.xml tab

c. Remove the comments (“<!--” and “-->”) from the modules section so that it looks like in the above screenshot. d. Save editor. 2. Remove personslist project from Project Explorer view a. Select personslist project and open context menu b. Choose Delete Delete Resource dialog opens c. Make sure that Delete project contents on disk (cannot be undone) is not selected and then confirm the dialog with OK. This removes the personslist project from the Project Explorer view 3. In your Windows Explorer navigate to location C:\dev\personslist 68

SAP HANA Cloud Development Scenario (Getting Started) 4. Select all files and folders (.project, .settings) but not personslist-model-jpa, not personslistweb and not pom.xml. 5. Delete selected files and folders 6. Import the personslist as Maven project a. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects b. Choose Next and then choose Browse... and navigate to location C:\dev\personslist.

7. Choose Finish to import personslist project as Maven project so that it is again displayed in the Project Explorer view. 8. Build personslist Maven project a. Select the personslist/pom.xml and open context menu

b. Choose Run As  Maven build... Edit Configuration dialog opens 69

SAP HANA Cloud Development Scenario (Getting Started) c. Enter "clean install" as Goals d. Choose Run to start the Maven build The Maven build should finish with a BUILD SUCCESS message

3.2.2 Check out Maven-converted PersonsList Projects
In this section we describe how to get the PersonsList Projects with executing all the steps of section 3.2.1. So we assume that you have executed the steps of this tutorial till section 3.1.4 and skipped 3.2.1 completely, so that you have two Eclipse projects personslist-model-jpa and personslist-web in your Eclipse workspace.

You might have tried to execute section 3.2.1 but got stuck and from there you want to execute now the following steps then you have an additional project with name personslist. In the following make sure that you remove also this project as described for the other projects.

70

SAP HANA Cloud Development Scenario (Getting Started)

Remove all personslist projects from Project Explorer
1. Select all personslist projects (personslist-model-jpa and -web) and open context menu

2. Choose Delete

3. Confirm Delete Resources dialog with OK and make sure that Delete project contents on disk option is not selected. As result only the Servers node remains in Project Explorer view

Delete personslist folder from file system
You created the two Eclipse projects personslist-model-jpa and personslist-web in the corresponding sections before at location C:/dev/personslist Navigate with your file system explorer to this location and Delete the personslist folder and its contents

71

SAP HANA Cloud Development Scenario (Getting Started)

Checkout section-3.2.2 Sources from personslist Git Repository
Execute the following steps to check out the needed sources. To avoid any problems during the checkout we described the checkout with a hard reset of the currently checked out Git Repository master branch. Hard reset of checked-out master 1. In Git Repository view expand Working Directory node and select personslist node.

2. Open context menu and choose Delete (which deletes the folder C:/dev/git/personslist from file system) 3. In Git Repository view select cloud-personslist-scenario/Branches/Local/master and open context menu.

72

SAP HANA Cloud Development Scenario (Getting Started)

4. Choose Reset… and in the opened Reset dialog choose Hard option and then choose Finish.

5. Confirm Reset with Yes This recovers the before deleted folder C:/dev/git/personslist and its contents. Checked-out section-3.2.2 Git Repository branch 1. In Git Repository view expand cloud-personslist-scenario/Branches/Remote Tracking.

a) Select origin/section-3.2.2 branch node 73

SAP HANA Cloud Development Scenario (Getting Started) b) Open context menu and choose Create Branch… c) In the opened Create Branch dialog keep the name of the new Branch as section3.2.2 and choose Finish. This creates a new Local branch with name section-3.2.2 which contains the personslist projects sources we need here.

Copy checked-out personslist projects
Now copy with your file system explorer the folder C:/dev/git/personslist (which contains the ready to use personslist projects as converted Maven projects) to location C/dev/ (from where you then continue your development of the personslist scenario).

Import the personslist Maven Projects
Make sure that source folder src/main/java exists and if not create it. 1. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\personslist Do not navigate to C:\dev\git\personslist as you are then developing on the personslist Git Repository which sooner or later will result into problems which are not described here.

74

SAP HANA Cloud Development Scenario (Getting Started)

After this three Maven projects personslist, personslist-model-jpa and personslist-web are imported into your Project Explorer view

You have to do now a final last step to get to the same personslist Maven projects content as after executing steps of section 3.2.

Create folder src/main/java in personslist-web Project
1. In Project Explorer view select personslist-web project and open context menu 2. Choose New  Folder New Folder dialog opens

75

SAP HANA Cloud Development Scenario (Getting Started)

3. Enter the following string as Folder name src/main/java 4. Choose Finish to create the new folder structure src/main/java under the existing project folder personslist-web

76

SAP HANA Cloud Development Scenario (Getting Started)

4 Bind Application UI and JPA Model via OData Service
Overview
In this section you extend the web application to expose the JPA-based Persons Entity as OData Service. Then you will make use of this OData Service in the UI by binding the service to UI controls to read and write corresponding data from and to the underlying HANA database.

4.1 Expose the JPA-based Person Database Entities by means of OData Service
4.1.1 Configuration and Implementation Steps to expose Person Entity as OData Service
Execute the steps below the info box to for exposing the created JPA-based Person entity as OData Service. Additional information: Connectivity via OData For retrieving, querying and updating data SAP prefers to use the Open Data Protocol (OData) Web protocol for HANA Cloud applications which connects to any database (in this case a HANA Cloud database). In this section 4.1.1 it is demonstrated how the developed PersonsList HANA Cloud application makes use of OData protocol to connect the client application with the HANA Cloud database (where your person data is persisted). Our PersonsList Web Application makes use of the Apache Olingo project which provides the necessary libraries for connecting HANA Cloud persisted entities modeled by JPA (like your "Person" entity) via OData with the client application (which runs in a Web browser). For more details: What is the Open Data Protocol (OData)?  http://www.odata.org/ Why does SAP prefer OData as connectivity? These two SCN blogs motivates the reasons why SAP prefers to use OData as connectivity:  http://scn.sap.com/community/open-source/blog/2013/08/12/sap-odata-libraryjava-contributed-to-open-source  http://scn.sap.com/people/ralf.handl/blog/2011/06/09/sap-netweaver-gatewayspeaks-odata-with-sap-annotations 77

SAP HANA Cloud Development Scenario (Getting Started)

Add Olingo OData dependencies in pom.xml of personslist-web
1. Open the personslist-web/pom.xml 2. Add the following four Olingo OData dependencies inside the dependencies section
<!-- Olingo OData dependencies --> <dependency> <groupId>org.apache.olingo</groupId> <artifactId>olingo-odata2-api-incubating</artifactId> <version>1.0.0</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.apache.olingo</groupId> <artifactId>olingo-odata2-core-incubating</artifactId> <version>1.0.0</version> <scope>runtime</scope> </dependency> <dependency> <groupId>org.apache.olingo</groupId> <artifactId>olingo-odata2-jpa-processor-api-incubating</artifactId> <version>1.0.0</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.apache.olingo</groupId> <artifactId>olingo-odata2-api-annotation-incubating</artifactId> <version>1.0.0</version> <scope>runtime</scope> </dependency> <dependency> <groupId>org.apache.olingo</groupId> <artifactId>olingo-odata2-jpa-processor-core-incubating</artifactId> <version>1.0.0</version> <scope>runtime</scope> </dependency> <dependency> <groupId>org.apache.cxf</groupId> <artifactId>cxf-rt-frontend-jaxrs</artifactId> <version>2.7.5</version> </dependency>

78

SAP HANA Cloud Development Scenario (Getting Started)

3. Save pom.xml Editor

Create JpaEntityManagerFactory.java
2. 3. 4. 5. 6. Select the personslist-web project node From the context menu, choose New  Class Enter com.sap.hana.cloud.odata.service as Package and JpaEntityManagerFactory as Name Choose Finish to create the new Java Class In the opened editor replace the entire content with the following Formatting of the copied Java Code After you copied the Java code from this pdf file into your Eclipse editor the copied source file is not well formatted. To format it, select the copied part in the editor and then open context menu and choose Source Format.

79

SAP HANA Cloud Development Scenario (Getting Started)

package com.sap.hana.cloud.odata.service; import java.sql.SQLException; import java.util.HashMap; import java.util.Map; import import import import import javax.naming.InitialContext; javax.naming.NamingException; javax.persistence.EntityManagerFactory; javax.persistence.Persistence; javax.sql.DataSource;

import org.eclipse.persistence.config.PersistenceUnitProperties; /** * Handles the singleton EntityManagerFactory instance. */ public class JpaEntityManagerFactory { public static final String DATA_SOURCE_NAME = "java:comp/env/jdbc/DefaultDB"; public static final String PERSISTENCE_UNIT_NAME = "personslist-model-jpa"; private static EntityManagerFactory entityManagerFactory = null; /** * Returns the singleton EntityManagerFactory instance for accessing the * default database. * * @return the singleton EntityManagerFactory instance * @throws NamingException * if a naming exception occurs during initialization * @throws SQLException * if a database occurs during initialization */ public static synchronized EntityManagerFactory getEntityManagerFactory() throws NamingException, SQLException { if (entityManagerFactory == null) { InitialContext ctx = new InitialContext(); DataSource ds = (DataSource) ctx.lookup(DATA_SOURCE_NAME); Map<String, Object> properties = new HashMap<String, Object>(); properties.put(PersistenceUnitProperties.NON_JTA_DATASOURCE, ds); entityManagerFactory = Persistence.createEntityManagerFactory( PERSISTENCE_UNIT_NAME, properties); } return entityManagerFactory; } }

7. Save Java Editor The project should compile without any errors.

Create PersonsListServiceFactory.java
1. In personslist-web project select package node Java Resources/src/main/java/com.sap.hana.cloud.odata.service 2. Open context menu and choose New  Class 3. Enter PersonsListServiceFactory as Name 4. Choose Finish to create the new Java Class 5. In the opened editor, replace the entire content with the following

80

SAP HANA Cloud Development Scenario (Getting Started)

package com.sap.hana.cloud.odata.service; import javax.persistence.EntityManagerFactory; import org.apache.olingo.odata2.processor.api.jpa.ODataJPAContext; import org.apache.olingo.odata2.processor.api.jpa.ODataJPAServiceFactory; import org.apache.olingo.odata2.processor.api.jpa.exception.ODataJPARuntimeException; /** * Odata JPA Processor implementation class */ public class PersonsListServiceFactory extends ODataJPAServiceFactory { private static final String PERSISTENCE_UNIT_NAME = "personslist-model-jpa"; @Override public ODataJPAContext initializeODataJPAContext() throws ODataJPARuntimeException { ODataJPAContext oDataJPAContext = this.getODataJPAContext(); try { EntityManagerFactory emf = JpaEntityManagerFactory .getEntityManagerFactory(); oDataJPAContext.setEntityManagerFactory(emf); oDataJPAContext.setPersistenceUnitName(PERSISTENCE_UNIT_NAME); return oDataJPAContext; } catch (Exception e) { throw new RuntimeException(e); } } }

6. Save Java Editor The project should compile without any errors.

Configure CXFNonSpringJaxrsServlet with own classes in the web.xml
1. 2. 3. 4. In Project Explorer view open personslist-web/src/main/webapp/WEB-INF node. Select web.xml and open context menu Choose Open With  XML Editor. Add the following <servlet> and <servlet-mapping> section to the web.xml (directly before the tag </web-app>)
<servlet> <servlet-name>ODataServlet</servlet-name> <servlet-class>org.apache.cxf.jaxrs.servlet.CXFNonSpringJaxrsServlet</servlet-class> <init-param> <param-name>javax.ws.rs.Application</param-name> <param-value>org.apache.olingo.odata2.core.rest.app.ODataApplication</param-value> </init-param> <init-param> <param-name>org.apache.olingo.odata2.service.factory</param-name> <param-value>com.sap.hana.cloud.odata.service.PersonsListServiceFactory</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ODataServlet</servlet-name> <url-pattern>/personslist.svc/*</url-pattern> </servlet-mapping>

5. Save XML Editor

Configure persistence.xml in JPA model
1. In Project Explorer view open personslist-model-jpa/src/main/resources node. 2. Select persistence.xml and open context menu 3. Choose Open With  XML Editor.

81

SAP HANA Cloud Development Scenario (Getting Started)
4. Add the following red-marked <property> line to the persistence.xml

file
<?xml version="1.0" encoding="UTF-8"?> <persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"> <persistence-unit name="personslist-model-jpa" transaction-type="RESOURCE_LOCAL"> <provider>org.eclipse.persistence.jpa.PersistenceProvider</provider> <class>com.sap.hana.cloud.sample.Person</class> <properties> <property name="eclipselink.ddl-generation" value="drop-and-create-tables"/> <property name="eclipselink.jpql.parser" value="org.eclipse.persistence.queries.ANTLRQueryBuilder"/> </properties> </persistence-unit> </persistence>

This additional property is needed to work around a bug in EclipseLink 2.5.0 with Long Data types. It enables you later to access entity properties via the OData service by means of the “Long types” notation, e.g. …/personslist.svc/Persons(1L). 5. Save XML Editor

4.1.2 Test OData Service
With the steps executed in the last section the personslist-web application has already been extended to expose the JPA-based Person entities as OData service. In this section you will publish the personslist-web application and the already existing local server and test the Persons OData service.

Publish and run personslist-web application on local server and test the created OData Service.
1. Select personslist-web project and open context menu

82

SAP HANA Cloud Development Scenario (Getting Started)

2. Choose Run As  Run on Server Run on Server dialog opens. 3. Make sure that Choose an existing Server option is selected and select the SAP HANA Cloud local runtime that was already created and started before. 4. Choose Finish to publish the personslist-web application which contains the so far developed PersonsList UI and now also the OData service. By default the already known PersonsList application UI is launched

5. Add /personslist.svc at the end of the launched URL and choose RETURN key to display the OData service which exposes the JPA-based Persons entities

83

SAP HANA Cloud Development Scenario (Getting Started)

A typical OData service output with a Persons collection is displayed. As you stopped the local server before there are no Person entities so far in the database related to local server runtime you will not see any Person entry when launching the corresponding OData service for retrieving person entities. Retrieve person entities launch URL http://localhost:8080/personslist-web/personslist.svc/Persons

4.2 Bind PersonsList Application UI and JPA Model via the OData Service
In this section you extend the personslist-web SAPUI5 application to read and write person entities from and to the database via the OData Service. For this you only need to change personslist.controller.js. In this file you ...
  

Create a SAPUI5 OData model (sap.ui.model.odata.ODataModel) based on the OData service URL Creation of Person entity based on create method of the SAPUI5 OData model Two callback methods

84

SAP HANA Cloud Development Scenario (Getting Started)

Modify personslist.controller.js
1. Open personslist-web/src/main/webapp/personslist.controller.js 2. Replace the entire onInit() and addNewPerson() with the following JavaScript code
onInit : function() { var sOrigin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : ""); var personsListOdataServiceUrl = sOrigin + "/personslist-web/personslist.svc"; var odataModel = new sap.ui.model.odata.ODataModel( personsListOdataServiceUrl); this.getView().setModel(odataModel); }, addNewPerson : function(sFirstName, sLastName, oTable) { var persons = {}; persons.FirstName = sFirstName; persons.LastName = sLastName; this.getView().getModel().create("/Persons", persons, null, this.successMsg, this.errorMsg); }, successMsg : function() { sap.ui.commons.MessageBox.alert("Person entity has been successfully created"); }, errorMsg : function() { sap.ui.commons.MessageBox.alert("Error occured when creating person entity"); },

3. Save editor With these small changes the SAPUI5 controls of the personslist-web application are bound to the OData service. In the next section you will test that the running SAPUI5 based UI of personslist-web application can read and write Person entities via this OData service.

4.3 Publish and Test PersonsList Application on local Server
In this section will publish and run personslist-web on the existing SAP HANA Cloud local runtime. You will verify that the SAPUI5-based PersonsList web application which you bound in the last section to the OData Service works. 85

SAP HANA Cloud Development Scenario (Getting Started) Execute again the known steps to run the web application on the SAP HANA Cloud local runtime. 1. Select personslist-web project and open context menu 2. Choose Run As  Run on Server Run On Server dialog opens 3. Make sure that Choose an existing server option is selected 4. Select localhost  SAP HANA Cloud local runtime 5. Choose Finish personslist-web Application is republished on the server, started and ready to serve requests. External Web Browser opens URL http://localhost:8080/personslist-web/ and displays the SAPUI5-based PersonsList Application

6. Verify by adding John Smith that the UI still works. 7. Verify now that adding a person entity to the database via OData Service works. a. Open Customize and control Google Chrome Web Browser

86

SAP HANA Cloud Development Scenario (Getting Started) b. Choose Tools  Developer tools

c. Switch to Network tab (1.) d. Enter Lisa Gordan as Person and choose Add Person (2.)

87

SAP HANA Cloud Development Scenario (Getting Started) e. First the network traffic shows that a POST request has been sent, i.e. person entity creation via OData service URL, and returned as Status 201 which means Created. This corresponds to the Successfully added a person entity message which appears f. Choose OK

g. Now the network traffic shows that a GET request has been sent. This means that after the new person entity has been created the SAPUI5 table control automatically (because its row are bound to /Persons which again come from the OData model which was initialized in the personslist.controller.js onInit()) retrieves the available persons via the OData service URL. And according to the successfully (Status 200, OK) retrieved persons the table is updated correctly. h. By clicking on the corresponding OData service request line on the Network tab you can display also the details of the sent requests E.g. click on the Persons POST request

88

SAP HANA Cloud Development Scenario (Getting Started)

For example you can see here the fully qualified OData Service URL and the important Request Payload which holds the information of the person entity to be created like First Name and Last Name (see red underlined parts in the above screenshot). So far you have seen how the PersonsList has been developed with SAPUI5 (UI), HANA Cloud persistence service (Database) and OData service (as connectivity between the UI and the database). You have published and run the PersonsList Web application on SAP HANA Cloud local runtime. In next chapter 5 it is time to publish this state of developed PersonsList application to SAP HANA Cloud.

89

SAP HANA Cloud Development Scenario (Getting Started)

5 Publish and Run PersonsList Application on SAP HANA Cloud
Overview
In this section, you will publish and run your PersonsList web application which you developed in chapters 2, 3 and 4 on SAP HANA Cloud.

In the same way as you already published and run the PersonsList Web Application in an early development state in section 2.4 you will now do the same for the finished PersonsList Web Application. Execute all steps of the following section.

5.1 Publish and Run PersonsList Application on SAP HANA Cloud
In this section you will now deploy and run the developed PersonsList Web Application project on SAP HANA Cloud.

5.1.1 Configure your SAP HANA Cloud server in Eclipse
The SAP HANA Cloud server in Eclipse should be configured as described in section 2.4.2

5.1.2 Verify that all HANA Cloud Application are in stopped Run State
Verify that all HANA Cloud Application are in stopped Run State as described in section 2.4.3

5.1.3 Create a new SAP HANA Cloud server entry in Eclipse
You will now create a new SAP HANA Cloud server entry. This server entry corresponds then to an entry in your SAP HANA Cloud cockpit as you will see after executing a few further steps. 1. Select the Servers view Next to the existing local server [SAP HANA Cloud local runtime Started, Synchronized] you will create a second server node 2. Place your mouse cursor in the white area of the Servers view and open context menu

90

SAP HANA Cloud Development Scenario (Getting Started)

3. Choose New  Server New Server dialog opens. 4. Select SAP  SAP HANA Cloud as server type. Confirm that the Server's host name is correctly set to hanatrial.ondemand.com as taken from your eclipse preferences which you defined in section 5.1. 5. Keep the other defaults and choose Next.

91

SAP HANA Cloud Development Scenario (Getting Started) 6. On this New Server page you specify the Application name and Account information. 1. Enter personslist as Application name 2. Account name and User name should be pre filled with the values you specified in section 5.1 as your Eclipse server preferences. 3. Enter your SCN User Account Password 4. Optional: Select the Save password option (if a master password dialog comes up afterwards then choose No to avoid lengthy master password dialogs) 7. Choose Finish This connects to an existing personslist application on your SAP HANA Cloud Account or creates a server instance with application name personslist on your Developers Cloud account which is visible on your SAP HANA Cloud cockpit if not already there.

The corresponding server node in Eclipse appears in Servers view

Now you will publish and run your PersonsList Web Application on the newly created HANA Cloud server instance

5.1.4 Publish and Run PersonsList Web Application on SAP HANA Cloud
1. Select personslist-web project and open context menu 2. Choose Run As  Run on Server Run on Server dialog opens 3. Make sure that the Choose an existing server option is selected. 4. Select the node under server hanatrial.ondemand.com.

92

SAP HANA Cloud Development Scenario (Getting Started) 5. Choose Finish. After this the PersonsList Web Application is published to the specified Developer account on SAP HANA Cloud. Finally the Started state is shown in Servers view of Eclipse

After the application state changed from Starting... to Started state the Eclipse HANA Cloud tool launched automatically a Web Browser with the application Started Application

Enter as always before John Smith and choose Add Person to verify that the PersonsList application works also on SAP HANA Cloud

93

SAP HANA Cloud Development Scenario (Getting Started)

Launch your application from SAP HANA Cloud cockpit. When you publish your application via the Eclipse HANA Cloud tools the application is launched at the end of the publishing and starting process automatically in the Web Browser. If you want to launch later your already deployed application you can do this from your SAP HANA Cloud cockpit. a. Click on the application link in your SAP HANA Cloud cockpit to get the application details.

b. Then click on the application URL link to launch the application.

94

SAP HANA Cloud Development Scenario (Getting Started)

6 What comes next?
Here are some suggestions what might come next after you successfully executed the five chapters of this tutorial: 1. Continue with how to implement Integration tests in Appendix A2: Automated Integration Testing (UI5 Selenium Tests) 2. Walk through the ESPM Extension Scenario http://scn.sap.com/docs/DOC-41491 to dive deeper into the technologies you developed in the PersonsList Application.

Do you have any questions related to End-to-End SAP HANA Cloud Development Scenarios? Then start a discussion on cross technology SCN forum http://scn.sap.com/community/developercenter/cross-technology/content Ask your scenario questions there or comment what you else need for developing your application development.

95

SAP HANA Cloud Development Scenario (Getting Started)

7 Tutorial Documentation History
This tutorial documentation history describes the changes of this document compared to the first document that was published on http://scn.sap.com/community/developer-center/cross-technology The first published tutorial document had no version and the next published started with version 1.0
Version 1.0 Main Changes compared to version before 1. Added How to use best practice PersonsList application (which has been published on SAP Developers Github)  You can run the best practice PersonsList application before you develop  You can compare best practice with the developed PersonsList for each section 2. Changed EclipseLink version: 2.5 This avoids the before needed persistence.xml configuration for HANA Cloud. 3. Changed description of HANA Cloud developer trial account registration (much shorter now) 4. Added a how to implement and run UI5 integration tests in the appendix 5. Moved the paths and versions (SDK, UI5, etc.) which needs to be configured by the users from pom.xml to settings.xml. 6. Removed the helper servlet (for creating person entities) as this was confusing and a different programming model (OData versus servlets(JEE) approach) 7. Changed many smaller things due to users feedback (network settings, typos, added more info and notes, etc.) 8. Improved PDF tutorial formatting (so that e.g. the copy of code works much better) 1.1 1. Eclipse 4.2 Juno SR2 download procedure changed due Keppler release 2. Added an OS restrictions note (for Windows 32bit and Mac) and explain How to download older neo sdk version (1.26.6.2) to not run into the jco problem when running PersonsList application on local server runtime 3. Added Maven build step in Appendix A1 for ready-to-run PersonsList application 1.2 General installation parts (Eclipse IDE, SAP HANA Cloud Account creation etc.) has been moved to ESPM Installation Guide (chapter 1) Therefore the PersonsList Getting Started Application Scenario is now based on Eclipse Kepler 4.3.1 SR1 Added section 3.2.2: Users can avoid the many error-prone steps of section 3.1 (Conversion of Eclipse PersonsList projects into Maven projects) by checking out the ready to use projects from Git Repository Many versions of technical components (sap odata, selenium, neo-sdk, sapui5, etc.) has been updated to newer ones 1.3 Replaced sap odata library dependencies with Olingo libraries (see section 4.1.1) Modify persistence.xml to enable Long-notation of Persons OData service (see section 4.1.1) Added new section: Fetch newest version of Github sources (section 1.2.3). Fixed a PersonsList Github sources bug in version 1.2, which lead to a Maven error after project import.

96

SAP HANA Cloud Development Scenario (Getting Started)

Appendix
Appendix A1: Run the Ready-to-Use PersonsList Application
Here you will run the final version of the ready-to-use PersonsList Application which you get from the master branch of the Git Repository located at https://github.com/SAP/cloud-personslist-scenario as described in section 1.2.1 and 1.2.2. We assume that you have executed already all sections of chapter 1 of this tutorial (including also chapter 1 of the ESPM Installation Guide) As the step-by-step tutorial explains the publishing of applications in more details we keep the description here very short. First Step: Maven build of PersonsList Project 1. Select personslist-repo/pom.xml and open context menu 2. Choose Run As  Maven build... Edit Configuration dialog opens 3. Enter "clean install" as Goals

4. Choose Run to start the Maven build The Maven build should finish with a BUILD SUCCESS message

97

SAP HANA Cloud Development Scenario (Getting Started)

A1.1 Publish and Run PersonsList application on SAP HANA Cloud local server
1. In Eclipse Project Explorer view select project node personslist-repo-web 2. On the selected project node open context menu and choose Run As  Run on Server. 3. Window Run On Server opens. Make sure that the Manually define new server option is selected. 4. Select SAP  SAP HANA Cloud local runtime as server type 5. Choose Finish. The local runtime starts up in the background and your personslist-web Application is installed, started and ready to serve requests. After about a minute the PersonsList application is launched with the external Web browser (which you configured in ESPM Installation Guide, there in section 1.8) You can test that the application is working by adding a person to the list

98

SAP HANA Cloud Development Scenario (Getting Started)

Close Eclipse Internal Web browser and delete SAP HANA Cloud local server runtime

A1.2 Publish and Run PersonsList application on SAP HANA Cloud
Prerequisite is that you know your SAP HANA Cloud (Trial) Developer Account data  SAP HANA Cloud Developer Account name: "<your p-User>trial" (p-user with lower case)  (SCN) user name: <your p-User> (alternatively <e-mail> as user)  (SCN) user account password: <********> which you created before in the ESPM Installation Guide (there in section 1.2) 99

SAP HANA Cloud Development Scenario (Getting Started) 1. Select personslist-repo-web project node 2. Open context menu Run As  Run on Server. Window Run On Server opens.

a. Make sure that the Manually define a new server option is selected. b. Change default Server’s host name hana.ondemand.com to handtrial.ondemand.com (when entering this value the corresponding Server name will change automatically) 3. Choose Next.

a. Enter personslist as Application name 100

SAP HANA Cloud Development Scenario (Getting Started) b. Then enter your Cloud Account name (<p-user>trial), (SCN) User name (<p-user>) and your password. (In the Screenshot we used the example Account data for Lisa Gordan, the example user used in the ESPM Installation Guide, there in section 1.2) 4. Choose Finish. After this the PersonsList Web Application is published to the specified Developer account on SAP HANA Cloud. In Servers view a corresponding servers node next to the before created local SAP HANA server runtime is created and its status indicates publishing, starting and finally started. As for the locally launch PersonsList you can check that the application works on the SAP HANA Cloud as well.

Close Eclipse External Web browser and delete SAP HANA Cloud server

101

SAP HANA Cloud Development Scenario (Getting Started)

A1.3 Maven Build: Run Automated Integration Test (UI5 Selenium Tests)
1. Prerequisite is that you have installed a Firefox on your system (as mentioned in ESPM Installation Guide, there in section 1.8) 2. In Eclipse Project Explorer view select the personslist-repo/pom.xml and open context menu 3. Choose Run As  Maven build... Edit Configuration dialog opens

a. Enter as Goal: clean install b. Enter as Profiles: local-integration-tests c. (Optional) Enter as name: personslist (i-test) This name can be find after the first run in the Run dropdown list of the Eclipse toolbar:

4. Choose Run This starts the Maven build for the PersonsList project with profile “local-integration-tests”, so that the UI5 integration test (“Adding the name John Smith and check if it appears in the list”) is execute automatically (server is started, application is deployed, Firefox is launched) Firefox Webdriver is lauched:

102

SAP HANA Cloud Development Scenario (Getting Started)

Build and therefore the test finished successfully:

103

SAP HANA Cloud Development Scenario (Getting Started)

Appendix A2: Automated Integration Testing (UI5 Selenium Tests)
Here it is described how to implement a UI5 Selenium integration test for the PersonsList Web Application.

A2.1 Add the integration test dependencies in pom.xml
1. From Eclipse Project Explorer view open the personslist/pom.xml 2. Add the following dependencies inside the dependencies section (the order of dependencies does not matter)
<dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>2.35.0</version> <scope>test</scope> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.7</version> <scope>test</scope> </dependency>

3. Save pom.xml editor

A2.2 Add integration test profiles in pom.xml
1. Open the personslist-web/pom.xml 2. Add the following profiles directly after the build section (</build>) but before the project end tag (</project>)

104

SAP HANA Cloud Development Scenario (Getting Started)

<profiles> <!-- Choose correct command line scripts for interaction with SAP HANA Cloud based on detected operating system --> <profile> <id>unix-scripts</id> <activation> <os> <family>Unix</family> </os> </activation> <properties> <sap.cloud.console.shell>sh</sap.cloud.console.shell> <sap.cloud.console.script>neo.sh</sap.cloud.console.script> </properties> </profile> <profile> <id>windows-scripts</id> <activation> <os> <family>Windows</family> </os> </activation> <properties> <sap.cloud.console.shell>cmd</sap.cloud.console.shell> <sap.cloud.console.script>/c neo.bat</sap.cloud.console.script> </properties> </profile> <!-- Install local server from the P2 repository that is contained inside the SDK, deploy the built web application into it, start local server, wait for it and the built and deployed web application to become available, integration-test the web application on the local server, and stop the local server finally --> <profile> <id>local-integration-tests</id> <activation> <property> <name>local.integration.tests</name> </property> </activation> <build> <plugins> <!-- Find free random ports for the local test server --> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>build-helper-maven-plugin</artifactId> <version>1.7</version> <executions> <execution> <id>reserve-network-port</id> <goals> <goal>reserve-network-port</goal> </goals> <phase>validate</phase> <configuration> <portNames> <portName>local.server.console.port</portName> <portName>local.server.jmx.port</portName> <portName>local.server.http.port</portName> <portName>local.server.https.port</portName> <portName>local.server.ajp.port</portName> </portNames> </configuration> </execution> </executions> </plugin> <plugin> <artifactId>maven-antrun-plugin</artifactId> <version>1.7</version> <executions> <execution> <id>prepare-local-server</id> <phase>pre-integration-test</phase> <goals> <goal>run</goal> </goals> <configuration> <target> <copy file="${project.build.directory}/${project.artifactId}.war" todir="${local.server.root}/pickup" /> <exec dir="${sap.cloud.sdk.path}/tools" executable="${sap.cloud.console.shell}" failonerror="true"> <arg line="${sap.cloud.console.script} install-local --location ${local.server.root} --jmxPort ${local.server.jmx.port} --httpPort ${local.server.http.port} --httpsPort ${local.server.https.port} --ajpPort ${local.server.ajp.port} --httpProxyHost 0 --httpProxyPort 0 --httpsProxyHost 0 --httpsProxyPort 0" /> </exec> <exec dir="${sap.cloud.sdk.path}/tools" executable="${sap.cloud.console.shell}" failonerror="true"> <arg line="${sap.cloud.console.script} start-local --location ${local.server.root} --consolePort ${local.server.console.port} --waitUrl http://${local.server.host}:${local.server.http.port}/${project.artifactId}/ --waitUrlTimeout 120" /> </exec> </target> </configuration> </execution> <execution> <id>cleanup-local-server</id> <phase>post-integration-test</phase> <goals> <goal>run</goal> </goals> <configuration> <target> <exec dir="${sap.cloud.sdk.path}/tools" executable="${sap.cloud.console.shell}" failonerror="true"> <arg line="${sap.cloud.console.script} stop-local --consolePort ${local.server.console.port}" /> </exec> </target> </configuration> </execution> </executions> </plugin> <plugin> <artifactId>maven-failsafe-plugin</artifactId> <version>2.14</version> <executions> <execution> <id>execute-local-integration-tests</id> <goals> <goal>integration-test</goal> </goals> <configuration> <argLine>-Dhttp.proxyHost=0 -Dhttp.proxyPort=0 -Dhttps.proxyHost=0 -Dhttps.proxyPort=0</argLine> <systemPropertyVariables> <integration.test.server.url>http://${local.server.host}:${local.server.http.port}</integration.test.server.url> <webdriver.firefox.bin>${webdriver.firefox.bin}</webdriver.firefox.bin> </systemPropertyVariables> </configuration> </execution> <execution> <id>verify-local-integration-tests</id> <goals> <goal>verify</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </profile> </profiles>

105

SAP HANA Cloud Development Scenario (Getting Started) 3. Save pom.xml editor.

A2.3 Create Integration Test
Create project folder src/test/java
1. Create a new project folder structure src/test/java in project personslist-web a. Select personslist-web project and open context menu b. Choose New  Folder New Folder dialog opens c. Enter the following string as Folder name src/test/java d. Choose Finish to create the new folder structure src/test/java under the existing project folder personslist-web

Create PageObject.java
1. 2. 3. 4. 5. Select personslist-web/Java Resources/src/test/java node From the context menu, choose New  Class Enter com.sap.personslist.web.pageobjects as package and PageObject as Name Choose Finish to create the new Java Class In the opened editor replace the entire content with the following

106

SAP HANA Cloud Development Scenario (Getting Started)

package com.sap.personslist.web.pageobjects; import static org.junit.Assert.fail; import import import import import import import org.openqa.selenium.NoSuchElementException; org.openqa.selenium.TimeoutException; org.openqa.selenium.WebDriver; org.openqa.selenium.WebDriverException; org.openqa.selenium.WebElement; org.openqa.selenium.support.PageFactory; org.openqa.selenium.support.ui.WebDriverWait;

import com.google.common.base.Function; public abstract class PageObject { private static final long TIMEOUT_IN_SECONDS = 10; protected final WebDriver driver; private String errorMessage; protected PageObject(final WebDriver driver) { this.driver = driver; } protected final <P extends PageObject> P create(final Class<P> pageClass) { return create(driver, pageClass); } public static <P extends PageObject> P create(final WebDriver driver, final Class<P> pageClass) { final P page = PageFactory.initElements(driver, pageClass); page.checkIfWeAreOnCurrentPage(); return page; } protected final void checkIfWeAreOnCurrentPage() { waitUntil(weAreOnCurrentPage()); } /** * Fluently wait until a condition is fulfilled or time is up. Fails with * the stored error message if the timeout occurs. * * @param waitCondition * * @see #check(boolean, String) */ protected final void waitUntil( final Function<WebDriver, Boolean> waitCondition) { try { errorMessage = null; new WebDriverWait(driver, TIMEOUT_IN_SECONDS).until(waitCondition); } catch (final TimeoutException e) { fail("Wait condition failed: " + errorMessage); } } private Function<WebDriver, Boolean> weAreOnCurrentPage() { return new Function<WebDriver, Boolean>() { @Override public Boolean apply(final WebDriver driver) { return isCurrentPage(); } }; } protected abstract boolean isCurrentPage(); /** * To be used by subclasses, inside {@link #isCurrentPage()} or * #waitUntil(Function) Checks whether the element is on the screen. * * @see #checkElementIsDisplayed(WebElement, String) */ protected final boolean checkElementIsDisplayed(final WebElement element) { String id = "<unknown>"; try { id = element.getAttribute("id"); } catch (final WebDriverException e) { System.err.println("Error retrieving element id: " + element); } return checkElementIsDisplayed(element, id); } /** * To be used by subclasses, inside {@link #isCurrentPage()} or * {@link #waitUntil(Function)} . In addition to checking whether the * element is on the screen it stores an errorMessage if the element is not * found, which is displayed if the page transition or wait condition fails. */ protected final boolean checkElementIsDisplayed(final WebElement element, final String elementName) { try { if (!element.isDisplayed()) { this.errorMessage = "Element not displayed: " + elementName; return false; } } catch (final NoSuchElementException e) { this.errorMessage = "Element not found: " + elementName; return false; } return true; } /** * To be used by subclasses, inside isCurrentPage and stores an errorMessage * if the condition is false, which is displayed if the page transition * fails. */ protected final boolean check(boolean condition, String errorMessage) { this.errorMessage = errorMessage; return condition; } }

6. Save editor.

Create PersonsListPage.java
1. Select personslist-web/Java Resources/src/test/java/com.sap.personslist.web.pageobjects package node 2. From the context menu, choose New  Class 107

SAP HANA Cloud Development Scenario (Getting Started) 3. Enter PersonsListPage as Name 4. Choose Finish to create the new Java Class 5. In the opened editor replace the entire content with the following
package com.sap.personslist.web.pageobjects; import static org.junit.Assert.assertEquals; import java.util.List; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.support.FindBy; import com.google.common.base.Function; /** * Page object for personslist view */ public class PersonsListPage extends PageObject { @FindBy(id = "firstNameFieldId") protected WebElement firstName; @FindBy(id = "lastNameFieldId") protected WebElement lastName; @FindBy(id = "addPersonButtonId") protected WebElement addPersonButton; @FindBy(id = "__field0-col0-row0") private WebElement firstNameInFirstRowOfList; @FindBy(id = "__field1-col1-row0") private WebElement lastNameInFirstRowOfList; @FindBy(id = "__alert0--btn-OK") private List<WebElement> submitConfirmOkButton; public PersonsListPage(WebDriver driver) { super(driver); } public static PersonsListPage create(final WebDriver driver) { return PageObject.create(driver, PersonsListPage.class); } @Override protected boolean isCurrentPage() { return true; } public String getFirstName() { return firstName.getAttribute("value"); } public String getFirstNameInFirstRowOfList() { return firstNameInFirstRowOfList.getAttribute("value"); } public String getLastName() { return lastName.getAttribute("value"); } public String getLastNameInFirstRowOfList() { return lastNameInFirstRowOfList.getAttribute("value"); } public void setFirstName( String text ) { firstName.clear(); firstName.sendKeys(text); assertEquals(text, getFirstName()); } public void setLastName( String text ) { lastName.clear(); lastName.sendKeys(text); assertEquals(text, getLastName()); } public PersonsListPage addPerson() { addPersonButton.click(); waitUntil(submitConfirmationIsShown()); submitConfirmOkButton.get(0).click(); return PersonsListPage.create(driver); } private Function<WebDriver, Boolean> submitConfirmationIsShown() { return new Function<WebDriver, Boolean>() { @Override public Boolean apply(final WebDriver driver) { return !submitConfirmOkButton.isEmpty(); } }; } }

6. Save editor.

Create UiTestBase.java
1. 2. 3. 4. 5. Select personslist-web/Java Resources/src/test/java node From the context menu, choose New  Class Enter com.sap.personslist.web as package and UiTestBase as Name Choose Finish to create the new Java Class In the opened editor replace the entire content with the following

108

SAP HANA Cloud Development Scenario (Getting Started)

package com.sap.personslist.web; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import import import import import import import import import import import import import org.apache.commons.io.FileUtils; org.junit.After; org.junit.AfterClass; org.junit.BeforeClass; org.junit.Rule; org.junit.rules.TestName; org.openqa.selenium.OutputType; org.openqa.selenium.Proxy; org.openqa.selenium.TakesScreenshot; org.openqa.selenium.WebDriver; org.openqa.selenium.firefox.FirefoxDriver; org.openqa.selenium.remote.CapabilityType; org.openqa.selenium.remote.DesiredCapabilities;

public class UiTestBase { @Rule public static TestName testName = new TestName(); public static String serverUrl = System.getProperty( "integration.test.server.url", "http://localhost:9080"); public static String applicationPath = System.getProperty( "integration.test.application.path", "/personslist-web/index.html"); public static File screenshotFolder = new File(System.getProperty( "integration.test.screenshot.path", "target/screenshots")) .getAbsoluteFile(); public static WebDriver driver; @BeforeClass public static void setupClass() throws Exception { setupScreenshotFolder(); setupFirefox(); } private static void setupScreenshotFolder() { if (!screenshotFolder.exists()) { screenshotFolder.mkdirs(); } System.out.println("Screenshots are saved in " + screenshotFolder); } private static void setupFirefox() { final DesiredCapabilities capabilities = new DesiredCapabilities(); final String proxyHost = System.getProperty("http.proxyHost"); final String proxyPort = System.getProperty("http.proxyPort"); if (proxyHost != null) { System.out .println("Configuring Firefox Selenium web driver with proxy " + proxyHost + (proxyPort == null ? "" : ":" + proxyPort) + " (requires Firefox browser)"); final Proxy proxy = new Proxy(); final String proxyString = proxyHost + (proxyPort == null ? "" : ":" + proxyPort); proxy.setHttpProxy(proxyString).setSslProxy(proxyString); proxy.setNoProxy("localhost"); capabilities.setCapability(CapabilityType.PROXY, proxy); } else { System.out .println("Configuring Firefox Selenium web driver without proxy (requires Firefox browser)"); } driver = new FirefoxDriver(capabilities); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); } @AfterClass public static void teardownClass() { driver.quit(); } @After public void tearDown() throws Exception { takeScreenshot(); } private void takeScreenshot() throws IOException { final File tempFile = ((TakesScreenshot) driver) .getScreenshotAs(OutputType.FILE); final String targetName = getClass().getSimpleName() + "." + testName.getMethodName() + ".png"; final File targetFile = new File(screenshotFolder, targetName); FileUtils.copyFile(tempFile, targetFile); System.out.println("Screenshot for test " + testName.getMethodName() + " saved in " + targetFile.getAbsolutePath()); } }

6. Save editor.

Create PersonsListIT.java
1. Select personslist-web/Java Resources/src/test/java/com.sap.personslist.web package node 2. From the context menu, choose New  Class 3. Enter PersonsListIT as Name 4. Choose Finish to create the new Java Class 5. In the opened editor replace the entire content with the following
package com.sap.personslist.web; import static org.junit.Assert.assertEquals; import org.junit.Test; import com.sap.personslist.web.pageobjects.PersonsListPage; public class PersonsListIT extends UiTestBase { @Test public void testCreateReview() { driver.get(serverUrl + applicationPath); PersonsListPage personsListPage = PersonsListPage.create(driver); personsListPage.setFirstName("John"); personsListPage.setLastName("Smith"); personsListPage = personsListPage.addPerson(); assertEquals("First name John was not added", "John", personsListPage.getFirstNameInFirstRowOfList()); assertEquals("First name Smith was not added", "Smith", personsListPage.getLastNameInFirstRowOfList()); } }

6. Save editor.

For running this created integration test follow the description of Appendix A1.3 Maven Build: Run Automated Integration Test (UI5 Selenium Tests).

109

SAP HANA Cloud Development Scenario (Getting Started)

Appendix A3: Compare developed with Best Practice PersonsList Application
A3.2 Compare Example: PersonsList Maven Project
Follow the screenshot series to compare your developed version after section 3.2.1.3 with the corresponding best practice solution. Compare other sections work basically the same. Projects personslist, personslist-model-jpa and personslist-web in Project Explorer are your developed PersonsList projects after section 3.2.3. If you have still corresponding “–repo” personslist projects imported in your Project Explorer view then first remove them as described here for the master branch. Remove personslist ”-repo” projects (if imported otherwise skip this)

110

SAP HANA Cloud Development Scenario (Getting Started) Reset master branch

111

SAP HANA Cloud Development Scenario (Getting Started) Create section-3.1.2.3 Branch (containing the best practice sources)

Create section-3.1.2.3 Branch Maven Projects Because the personslist parent project has not yet defined the other two projects as modules all three projects have to be imported separately: personslist 1. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\git\cloudpersonslist-scenario\personslist

112

SAP HANA Cloud Development Scenario (Getting Started)

personslist-model-jpa 1. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\git\cloudpersonslist-scenario\personslist\personslist-model-jpa

Ignore the error that will occur. Remove error marker on jpa project by the following steps 1. Select the project node which shows a Maven error and open context menu 2. Choose option Maven  Update Project... 3. Update Maven Project dialog opens 4. Make sure that the intended project is selected and choose OK to update the project

113

SAP HANA Cloud Development Scenario (Getting Started) personslist-web 1. In the Eclipse main menu: File  Import... ; Maven  Existing Maven Projects 2. Choose Next and then choose Browse... and navigate to location C:\dev\git\cloudpersonslist-scenario\personslist\personslist-web

The three imported personslist “repo” projects

114

SAP HANA Cloud Development Scenario (Getting Started) Compare personslist-repo-web with your developed personslist-web project

115

SAP HANA Cloud Development Scenario (Getting Started)

116