Getting Started. SAP HANA Cloud End-to-End-Development Scenarios. Develop your first End-to-End SAP HANA Cloud Application Scenario. Version 1.4.

Transcription

1 SAP HANA Cloud End-to-End-Development Scenarios Getting Started Develop your first End-to-End SAP HANA Cloud Application Scenario Version

2 Copyright 2014 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 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 intended 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

3 Table of Contents Table of Contents... 3 Introduction Installation Installation Guide SAP HANA Cloud Platform Development Java 7 JDK Register for SAP HANA Cloud Developer Account Eclipse IDE for SAP HANA Cloud Application Development Eclipse SAP HANA Cloud Tools Installation Eclipse SAP HANA Cloud SDK Installation Maven Integration for Eclipse Installation Web Browsers Ready-to-Run PersonsList Application Sources Download ready-to-run PersonsList Application sources Import ready-to-run PersonsList Application projects into your Eclipse Fetch newest version of Github sources What comes next after the Installation part? Develop a SAPUI5-based Web Application Create Web Project for SAPUI5 Application Development Add a SAPUI5 button to Application View Extend Web Application UI - PersonsList Table Deploy and Run SAPUI5 Web Application in SAP HANA Cloud Add SAP HANA Cloud library Configure your SAP HANA Cloud server in Eclipse Verify that all HANA Cloud Application are in stopped Run State Publish and Run PersonsList Web Application to Cloud Use JPA Model and Persistence Cloud Service for PersonsList Web Application Develop a JPA Model Create a JPA Project Create Person Entity Using the Graphical JPA Editor Maintain Meta-Data of Person entity Modify personlist web.xml Convert PersonsList Application Eclipse Projects into Maven Projects Convert PersonsList Eclipse Projects step by step into a Maven Project Check out Maven-converted PersonsList Projects Bind Application UI and JPA Model via OData Service Expose the JPA-based Person Database Entities by means of OData Service

4 4.1.1 Configuration and Implementation Steps to expose Person Entity as OData Service Test OData Service Bind PersonsList Application UI and JPA Model via the OData Service Publish and Test PersonsList Application on local Java Web Server Publish and Run PersonsList Application on SAP HANA Cloud Publish and Run PersonsList Application on SAP HANA Cloud Configure your SAP HANA Cloud server in Eclipse Verify that all HANA Cloud Application are in stopped Run State Create a new SAP HANA Cloud server entry in Eclipse Publish and Run PersonsList Web Application on SAP HANA Cloud What comes next? Tutorial Documentation History Appendix Appendix A1: Run the Ready-to-Use PersonsList Application A1.1 Publish and Run PersonsList application on Java Web Server A1.2 Publish and Run PersonsList application on SAP HANA Cloud A1.3 Maven Build: Run Automated Integration Test (UI5 Selenium Tests) Appendix A2: Automated Integration Testing (UI5 Selenium Tests) A2.1 Add the integration test dependencies in pom.xml A2.2 Add integration test profiles in pom.xml A2.3 Create Integration Test Appendix A3: Compare developed with Best Practice PersonsList Application A3.2 Compare Example: PersonsList Maven Project

5 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 first on a local Java Web Server and finally on SAP HANA Cloud Platform. 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

6 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

7 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. In the first section 1.1 of the Installation chapter it is described how you setup your Eclipse-based development environment for SAP HANA Cloud Platform Application Development. This can then be used for all kind of SAP HANA Cloud Application development but here you use it to develop the endto-end PersonsList Application scenario. 1.1 Installation Guide SAP HANA Cloud Platform Development Make sure that the programs and tools are installed and configured as described in the following sections. Follow and execute exactly all steps of all sections in this section 1.1. If you use the recommended default configurations (locations, paths, etc.) it is the best guarantee that the developed PersonsList application will build and run without any errors due to misconfigured development tools. Section Type What is needed by the Tutorial Version Configuration program Java SE 7 jdk1.7.0_67 (or higher)* account SAP HANA Cloud Developer Account program Eclipse IDE for Java EE tools HANA Cloud Tools Installation Kepler (4.3.2)SR2* newest update sdk HANA Cloud SDK (Minimum)* tool Maven Integration for Eclipse WTP set JAVA_HOME=C:\Java\Program Files jdk1.7.0_67 and %JAVA_HOME%\bin added to PATH C:\dev\eclipse (default location used in this tutorial) C:\dev\hanacloud.sdk\<sdk.version> (default location used in this tutorial) settings.xml: eclipse path, sapui5 version, neo-sdk version/path program Chrome and Firefox Web Browsers newest update (*) With these versions the PersonsList applications has been tested to work 7

8 Operating System (OS) This tutorial has been proven to work for Windows 64bit OS Java 7 JDK Make sure that you have installed latest Java 7 JDK from here: Java Development Kit 7 1. Installation details (for Windows 7) Choose Download of Java Platform (JDK) of Java SE 7u<version> 2. Choose download link (e.g. jdk-7u67-windows-x64.exe for Windows x64) which corresponds to your operating system. The version of the JDK displayed in the screenshot might already be higher. The tutorial should work with any higher version as well. 8

9 3. Execute the jdk-7u67-windows-x64.exe you downloaded and install the JDK to <local-pathto-jdk-7> (for example C:\Program Files\Java\jdk1.7.0_51). 4. Set the system environment variable JAVA_HOME=< local-path-to-jdk-7> 5. For Windows choose Start Control Panel System and Security System Advanced system settings. 6. Choose New to add the new JAVA_HOME system variable. 7. Select Path from the System variables list and choose Edit to add ";%JAVA_HOME%\bin" to the end of your path variable. 8. Confirm with OK Register for SAP HANA Cloud Developer Account For developing and running Web applications on SAP HANA Cloud you have to register once for a Cloud Developer Account. Execute the following steps to register for your own Cloud Developer Account. 1. Open 2. Choose Register to open a registration form. 9

10 3. On the registration form enter the corresponding fields, read the Terms of use and then select the option that you have read and understand the Terms and Conditions of SAP HANA Cloud. 4. Choose Register 10

11 5. A registration confirmation message appears. An which contains the activation link of your cloud developer account will be sent to you. 6. Open this mail which was sent to your account and choose the Click here to activate your account button. An Account Successfully Activated message will appear. 7. Choose Continue to launch the SAP HANA Cloud Cockpit of your newly created developer account. 8. Choose Continue and SAP HANA Cloud cockpit for your developer account is launched. 11

12 In the header of the cloud cockpit you find the important info of your SAP Community Network (SCN) User name: the display name (here Lisa Gordon) and the unique P-User in brackets (here P )). On the upper left side you find your SAP HANA Cloud trial account name of form "<p- USER>trial" (p-user with lower case; here p trial). Furthermore you find on the by default selected Applications tab the Applications panel where the currently published applications on your trial account are listed. Initially there is no application deployed in your account. There Explore, Develop and Watch panel where you get more information how you could start with developing a Web application and run it in the SAP HANA Cloud. you might read the corresponding HANA Cloud documentation here Remember your Account Data After executing successfully the above described account creation steps you have your SAP HANA Cloud (Trial) Developer Account with the following three parameters which you need later several times in the tutorial: SAP HANA Cloud Developer Account name: "<your p-user>trial" (p-user with lower case) (SCN) user name: <your P-User> (alternatively < > as user) (SCN) user account password: <********> By means of this account you will publish and run the developed Web Application in your SAP HANA Cloud developer account as described later in this tutorial. During the SAP HANA Cloud Developer Account creation an SCN user account has been created with which you can deploy your Web applications to your SAP HANA Cloud Trial developer account. But you can also log on to SAP Community Network where e.g. developers share their knowledge or ask questions in the SCN Developer Center Eclipse IDE for SAP HANA Cloud Application Development 1. Download Eclipse IDE for Java EE Developers Kepler (4.3.2) SR2 package from here 12

13 Download for Windows 64 Bit 2. Extract the archive to C:/dev. Optional Information: Eclipse installation notes Make sure that Eclipse has write access to its installation location. If you have installed it under Program Files, you might have to run it as an administrator. Otherwise, you may receive strange error messages 3. Execute C:/dev/eclipse/eclipse.exe (Workspace Launcher dialog box opens). 4. In the Workspace Launcher dialog replace the suggested workspace path by workspace only This ensures that the workspace is created in the eclipse installation folder C:/dev/eclipse/workspace 5. Confirm the dialog with OK Eclipse IDE will come up. 6. In the opened Eclipse IDE close first the Welcome page. 7. From the Eclipse main menu choose Window Preferences (Preferences dialog box opens). 13

14 8. Ensure you are using a JDK not a JRE (The reason is that the later used Maven in Eclipse tool need a Java SDK and will not work correctly with a Java JRE) Navigate to Java Installed JREs and ensure that the installed Java SDK 7 is selected as the Standard VM and NOT a JRE! If Java JDK is not yet selected, then proceed as follows: a) Choose Add... b) Select Standard VM and choose Next c) In the JRE home field, choose Directory... d) Navigate to the location of your jdk7 (e.g. C:/Program Files/Java/jdk1.7.0_67) and confirm with OK e) Select the checkbox of the jdk7 you just added (as shown in the screenshot above). 9. Then close the Preference dialog box with OK Eclipse SAP HANA Cloud Tools Installation Make sure that Eclipse IDE is started and if a Welcome page is displayed, then close it. Configure Proxy Settings 1. From the Eclipse main menu, choose Window Preferences. In some operating systems, the path is Eclipse Preferences. 2. Choose General Network Connections to configure your proxy settings (either non-proxy case 1 or proxy case 2). a) Case 1: Execute the following sub steps if you are not working in a network which uses a proxy: Select Direct as Active Provider 14

