Programming

Creating an SAPUI5 Application Using Eclipse

When coding an SAPUI5 project, you may choose to use the Eclipse development environment option. To create a new SAPUI5 project using Eclipse, follow these steps:

 

1. Start by opening the File > New > Project wizard and selecting Application Project under the SAPUI5 Application Development node.

 

2. Click Next, and enter your Project name.

 

New SAPUI5 Project in Eclipse

 

3. Keep the Create an Initial View checkbox selected to create a new view (you’re also able to create additional views later on). In addition, you can choose your target library: sap.m (browser support for mobile operating systems) or sap.ui.commons (deprecated since SAPUI5 release 1.38). In this scenario, keep sap.m selected. Click Next again.

 

To create a new view such as the one in the figure below, you have to specify the view-related data, such as the Folder (keep the default), the view Name of your choice, and the Development Paradigm (keep JavaScript selected).

 

New SAPUI5 View in Eclipse

 

Click Next to see the confirmation page with a summary of the selected data on the previous pages. Check the information, and click Finish if everything is correct. The wizard creates a new SAPUI5 project and opens the index.html file, the controller (myFirstView.controller.js), and the view (myFirstView.view.js) JavaScript files in the preview view.

 

Preview View

 

Say you want to add a button to your SAPUI5 app. To get a single button implemented in an Eclipse project, follow these steps:

 

1. To add a new button to your SAPUI5 application, open the JavaScript view file (myFirstView.view.js), insert the code below, and replace the existing createContent function.

createContent : function(oController) {

var aControls = [];

var oButton = new sap.m.Button({

id : this.createId("MyFirstButton"),

text : "HelloSAPUI5"

});

aControls.push(oButton.attachPress(oController.displayText));

return aControls;

}

 

2. Handle the event displayText.

 

3. Open your JavaScript controller file (myFirstView.controller.js), and add the following code:

 

displayText : function(oEvent) {

alert(oEvent.getSource().getId() + "works!");

}

 

Don’t forget the comma to separate the onExit block from the inserted function (see below).

 

Adding a Comma

 

You can test your new SAPUI5 application in an embedded Jetty server by right-clicking on the project node and choosing Run As > Web App Preview.

 
Run as Web App Preview

 

Everything is configured automatically, and a new tab opens next to the existing ones inside Eclipse. You can also open the URL inside a browser of your choice.

 

URL Display
 

To check that the method is working, click the created HelloSAPUI5 button. An alert pop-up appears with the internal button ID and the defined text message (see figure below).

 

Testing Your App
 

If you change anything inside your SAPUI5 project, you have to refresh the application preview with the Refresh button (the icon with two arrows on the left-hand side of the location bar). You can also test the application in your external default browser by selecting the Open in External Browser button (the globe icon on the right-hand side of the location bar).

 

This simple tutorial showed you how to begin an SAPUI5 application project in the Eclipse development environment. If you’re new this programming language and want some more learning materials, take a look at this blog on SAPUI5 coding guidelines.

 

Editor’s note: This post has been adapted from a section of the book SAP Gateway and OData by Carsten Bönnen, Volker Drees, André Fischer, Ludwig Heinz, and Karsten Strothmann.

Recommendation

SAPUI5: The Comprehensive Guide
SAPUI5: The Comprehensive Guide

Your comprehensive guide to SAPUI5! From to , get the know-how to develop MVC apps, use OData, create data bindings, debug and test code, and deploy apps. Learn the dos and don’ts of SAPUI5 and everything in between, whether you’re implementing CRUD operations or writing your own controls. See what’s new with SAP Cloud Platform, SAPUI5 support assistant, and more. Your best apps are yet to come.

Learn More
SAP PRESS
by SAP PRESS

SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP C/4HANA, intelligent technologies, SAP Cloud Platform, and more!

Comments