Getting started with SAPUI5 development

This blog is for those who have setup their SAPUI5 development environment and are itching to get started with some coding, in case you haven't done that already please refer to my How to setup SAP UI5 for Eclipse blog and come back once you are done.

What I'm going to show you here is how to create a UI5 project in eclipse, write some code using JavaScript and deploy the project WAR file to tomcat server.

Launch your eclipse Juno and from File menu choose other, in the Create Application Project wizard, key in SAP to filter out the option we do not want. Under SAPUI5 Application Development choose Application Project.

Next, in the Create New Application project wizard fill Project and Name fields. Retain the Development paradigm as JavaScript.

Once the project is created the structure would look like this

Now that the project is created let's make some code changes to produce an output, open index.html and you will notice that the first script tag with id 'sap-ui-bootstrap' specifies the JavaScript file to be used, we are going to replace the default value with the one as shown below, you could simply replace the script tag with the code given below.

<script id="sap-ui-bootstrap"

   src="http://localhost:8080/sapui5/resources/sap-ui-core.js"

   data-sap-ui-theme="sap_goldreflection"

   data-sap-ui-libs="sap.ui.commons"></script>

in a second script tag add the JavaScript code given below.

<script>

 $(function(){

   sap.ui.commons.MessageBox.alert("My first UI5 application!!");

   })

</script>

Save your project and export the WAR to a local drive, you can do this by right-clicking on your project file and choosing export.

Once the WAR file is ready, start tomcat server and proceed with deployment. launch localhost:8080 and open Manager App console, you will be asked for credentials during the process, key-in the user-id and password that was given during tomcat server installation.

From the WAR file to deploy section of Manager App console, choose the WAR file that you have created and deploy it into tomcat server.

Once deployment is done the application can be launched from the Applications list in the Manager App console. If you make any changes to the project, export the WAR file again and deploy it to tomcat server, but make sure the old WAR file has been un-deployed if you would like to retain the same path for the application as before.

Here is a screen shot of the application that we have just built.

If you were able to produce the same output, congratulation !! on creating your first SAPUI5 application. 

If you found this blog useful please post your feedback and comments below.