Reading SampleThis selection of the book will teach you the basics of web development on

the SAP NetWeaver Application Server ABAP (SAP NetWeaver AS ABAP). As

you get started in your SAPUI5 journey, youll find detailed instructions and

screenshots on how to install the SAPUI5 library on the backend, and how to

set up the development environment on the frontend.

Miroslav Antolovic

Getting Started with SAPUI5462 Pages, 2014, $69.95/69.95 ISBN 978-1-59229-969-0

www.sap-press.com/3565

Getting Started in SAPUI5

Contents

Index

The Author

First-hand knowledge.

http://www.sap-press.com/3565

105

In this chapter, you will learn about the SAP NetWeaver Application Server ABAP. You will install the SAPUI5 library and set up the development environment.

4 Getting Started in SAPUI5

In this chapter, you will learn the basics of web development on the SAP NetWeaver Application Server ABAP (SAP NetWeaver AS ABAP). This chapter will show you how to install the SAPUI5 library on the backend and how to set up the development environment on the frontend.

Checklist

You will need the following for this chapter:

E S user for SAP Service Marketplace

E Access to an ERP system and to an SAP Solution Manager system

For the development of applications in SAPUI5, you need two pieces:

E An installed SAPUI5 library in the SAP backend

E A development environment set up on the frontend PC

If you have no SAP backend system, you can also deploy your applications on a local web server such as an Apache HTTPD server (as a download from the home page www.apache.org). If you have no access to SAP Service Marketplace, you can download the required SAPUI5 files at https://tools.hana.ondemand.com/.

For the initial exercise, it is also sufficient to install only Eclipse and the SAPUI5 frontend tools. With this method, you can use the preview feature in Eclipse and display the result there. In this case, you can skip Section 4.1 and proceed directly to Section 4.2. You do not need the two components ABAP in Eclipse and SAPUI5 Team Provider for these local developments.

Local web server

106

4 Getting Started in SAPUI5

First, we will deal with the installation of the SAPUI5 library on the ABAP stack of the SAP system.

4.1 Installation of the SAPUI5 Library in SAP Business Suite