15 Choose OK. b) Case 2: Execute the following sub steps if you are working in a network which uses a proxy: (Example proxy settings: host: proxy; port: 8080; bypass proxy for *.corp Adapt values according to your network) Active Provider: Manual Proxy entries for HTTP and HTTPS: proxy:8080, no proxy authentication (In Proxy entries group: Select line with Schema HTTP and Provider Manual Choose Edit... Enter proxy as Host and 8080 as Port Confirm by choosing OK. Then do the same for HTTPS) Proxy bypass: *.corp (Choose Add Host... enter string *.corp and confirm with OK. Choose OK. Install SAP HANA Cloud Tools 1. In your Eclipse IDE, choose Help Install New Software. 2. Enter the following URL in the Work with field and press ENTER 15

16 If the Secure Storage dialog box asks for a new master password then choose No. 3. Select SAP HANA Cloud Tools and UI Development Toolkit for HTML5 categories as shown in the next screenshot and then choose Next. 4. On the displayed Install Details page choose again Next. 5. Then read and accept the license agreement. 6. Choose Finish. During the installation, a Security Warning dialog box might appear stating that you are installing software which contains unsigned content. 7. In case it appears then confirm with OK to continue the installation. At the end of the installation, a message is displayed stating that you need to restart Eclipse and asking if you would like to restart now. 8. Confirm the dialog with Yes to restart Eclipse immediately. After this the SAP HANA Cloud Tools are installed. 16

17 1.1.5 Eclipse SAP HANA Cloud SDK Installation To install the newest SAP HANA Cloud SDK (1.x) on your system execute the following steps 1. Open The version of neo-java-web-sdk (technical short name for SAP HANA Cloud Platform SDK) displayed in the screenshot might already be higher. The tutorial should work with any higher version as well. 2. Click on neo-java-web-sdk-<sdk.version>.zip link Before you are allowed to download the SDK you have to read and agree to the SAP Developer License agreement 3. Choose I Have Read And Agreed to accept the SAP Developer License. After this the download of the SAP HANA Cloud SDK with zip name 'neo-java-web-sdk- <version>.zip' starts. 4. After the neo-sdk download has finished the tools page is still displayed. Please ignore the further instruction of tools page and close the tools page. 17

18 To maintain later the different versions of HANA Cloud SDK you should organize it right from the beginning in a versioned file structure as described in the next two steps: 1. The above downloaded zip neo-java-web-sdk-<sdk.version>.zip contains the sdk version. 2. Extract now the archive to a location C:\dev\hanacloud.sdk\<sdk.version> where <sdk.version> is the value you find before (e.g. C:\dev\hanacloud.sdk\ ). (If you choose another location then you have to adapt all HANA Cloud SDK paths used later on in the tutorial.) Additional information: SAP HANA Cloud SDK For supported APIs for creating SAP HANA Cloud Applications see here Set up SAP HANA Cloud Runtime Environment 1. From the Eclipse IDE main menu, choose Window Preferences. 2. Choose Server Runtime Environment. 3. Choose the Add... button. 4. Select SAP Java Web and choose Next. 5. Java Web is set as the default name and there is no need to change. 6. Choose the Use Java Web SDK from the following location option. 7. Choose Browse... and select the location where you extracted the SAP HANA SDK (see the previous section). 18

19 8. Choose Finish. 9. This adds the Java Web server runtime environment. This is the default runtime you will use later on as the target runtime for your Dynamic Web Project and to deploy Java EE applications and for consuming services. 10. On the Preferences window, choose OK Maven Integration for Eclipse Installation Maven Usage Is Apache Maven Mandatory for this End-to-End Scenario? Java EE-based SAP HANA Cloud Application development is still possible without Maven build technology, even though this may result in many more manual steps to find the necessary libraries. This is not demonstrated in this tutorial but Maven is used instead. You can execute the Maven-related build steps in the tutorial without knowing any details of Maven. If you want to learn more about Maven, see 19

20 Optional Information: Why using Apache Maven here Developers may have seen how easily the SAP HANA Cloud platform works for the simplest Java EE applications (for an example, see the Hello World or the Hello World extended with JPA Persistence tutorials). Create a dynamic Web project, add a few JAR files to the WEB-INF/lib, specify the SAP HANA Cloud runtime (Local Server or Cloud) as API, publish the application to the server manually via Eclipse Tools and see finally how the application works by manually starting and using it in a Web browser. This gives an initial impression of how Java EE-based development and SAP HANA Cloud work smoothly together. But what if the Java EE application to be developed becomes more complex? In that case developers need the following: 1. Dependencies/versions management support for the libraries used. 2. Automatic builds to set up continuous integration 3. Automated integration tests to ensure high quality software. This cannot be achieved with the large number of manual steps seen in the initial simple application tutorials. This is where Apache Maven as a build technology comes in. Note, that you are not restricted to using this build tool, however. Apache Maven was chosen as it has been widely adopted but the principles apply equally to other build systems. Maven as introduced here in the end-to-end scenario will show: 1. How the required and specified library/jar dependencies in a pom.xml will resolve the dependent jar files automatically. These dependent jar files are copied during the Maven build in the WEB-INF/lib of the developed Java EEbased application. 2. How a headless build and test can be completely automated. Maven could not only help resolve the dependencies that are required and put them in the right location in your Java EE application, it can also automate the build and test it Maven Integration for Eclipse Configuration Steps To build Java EE application projects from Eclipse IDE using Apache Maven, you can use the Maven Integration tools for Eclipse, which are by default part of the before installed Eclipse IDE for Java EE Developers Kepler (4.3.2) SR2 package. These consist of the Maven-Eclipse integration and the Maven-Eclipse-WTP (Web Tools Platform) integration, which provide a bridge between Maven, Eclipse and the WTP tooling. To work with the Maven integration tool you need to configure it as follows Configure Maven The following Maven configuration steps ensure that access to the public Central Maven Repository (where all most of the artifacts, i.e. jar files, libraries, etc. needed for build are stored) is enabled, and 20

21 that the additional repositories which are defined in the pom.xml of subsequently created projects can be accessed. Maven User Settings 1. From the Eclipse main menu, choose Window Preferences and then select Maven User Settings. If you use Maven for the first time you will find a warning message User settings file doesn t exist as shown in the following screenshot In this case you have to create first a.m2 folder and an empty settings.xml file on your file system a) Create a folder called <local-user-home-path>\.m2 (<local-user-home-path> is the User home path as shown in the above picture (C:\Users\<myusername>). On Windows you can do this by running a command prompt and creating the new directory (such as md C:\Users\<myusername>\.m2). b) Inside the newly created.m2 folder create an empty settings.xml file c) Close the before opened Preferences dialog and reopen it (Window Preferences and then select Maven User Settings) It should now look similar to the following picture: There is an error message Could not read settings.xml, because the settings.xml is still empty 21

22 2. Click on open file link so that a settings.xml editor is opened in Eclipse. 3. Close the Preference dialog by choosing OK. 4. Switch to the Source tab to edit the setting.xml as described next. If you have already worked with Maven before, then you have already a settings.xml with content in it. Make sure that add the below described settings parts (<profile> or <proxies>) to your existing settings.xml Edit settings.xml Now you add content to the empty settings.xml editor. If you are not working in a network with a proxy (typically companies are working behind a firewall proxy), then choose the non-proxy case 1 to edit your settings.xml. In case you are working with a proxy, then choose the below proxy case 2. non-proxy Case 1: 1. Copy and paste the following content into the opened settings.xml editor <settings xmlns=" xmlns:xsi=" xsi:schemalocation=" <localrepository>${user.home}/.m2/repository</localrepository> <profiles> <profile> <id>development</id> <activation> <activebydefault>true</activebydefault> </activation> <properties>  <local.server.proxy.settings></local.server.proxy.settings> <browser.proxy.settings></browser.proxy.settings>  <sap.cloud.sdk.version> </sap.cloud.sdk.version> <sap.cloud.sdk.path>c:/dev/hanacloud.sdk/ </sap.cloud.sdk.path> </properties> </profile> </profiles> </settings> 2. Configure the copied content The property values defined in the properties section needs to be adapted to your development environment (location paths of artifacts like Eclipse, SDK, etc. and corresponding versions) Check all below properties step by step and if needed change the corresponding value in settings.xml. 22

23 sap.cloud.sdk.path and sap.cloud.sdk.version: In installation section you already learned how to determine the version of the downloaded HANA Cloud SDK. Change value sap.cloud.sdk.version accordingly. Default path according to neo SDK installation section is C:/dev/hanacloud.sdk/<sdk.version>. Adapt if necessary. 3. Save settings.xml editor proxy Case 2: Be very careful when specifying each of these property values. If only one value is wrongly defined it will result later (in chapter 3) in Maven build errors. Here we use as example proxy values: proxy host proxy and proxy port 8080 : 1. Copy and paste the following content to the newly created settings.xml <settings xmlns=" xmlns:xsi=" xsi:schemalocation=" <localrepository>${user.home}/.m2/repository</localrepository> <proxies> <proxy> <active>true</active> <protocol>http</protocol> <host>proxy</host> <port>8080</port> </proxy> <proxy> <active>true</active> <protocol>https</protocol> <host>proxy</host> <port>8080</port> </proxy> </proxies> <profiles> <profile> <id>development</id> <activation> <activebydefault>true</activebydefault> </activation> <properties>  <local.server.proxy.settings>--httpproxyhost proxy --httpproxyport httpsproxyhost proxy --httpsproxyport 8080</local.server.proxy.settings> <browser.proxy.settings>-dhttp.proxyhost=proxy -Dhttp.proxyPort=8080 -Dhttps.proxyHost=proxy -Dhttps.proxyPort=8080</browser.proxy.settings>  <sap.cloud.sdk.version> </sap.cloud.sdk.version> <sap.cloud.sdk.path>c:/dev/hanacloud.sdk/ </sap.cloud.sdk.path> </properties> </profile> </profiles> </settings> 2. Configure the copied content The property values defined in the properties section needs to be adapted to your development environment (proxy host and port, location paths of artifacts like Eclipse, SDK, etc. and corresponding versions) Check all below properties step by step and if needed change the corresponding value in settings.xml. 1. Proxy host and proxy port: First adapt in the <proxies> and <properties> section all six <host> and <port> values, i.e. replace all default values proxy and 8080 with your network proxy values. Second replace in the <properties> section all occurrences of default values 2. sap.cloud.sdk.path and sap.cloud.sdk.version: In installation section you already learned how to determine the version of the downloaded HANA Cloud SDK. Change value sap.cloud.sdk.version accordingly. Default path according to neo SDK installation section is C:/dev/hanacloud.sdk/<sdk.version>. Adapt if necessary. Be very careful when specifying each of these property values. If only one value is wrongly defined it will result later (in chapter 3) in Maven build errors. 23

24 3. Save settings.xml editor. Advanced Additional Information: Build Properties defined in settings.xml Defining property values in settings.xml to use them later (in chapter 3) for the Maven application build is not what should be defined in settings.xml. They should in general be defined directly in the pom.xml of the Maven project. But as the tutorial content (project sources) is Git based it is better to define the configurable paths and versions outside the Git repository content to ease later the switching of branches when comparing the best practice application with your developed application. Check Maven User Settings 1. From the Eclipse main menu, choose Window Preferences and there select Maven User Settings. Now the User settings page should look similar to the following picture (confirm that no warning/error message is displayed anymore and User Settings and Local Repository values are defined) 2. Close Preferences dialog and choose OK. 24

25 Verify Maven settings by building a Maven Project Because it is crucial for working with the tutorial Example applications you will create a simple Maven project and verify that the Maven build with the specified settings.xml works. 1. From the Eclipse main menu, choose File New Project. The New Project wizard opens. 2. Choose General Project and then Next. 3. Enter as Project Name maven-test and choose Finish to create this Project 4. Select project node maven-test and open context menu 5. Choose Configure Convert to Maven Project. 6. In the opened Create new POM dialog enter maven-test as Group Id and Artifact Id and choose pom as Packaging type. 7. Then choose Finish to create a pom.xml file under the maven-test project node which is converted now to a Maven project. The pom.xml file is opened in an editor. Switch to pom.xml tab 25

26 8. Copy & paste the following xml content to the pom.xml file editor and replace the existing content. <project xmlns=" xmlns:xsi=" xsi:schemalocation=" <modelversion>4.0.0</modelversion> <groupid>maven-test</groupid> <artifactid>maven-test</artifactid> <version>0.0.1-snapshot</version> <packaging>pom</packaging> <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> </dependencies> </project> 9. Save pom.xml. There should be no error markers on the saved pom.xml file otherwise you should check the correctness of the sap.cloud.sdk.version property values in settings.xml again. 10. Start a Maven test build Select project file maven-test/pom.xml and open context menu 11. Choose Run As Maven build 26

27 12. In the opened Edit Configuration dialog enter clean install as Goals and then choose Run to start the Maven build This should result in a BUILD SUCCESS message if you specified the Maven Settings before correctly If not, you might see error markers on the pom.xml and then you should check if your Maven settings (paths in the settings.xml) were correctly specified. Before this is not running correctly, you should not continue with this tutorial. 13. After you verified that the Maven build works with your settings then delete the maven-test project again. Select project and choose Delete from context menu. Select Delete project contents on disk option and click OK. 27

28 With these steps you have finished verifying that your Maven settings are correct so that you can build later the ESPM and other Maven based SAP HANA Cloud application projects. Later in this installation guide it is described how to build the ESPM applications. In the more detailed ESPM application tutorials (see chapter Error! Reference source not found.) you use this build technology to run their integration tests with Maven Eclipse tools Web Browsers Make sure that you have installed the following two Web Browsers to execute always the full scope of the development scenario Chrome Web Browser (renders SAPUI5 Mobile Web applications correctly) (Version 37.0 was used here to execute the PersonsList development scenario) Firefox (used by default for the implemented Selenium UI Integration tests) (Version 24.0 was used here to execute the UI selenium tests of the PersonsList application) Configure Eclipse to use external Web Browser Instead of using the Eclipse Internal Web Browser, which comes up by default when choosing Run As... on SAP HANA Cloud server (is used when running web application later in this tutorial), you should define an external Browser to be launched in this case. For this execute the following steps 1. From the main menu, choose Window Preferences. 2. Configure your preferred external Web Browser from General Web Browser. 3. Choose option Use external Web Browser and select e.g. Chrome. Confirm with OK. 28

29 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 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 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 29

30 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). 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) 30

31 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. There might already be more checked branches than displayed in the screenshot above. The tutorial is not affected by the additional branches. 31

32 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. 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 PersonsList version as project to your Eclipse workspace 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. 32

33 The version of commit messages of the branches (in the above screenshot the version is [v-1.3]) 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. 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 - as described in section 1.6 of the ESPM Installation Guide - 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) 33

34 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. 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. This makes 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. 34

35 1.2.3 Fetch newest version of Github sources In this section it is described how you update a first downloaded PersonsList version (here 1.3) to the latest available version (here 1.4). If you execute this tutorial for the first time you might skip this Fetch newest Version section as you have just downloaded the newest version. The PersonsList sources from Github you downloaded in the before section are updated from time to time. These updates might be necessary due to bug fixes (patched versions) or new features added to the PersonsList application example. So from time to time you should check for PersonsList updates on Github. Version updates are also announced in the corresponding SCN PersonsList blog (see there Latest update of this Tutorial ). When you execute the first time this Getting Started PersonsList Scenario.pdf in a certain version (e.g version 1.3 as displayed on the cover page of this tutorial) then the document corresponds to the corresponding version of Personslist Github sources. The version of the Personslist Github sources you downloaded 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) The version (here [v-1.3]) of commit messages of the branches might already be higher in your case. Execute the following 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 3. Confirm the Fetch Results dialog with OK 35

36 With this you have updated your local Git repository with the newest sources available on Github. Create new local branches of the updated local Git repository After you updated local Git repository to the newest available version (e.g. 1.4), the already existing and before created local branches (like master) are not updated, i.e. they are still on the version before (here 1.3) as shown in the following screenshot: The local master branch is still on the old version (here v-1.3) whereas the Remote Tracking branch origin/master is on the updated version (here v-1.4). To create a local branch of the origin/master branch execute the following steps. Here the steps are only described briefly. For a detailed and screenshot-based description of the creation of a local branch from a Remote Tracking branch you can look at Appendix A3: Compare developed with Best 36

37 Practice PersonsList Application where steps has been described for creating a section branch It is assumed that Local branch master is checked out: 1. In Project Explorer view remove all personslist projects (if imported otherwise skip this) In Git Repositories view: 2. Delete personslist node inside Working Directory 3. Reset Local master branch 4. Select Remote Tracking origin/master branch and choose Create Branch... from context menu. As the Local master branch still exist as local branch you cannot name the new branch also master. Change the Branch name on the Create Branch dialog from master to name master-1.4 (replace the "1.4" with the version you have updated your Repository with) and then create it. This new checked-out branch with name master-1.4 contains then the sources of the newest updated master branch and you can import the sources. In the same way you can create other Local branches from remote tracking branches. 1.3 What comes next after the 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. 37

38 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 because the Maven pom files used in chapter 3 will rely on this name. 4. Deselect the Use default location option enter the following path, the location where the personslist-web project will be located 38

39 C:\dev\personslist\personslist-web 5. Select the sap.ui.commons as Library 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 Make sure that the Create an initial View option is selected. 7. Choose Next 8. In the Name field, enter personslist. 9. Make sure that JavaScript option is selected as Development Paradigm. 10. 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 39

40 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

41 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 41

42 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 42

43 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 43

44 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. 44

45 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){ } 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) 45

46 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 Java Web Server. e. Keep the Server (host, name and runtime environment) values as shown in the screenshot 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. 46

47 5. Run personslist-web Application on the created local Java Web 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 Java Web Server. 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 Installation chapter, there in section 1.7) and shows the SAPUI5 Hello World button. 47

48 Confirm that button disappears when clicking on it. Additional Info: Runtime Server for SAPUI5 Applications In the above example we used the local Java Web Server as 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 48

49 Additional Info: Java Web Server The publishing to the local Java Web 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 49

50 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. 50

51 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. 51

52 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_bluecrystal" > </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: 52

53 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. 53

54 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: 54

55 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 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. 4. Choose Finish. The local runtime starts up in the background and your personslist-web Application is 55

56 installed, started and ready to serve requests. The External Web Browser defined before opens in an external window (see Installation chapter 1, section 1.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. 56

57 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 < > as user) (SCN) user account password: <********> which you created before in the Installation chapter 1 (there in section ) In this section we show how the developer, Lisa Gordan, would deploy and run the PersonsList web application on her SAP HANA Cloud Trial Account. Lisa Gordan has an SCN user account for p-user: P and a developer HANA Trial account: p trial, 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 Add SAP HANA Cloud library 1. Select personslist-web project node 2. Open context menu and choose Properties 57

58 a. Choose Java Build Path b. Select Libraries tab c. Choose Add Library d. In the opened Add Library dialog choose Server Runtime e. Choose Next 58

59 f. Select SAP HANA Cloud and choose Finish 3. Back on the Properties for personslist-web dialog choose OK 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 Platform 59

60 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. p or P ) while SAP HANA Cloud account only works with lowercase (e.g. p trial) 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 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 2. In case the Log On page appears enter your credentials and choose Log On After this the HANA Cloud cockpit appears 60

61 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 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. a. Make sure that the Manually define a new server option is selected. b. Select SAP SAP HANA Cloud Platform as server type c. The Server s host name should be correctly pre-filled with handtrial.ondemand.com according to the before configured Eclipse preferences. 3. Choose Next. 61

62 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. 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 62

63 The URL indicates that the application runs this time not on localhost but on the hanatrial.ondemand.com 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: 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 to launch your SAP HANA Cloud cockpit b. Log in with your SCN User and Password 63

64 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 your SAP HANA Cloud 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. 64

65 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 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 because the Maven pom files later in this chapter will rely on this name. 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 Java Web. 65

