Add Page to UI5 SplitApp Boilerplate

ui5In previous blog posts we created the basis to work/develop with the UI5 Boilerplate in different environments (OpenUI5, SAPUI5, SAP or non-SAP centric Development Environment) and the app structure concept was explained in the SCN blog post UI5 Boilerplate explained (Part 1). It is now time to extend the UI5 Boilerplate:

How to add an additional Page to UI5 SplitApp Boilerplate?

Step 1: Create new View and Controller for the new Page

In this step we assume you work with Eclipse and the SAPUI5 Toolkit Plugin. If you work without the SAPUI5 Toolkit you have to create the files yourself.

UI5 SplitApp Boilerplate – Explained Part 1 – on SCN

ui5_72Only a small entry here as the full article is available on SAP Community Network (SCN):

UI5 Boilerplate explained (Part 1) on SCN

The article describes application and file structure of the UI5 SplitApp Boilerplate.

Run UI5 Apps on Apache Tomcat

tomcatLet’s use Apache Tomcat to run UI5 Apps! Tomcat is a very light-weight, but a full blown Java based app and web server. It can be well integrated into Eclipse IDE and therefore a perfect counterpart in development. It is much more light-weight and faster in startup than any SAP Java Server. It also enables you to write server-side components (like servlet’s, JSP’s,…), which then can be consumed by our UI5 App. And like OpenUI5 it is Open Source and free!

UI5 Boilerplate with Eclipse + SAPUI5 Toolkit

eclipseIDEThis 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.

UI5 Mobile SplitApp Boilerplate

ui5
There are different approaches to start a new project with SAP UI5 or OpenUI5 (let’s call it simply UI5). One way is to use the SAP UI5 Eclipse Tools described in the blog post „SAP UI5 – Quickstart“.  The generated UI5 Application Project is very, very basic and you are bound to Eclipse to do your development, which is not everybody’s favorite IDE of course.

On the other hand there are already some really nice UI5 Tools, which can help you. For example the Yeoman generator for OpenUI5, which is based on node.js and can generate a nice application structure or only single components. Another example is the Sublime Text 2 Package for UI5/OpenUI5, which contains Snippets and Templates and is very useful.

So whatever your favorite IDE is, either Eclipse, Sublime Text, WebStorm, IntelliJ, Xcode, Visual Studio, emacs, notepad or vi, you should be able to use Git and clone the UI5 Mobile SplitApp Boilerplate from GitHub (if not, you should try hard) resulting in a nice app structure with base feature, which can be used as starting point for development: