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