UI5 Boilerplate with Eclipse + SAPUI5 Toolkit

This post describes how to use the UI5 SplitApp Boilerplate (hosted on Github) with Eclipse 4.3.x and installed SAP UI Development Toolkit for HTML5. Using the UI5 Boilerplate without Eclipse is outlined in this blog post.

Prerequisites

The following assumes, you using Eclipse Kepler (4.3.x) and have already installed the SAP UI5 Toolkit (for setup, please see the blog article „SAP UI5 – Quickstart“).

There at least two options, how to import the UI5 Boilerplate into Eclipse. But for all options it is important to use the git branch eclipseKepler and not the master branch, as this branch has the necessary eclipse project structure and files:

Clone locally first and Import in Eclipse (Option 1)

Assuming you have git installed, open a terminal or command window and clone the branch eclipseKepler from GitHub with the following command:

git clone -b eclipseKepler https://github.com/6of5/UI5SplitApp-Boilerplate.git

The resulting file structure should look like:

Next step is to import this as „Existing Project“ into Eclipse:

1) Eclipse Menu: File -> Import

2) Select „General -> Existing Projects into Workspace“

3) Press „Next“ and browse to the „UI5SplitApp-Boilerplate“ Folder:

4) Press „Finish“. The project will be imported as „SAPUI5 Application Project“

Now you can start testing and developing with SAPUI5 or OpenUI5. Therefore SAPUI5 Application Projects have a nice Preview Feature. So you do not need an extra web server (like Apache HTTP or Tomcat) to run and view your App.

To use this select and right-click the index.html file and select „Run As -> Web App Preview“:

In the Preview Screen you can now see and use the App. The given URL can also be used „outside“ Eclipse e.g. with Chrome:

Everything within Eclipse (Option 2)

Instead of cloning the GitHub repository with command line, this can also be done within Eclipse (e.g. with EGit installed):

1) Start Import „Eclipse Menu: File -> Import“. But this time select „Git -> Projects from Git“:

2) Select „Clone URI:

3) Specify the URL to GitHub location: https://github.com/6of5/UI5SplitApp-Boilerplate.git:

4) Now important select the branch eclipseKepler:

The rest of the steps should be self explaining.

Enjoy!