Hello All,

This blog explains you how to deploy a SAPUI5 application into ABAP server.

1. How to install Eclipse.

Installing eclipse-jee-juno-SR1-win32.


To download and install please visit the below link.


http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junor

/wp-content/uploads/2015/09/1_790544.png

Click on windows 32-bit, it will download one zip file.


Go to the eclipse download path and extract the eclipse juno rar file. Open the eclipse folder and double click on eclipse.exe


Note: Before doing that we have to install jdk in our system. And set the jdk path.


2. How to install SAPUI5 packages in Eclipse.


Click Help > Install new software.

/wp-content/uploads/2015/09/2_790545.png

Click on “Add” button.

/wp-content/uploads/2015/09/3_790546.png

/wp-content/uploads/2015/09/4_790550.png

In the above window specify Name as sapui5 and in Location give the below link and Click “ok”.

https://tools.hana.ondemand.com/juno

/wp-content/uploads/2015/09/5_790551.png

Click on Select All and Click Next.


/wp-content/uploads/2015/09/6_790552.png

Choose I accept the terms of the licenses agreement and Click on Finish.


/wp-content/uploads/2015/09/7_790553.png


3.How to Install Tomcat 7


To download Tomcat visit the below link.

http://tomcat.apache.org/download-70.cgi

How to Integrate Tomcat 7 to Eclipse juno

Select Windows and click on Preferences in Eclipse.


/wp-content/uploads/2015/09/9_790504.png


/wp-content/uploads/2015/09/10_790559.png


Choose Server and click on Runtime Environment and click on Add.

/wp-content/uploads/2015/09/11_790560.png

Select Apache Tomcat v7.0 and click on Next.


/wp-content/uploads/2015/09/12_790561.png


Click on Browse.


/wp-content/uploads/2015/09/13_790563.png


And specify the path directory and click on Finish.


/wp-content/uploads/2015/09/14_790564.png

4.How to Create a Simple Hello World Project


Open Eclipse → Click File and select new option → Select Project.


/wp-content/uploads/2015/09/15_790565.png


In New Project window choose SAPUI5 Application Development and click on Application Project →and Click on Next.


/wp-content/uploads/2015/09/16_790566.png


Enter your Project name and Click on Next.


/wp-content/uploads/2015/09/17_790567.png

Select the Development Paradigm as JavaScript or XML or JSON or HTML click on Finish.


/wp-content/uploads/2015/09/18_790568.png


MVC structure of  in Eclipse

  • Index Page
  • Controller Page
  • View page

Index File for Hello World Project

Below screen short shows the index file.

/wp-content/uploads/2015/09/19_790569.png


View File for the Hello World Project


View file is used for web Page View purpose.


Below screen short is View code.

/wp-content/uploads/2015/09/20_790570.png

.

Controller File for Hello World


Controller part is used to write the functionalities.


Below screen short is Controller code

/wp-content/uploads/2015/09/21_790576.png


Output


/wp-content/uploads/2015/09/22_790581.png



5.How to share or upload a project in ABAP server system.


Open Eclipse.


In project Explore Right click on project name and choose Team and click on share.


/wp-content/uploads/2015/09/23_790582.png


Share project repository window will open, in that choose SAPUI5 ABAP Repository and click on Next.


/wp-content/uploads/2015/09/24_790583.png


Click on Browse and select system details and click on OK.


/wp-content/uploads/2015/09/25_790584.png


/wp-content/uploads/2015/09/26_790585.png


Click on Next.


/wp-content/uploads/2015/09/27_790586.png


Enter the client number, username and password details and click on Next.


/wp-content/uploads/2015/09/28_790587.png


Next we will get SAPUI5 Repository window, in that choose create a new BSP Application.


Enter the details like Name, Description and Package.


/wp-content/uploads/2015/09/29_790588.png


Click on Next—-> Finish.


/wp-content/uploads/2015/09/30_790589.png


After sharing the project into the server we have to submit the code.


Right click on the project and select Team and click on submit.


/wp-content/uploads/2015/09/31_790590.png


Click on Finish.


Best Regards,

Mohanbabu D.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply