It's all about Java

I want to show you, how you create your own development environment for SAPUI5. You will see, that we are going to use some great tools, which are normally known from Java-Development. I will use Windows 7 as operating system.

Step 1: Install Java Development Kit (JDK)

The JDK is the Java package for developers. which includes a complete Java Runtime plus tools for developing, debugging, and monitoring Java applications. You can download the latest version from this site. After the download has finished, run the installer.

Step 2: Set Up Environment Variables

After the installation of your JDK, it's important to create a new environment variable called JAVA_HOME. To do this, open your "Run" window in Windows and type in "control sysdm.cpl". On the Advanced tab, click Environment Variables. Then create a new System variable called JAVA_HOME. The value of this should be the path to your JDK.

After that, you have to add this variable to the existing PATH-Variable with %JAVA_HOME%;

Finally, when you open your command prompt, following command should work. "java -version"

This basic configuration is very important for Java-tools like your web server. To check your environment variables quickly, you can open your console and run the "SET" command, which displays all environment variables of your system.

Step 3: Install Eclipse

Go to this site and download the latest version of Eclipse IDE for Java EE Developers. Extract the zip-file to a directory of your choice (for example "C:\Program Files\eclipse"). When you start eclipse, you have to choose a workspace. This is a specific folder, where eclipse stores your projects.

Step 4: Install a Java Web Server

You will need a Java Web Server (also known as Servlet-Container), when you want to deploy and run your applications. I recommend the Apache Tomcat, but the Jetty Server for example is also a good option. Download the current tomcat from the download section of the official site. Extract all files in a directory, for example "C:\Program Files\apache tomcat". To test your configurations, go to the "bin" folder and try to run the startup batchfile to start server-mode. When everything is find, you should see a window like this:

If your server has problems to start, you should check your environment variables (especially JAVA_HOME and PATH) and your java installation. You can shutdown your server with the "shutdown" batchfile.

Step 5: Add Web Server to Eclipse

If you want to deploy applications directly from your eclipse, you have create a new server instance in your IDE. Open Eclipse, go to "File - New - Others" and choose "Server". In the next window, choose Apache Tomcat (with correct version) as server type and type in following information:

After that, click finish. When you now open your Server-View ("Window - Show View - Server"), you should see your new instance. When you right-click on this entry, you can easily start and stop your server and do some configuration stuff.

Step 6: Install SAPUI5 Plugin

First, download the evaluation package from scn. After download, extract everything. Now go to your eclipse under "Help - Install New Software...". Click "Add" and in the following window "Local...". Navigate to your directory, where you extracted your evaluation package. Choose the directory "tools-updatesite". When everything works, you should see the following:

Select the entry "UI development toolkit for HTML5" and press finish. The remaining part of the installation should be no problem. Restart eclipse after you complete the installation. Then go to "File - New - Others" and type in the Wizard "SAP". You should see this (sry, for the german text):

When you choose "Application Project" and complete the wizard, you should have a basic SAPUI5-project and some initial files in your eclipse. The following picture shows the entry in the project explorer. If your project isn't displayed correctly in this view, you maybe have to change the "perspective" under "Window - Open Perspective - Java EE".

Step 7: Run your Project

Go to your new project and open in the directory "WebContent" the index.html. Then, click on the Run-Button:

In the following window, choose "Run on Server" and press "OK". The next window shows a listing of all available servers in your eclipse. In this case, we choose our tomcat server and activate the checkbox at the bottom. Click on finish.

You will see, that your web server will start and an the index.html will shown in an preview window. Congratulation! Now you can start to develop your application and test it on your local machine.

Some useful hints

1. Deployment and Tomcat Server Mode

When you want to present your application or run it in production, you can deploy your SAPUI5 app very easily on the tomcat server. When you don't use a build tool like ANT or MAVEN you have to export your project out of eclipse manually. Right-click on your project, choose "Export - War File". Provide the following form with some information like this:

After that, copy the war-File in the "webapps" directory of your apache tomcat. After a Restart (run "startup.bat"), you can now access your app under http://localhost:8080/<your_app>/.

2. Browsers

In SAP-Development, most projects are running on Internet Explorer. But for SAPUI5 - development, it's much better to use Chrome or Firefox(with firebug plugin), because both systems offer a great set of tools and plugins to debug your JavaScript, inspect your HTML, CSS and network activities and a lot of more cool stuff. Because Chrome is my favorite, you should have look at this site, where all details are explained perfectly.

I hope, all this information help you to get started with SAPUI5.

ENJOY!!!!