66 After choosing Java Web as Target runtime the Configuration switched automatically to Default Configuration for Java Web which is an appropriate value. 5. Keep then other default settings for the other project settings and choose Next. 6. On the Java page, keep the default settings and choose Next. 7. On the JPA Facet page in the Platform section change the following three settings 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 66

67 8. Choose Finish to create the jpa-model project. 9. Confirm the Open Associated Perspective? dialog with Yes, so that the JPA project will be created 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 67

68 4. Enter com.sap.hana.cloud.sample as Default Java Package for new entities 5. Click OK 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 See which package has been assigned by opening the src folder in the Project Explorer view. 4. Select the Java entity box Entity1 in the editor and from the context menu choose Refactor Persistent Type Class Rename. 68

69 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 4. In the JPA Details view navigate to Queries section, choose Add. The Add Query dialog box opens. 69

70 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 70

71 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". 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 Maintain Meta-Data of Person entity In personslist-model-jpa/src/main/resources/meta-inf folder define additional settings in persistence.xml: 71

72 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. 72

73 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:  <context-param> <param-name>com.sap.ui5.resource.remote_location</param-name> <param-value> </context-param>  <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. 73

74 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 cloud-personslist-scenario 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 (to just get a feeling of what you have to do for the Maven conversion) and only execute the easier steps of section 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 and finish it successfully. If you fail you could still take the easier alternative which is section 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 ) Maven Project: personslist-model-jpa (section ) Maven Project: personslist-web (section ) Maven Build: personslist parent (section ) 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 74

75 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 Maven Project: personslist parent Create personslist parent Maven Project 1. In the Project Explorer view, choose File New Project... (New Project wizard opens) 2. Expand and select General Project 3. Click on Next 4. 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 8. Open context menu Configure Convert to Maven Project (Create new POM dialog opens). 75

76 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. 76

77 <project xmlns=" xmlns:xsi=" xsi:schemalocation=" <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>  <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>  </modules> <dependencies> <dependency> <groupid>org.slf4j</groupid> <artifactid>slf4j-api</artifactid> <version>1.7.2</version> </dependency>  <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> </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>  </plugin>  <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> 77

78 13. Save editor 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. 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 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). 3. Choose com.sap.hana.cloud.sample as Group Id from dropdown list and keep the other default settings 78

79 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=" xmlns:xsi=" xsi:schemalocation=" <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> 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 79

80 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 b. Choose Move... Move Resource dialog opens 80

81 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 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 As a result the src/main/java folder is marked as source folder in the Project Explorer 81

82 12. Move package com.sap.hana.cloud.sample to src/main/java a. Select com.sap.hana.cloud.sample and open context menu 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 source folder src/main/java 13. Remove personslist-model-jpa from Project Explorer view a. Select personslist-model-jpa project and open context menu 82

83 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. 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. 83

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

85 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. 85

86 <project xmlns=" xmlns:xsi=" xsi:schemalocation=" <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>  <dependency> <groupid>com.sap.cloud</groupid> <artifactid>neo-java-web-api</artifactid> <version>${sap.cloud.sdk.version}</version> <scope>provided</scope> </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.3.5</version> <scope>provided</scope> </dependency> <dependency> <groupid>org.apache.httpcomponents</groupid> <artifactid>httpcore</artifactid> <version>4.3.2</version> <scope>provided</scope> </dependency> <dependency> <groupid>org.slf4j</groupid> <artifactid>slf4j-api</artifactid> <version>1.7.2</version> <scope>provided</scope> </dependency> </dependencies> <build> <finalname>${project.artifactid}</finalname> </build> </project> 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 86

87 9. Move files and folder inside 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 source folder src/main/webapp 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 87

88 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 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. 88

89 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 (  ) 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 89

90 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. c. Choose Run As Maven build... Edit Configuration dialog opens d. Enter "clean install" as Goals 90

91 e. Choose Run to start the Maven build The Maven build should finish with a BUILD SUCCESS message Check out Maven-converted PersonsList Projects In this section we describe how to get the PersonsList projects without executing all the steps of section We assume that you have executed the steps of this tutorial till section and skipped completely, so that you have two Eclipse projects personslist-model-jpa and personslist-web in your Eclipse workspace. 91

92 You might have tried to execute section 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. 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 92

93 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 Checkout section 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. 93

94 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 Git Repository branch 1. In Git Repository view expand cloud-personslist-scenario/branches/remote Tracking. a) Select origin/section branch node 94

95 b) Open context menu and choose Create Branch c) In the opened Create Branch dialog keep the name of the new Branch as section and choose Finish. This creates a new Local branch with name section 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/cloud-personslist-scenario/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. Restart your Eclipse IDE: File Restart 2. In the Eclipse main menu: File Import... ; Maven Existing Maven Projects 3. Choose Next and then choose Browse... and navigate to location C:\dev\personslist Do not navigate to C:\dev\git\cloud-personslist-scenario\personslist as you are then developing on the personslist Git Repository which sooner or later will result into problems which are not described here. 95

96 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 96

97 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 97

98 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 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 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)? Why does SAP prefer OData as connectivity? These two SCN blogs motivates the reasons why SAP prefers to use OData as connectivity:

99 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  <dependency> <groupid>org.apache.olingo</groupid> <artifactid>olingo-odata2-api</artifactid> <version>1.2.0</version> <scope>compile</scope> </dependency> <dependency> <groupid>org.apache.olingo</groupid> <artifactid>olingo-odata2-core</artifactid> <version>1.2.0</version> <scope>compile</scope> </dependency> <dependency> <groupid>org.apache.olingo</groupid> <artifactid>olingo-odata2-jpa-processor-api</artifactid> <version>1.2.0</version> <scope>compile</scope> </dependency> <dependency> <groupid>org.apache.olingo</groupid> <artifactid>olingo-odata2-api-annotation</artifactid> <version>1.2.0</version> <scope>compile</scope> </dependency> <dependency> <groupid>org.apache.olingo</groupid> <artifactid>olingo-odata2-jpa-processor-core</artifactid> <version>1.2.0</version> <scope>runtime</scope> </dependency> <dependency> <groupid>org.apache.cxf</groupid> <artifactid>cxf-rt-frontend-jaxrs</artifactid> <version>2.7.5</version> </dependency> 3. Save pom.xml Editor 99

