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.
Learn SAPUI5 in Our Upcoming Rheinwerk Course!
Learn to use SAPUI5 to develop modern, responsive SAP applications in this comprehensive course. From basics to advanced programming, integration, and customization, this is your one-stop shop! This upcoming course in August and September is live on the web and will teach you all you need to know about these topics. Click on the banner below to learn more and order your ticket.
Editor’s note: This post has been adapted from a section of the book SAP Gateway and OData by Carsten Bönnen, Ludwig Diehl, Volker Drees, André Fischer, and Karsten Strothmann. Carsten works for SAP SE as a product management director in the Adoption Enablement Team for SAP Business Technology Platform (SAP BTP). Ludwig is the head of processes and IT at Wilkhahn, the worldwide acting and leading German manufacturer of furniture. Volker studied electrical engineering at Fachhochschule in Wiesbaden, Germany, and holds a degree in communications engineering (Nachrichtentechnik). André is an SAP Champion and has worked in product management for SAP Gateway since the launch of the product in 2011. Karsten is the lead product manager for event-driven integration at SAP SE in Walldorf, Germany.
This post was originally published 7/2020.
Comments