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
Top Related