SAPUI5 is integrated as an add-on in SAP Business Suite. The installation packages are available in the SAP Software Download Center (http://service.sap.com/swdc) under Installations and Upgrades A-Z Index N UI Add-On for NetWeaver Installation. The associated support packages are available under Support Packages and Patches A-Z Index N UI Add-On for NetWeaver .

Start the Maintenance Optimizer in SAP Solution Manager and select UI ADD-ON 1.0 FOR NW (Figure 4.1) as the product version.

Figure 4.1 Maintenance Optimizer in SAP Solution Manager

Downloading the components

107

Installation of the SAPUI5 Library in SAP Business Suite 4.1

Download the calculated support packages and the stack XML. Then unpack the support packages into the EPS directory and install the packages with the SAP Add-On Installation Tool (Transaction SAINT), or perform an update (Transaction SPAM). For detailed installation instructions, see SAP Note 1747308 (Installation Guide: UI Development Toolkit for HTML5 [SAPUI5]).

You can check whether the installation was successful by calling the URL http://:/sap/public/bc/ui5_ui5, in which you replace and with the values of your SAP system. The system should then display the UI Development Toolkit for HTML5 (see Figure 4.2).

Figure 4.2 Development Toolkit for HTML5

If you obtain a different result, check whether the relevant service is active. To do so, call Transaction SICF, and activate the service default_host/sap/public/bc/ui5_ui5/ if necessary (see Figure 4.3).

Installation

UI Development Toolkit for HTML5

Activating ICF service

108

4 Getting Started in SAPUI5

The examples shown in this book are based on Version SAPUI5 1.00 SP6, current at the time of writing. Use the Product Availability Matrix (PAM), which is available at http://service.sap.com/pam, to check the current sup-ported version and install it.

Figure 4.3 Activating Service

109

Setting Up the Development Environment 4.2

After the successful installation of the backend component, we will now deal with the installation of the SAPUI5 frontend tools.

4.2 Setting Up the Development Environment

The UI development tools are part of the SAPUI5 library. They include a number of Eclipse-based tools and editors that can assist you in the development of SAPUI5 applications. The SAPUI5 Team Provider func-tions can aid you in checking the applications developed in Eclipse in an ABAP backend system. The Team Provider has been available since version 7.0.2. For older SAP releases use the program /UI5/UI5_REPOSI-TORY_ LOAD instead.

4.2.1 Installation Requirements

The developer tools for SAPUI5 must be installed separately as an Eclipse plug-in. Before you install Eclipse, check whether the installed Java Runtime version is at least Version JRE 1.6 and, if necessary, perform an update of the Java Runtime Environment before the installation. Choose Start Control Panel Programs Java to open the Java Control Panel. When you click the Info button, the system displays the relevant JRE version. If the version is lower than Version 1.6, perform an update of the JRE version.

4.2.2 Installation

SAPUI5 supports the Eclipse Versions Indigo 3.7, Juno 3.8, and Juno 4.2. The current version, Juno 4.2, will be installed ahead. Always use the current version supported by SAP.

First, download Eclipse IDE for Java EE Developers at www.eclipse.org/downloads. Because SAPUI5 Team Provider works only with the 32-bit version, download the 32-bit version. After unpacking the zip file, you can start Eclipse directly by double-clicking eclipse.exe; Eclipse runs in the working memory and thus does not have to be installed. You can install the additional components in the Eclipse user interface by following the menu path Help Install New Software (see Figure 4.4).

Eclipse

JRE

Eclipse IDE for Java EE developers

110

4 Getting Started in SAPUI5

Figure 4.4 Installing Plug-In Components

First, install the required standard plug-ins and then the SAPUI5 tools.

Standard Plug-Ins

First, install the EMF Eclipse Modeling Framework.

Start the Installation Wizard via the menu path Help Install New Soft-ware; under Work with, enter the update page for your Eclipse version (in our example in Figure 4.5). From the list in the middle of the screen, select the option EMF Eclipse Modeling Framework, and click Next to confirm your selection.

On the next screen, you will see the components that are installed in this step. Confirm your selection by choosing Next, accept the license agreement on the next screen, and start the installation by choosing Finish. For some components, the system displays a warning that you are installing software that contains unsigned content. Confirm the corresponding dialog box by clicking OK (see Figure 4.6), and proceed with the installation.

Component selection

111

Setting Up the Development Environment 4.2

Figure 4.5 Selecting the EMF: Eclipse Modeling Framework

Figure 4.6 Security Warning

After the installation, you are prompted to restart Eclipse. Confirm this dialog box by clicking Yes (see Figure 4.7).

112

4 Getting Started in SAPUI5

Figure 4.7 Restarting Eclipse

Next, you have to install additional standard plug-ins; the ABAP in Eclipse plug-in requires several standard plug-ins, and you will need to install these packages. The list provided here is applicable to the ABAP in Eclipse 2.16 version; check which installation requirements apply to your version in the SAP Notes specified ahead.

Start the Installation Wizard via the menu path Help Install New Software; under Work with, enter the update page of your Eclipse installation (in this example, the Juno update page at http://download.eclipse.org/releases/juno). From the list in the middle of the screen, select the following components:

E EclipseRT Target Platform Components Jetty Target Components

E Modeling EMFEclipse Modeling Framework SDK

E Modeling EMF Compare SDK

E Modeling EMF Validation Framework SDK

E Modeling EMF Model Query SDK

E Modeling EMF Model Transaction

E Modeling Graphiti SDK (Incubation)

Follow the Installation Wizard in the same manner as you did for the installation of the EMF. After restarting Eclipse, you can proceed with the installation of the SAPUI5 tools.

SAPUI5 Tools

After you have installed the necessary standard components, you can then install the SAPUI5 tools. For development, you need the following three components, which you install in the following sequence:

Necessary plug-ins

SAPUI5 components

113

Setting Up the Development Environment 4.2

E ABAP in Eclipse

E SAPUI5 Tools IDE Plugin

E SAPUI5 Team Prov IDE

First, download the two necessary SAPUI5 components SAPUI5 Tools IDE Plugin 1.00 and SAPUI5 Team Prov IDE 1.00 from SAP Service Market-place. The files are available in SAP Service Marketplace under Support Packages and Patches A-Z Index N UI Add-On for NetWeaver . Add the current version of the two components to your download basket by clicking Add to Download Basket. For the SAPUI5 Team Provider, you will also need the plug-in for