Tuesday 20 August 2013

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 Juno 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"
   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.





Monday 19 August 2013

How to setup SAPUI5 for Eclipse Juno


This blog will guide you with all the steps that are required to set up your own SAPUI5 development and runtime environment, once you are done with this please refer to my getting started with SAPUI5 development post to build your first application.

Supported Platform

Operating System
Windows XP, Vista 7 (32- or 64-Bit)
Java Runtime
JRE 1.6, 32/64-Bit
Browser
Internet Explorer 9.0 or higher
Eclipse platform
 Eclipse Indigo 3.7 or Juno 3.8 or Juno 4.2

Download links are given below

Name
License
Type
Remarks

Open source

IDE

Ensure jdk 1.6 is installed prior to installation

Free Evaluation

Plug-in for Eclipse

Requires jdk 1.6 and Tomcat 6.0 or above
JDK 1.6

Open source

Development Kit



Open source

Web server


                                               

After download you must have file as shown below.


First Install the jdk , once this is done proceed with installation of tomcat 7.0, make sure you select the type of install as Full



After installation you can launch the host manager and monitor server status by accessing the link
http://localhost:8080


During installation of tomcat you will be prompted to provide user name and password, provide this information and make a note of the credentials.

Now we can proceed with setting up of eclipse and UI5 plug-in installation. Extract the contents of the eclipse-jee-juno-SR2-win32.zip to a folder; you will see the contents as shown in the screen shot below


To launch eclipse simply double click eclipse.exe. But, before we launch eclipse we will make some changes to the eclipse.ini file in order to increase the heap size required to build your projects, this is an optional step and can be skipped for now, get back to this in case you get an out of memory error during project build.

Right-click on eclipse.ini and open with notepad, change the value –Xmx512m to -Xmx1024m and save, restart eclipse if already running.

Next, extract the contents of HTML5Evaluation_complete_1.12.1.zip as shown below


Before installation of the UI5 plug-in I recommend that you read through the instructions provided in Readme_and_InstallationInformation.html. The tools-updatesite folder will be used for the actual plug-in installation; sapui5-sdk.war, sapui5.war and getting-started-sample.war are to be deployed into tomcat using the Manage App link.

To install the UI5 plug-in launch eclipse and navigate to Help->Install new software. 
Here under Available Software click on Add button, you will be prompted to provide the Repository detail, now click on local and select tools-updatesite folder.



Select all and click on Next to complete the installation


Next, we deploy the  sapui5-sdk.war and sapui5.war file to tomcat, to do this start tomcat server, open your browser and launch localhost:8080, click on Manager App, you will be prompted for user name and password, key-in the credentials provided during installation of tomcat.


Go to WAR file to deploy section and deploy the war files.


Once the war files are deployed they can be seen under the Applications section. Launch the /sapui5-sdk to access the developer guide for SAPUI5.


SAP has provided a comprehensive guide on how to get started with development and also the Controls section provides a demo of all available controls, it even has a plethora of code snippets which we can simply copy paste in order to use these controls, which makes development very easy.


If you have reached so far congratulations!! you can now begin your UI5 application development.


Hope you found this useful. Please post your comments below !!