Hello Everyone,
I have come across questions about designing layouts and passing values between the layouts and what not, while working on SAPUI5 in SAP Web IDE.
I have also realized when I started using SAP Web IDE, that there isn’t enough documentation to help you create a complete application. This blog might help beginners while designing simple SAPUI5 apps using both SAP Web IDE and Eclipse.
Prerequisites-
1. You should have SAP Web IDE configured on your System (or Eclipse Kepler/Luna with SAPUI5 ABAP Repository Team Provider add-on).
2. You should have a basic knowledge of MVC architecture, and Java script and HTML syntax (don’t worry if you don’t; your app will still work. You just won’t understand how).
Let us begin in steps.
1. Create a project.
1. On the main screen of SAP Web IDE, go to File -> New -> Project from Template.
2. Select SAPUI5 Application Project from the template selection screen, and press NEXT.
3. Enter the name “AdditionProject” in the space provided, and press NEXT.
4. Fill in the details as shown below, and press NEXT, and then FINISH.
2. Understanding the index.html file.
Double-click on the index.html file in the left pane. The index file should open in your right pane of your SAP Web IDE screen.
We are going to refer to MVC architecture to build our application. This means that your index.html file will not contain your code for the layout and the logic.
Your index.html file will look something like this-
As you can see, the application uses sap.ui.commons library for coding and development. Your view view1 is placed at “content” at the div id=”content” in the body. This is practically all the significance the index.html file has in a typical MVC adhering application. Your content will contain your view view1.js, which will contain your layout and the Controller, which will call your view1.controller.js, which will contain your logic. It is hard to comprehend in the beginning, but this document will be self-explanatory.
3. Building the View.
1. Open the folder ‘VIEW’. It has the files view1.js and view1.controller.js. Double-click the file view1.js
2. the view1.js will have two methods-
getControllerName : function() {
return “view.Details”;
},
and
createContent : function(oController) {
}
We need to create our layout in the createContent method. Type the following lines of code in this method-
createContent : function(oController) {
var oLayout = new sap.ui.commons.layout.MatrixLayout({
width : ‘100%’,
widths : [‘5%’, ‘20%’, ‘40%’, ‘15%’]
});
var oLabel1 = new sap.ui.commons.Label({
text : “Number1: “
});
var oTF1 = new sap.ui.commons.TextField({
id : “Number1”
});
var oLabel2 = new sap.ui.commons.Label({
text : “Number2: “
});
var oTF2 = new sap.ui.commons.TextField({
id : “Number2”
});
var oLabel3 = new sap.ui.commons.Label({
text : “Result: “
});
var oTF3 = new sap.ui.commons.TextField({
id : “Result”
});
var oButton = new sap.ui.commons.Button({
text : ‘Submit’
});
oButton.attachPress(oController.handleButtonClicked);
oLayout.createRow(null, null, null, null);
oLayout.createRow(null, oLabel1, oTF1, null);
oLayout.createRow(null, oLabel2, oTF2, null);
oLayout.createRow(null, oLabel3, oTF3, null);
oLayout.createRow(null, null, oButton, null);
return oLayout;
}
Let us see this code briefly.
1. We have used the sap.ui.commons library which has the properties layout, label, textField, button etc.
2. We have created a matrix layout in the view.
3. We then created 3 Labels and 3 corresponding TextFields to store Inputs andthe result for our Addition app.
4. We then created a button to which we have attached the event attachPress, for which we pass the function handleButtonClicked through the Controller.
5.We then add everything to the layout as 4 rows as shown. This layout will be returned to our “view1.view” which will be returned to our div id=”content” in the index.html.
4. Building the controller.
1. Double-click on the view1.controller.js file in the VIEW folder. It should open in the right pane of your screen.
2. You can see a lot of commented code in the file. Delete everything until your file contains only this-
sap.ui.controller(“view.View1”, {
});
3. Now, the only task at hand is to assign our addition logic to the attachPress event of our button. This will generate the addition of the numbers you type in the textField oTF1 and oTF2, and display the result in the textField oTF3.
4. Type the following code in between the parenthesis-
handleButtonClicked : function(){
var oTF1 = sap.ui.getCore().getElementById(“Number1”).getValue();
var oTF2 = sap.ui.getCore().getElementById(“Number2”).getValue();
var oTF3 = sap.ui.getCore().getElementById(“Result”);
oTF3.setValue(+oTF1 + +oTF2);
5. This is a fairly simple code where we fetch the pre-declared variables oTF1, oTF2, oTF3 and then set the result of addition to the variable oTF3.
5. Test the App.
Our app is completed and ready to run! Click on index.html in the left pane, and then press RUN. A new window will pop up where your app will be visible.
The final app, when you run it in a small layout, looks something like this-
Thank You for reading this.
Feel Free to contact me in case you have any doubts.
Regards,
-NK
New NetWeaver Information at SAP.com
Very Helpfull