100 Create JpaEntityManagerFactory.java 2. Select the personslist-web project node 3. From the context menu, choose New Class 4. Enter com.sap.hana.cloud.odata.service as Package and JpaEntityManagerFactory as Name 5. Choose Finish to create the new Java Class 6. 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. 100

101 package com.sap.hana.cloud.odata.service; import java.sql.sqlexception; import java.util.hashmap; import java.util.map; import javax.naming.initialcontext; import javax.naming.namingexception; import javax.persistence.entitymanagerfactory; import javax.persistence.persistence; import 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; } 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 package com.sap.hana.cloud.odata.service; import javax.persistence.entitymanagerfactory; import org.apache.olingo.odata2.jpa.processor.api.odatajpacontext; import org.apache.olingo.odata2.jpa.processor.api.odatajpaservicefactory; import org.apache.olingo.odata2.jpa.processor.api.exception.odatajparuntimeexception; /** * Odata JPA Processor implementation class */ public class PersonsListServiceFactory extends ODataJPAServiceFactory { } /** * Returns the singleton EntityManagerFactory instance for accessing the * default database. * the singleton EntityManagerFactory instance NamingException * if a naming exception occurs during initialization 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; } private static final String PERSISTENCE_UNIT_NAME = 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); } } 101

102 6. Save Java Editor The project should compile without any errors. Configure CXFNonSpringJaxrsServlet with own classes in the web.xml 1. In Project Explorer view open personslist-web/src/main/webapp/web-inf node. 2. Select web.xml and open context menu 3. Choose Open With XML Editor. 4. 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. 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=" xmlns:xsi=" xsi:schemalocation=" <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 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 Configure SAPUI5 in the index.html and web.xml Bootstrap SAPUI5 bootstrap in index.html makes use of centrally available UI5 resources ( ) and SAPUI5 resource references must be removed from web.xml as UI5 is not bundled any more. 102

103 Modifying index.html 1. In Project Explorer view open personslist-web/src/main/webapp node. 2. Select index.html and open context menu 3. Choose Open With HTML Editor. 4. Replace the existing bootstrap with the following (relative UI5 resource path is replaced by an absolute URL) <script src=" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal"> </script> 5. Save HTML Editor Modifying web.xml 1. In Project Explorer view open personslist-web/src/main/webapp/web-inf node. 2. Select web.xml and open context menu 3. Choose Open With XML Editor. 4. Remove the all SAP UI references from the web.xml so that the following content remains 103

104 <?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi=" xsi:schemalocation=" version="2.5" xmlns=" <display-name>personslist-web</display-name>  <resource-ref> <res-ref-name>jdbc/defaultdb</res-ref-name> <res-type>javax.sql.datasource</res-type> </resource-ref>    <welcome-file-list> <welcome-file>index.html</welcome-file> </welcome-file-list> <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> </web-app> 5. Save XML Editor 104

105 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 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 105

106 A typical OData service output with a Persons collection is displayed. But because 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 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 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 106

107 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); odatamodel.setcountsupported(false); 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 Java Web 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. 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 107

108 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 Java Web Server 5. Choose Finish personslist-web Application is republished on the server, started and ready to serve requests. External Web Browser opens URL and displays the SAPUI5-based PersonsList Application 6. Verify by adding John Smith that the UI still works. Refresh the UI to see the first created person entry in the table. 7. Verify now that adding a person entity to the database via OData Service works. a. Open Customize and control Google Chrome Web Browser 108

109 b. Choose Tools Developer tools c. Switch to Network tab (1.) d. Enter Lisa Gordan as Person and choose Add Person (2.) 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. Click on OK 109

110 g. Additionally 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 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). 110

111 Keep persisted Person entities when publishing PersonsList web application to server You have seen that the PersonsList application persists the added persons entities in the HANA Database either on local Java Web Server (as seen in this chapter) or on SAP HANA Cloud Platform as will be seen in next chapter 5. You will also see that each time you publish the PersonsList application to local web server or in the next chapter 5 to SAP HANA Cloud (i.e. select personslist-web project and open context menu; then choose Run As Run on Server; ) the database content, i.e. the person entities, you saved before are gone. If you don t want this reset of persisted person entities each time you publish the application newly but want to keep the before saved person entities, then change one property the persistence.xml file of your jpa project as follows 1. Select personslist-model-jpa/src/main/resources/meta-inf/persistence.xml, and from the context menu choose Open With Persistence XML Editor. 2. On Options tab, select in EclipseLink Schema Generation section the value Create Tables as the DDL generation type. (instead of Drop and Create Tables as before) 3. Save file. Now do a Maven clean install build of personslist/pom.xml and then publish the personslistweb project on the server. From then on the saved persons are persisted even if you re-publish another version of the PersonsList web application. 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. 111

112 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 Configure your SAP HANA Cloud server in Eclipse The SAP HANA Cloud server in Eclipse should be configured as described in section 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 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 Java Web Server [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 112

113 3. Choose New Server New Server dialog opens. 4. Select SAP SAP HANA CloudPlatform 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 Keep the other defaults and choose Next. 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 113

114 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 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. 114

115 4. Select the node under server hanatrial.ondemand.com. 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 115

116 Enter as always before John Smith and choose Add Person to verify that the PersonsList application works also on SAP HANA Cloud 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. 116

117 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. Explore then the SAP HANA Cloud Code Samples - Extensions of PersonsList Web Application 3. Walk through the ESPM Extension Scenario 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 Ask your scenario questions there or comment what you else need for developing your application development. 117

118 7 Tutorial Documentation History This tutorial documentation history describes the changes of this document compared to the first document that was published on The first published tutorial document had no version and the next published started with version 1.0 Version Main Changes compared to version before 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) 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 ( ) 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 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. 118

119 1.4 Changes in Maven pom.xml files: 1. SAP UI5 changed some libs from version 1.14.x to 1.16.x. The pom.xml includes now the ui5 libs which are used in version 1.16.x. The tutorial needs from now at least SAPUI5 version (see section ) 2. Higher version of selenium is used now (for automated tests with Firefox 24.2 Extended support release) (see Appendix A2.1) 3. SDK api from Central Maven is used now (see section ) Added a note Keep persisted Person entities when publishing PersonsList web application to server (end of section 4.3). Improved section: Fetch newest version of Github sources (section 1.2.3) Note in section 1.1 now clearly says which SAP UI5 and neo-sdk versions at least needed here 1. SAP UI5: at least version neo-sdk: at least version (this info was before missing) Fix for wrong UI5 dependencies: Removed UI5 Maven dependencies completely and use instead UI5 CDN 2. Fix for Selenium tests so that it also works on newest Firefox webdriver 3. Adapted new Server names (which is Java Web Server) 4. Added own installation guide again (section 1.1) because ESPM installation already uses Luna (which is not yet possible for this tutorial as it makes use of SAPUI5 toolkit which is not yet available for Luna) 119

120 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 downloaded from the master branch of the Git Repository (as described in section 1.2.1) and imported as Eclipse projects (as described in section ) We assume that you have executed already all sections of chapter 1 of this tutorial. 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 120

121 A1.1 Publish and Run PersonsList application on Java Web 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 Java Web Server 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 Installation chapter 1, there in section 1.1.7) You can test that the application is working by adding a person to the list Close the opened Web browser and delete Java Web Server Confirm the Delete Server dialog then as shown in the following screenshot. A1.2 Publish and Run PersonsList application on SAP HANA Cloud Prerequisite is that you know your SAP HANA Cloud (Trial) Developer Account data 121

122 SAP HANA Cloud Developer Account name: "<your p-user>trial" (p-user with lower case) (SCN) user name: <your p-user> (alternatively < > as user) (SCN) user account password: <********> which you created before in the ESPM Installation Guide (there in section 1.2) 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. Select SAP SAP HANA Cloud Platform as server type c. 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. Click Next. a. Enter personslist as Application name 122

123 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 also in the Installation chapter 1, there in section 1.1.2) 4. Choose Finish. After this the PersonsList Web Application is published to the specified Developer account on SAP HANA Cloud Platform. In Servers view a corresponding servers node next to the before created Java Web Server 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 the opened Web browser and delete SAP HANA Cloud Platform server Then confirm the displayed Delete Server dialog with OK. 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 123

124 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 found 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: Build and therefore the test finished successfully: 124

125 You have seen how the ready-to-run PersonsList web application runs on local Java Web Server, on SAP HANA Cloud Platform and how the automated tests locally run. Start now with chapter 2 to develop step-by-step this PersonsList application. 125

126 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.43.1</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>) 126

127 <profiles>  <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>  <profile> <id>local-integration-tests</id> <activation> <property> <name>local.integration.tests</name> </property> </activation> <build> <plugins>  <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> <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} ${local.server.proxy.settings}" /> </exec> <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} start-local --location ${local.server.root} --consoleport ${local.server.console.port} --waiturl --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>${browser.proxy.settings}</argline> <systempropertyvariables> <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> 3. Save pom.xml editor. 127

128 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 e. Sometimes the new folder is not displayed correctly under the Java Resources folder. In this case open context menu on the project and choose Refresh Create PageObject.java 1. Select personslist-web/java Resources/src/test/java node 2. From the context menu, choose New Class 3. Enter com.sap.personslist.web.pageobjects as package and PageObject as Name 4. Choose Finish to create the new Java Class 5. In the opened editor replace the entire content with the following 128

129 package com.sap.personslist.web.pageobjects; import static org.junit.assert.fail; import org.openqa.selenium.nosuchelementexception; import org.openqa.selenium.timeoutexception; import org.openqa.selenium.webdriver; import org.openqa.selenium.webdriverexception; import org.openqa.selenium.webelement; import org.openqa.selenium.support.pagefactory; import 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. * waitcondition * #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>() 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. * #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 129

130 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 = "firstnamefieldid") protected WebElement = "lastnamefieldid") protected WebElement = "addpersonbuttonid") protected WebElement = " field0-col0-row0") private WebElement = " field1-col1-row0") private WebElement = " 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); 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>() public Boolean apply(final WebDriver driver) { return!submitconfirmokbutton.isempty(); } }; } 6. Save editor. Create UiTestBase.java 1. Select personslist-web/java Resources/src/test/java node 2. From the context menu, choose New Class 3. Enter com.sap.personslist.web as package and UiTestBase as Name 4. Choose Finish to create the new Java Class 5. In the opened editor replace the entire content with the following 130

131 package com.sap.personslist.web; import java.io.file; import java.io.ioexception; import java.util.concurrent.timeunit; import org.apache.commons.io.fileutils; import org.junit.after; import org.junit.afterclass; import org.junit.beforeclass; import org.junit.rule; import org.junit.rules.testname; import org.openqa.selenium.outputtype; import org.openqa.selenium.proxy; import org.openqa.selenium.takesscreenshot; import org.openqa.selenium.webdriver; import org.openqa.selenium.firefox.firefoxdriver; import org.openqa.selenium.remote.capabilitytype; import org.openqa.selenium.remote.desiredcapabilities; public class UiTestBase public TestName testname = new TestName(); public static String serverurl = System.getProperty( "integration.test.server.url", " 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 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, public static void teardownclass() { driver.quit(); 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 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. 131

132 After creating the above four test classes your workspace should look similar as in the following screenshot. For running this created integration test follow the description of Appendix A1.3 Maven Build: Run Automated Integration Test (UI5 Selenium Tests). 132

133 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 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 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) 133

134 Reset master branch 134

135 Create section Branch (containing the best practice sources) Create section 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 135

136 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 Update Maven Project dialog opens 4. Make sure that the intended project is selected and choose OK to update the project 136

137 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 137

138 Compare personslist-repo-web with your developed personslist-web project 138